/* ==========================================================================
   Source: styles.css
   ========================================================================== */
/* =============================================
   ELYVEN — BLACK / WHITE / GREY
   Cinematic dark, inspired by cubix.co style
   ============================================= */

:root {
  /* ── 60% White + 40% Cream mixed theme ── */
  --bg:           #FFFFFF;
  --bg-alt:       #F5EDE0;
  --bg-mix:       #FAF6EF;
  --white:        #FFFFFF;
  --cream:        #F5EDE0;
  --cream-deep:   #EEE2CE;
  --dark:         #17130E;
  --dark-2:       #2E2620;
  --grey-1:       rgba(23,19,14,0.55);
  --grey-2:       rgba(23,19,14,0.38);
  --grey-3:       rgba(23,19,14,0.14);
  --grey-4:       rgba(23,19,14,0.07);
  --border:       rgba(23,19,14,0.09);
  --border-hover: rgba(23,19,14,0.22);
  --surface:      rgba(23,19,14,0.05);
  --surface-h:    rgba(23,19,14,0.09);
  --accent:       #C99B5C;
  --radius:       12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

/* Slim, on-brand scrollbar (Chrome/Edge/Safari default scrollbars can render very wide,
   especially in DevTools device emulation, making pages look broken on narrow viewports) */
::-webkit-scrollbar { display: none; width: 0; height: 0; }
html { scrollbar-width: none; }
body { -ms-overflow-style: none; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: var(--bg);
  color: var(--dark);
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}
/* ══ NAVBAR ══ */
.nav-link { font-weight: 700 !important; font-size: 13px !important; padding-bottom: 9px !important; }
.nav-right-group { display: flex; align-items: center; gap: 12px; }
.nav-whatsapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: #25D366; border: 1px solid rgba(37,211,102,.4);
  background: rgba(37,211,102,.08);
  transition: transform .2s ease, background .2s ease;
}
.nav-whatsapp svg { width: 21px; height: 21px; fill: currentColor; }
.nav-whatsapp:hover { transform: translateY(-1px); background: rgba(37,211,102,.16); }
.btn-nav-cta { font-weight:700!important; font-size:13px!important; white-space:nowrap; }

/* ══ HERO — LIGHT CREAM REDESIGN ══ */
.hero {
  background:
    radial-gradient(ellipse 60% 50% at 78% 18%, rgba(201,155,92,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 6% 88%, rgba(201,155,92,0.12) 0%, transparent 65%),
    #F6F2EA !important;
  overflow: hidden;
}
.hero-video { display: none !important; }
.hero-overlay { display: none !important; }

.hero-content {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  align-items: center;
  gap: 0 !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 6vw !important;
  z-index: 2;
}

.hero-left {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 620px;
  width: 100%;
}

.hero-eyebrow {
  font-size: 11px !important;
  letter-spacing: .22em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px !important;
  text-transform: uppercase;
  color: rgba(26,20,14,.52) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  font-weight: 700;
}
.hero-eyebrow-cycle {
  display: inline-block;
  min-width: 0;
  white-space: nowrap;
  color: #17130E;
  font-weight: 800;
  transition: opacity .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1), filter .38s ease;
  vertical-align: bottom;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: rgba(26,20,14,.35);
  flex-shrink: 0;
}
.hero-eyebrow-location {
  display: inline-block;
  color: rgba(23,19,14,0.55);
  font-weight: 800;
  white-space: nowrap;
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}

.hero-headline {
  font-size: clamp(52px, 6.2vw, 92px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: 0 !important;
  color: #17130E;
}
.hero-headline .line-wrap { overflow: visible !important; }
.hero-headline .line-inner {
  transform: translateY(0) !important;
  transition: none !important;
}

.hero-glitch-line {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 6.2vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.045em;
  margin-bottom: 26px;
  min-height: 1.1em;
}
.glitch-word {
  display: inline-block; min-width: 2px;
  font-style: italic; font-weight: 700;
  color: #C99B5C;
  transition: color .04s linear;
}
.glitch-cursor {
  display: inline-block; width: 3px; height: 0.82em;
  margin-left: 4px; vertical-align: -0.06em;
  background: #C99B5C;
  animation: glitchCursorBlink .8s step-end infinite;
}
@keyframes glitchCursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.72;
  color: rgba(26,20,14,.6);
  max-width: 460px;
  margin-bottom: 38px;
}

/* ══ NAVBAR — light pill, always visible on this cream hero ══ */
.site-header { background: transparent !important; border-bottom: none !important; padding-top: 20px; }
.header-inner {
  background: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(23,19,14,.08) !important;
  border-radius: 999px !important;
  padding: 8px 14px 8px 24px !important;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px rgba(23,19,14,.08);
}
/* ══ NAVBAR MOBILE — handled by css/mobile-fix.css (oval pill style) ══ */
.logo { color: #17130E !important; }
.nav-link { color: rgba(23,19,14,.55) !important; position: relative; }
.nav-link:hover { color: #17130E !important; background: rgba(23,19,14,.06) !important; }
.nav-link.active { color: #17130E !important; background: transparent !important; }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: #C99B5C;
}
.nav-link.active::after { transform-origin: left center; animation: navLineIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes navLineIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nav-phone { color: rgba(23,19,14,.65) !important; border-color: rgba(23,19,14,.14) !important; }
.nav-phone:hover { color:#17130E !important; border-color:rgba(23,19,14,.28) !important; background:rgba(23,19,14,.05) !important; }
.btn-nav-cta { background:#17130E !important; color:#fff !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; gap:8px !important; padding:10px 20px 10px 22px !important; }
.menu-toggle span { background: #17130E !important; }

/* ══ HERO ART — CSS-built orbit scene (no external image needed) ══ */
.hero-art-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Orbit rings — concentric circles centered on the black card */
.hero-orbit-ring {
  position: absolute;
  left: 72.2%; top: 46%;
  border-radius: 50%;
  border: 1px solid rgba(23,19,14,.12);
  transform: translate(-50%, -50%);
}
.hero-orbit-ring.ring-1 { width: 32vw; height: 32vw; max-width: 440px; max-height: 440px; min-width: 270px; min-height: 270px; animation: heroRingIn .9s cubic-bezier(.22,1,.36,1) both, heroOrbitSpin 26s linear infinite .9s; }
.hero-orbit-ring.ring-2 { width: 23.5vw; height: 23.5vw; max-width: 330px; max-height: 330px; min-width: 198px; min-height: 198px; border-color: rgba(23,19,14,.09); animation: heroRingIn .9s cubic-bezier(.22,1,.36,1) .12s both, heroOrbitSpin 20s linear infinite 1.02s reverse; }
@keyframes heroOrbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes heroRingIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Pedestal — a single clean drum/table beneath the card (with soft ground shadow) */
.hero-pedestal-shadow {
  position: absolute;
  left: 72.2%; top: calc(46% + 10.8vw);
  width: 20vw; height: 3.8vw;
  max-width: 260px; max-height: 50px;
  min-width: 168px; min-height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23,19,14,.18), rgba(23,19,14,0) 75%);
  animation: heroFadeUp .7s ease .5s both;
}
.hero-pedestal {
  position: absolute;
  left: 72.2%; top: calc(46% + 9.6vw);
  width: 15.5vw; height: 5.2vw;
  max-width: 206px; max-height: 68px;
  min-width: 132px; min-height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, #F4ECDD 0%, #E7DABF 70%, #DFCFAF 100%);
  box-shadow: 0 10px 16px -8px rgba(23,19,14,.22), inset 0 3px 5px rgba(255,255,255,.55), inset 0 -8px 12px rgba(180,155,110,.28);
  animation: heroFadeUp .7s ease .58s both;
}
@keyframes heroFadeUp { 0% { opacity: 0; transform: translate(-50%, -50%) translateY(16px); } 100% { opacity: 1; transform: translate(-50%, -50%) translateY(0); } }

/* ══ LAPTOP — CSS-built 3D laptop mockup sitting on the pedestal ══ */
.hero-laptop-wrap {
  position: absolute;
  left: 72.2%; top: 42%;
  width: 30%; height: 26%;
  max-width: 430px; max-height: 310px;
  min-width: 216px; min-height: 158px;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: heroCardIn .8s cubic-bezier(.34,1.56,.64,1) .22s both, heroLogoFloat 5s ease-in-out infinite 1.02s;
}
@keyframes heroCardIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) translateY(26px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); }
}
@keyframes heroLogoFloat {
  0%,100% { transform: translate(-50%, -50%) translateY(0); }
  50%     { transform: translate(-50%, -50%) translateY(-10px); }
}
.hlt-screen {
  position: absolute;
  left: 7%; right: 7%; top: 0; height: 71%;
  box-sizing: border-box;
  padding: 8% 9%;
  background: linear-gradient(150deg, #2c2518 0%, #15110b 55%, #060503 100%);
  border-radius: 13px 13px 3px 3px;
  box-shadow: 0 34px 54px -18px rgba(23,19,14,.5), inset 0 0 0 1px rgba(255,255,255,.07);
  transform: perspective(900px) rotateX(3deg);
}
.hlt-cam {
  position: absolute; top: 7px; left: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  transform: translateX(-50%);
}
.hlt-lines { display: flex; flex-direction: column; gap: 16%; margin-top: 10%; }
.hlt-line { display: block; height: 9%; min-height: 4px; border-radius: 3px; background: rgba(255,255,255,.22); }
.hlt-line.gold { background: linear-gradient(90deg, #C99B5C, #E6C68B); }
.hlt-hinge {
  position: absolute; left: 11%; right: 11%; top: 71%; height: 3.2%;
  background: #0b0906; border-radius: 2px;
}
.hlt-base {
  position: absolute; left: 0; right: 0; bottom: 0; height: 25%;
  background: linear-gradient(180deg, #F7F0E3 0%, #E7DABF 65%, #DCCBA6 100%);
  clip-path: polygon(13% 0%, 87% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 18px 24px -10px rgba(23,19,14,.35), inset 0 2px 3px rgba(255,255,255,.6);
}
.hlt-trackpad {
  position: absolute; left: 50%; top: 28%; width: 15%; height: 44%;
  background: rgba(23,19,14,.09); border-radius: 3px;
  transform: translateX(-50%);
}

/* Thin gold orbit arc sweeping behind/around the laptop, echoing the reference */
.hero-gold-arc {
  position: absolute;
  left: 72.2%; top: 44%;
  width: 36%; height: 30%;
  max-width: 480px; max-height: 320px;
  min-width: 250px; min-height: 170px;
  transform: translate(-50%, -50%);
  z-index: 1;
  overflow: visible;
  animation: heroRingIn .9s cubic-bezier(.22,1,.36,1) .3s both, heroArcSpin 30s linear infinite 1.2s;
}
@keyframes heroArcSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Logo card legacy fallback (kept for the onerror path only) */
.hero-logo-slot { display: none; }
.hero-logo-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-logo-slot svg.hero-logo-fallback { width: 100%; height: 100%; display: none; fill: #fff; }

/* Small decorative white icon card (bars icon near top of ring) */
.hero-art-icon {
  position: absolute;
  left: 86.3%; top: 29.7%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border-radius: 18px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px -8px rgba(23,19,14,.2);
  z-index: 3;
  animation: heroPopIn .55s cubic-bezier(.34,1.56,.64,1) .68s both, hwFloat3 4.5s ease-in-out infinite 1.23s;
}
.hero-art-icon svg { width: 24px; height: 24px; }
@keyframes heroPopIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Dark code-icon card, upper-left of the laptop */
.hero-art-icon-code {
  position: absolute;
  left: 61.5%; top: 37%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(150deg, #2a2316, #0e0b07);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 30px -10px rgba(23,19,14,.45);
  z-index: 3;
  animation: heroPopIn .55s cubic-bezier(.34,1.56,.64,1) .6s both, hwFloat2 5s ease-in-out infinite 1.1s;
}
.hero-art-icon-code svg { width: 22px; height: 22px; }

/* White sparkle card, lower-right of the laptop */
.hero-art-icon-spark {
  position: absolute;
  left: 81.5%; top: 52.5%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 15px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px -8px rgba(23,19,14,.2);
  z-index: 3;
  animation: heroPopIn .55s cubic-bezier(.34,1.56,.64,1) .95s both, hwFloat4 5.5s ease-in-out infinite 1.5s;
}
.hero-art-icon-spark svg { width: 22px; height: 22px; }

/* Decorative wooden blocks + leaf, echoing the reference composition */
.hero-deco-blocks { position: absolute; left: 6%; bottom: 128px; width: 130px; height: 90px; z-index: 1; }
.hero-deco-blocks i { position: absolute; bottom: 0; display: block; background: #eadfcf; border-radius: 3px; box-shadow: 0 10px 16px rgba(100,80,50,.1); }
.hero-deco-blocks i:nth-child(1) { left: 0; width: 38px; height: 35px; transform: skewY(-16deg); }
.hero-deco-blocks i:nth-child(2) { left: 37px; width: 30px; height: 72px; }
.hero-deco-blocks i:nth-child(3) { left: 67px; width: 38px; height: 50px; transform: skewY(16deg); }
.hero-deco-leaf { position: absolute; right: 2%; bottom: 108px; width: 95px; height: 190px; opacity: .75; transform: rotate(-12deg); z-index: 1; }
.hero-deco-leaf::before, .hero-deco-leaf::after {
  content: ''; position: absolute; width: 55px; height: 120px;
  border-radius: 100% 0 100% 0; background: #88a77b; transform-origin: bottom;
  animation: heroLeafFloat 5s ease-in-out infinite;
}
.hero-deco-leaf::before { right: 0; top: 0; transform: rotate(32deg); }
.hero-deco-leaf::after { left: 8px; top: 54px; transform: rotate(-28deg) scale(.8); background: #719567; animation-delay: -2s; }
@keyframes heroLeafFloat { 50% { translate: 0 -8px; rotate: 3deg; } }

/* Sliding capability strip — dark band pinned to the hero's bottom edge */
.hero-cap-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 86px;
  z-index: 5;
  overflow: hidden;
  display: flex; align-items: center;
  background: #ffffff;
  border-top: 1px solid rgba(23,19,14,.10);
  border-bottom: 1px solid rgba(23,19,14,.12);
  box-shadow: 0 -4px 20px rgba(23,19,14,.06), 0 2px 10px rgba(23,19,14,.05);
}
.hero-cap-strip::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(23,19,14,.28) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .12;
  pointer-events: none;
}
.hero-cap-track {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  padding-left: 28px;
  animation: heroCapSlide 45s linear infinite;
}
/* Never pause on hover/cursor — the strip must keep scrolling continuously */
@keyframes heroCapSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cap-item {
  display: flex; align-items: center; gap: 10px;
  color: #17130E;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .01em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(23,19,14,.03);
  border: 1px solid rgba(23,19,14,.06);
  transition: transform .2s ease, background .2s ease;
}
.cap-item:hover {
  transform: translateY(-2px);
  background: rgba(23,19,14,.07);
}
.cap-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(23,19,14,.10);
  box-shadow: 0 1px 3px rgba(23,19,14,.06);
}
.cap-icon svg { width: 17px; height: 17px; display: block; }
.cap-dash { color: #C99B5C; font-size: 14px; font-weight: 700; opacity: .7; }

/* Floating stat pills — positioned to match the reference exactly */
.hw-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(23,19,14,.06);
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 12px 30px -8px rgba(23,19,14,.18);
  transform: translate(-50%, -50%);
}
.hw-pill-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hw-pill-dot svg { width: 15px; height: 15px; }
.hw-pill-label {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .01em;
  color: rgba(23,19,14,.5);
}
.hw-pill-val {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px; font-weight: 700;
  color: #17130E;
  margin-left: 2px;
}
.hw-pill-star .hw-pill-dot { background: none !important; width: 20px; height: 20px; }
.hw-pill-star .hw-pill-dot svg { width: 20px; height: 20px; }

.hw-pill-1 { left: 59.9%; top: 30.2%; animation: heroPopIn .55s cubic-bezier(.34,1.56,.64,1) .75s both, hwFloat1 5s ease-in-out infinite 1.3s; }
.hw-pill-2 { left: 91.9%; top: 42.8%; animation: heroPopIn .55s cubic-bezier(.34,1.56,.64,1) .88s both, hwFloat3 4.5s ease-in-out infinite 1.43s; }
.hw-pill-3 { left: 58.1%; top: 58.4%; animation: heroPopIn .55s cubic-bezier(.34,1.56,.64,1) 1.0s both, hwFloat2 6s ease-in-out infinite 1.55s; }
.hw-pill-4 { left: 85.5%; top: 65.0%; animation: heroPopIn .55s cubic-bezier(.34,1.56,.64,1) 1.12s both, hwFloat4 5.5s ease-in-out infinite 1.67s; }
@keyframes hwFloat1 { 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(-8px)} }
@keyframes hwFloat2 { 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(8px)} }
@keyframes hwFloat3 { 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(-7px)} }
@keyframes hwFloat4 { 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(-9px)} }

/* Orbit dots — animated overlays on top of the static dots in the art image */
.art-dot {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.art-dot::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: inherit;
  filter: blur(6px);
  opacity: .55;
  z-index: -1;
}
.art-dot-1 { left: 77.7%; top: 30.3%; width: 12px; height: 12px; background:#C99B5C; animation: heroPopIn .4s ease 1.3s both, artDotOrbit1 6s ease-in-out infinite 1.7s; }
.art-dot-2 { left: 54.6%; top: 44.7%; width: 11px; height: 11px; background:#8b8fae; animation: heroPopIn .4s ease 1.38s both, artDotOrbit2 7s ease-in-out infinite 1.78s; }
.art-dot-3 { left: 84.7%; top: 52.0%; width: 13px; height: 13px; background:#b8945a; animation: heroPopIn .4s ease 1.46s both, artDotOrbit3 6.5s ease-in-out infinite 1.86s; }
.art-dot-4 { left: 58.6%; top: 65.8%; width: 10px; height: 10px; background:#C99B5C; animation: heroPopIn .4s ease 1.54s both, artDotOrbit4 5.5s ease-in-out infinite 1.94s; }
.art-dot-5 { left: 81.25%; top: 67.1%; width: 9px; height: 9px; background:#17130E; animation: heroPopIn .4s ease 1.62s both, artDotOrbit5 6s ease-in-out infinite 2.02s; }
@keyframes artDotOrbit1 { 0%,100%{transform:translate(-50%,-50%) translate(0,0) scale(1)} 50%{transform:translate(-50%,-50%) translate(6px,-6px) scale(1.15)} }
@keyframes artDotOrbit2 { 0%,100%{transform:translate(-50%,-50%) translate(0,0) scale(1)} 50%{transform:translate(-50%,-50%) translate(-7px,4px) scale(.9)} }
@keyframes artDotOrbit3 { 0%,100%{transform:translate(-50%,-50%) translate(0,0) scale(1)} 50%{transform:translate(-50%,-50%) translate(5px,7px) scale(1.1)} }
@keyframes artDotOrbit4 { 0%,100%{transform:translate(-50%,-50%) translate(0,0) scale(1)} 50%{transform:translate(-50%,-50%) translate(-5px,-6px) scale(1.15)} }
@keyframes artDotOrbit5 { 0%,100%{transform:translate(-50%,-50%) translate(0,0) scale(1)} 50%{transform:translate(-50%,-50%) translate(4px,-5px) scale(.85)} }

/* ══ CTA ROW — solid button + secondary link, like reference ══ */
.hero-orbit-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: 4px;
}
.swipe-cta {
  position: relative;
  width: 208px;
  max-width: 58vw;
  height: 54px;
  border-radius: 999px;
  background: #17130E;
  border: none;
  overflow: hidden;
  touch-action: pan-y;
  box-shadow: 0 14px 30px -10px rgba(23,19,14,.45);
}
.swipe-fill {
  position: absolute; top:0; left:0; bottom:0;
  width: 46px;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  border-radius: 999px 0 0 999px;
  pointer-events: none;
  z-index: 1;
}
.swipe-track {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-left: 42px;
  z-index: 1;
  pointer-events: none;
}
.swipe-label {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing: .01em;
  white-space: nowrap;
}
.swipe-handle {
  position: absolute; top:4px; left:4px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #ffffff;
  border: none; padding: 0;
  display: flex; align-items:center; justify-content:center;
  color: #17130E;
  cursor: grab;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.swipe-handle.dragging { transition: box-shadow .25s ease; cursor: grabbing; }
.swipe-handle:active { cursor: grabbing; }
.swipe-arrow { display:block; width:17px; height:17px; }
.swipe-cta.complete .swipe-label { opacity: 0; transition: opacity .2s ease; }
.swipe-cta.complete .swipe-handle { box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 4px 16px rgba(255,255,255,.3); }

.hero-secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #17130E;
  text-decoration: none;
  white-space: nowrap;
}
.hero-secondary-link .hsl-dash { width: 28px; height: 1px; background: rgba(23,19,14,.35); }
.hero-secondary-link svg { transition: transform .25s ease; }
.hero-secondary-link:hover svg { transform: translateX(4px); }

/* ══ SCROLL HINT — dark on light ══ */
.hero-scroll-hint { color: rgba(23,19,14,.45) !important; }
.hero-scroll-hint .scroll-line { background: rgba(23,19,14,.35) !important; }

/* ══ FORM DRAWER ══ */
.form-drawer-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:999;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.22,1,.36,1); }
.form-drawer-overlay.open{opacity:1;pointer-events:all;}
.form-drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,95vw);background:#0f0f0f;border-left:1px solid rgba(255,255,255,.1);z-index:1000;padding:48px 44px;overflow-y:auto;transform:translateX(100%);transition:transform .5s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;}
.form-drawer.open{transform:translateX(0);}
.fd-close{position:absolute;top:24px;right:24px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;line-height:1;}
.fd-close:hover{background:rgba(255,255,255,.14);}
.fd-eyebrow{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:10px;}
.fd-title{font-family:'Outfit',sans-serif;font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.03em;color:#fff;margin-bottom:8px;}
.fd-sub{font-family:'Inter',sans-serif;font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.55;margin-bottom:36px;}
.fd-form{display:flex;flex-direction:column;gap:16px;}
.fd-field{display:flex;flex-direction:column;gap:6px;}
.fd-field label{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.06em;text-transform:uppercase;}
.fd-field input,.fd-field select,.fd-field textarea{font-family:'Inter',sans-serif;font-size:14px;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 16px;outline:none;transition:border-color .25s,background .25s;width:100%;resize:none;-webkit-appearance:none;appearance:none;}
.fd-field input::placeholder,.fd-field textarea::placeholder{color:rgba(255,255,255,.25);}
.fd-field input:focus,.fd-field select:focus,.fd-field textarea:focus{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);}
.fd-field select option{background:#1a1a1a;color:#fff;}
.fd-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fd-submit{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px 24px;background:#fff;color:#0A0A0A;font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;border:none;border-radius:10px;cursor:pointer;letter-spacing:.01em;transition:opacity .25s,transform .25s;}
.fd-submit:hover{opacity:.88;transform:translateY(-1px);}
.fd-note{font-family:'Inter',sans-serif;font-size:11.5px;color:rgba(255,255,255,.35);text-align:center;margin-top:12px;}
.fd-note.is-error{color:#ffaaa3;}
.fd-success{display:none;text-align:center;padding:48px 0;flex-direction:column;align-items:center;gap:12px;}
.fd-success.show{display:flex;}
.fd-success-icon{width:56px;height:56px;border-radius:50%;background:rgba(232,218,190,.16);border:1px solid rgba(232,218,190,.42);color:#eadfc9;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:4px;}
.fd-success h3{font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em;}
.fd-success p{font-family:'Inter',sans-serif;font-size:14px;color:rgba(255,255,255,.5);line-height:1.55;max-width:300px;}

/* ══════════ DRAWER: STACK CHOICE ("we pick it" vs "I'll customize it") ══════════ */
.fd-stack{display:flex;flex-direction:column;gap:6px;}
.fd-stack>label{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.06em;text-transform:uppercase;}
.fd-stack-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.fd-stack-opt{padding:12px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.75);font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s ease;text-align:center;line-height:1.25;}
.fd-stack-opt:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08);}
.fd-stack-opt.is-on{background:var(--accent);border-color:var(--accent);color:#17130E;}
.fd-stack-panel{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s ease,margin .3s ease;margin-top:0;}
.fd-stack-panel.open{max-height:340px;opacity:1;margin-top:4px;overflow-y:auto;padding-right:4px;}
.fd-stack-panel.open::-webkit-scrollbar{width:5px;}
.fd-stack-panel.open::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px;}
.fd-stack-cat{margin-bottom:12px;}
.fd-stack-cat:last-child{margin-bottom:0;}
.fd-stack-cat-label{display:block;font-family:'Outfit',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:6px;}
.fd-stack-grid{display:flex;flex-wrap:wrap;gap:6px;}
.fd-stack-item{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 7px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.7);cursor:pointer;user-select:none;transition:all .2s ease;}
.fd-stack-item input{display:none;}
.fd-stack-item img{width:14px;height:14px;opacity:.9;}
.fd-stack-item.is-active,.fd-stack-item:has(input:checked){background:color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,.05));border-color:var(--accent);color:#fff;}
@media (max-width:420px){.fd-stack-toggle{grid-template-columns:1fr;}}

/* ══ BRIGHTNESS BOOST ══ */
/* Video: lift from 0.80 → 1.1 so the background scene is actually readable */
.hero-video {
  filter: brightness(1.1) contrast(1.02) !important;
}
/* Overlay: cut the top darkness and lighten the middle vignette significantly */
.hero-overlay {
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.02) 20%,
      rgba(0,0,0,0.04) 55%,
      rgba(0,0,0,0.52) 88%,
      rgba(10,10,10,1)  100%
    ),
    linear-gradient(to right,
      rgba(0,0,0,0.18) 0%,
      transparent 40%,
      transparent 60%,
      rgba(0,0,0,0.12) 100%
    ) !important;
}

/* ══ KILL EXTERNAL ENTRANCE ANIMATIONS ══ */
.hero-eyebrow {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.hero-headline .line-wrap { overflow: visible !important; }
.hero-headline .line-inner,
.hero-ready .hero-headline .line-inner {
  transform: translateY(0) !important;
  transition: none !important;
  transition-delay: 0s !important;
}



/* ══════════════════════════════════════════════════════════
   SERVICES — Scroll-locked Carousel, Premium Light Theme
══════════════════════════════════════════════════════════ */
.svc-section {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF8 100%);
  overflow: hidden;
  padding: 150px 0 90px;
}
.svc-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(201,155,92,.06) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 90% 100%, rgba(201,155,92,.04) 0%, transparent 50%);
  pointer-events: none;
}
.svc-wrap {
  position: relative; z-index: 1;
  width: min(1360px, 94%); margin: 0 auto;
  box-sizing: border-box;
  max-width: 100%;
}
@media (max-width: 480px) {
  .svc-wrap { width: 100%; padding-left: 16px; padding-right: 16px; }
}

/* Header — animates in on scroll */
.svc-header {
  max-width: 680px; margin-bottom: 52px;
  opacity: 0; transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.svc-header.svc-in  { opacity: 1; transform: translateY(0); }
.svc-header.svc-out { opacity: 0; transform: translateY(-28px); transition: opacity .5s ease, transform .5s ease; }

.svc-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: #C99B5C;
  margin-bottom: 20px;
}
.svc-eyebrow::before { content: ""; width: 28px; height: 2px; background: #C99B5C; border-radius: 2px; }

.svc-title {
  font-family: 'Outfit', sans-serif; font-weight: 900;
  font-size: clamp(38px, 4.6vw, 62px); line-height: 1.05;
  letter-spacing: -0.036em; color: #17130E; margin-bottom: 18px;
}
.svc-title em { font-style: italic; color: #C99B5C; }

.svc-subtitle {
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500;
  line-height: 1.7; color: rgba(23,19,14,.48); max-width: 480px;
}

/* Track header row (arrows + counter above track) */
.svc-track-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1) .15s, transform .7s cubic-bezier(.16,1,.3,1) .15s;
}
.svc-track-header.svc-in  { opacity: 1; transform: translateY(0); }
.svc-track-header.svc-out { opacity: 0; transform: translateY(-14px); transition: opacity .4s ease, transform .4s ease; }

/* Carousel track */
.svc-track-outer { overflow: hidden; padding: 6px 0 22px; margin: -6px 0 -22px; }
.svc-track {
  display: flex; gap: 24px;
  transition: transform .65s cubic-bezier(.25,.9,.3,1);
  will-change: transform;
}
.svc-track.svc-no-anim { transition: none !important; }

/* Card */
.svc-card {
  flex: 0 0 calc(50% - 12px);
  min-height: 560px;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  display: flex; flex-direction: column;
  border: 1.5px solid rgba(23,19,14,.07);
  box-shadow: 0 2px 20px rgba(23,19,14,.05);
  cursor: default;
  opacity: 0; transform: translateX(70px) translateZ(0);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1),
              box-shadow .4s ease, border-color .4s ease;
}
.svc-card.svc-in {
  opacity: 1; transform: translateX(0) translateZ(0);
}
.svc-card.svc-out-left  { opacity: 0; transform: translateX(-60px) translateZ(0); transition: opacity .5s ease, transform .5s ease; }
.svc-card.svc-out-right { opacity: 0; transform: translateX(60px) translateZ(0);  transition: opacity .5s ease, transform .5s ease; }
.svc-card.svc-in:hover {
  /* subtle hover — no lift and a small shadow that stays inside the track,
     so the carousel's clip edge never shows as hard corners */
  box-shadow: 0 6px 18px rgba(23,19,14,.07);
  border-color: rgba(23,19,14,.12);
}

/* Card visual top area */
.svc-card-visual {
  position: relative;
  height: 260px; min-height: 260px;
  background: var(--card-bg, #FDF5E8);
  overflow: hidden;
  border-radius: 28px 28px 0 0;
}

/* BG motion icon — DIFFERENT from card icon, top-left, large and faded */

.svc-bg-motion {
  position: absolute;
  top: 14px; left: 14px;
  width: 80px; height: 80px;
  color: var(--card-accent, #C99B5C);
  opacity: 0.055; pointer-events: none; z-index: 1;
  animation: svcBgFloat 9s ease-in-out infinite alternate;
  transition: opacity .5s ease;
}
.svc-bg-motion svg { width: 100%; height: 100%; }
.svc-card:hover .svc-bg-motion { opacity: 0.10; }

.svc-bg-motion-2 {
  display: none;
}

@keyframes svcBgFloat {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate(-8px, 10px) rotate(4deg) scale(1.06); }
  66%  { transform: translate(10px, -6px) rotate(-3deg) scale(0.96); }
  100% { transform: translate(-4px, 14px) rotate(6deg) scale(1.04); }
}

/* Service icon badge — original solid style, bottom-left, clear of the bottom-right watermark number */
.svc-card-icon {
  position: absolute; bottom: 26px; left: 30px; z-index: 3;
  width: 60px; height: 60px; border-radius: 18px;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--card-accent,#C99B5C);
  box-shadow: none;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
  flex-shrink: 0;
}
.svc-card-icon svg { width: 30px; height: 30px; }
.svc-card.svc-in:hover .svc-card-icon {
  transform: scale(1.1) rotate(-5deg);
}

/* Arrow link badge */
.svc-card-arrow {
  position: absolute; top: 26px; right: 26px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 4; text-decoration: none; color: #17130E;
  border: 1.5px solid rgba(23,19,14,.10);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.svc-card.svc-in:hover .svc-card-arrow {
  background: #17130E; color: #fff; border-color: #17130E;
  transform: translate(3px,-3px);
}
.svc-card-arrow svg { width: 16px; height: 16px; }

/* Watermark number */
.svc-card-watermark {
  position: absolute; bottom: -18px; right: 16px;
  font-family: 'Outfit', sans-serif; font-weight: 900;
  font-size: 160px; line-height: 1; letter-spacing: -0.04em;
  color: var(--card-accent,#C99B5C); opacity: .09;
  pointer-events: none; z-index: 2;
  transition: opacity .4s ease;
}
.svc-card.svc-in:hover .svc-card-watermark { opacity: .18; }

/* Card body */
.svc-card-body {
  flex: 1; padding: 28px 32px 32px;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 0 0 28px 28px;
}
.svc-card-counter {
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 800;
  color: var(--card-accent,#C99B5C); margin-bottom: 9px; letter-spacing: .05em;
}
.svc-card-title {
  font-family: 'Outfit', sans-serif; font-weight: 900;
  font-size: clamp(21px, 2.2vw, 28px); line-height: 1.18;
  letter-spacing: -0.028em; color: #17130E; margin-bottom: 12px;
}
.svc-card-desc {
  font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 500;
  line-height: 1.68; color: rgba(23,19,14,.50);
  margin-bottom: 20px;
}

/* Tech + Perfect For — permanently visible */
.svc-reveal-divider {
  height: 1px; border: none;
  background: rgba(23,19,14,.07);
  margin: 0 0 16px;
}
.svc-reveal-label {
  font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 900;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(23,19,14,.55); margin-bottom: 8px;
}
.svc-reveal-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.svc-reveal-tag {
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800;
  color: rgba(23,19,14,.85);
  background: rgba(23,19,14,.04); border: 1.2px solid rgba(23,19,14,.09);
  padding: 4px 12px; border-radius: 999px;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.svc-card.svc-in:hover .svc-reveal-tag {
  background: rgba(var(--card-accent-rgb, 201,155,92),.08);
  border-color: rgba(var(--card-accent-rgb, 201,155,92),.3);
  color: var(--card-accent, #C99B5C);
}
.svc-reveal-pf { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-reveal-pf-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800;
  color: rgba(23,19,14,.78);
}
.svc-reveal-pf-item::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--card-accent,#C99B5C); flex-shrink: 0;
}
.svc-card-cs {
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(23, 19, 14, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.svc-card-cs:hover {
  background: #ffffff;
  border-color: rgba(201, 155, 92, 0.45);
  box-shadow: 0 8px 20px -6px rgba(23, 19, 14, 0.12);
  transform: translateY(-2px);
}
.svc-cs-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6a3a;
  background: rgba(201, 155, 92, 0.14);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.svc-cs-title {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #17130e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.svc-cs-arrow {
  color: #C99B5C;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.svc-card-cs:hover .svc-cs-arrow {
  transform: translate(2px, -2px);
}

/* Arrow nav */
.svc-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(23,19,14,.12); background: #fff; color: #17130E;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(23,19,14,.06);
  transition: background .25s ease, border-color .25s ease, transform .25s ease,
              color .25s ease, box-shadow .25s ease;
}
.svc-arrow:hover {
  background: #17130E; border-color: #17130E; color: #fff;
  transform: scale(1.08); box-shadow: 0 6px 20px rgba(23,19,14,.18);
}
.svc-arrow:active { transform: scale(.92); }
.svc-arrow svg { width: 18px; height: 18px; }
.svc-nav-arrows { display: flex; align-items: center; gap: 10px; }

/* Dots + counter */
.svc-nav-left { display: flex; align-items: center; gap: 16px; }
.svc-progress { display: flex; align-items: center; gap: 6px; }
.svc-dot {
  height: 4px; width: 18px; border-radius: 4px;
  background: rgba(23,19,14,.12); border: none; padding: 0;
  cursor: pointer;
  transition: width .4s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.svc-dot.is-active { width: 36px; background: #C99B5C; }
.svc-slide-counter {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  color: rgba(23,19,14,.30); letter-spacing: .02em;
}
.svc-slide-counter b { color: #17130E; font-weight: 900; }

/* Nav bar (just left side dots) */
.svc-nav-bar {
  display: flex; align-items: center; margin-top: 32px;
  padding-top: 24px; border-top: 1.5px solid rgba(23,19,14,.07);
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1) .2s, transform .7s cubic-bezier(.16,1,.3,1) .2s;
}
.svc-nav-bar.svc-in  { opacity: 1; transform: translateY(0); }
.svc-nav-bar.svc-out { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }

/* Footer CTA */
.svc-footer-cta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1.5px solid rgba(23,19,14,.07);
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1) .28s, transform .7s cubic-bezier(.16,1,.3,1) .28s;
}
.svc-footer-cta.svc-in  { opacity: 1; transform: translateY(0); }
.svc-footer-cta.svc-out { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }

.svc-footer-text {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
  color: rgba(23,19,14,.40);
}
.svc-footer-text strong { color: #17130E; font-weight: 900; }
.svc-view-all {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px;
  color: #F5EFE0; background: #17130E;
  padding: 15px 30px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 6px 24px rgba(23,19,14,.18);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.svc-view-all:hover {
  background: #C99B5C; color: #17130E;
  transform: translateY(-2px); box-shadow: 0 14px 36px rgba(201,155,92,.28);
}
.svc-view-all svg { width: 15px; height: 15px; }

/* Responsive */
@media (max-width: 900px) {
  .svc-section { padding: 80px 0 70px; }
  .svc-header { margin-bottom: 36px; }
  .svc-card { flex: 0 0 88%; min-height: 480px; }
  .svc-card-visual { height: 210px; min-height: 210px; padding: 24px; }
  .svc-card-watermark { font-size: 110px; bottom: -12px; }
  .svc-track { gap: 16px; }
  .svc-footer-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .svc-card { flex: 0 0 94%; min-height: 430px; }
  .svc-card-visual { height: 180px; min-height: 180px; padding: 20px; }
  .svc-card-body { padding: 20px 22px 24px; }
  .svc-card-icon { width: 52px; height: 52px; border-radius: 15px; bottom: 20px; left: 20px; }
  .svc-card-watermark { font-size: 90px; }
  .svc-card-title { font-size: 20px; }
}

/* Mobile Navigation & Carousel Controls for Services section — same pattern as Technology Stack section */
.svc-mobile-nav,
.svc-mob-dots {
  display: none;
}

@media (max-width: 768px) {
  .svc-track-header {
    display: none !important;
  }

  .svc-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    padding: 0 4px;
  }

  .svc-mob-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid rgba(201, 155, 92, 0.35);
    color: #17130E;
    box-shadow: 0 6px 18px rgba(23, 19, 14, 0.08);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .svc-mob-arrow:active {
    transform: scale(0.92);
    background: #FAF8F5;
    border-color: #C99B5C;
  }

  .svc-mob-category-card {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #FFFFFF;
    border: 1.5px solid rgba(201, 155, 92, 0.35);
    border-radius: 999px;
    padding: 11px 18px;
    box-shadow: 0 6px 20px rgba(23, 19, 14, 0.06);
    text-align: center;
    min-width: 0;
  }

  .svc-mob-category-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #17130E;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .svc-mob-counter {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #C99B5C;
    background: rgba(201, 155, 92, 0.12);
    border: 1px solid rgba(201, 155, 92, 0.22);
    padding: 3px 9px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
    line-height: 1.3;
  }

  .svc-mob-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
  }

  .svc-mob-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(23, 19, 14, 0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .svc-mob-dot.active {
    width: 24px;
    background: #C99B5C;
  }
}

   HOME PORTFOLIO TEASER — light creamy theme, image cards
════════════════════════════════════════════════════════ */
.pfh-section {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #FBF7EE 60%, #F5EFE0 100%);
  color: #17130E;
  padding: 260px 0 90px;
  overflow: hidden;
}
.pfh-blob {
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,155,92,0.14) 0%, transparent 70%);
  filter: blur(90px);
  top: -100px; left: -80px;
  pointer-events: none;
}
.pfh-inner {
  position: relative;
  z-index: 2;
  width: min(1200px, 90%);
  margin: 0 auto;
}
.pfh-header {
  max-width: 660px;
  margin: 0 auto 70px;
  text-align: center;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.pfh-header.pfh-header-in {
  opacity: 1;
  transform: translateY(0);
}
.pfh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #C99B5C;
  margin-bottom: 22px;
  background: rgba(201,155,92,0.10);
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201,155,92,0.22);
}
.pfh-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #120E08;
  margin-bottom: 18px;
}
.pfh-title em { font-style: italic; color: #C99B5C; }
.pfh-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(26,21,16,.55);
  max-width: 520px;
  margin: 0 auto;
}

/* ══ ZIG-ZAG PORTFOLIO ROWS — alternating media/text, layered self-made 3D thumbnails ══ */
.pfh-zigzag { display: flex; flex-direction: column; gap: 120px; }

.pfh-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.pfh-row.pfh-row-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.pfh-row.pfh-row-reverse .pfh-row-media { order: 2; }
.pfh-row.pfh-row-reverse .pfh-row-body  { order: 1; }

.pfh-row-media { position: relative; }

/* Stage: the perspective lives here so every layer inside really sits at a different depth */
.pfh-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 6 / 5;
  perspective: 1500px;
  perspective-origin: 50% 45%;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 6px;
}
.pfh-thumb.is-portrait { aspect-ratio: 3 / 4; max-width: 390px; margin: 0 auto; }

/* soft coloured glow behind the object */
.pfh-halo {
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo, rgba(201,155,92,.32)), transparent 72%);
  filter: blur(34px);
  opacity: 0;
  transform: scale(.7);
  transition: opacity 1s ease .2s, transform 1.2s cubic-bezier(.22,1,.36,1) .2s;
  pointer-events: none;
}
.pfh-in .pfh-halo { opacity: 1; transform: scale(1); }
.pfh-thumb:hover .pfh-halo { opacity: 1; transform: scale(1.12); transition-delay: 0s; transition-duration: .7s; }

/* the object that tilts in 3D (transform is driven by JS: pointer + scroll) */
.pfh-obj {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  /* entrance — the whole object swings in from its own side.
     NOTE: no opacity here on SSSpurpose: opacity < 1 on a preserve-3d element flattens the scene,
     and the layers would "pop" forward the moment it reaches 1. Fading happens on the leaves. */
  translate: -90px 50px;
  rotate: y -38deg;
  scale: .92;
  transition:
    translate 1.2s cubic-bezier(.22,1,.36,1),
    rotate 1.3s cubic-bezier(.22,1,.36,1),
    scale 1.2s cubic-bezier(.22,1,.36,1);
}
.pfh-row-reverse .pfh-obj { translate: 90px 50px; rotate: y 38deg; }
.pfh-in .pfh-obj { translate: 0 0; rotate: y 0deg; scale: 1; }
.pfh-in .pfh-thumb:hover .pfh-obj { scale: 1.035; transition-duration: .5s; }

/* base plate the devices stand on */
.pfh-plate {
  position: absolute;
  inset: 6% 3% 3% 4%;
  border-radius: 34px;
  overflow: hidden;
  transform: translateZ(-70px);
  box-shadow: 0 50px 80px -34px rgba(23,19,14,.45), 0 0 0 1px rgba(23,19,14,.06);
  opacity: 0;
  transition: opacity .9s ease;
}
.pfh-in .pfh-plate { opacity: 1; }
.pfh-plate::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(23,19,14,.13) 1.3px, transparent 1.6px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
}
.pfh-plate::after {
  content: '';
  position: absolute;
  width: 62%; aspect-ratio: 1;
  right: -14%; bottom: -22%;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 26px rgba(255,255,255,.07), 0 0 0 54px rgba(255,255,255,.05);
}
.pfh-plate-gold   { background: linear-gradient(135deg, #F6E8C9 0%, #E2BC7E 52%, #C99B5C 100%); }
.pfh-plate-violet { background: linear-gradient(135deg, #F0EAFF 0%, #CDBBF8 52%, #A78BFA 100%); }
.pfh-plate-salasa { background: linear-gradient(135deg, #DDF8F2 0%, #91E8D5 52%, #32CDB0 100%); }
.pfh-plate-morinaga { background: linear-gradient(135deg, #FFE4E8 0%, #FF9CA8 52%, #EE3048 100%); }
.pfh-plate-asgar {
  inset: 3% 4% 2% 4%;
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(213,123,221,.42), transparent 60%),
    linear-gradient(165deg, #F8E7F5 0%, #D9C7F4 100%);
}
.pfh-plate-asgar::before { background-image: radial-gradient(rgba(45,48,91,.14) 1.3px, transparent 1.6px); }
.pfh-plate-ink {
  inset: 3% 4% 2% 4%;
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(201,155,92,.5), transparent 60%),
    linear-gradient(165deg, #33251A 0%, #17130E 100%);
}
.pfh-plate-ink::before {
  background-image: radial-gradient(rgba(245,239,224,.12) 1.3px, transparent 1.6px);
}
.pfh-row[data-index="0"] .pfh-layer:not(.pfh-salasa-art),
.pfh-row[data-index="2"] .pfh-layer:not(.pfh-morinaga-art) { display: none; }
.pfh-asgar-art [fill="#17130E"],
.pfh-asgar-art [fill="#2E2216"] { fill: #24345F !important; }
.pfh-asgar-art [fill="#33251A"] { fill: #302C66 !important; }
.pfh-asgar-art [fill="#C99B5C"],
.pfh-asgar-art [fill="#B67F3E"],
.pfh-asgar-art [fill="#D2A567"] { fill: #D77DDD !important; }
.pfh-asgar-art [fill="#E6C48B"] { fill: #F1B8E8 !important; }
.pfh-asgar-art [fill="#F5EFE0"],
.pfh-asgar-art [fill="#FBF7EE"] { fill: #FBF6FC !important; }
.pfh-asgar-art [stroke="#C99B5C"] { stroke: #C96CD5 !important; }
.pfh-asgar-art [stroke="#17130E"] { stroke: #24345F !important; }
.pfh-asgar-art [stop-color="#C99B5C"],
.pfh-asgar-art [stop-color="#D2A567"] { stop-color: #DA83DE !important; }
.pfh-asgar-art [stop-color="#B67F3E"] { stop-color: #8657B4 !important; }
.pfh-asgar-art [stop-color="#E6C48B"] { stop-color: #F0B8E8 !important; }
.pfh-asgar-art [stop-color="#17130E"] { stop-color: #24345F !important; }

/* each floating layer: own depth (--z), optional tilt (--r) */
.pfh-layer {
  position: absolute;
  display: block;
  height: auto;
  overflow: visible;
  transform: translate3d(0, 26px, 0) rotate(var(--r, 0deg)) scale(.94);
  opacity: 0;
  filter: drop-shadow(0 22px 22px rgba(23,19,14,.24));
  transition: transform 1.1s cubic-bezier(.22,1,.36,1), opacity .7s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.pfh-in .pfh-layer {
  opacity: 1;
  transform: translate3d(0, 0, var(--z, 0px)) rotate(var(--r, 0deg)) scale(1);
}
.pfh-in .pfh-layer:nth-child(2) { transition-delay: .10s; }
.pfh-in .pfh-layer:nth-child(3) { transition-delay: .22s; }
.pfh-in .pfh-layer:nth-child(4) { transition-delay: .34s; }
.pfh-in .pfh-layer:nth-child(5) { transition-delay: .46s; }
.pfh-in .pfh-layer:nth-child(6) { transition-delay: .58s; }
/* on hover the layers spread further apart — the depth becomes obvious */
.pfh-in .pfh-thumb:hover .pfh-layer {
  transform: translate3d(0, 0, calc(var(--z, 0px) * 1.55)) rotate(var(--r, 0deg)) scale(1);
  transition-duration: .55s;
  transition-delay: 0s;
}
/* idle float (uses the separate `translate` property so it never fights translateZ) */
.pfh-in .pfh-layer.pfh-bob {
  animation: pfhBob var(--bs, 5.6s) ease-in-out var(--bd, 1s) infinite;
}
@keyframes pfhBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* ground shadow that stays put while the object tilts */
.pfh-ground {
  position: absolute;
  left: 10%; right: 10%; bottom: -5%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(23,19,14,.34) 0%, transparent 70%);
  filter: blur(16px);
  opacity: 0;
  transition: opacity 1s ease .3s, transform .6s ease;
  pointer-events: none;
}
.pfh-in .pfh-ground { opacity: .85; }
.pfh-thumb:hover .pfh-ground { transform: scale(1.08); opacity: 1; }

.pfh-row-view {
  position: absolute; right: 6%; bottom: 4%;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #17130E;
  color: #F5EFE0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  transition: opacity .35s ease, transform .35s ease, background .25s ease, color .25s ease;
  z-index: 5;
}
.pfh-thumb:hover .pfh-row-view, .pfh-thumb:focus-visible .pfh-row-view { opacity: 1; transform: none; }
.pfh-row-view:hover { background: #C99B5C; color: #17130E; }
.pfh-row-view svg { width: 17px; height: 17px; }

/* ── text column ── */
.pfh-row-body {
  max-width: 470px;
  opacity: 0;
  translate: 60px 0;
  transition: opacity .9s ease .25s, translate 1.1s cubic-bezier(.22,1,.36,1) .25s;
}
.pfh-row.pfh-row-reverse .pfh-row-body { margin-left: auto; translate: -60px 0; }
.pfh-in .pfh-row-body { opacity: 1; translate: 0 0; }

.pfh-idx {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 7vw, 96px);
  line-height: .9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(201,155,92,.5);
  margin-bottom: 14px;
}
.pfh-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #C99B5C;
  margin-bottom: 10px;
}
.pfh-row-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.02em;
  color: #17130E;
  margin-bottom: 16px;
}
.pfh-row-desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(26,21,16,.6);
  margin-bottom: 20px;
}
.pfh-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.pfh-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: rgba(23,19,14,.6);
  background: rgba(23,19,14,.05);
  border: 1px solid rgba(23,19,14,.08);
  padding: 5px 12px;
  border-radius: 999px;
}
.pfh-row-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  color: #FFFFFF; background: #17130E;
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid #17130E;
  border-radius: 999px;
  box-shadow: 0 12px 26px -14px rgba(23,19,14,.55);
  transition: background .3s ease, color .3s ease, border-color .3s ease, gap .25s ease, transform .3s ease, box-shadow .3s ease;
}
.pfh-row-link svg { width: 15px; height: 15px; transition: transform .25s ease; }
.pfh-row-link:hover { background: #C99B5C; color: #17130E; border-color: #C99B5C; gap: 13px; transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(201,155,92,.7); }
.pfh-row-link:hover svg { transform: translateX(3px); }

.pfh-cta-wrap { display: flex; justify-content: center; margin-top: 70px; padding-bottom: 70px; }
.pfh-view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: #FFFFFF;
  background: #17130E;
  padding: 17px 34px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .3s ease, transform .3s ease, color .3s ease, box-shadow .3s ease;
}
.pfh-view-all:hover { background: #C99B5C; color: #17130E; transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(201,155,92,.7); }
.pfh-view-all svg { width: 15px; height: 15px; transition: transform .25s ease; }
.pfh-view-all:hover svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .pfh-zigzag { gap: 84px; }
  .pfh-row, .pfh-row.pfh-row-reverse { grid-template-columns: 1fr; gap: 44px; }
  .pfh-row.pfh-row-reverse .pfh-row-media,
  .pfh-row.pfh-row-reverse .pfh-row-body { order: initial; }
  .pfh-row-body, .pfh-row.pfh-row-reverse .pfh-row-body { max-width: 100%; margin-left: 0; translate: 0 40px; }
  .pfh-in .pfh-row-body, .pfh-row.pfh-row-reverse.pfh-in .pfh-row-body { translate: 0 0; }
  .pfh-thumb.is-portrait { max-width: 320px; }
  .pfh-obj, .pfh-row-reverse .pfh-obj { translate: 0 50px; rotate: x 24deg; }
  .pfh-in .pfh-obj { translate: 0 0; rotate: x 0deg; }
  .pfh-idx { font-size: 64px; }
}
@media (max-width: 640px) {
  .pfh-section { padding: 210px 0 90px; }
  .pfh-header { margin-bottom: 46px; }
  .pfh-zigzag { gap: 70px; }
  .pfh-cta-wrap { margin-top: 70px; }
  .pfh-plate { border-radius: 26px; }
  /* pull the floating chips inside the screen edges */
  .pfh-in .pfh-obj { scale: .9; }
}
@media (hover: none) { .pfh-row-view { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pfh-obj, .pfh-layer, .pfh-row-body, .pfh-halo, .pfh-ground { transition-duration: .01s !important; transition-delay: 0s !important; }
  .pfh-in .pfh-layer.pfh-bob { animation: none; }
}


/* ══════════════════════════════════════════════════════
   SCROLL IN / OUT — sections (all except Services)
   Scrolling down: content rises in. Keep scrolling: it lifts away.
   Scrolling back up: it drops back in from above (the reverse).
════════════════════════════════════════════════════════ */
.sr-block {
  transition: opacity .85s cubic-bezier(.22,1,.36,1), translate 1s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--sr-d, 0s);
}
.sr-block[data-sr="below"] { opacity: 0; translate: 0 56px; }
.sr-block[data-sr="above"] { opacity: 0; translate: 0 -56px; }
.sr-block[data-sr="in"]    { opacity: 1; translate: none; }
.sr-block[data-sr="below"], .sr-block[data-sr="above"] {
  transition-duration: .5s, .65s;          /* leaving is quicker than arriving */
  transition-delay: 0s;
}
.sr-block.sr-instant { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sr-block { transition: none !important; opacity: 1 !important; translate: none !important; }
}

/* ══════════════════════════════════════════════════════
   WHY CHOOSE US — BRAND NEW SECTION
   Normal flow, no sticky overlap, scroll-triggered animations
════════════════════════════════════════════════════════ */

/* Hero sticky wrap — keep hero normal, no sticky */
.hero-sticky-wrap {
  position: relative;
}

/* ─── WCU SECTION ─── */
.wcu-section {
  position: relative;
  background: linear-gradient(180deg, #F6F2EA 0%, #FFFFFF 100%);
  color: #1a1510;
  overflow: hidden;
  padding: 0;
  margin-top: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Flat white background — no creamy rectangle zone */
.wcu-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  z-index: 0;
  pointer-events: none;
}

/* Decorative orbs */
.wcu-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 1;
}
.wcu-blob-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201,155,92,0.18) 0%, transparent 68%);
  top: 0; right: 5%;
  animation: wcuBlob1 12s ease-in-out infinite;
}
.wcu-blob-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(91,143,212,0.12) 0%, transparent 68%);
  bottom: 5%; left: 0;
  animation: wcuBlob2 15s ease-in-out infinite;
}
.wcu-blob-3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(76,175,130,0.10) 0%, transparent 68%);
  top: 40%; left: 45%;
  animation: wcuBlob3 9s ease-in-out infinite;
}

@keyframes wcuBlob1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.08); }
}
@keyframes wcuBlob2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.06); }
}
@keyframes wcuBlob3 {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50% { transform: translate(-50%,-50%) scale(1.14); }
}

/* Inner wrapper */
.wcu-inner {
  position: relative;
  z-index: 2;
  width: min(1200px, 90%);
  margin: 0 auto;
  padding: 108px 0 100px;
}

/* ── HEADER ── */
.wcu-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}
.wcu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #C99B5C;
  margin-bottom: 22px;
  background: rgba(201,155,92,0.10);
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201,155,92,0.22);
}
.wcu-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #120e08;
  margin-bottom: 22px;
}
.wcu-title em {
  font-style: italic;
  color: #C99B5C;
}
.wcu-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;
  color: rgba(26,21,16,.5);
  max-width: 540px;
  margin: 0 auto;
}

/* ── GRID ── */
.wcu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── CARDS ── */
.wcu-item {
  position: relative;
  padding: 40px 34px 44px;
  background: #FFFFFF;
  border: 1px solid rgba(26,21,16,0.07);
  border-radius: 24px;
  box-shadow: 0 2px 24px rgba(26,21,16,0.05);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease;
  cursor: default;
  overflow: hidden;
  /* scroll-trigger initial state */
  opacity: 0;
  transform: translateY(44px) scale(0.97);
}
.wcu-item.wcu-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.wcu-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(201,155,92,0.07) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.wcu-item:hover {
  transform: scale(1.02);
  box-shadow: 0 28px 70px rgba(26,21,16,0.12), 0 6px 20px rgba(26,21,16,0.06);
  border-color: rgba(201,155,92,0.28);
}
.wcu-item:hover::after { opacity: 1; }

/* Number badge */
.wcu-num {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  color: rgba(201,155,92,0.45);
  margin-bottom: 18px;
  display: block;
}

/* Icon wrapper */
.wcu-icon-wrap {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  position: relative;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.wcu-item:hover .wcu-icon-wrap {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}
.wcu-item:nth-child(1) .wcu-icon-wrap { background: rgba(201,155,92,0.14); }
.wcu-item:nth-child(2) .wcu-icon-wrap { background: rgba(76,175,130,0.14); }
.wcu-item:nth-child(3) .wcu-icon-wrap { background: rgba(91,143,212,0.14); }
.wcu-item:nth-child(4) .wcu-icon-wrap { background: rgba(224,123,85,0.14); }
.wcu-item:nth-child(5) .wcu-icon-wrap { background: rgba(149,117,205,0.14); }
.wcu-item:nth-child(6) .wcu-icon-wrap { background: rgba(77,182,172,0.14); }
.wcu-icon-wrap svg { width: 24px; height: 24px; }
.wcu-item:nth-child(1) .wcu-icon-wrap svg { color: #C99B5C; }
.wcu-item:nth-child(2) .wcu-icon-wrap svg { color: #2e8b5a; }
.wcu-item:nth-child(3) .wcu-icon-wrap svg { color: #3d7ec6; }
.wcu-item:nth-child(4) .wcu-icon-wrap svg { color: #c94f2a; }
.wcu-item:nth-child(5) .wcu-icon-wrap svg { color: #7c4dc4; }
.wcu-item:nth-child(6) .wcu-icon-wrap svg { color: #0d8073; }

.wcu-item-title {
  font-family: 'Outfit', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #120e08;
  line-height: 1.25;
  margin-bottom: 12px;
}
.wcu-item-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.78;
  color: rgba(26,21,16,.48);
}

/* Accent line at bottom of card */
.wcu-item-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 24px 24px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.wcu-item:nth-child(1) .wcu-item-line { background: #C99B5C; }
.wcu-item:nth-child(2) .wcu-item-line { background: #2e8b5a; }
.wcu-item:nth-child(3) .wcu-item-line { background: #3d7ec6; }
.wcu-item:nth-child(4) .wcu-item-line { background: #c94f2a; }
.wcu-item:nth-child(5) .wcu-item-line { background: #7c4dc4; }
.wcu-item:nth-child(6) .wcu-item-line { background: #0d8073; }
.wcu-item:hover .wcu-item-line { transform: scaleX(1); }


/* ══ WCU CARDS — corner background icon that "comes into focus" under the cursor ══ */
.wcu-item:nth-child(1) { --wcu-c: #C99B5C; }
.wcu-item:nth-child(2) { --wcu-c: #2e8b5a; }
.wcu-item:nth-child(3) { --wcu-c: #3d7ec6; }
.wcu-item:nth-child(4) { --wcu-c: #c94f2a; }
.wcu-item:nth-child(5) { --wcu-c: #7c4dc4; }
.wcu-item:nth-child(6) { --wcu-c: #0d8073; }

/* soft colour bloom that grows out of the corner */
.wcu-item::before {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 300px; height: 300px;
  background: radial-gradient(circle at 100% 100%, var(--wcu-c, #C99B5C) 0%, transparent 62%);
  opacity: 0;
  transform: scale(.55);
  transform-origin: 100% 100%;
  transition: opacity .55s ease, transform .8s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.wcu-item:hover::before { opacity: .13; transform: scale(1); }

.wcu-corner {
  position: absolute;
  right: -30px; bottom: -34px;
  width: 176px; height: 176px;
  color: var(--wcu-c, #C99B5C);
  pointer-events: none;
  opacity: .09;
  filter: blur(2.5px);                       /* out of focus at rest … */
  transform: rotate(-16deg) scale(.9);
  transform-origin: 70% 70%;
  translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -14px);   /* drifts with the cursor */
  transition:
    opacity .55s ease,
    filter .55s ease,
    transform .8s cubic-bezier(.22,1,.36,1),
    translate .25s ease-out;
}
.wcu-corner svg { display: block; width: 100%; height: 100%; stroke-width: 1.15; }
.wcu-item:hover .wcu-corner {                /* … sharp and bold when the cursor arrives */
  opacity: .23;
  filter: blur(0);
  transform: rotate(0deg) scale(1.2);
}
.wcu-item .wcu-num, .wcu-item .wcu-icon-wrap, .wcu-item .wcu-item-title, .wcu-item .wcu-item-desc { position: relative; z-index: 1; }
@media (hover: none) {
  .wcu-corner { opacity: .14; filter: none; transform: rotate(-8deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wcu-corner, .wcu-item::before { transition-duration: .01s; }
}

/* ── BOTTOM TRUST BAR ── */
.wcu-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 64px;
  padding-top: 30px;
  border-top: 1px solid rgba(26,21,16,.06);
}
.wcu-bottom-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26,21,16,.38);
  letter-spacing: .01em;
}
.wcu-bottom-dots { display: flex; align-items: center; gap: 8px; }
.wcu-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #C99B5C;
  opacity: .3;
  animation: wcuDotPulse 2.4s ease-in-out infinite;
}
@keyframes wcuDotPulse {
  0%,100% { opacity:.2; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.5); }
}

/* ── WCU HEADER scroll anim ── */
.wcu-header {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.wcu-header.wcu-in {
  opacity: 1;
  transform: translateY(0);
}
.wcu-bottom-bar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease .55s, transform .8s cubic-bezier(.22,1,.36,1) .55s;
}
.wcu-bottom-bar.wcu-in {
  opacity: 1;
  transform: translateY(0);
}

/* ══ MOBILE ══ */
@media (max-width: 860px) {
  .hero-content {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 0 28px !important;
  }
  .hero-art-layer { display: none !important; }
  .hero-left { max-width: 100%; min-width: 0; }
  .hero-headline { font-size: clamp(44px, 11vw, 72px) !important; }
  .hero-glitch-line { font-size: clamp(44px, 11vw, 72px); }
  .hero-orbit-cta { flex-wrap: wrap; row-gap: 14px; }
  .swipe-cta { min-width: 0; width: 100%; max-width: 260px; }
  .hero-cap-strip { height: 60px; }
  .hero-cap-track { gap: 10px; padding-left: 20px; animation-duration: 22s; }
  .cap-item { font-size: 11.5px; gap: 7px; }
  .cap-icon { width: 22px; height: 22px; }
  .cap-icon svg { width: 11px; height: 11px; }
  .nav-phone { display: none !important; }
  .nav-right-group { gap: 4px; }

  /* WCU mobile — handled by css/mobile-fix.css */
}
@media (max-width: 940px) {
  .logo { font-size: 12px !important; letter-spacing: .06em !important; white-space: nowrap; }
}
@media (max-width: 768px) {
  .btn-nav-cta { display: none !important; }
}

/* ══ EYEBROW CYCLE — FLIP-UP STYLE ══ */
.hero-eyebrow-cycle {
  display: inline-flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 9px;
  row-gap: 2px;
  white-space: normal !important;
}
.hero-eyebrow-cycle .hec-label { display: inline-block; white-space: nowrap; color: #17130E; font-weight: 800; }
.hero-eyebrow-cycle .hero-eyebrow-location { color: #8a8479; font-weight: 800; white-space: nowrap; }

.hero-eyebrow-cycle {
  display: inline-block;
  min-width: 0;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0.01em;
  perspective: 400px;
}

/* ══ MAGNETIC — WCU cards & logo (transform set by JS) ══ */
.wcu-item.wcu-in {
  cursor: pointer;
}

/* ══ MOBILE cap-strip white ══ */
@media (max-width: 860px) {
  .hero-cap-strip {
    background: #ffffff !important;
    height: 60px;
  }
}

/* ══════════════════════════════════════════════
   DEVELOPMENT PROCESS — infinite-loop 3D scroll marquee
   Cards never auto-play. While the cursor is over the stage, a
   mouse-wheel / trackpad gesture (or a swipe on touch) advances the
   deck one stage at a time in either direction — looping forever —
   with a smooth 3D coverflow transition (depth, rotation, blur, scale).
══════════════════════════════════════════════ */

/* ── Section shell ── */
.dproc-section {
  position: relative;
  background: linear-gradient(175deg, #F5ECE0 0%, #FBF8F3 30%, #FFFFFF 100%);
  color: #17130E;
  padding: 90px 0 150px;
  overflow: hidden;
}

/* Ambient blobs */
.dproc-blob {
  position: absolute; pointer-events: none; border-radius: 50%;
  filter: blur(110px);
}
.dproc-blob-1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(201,155,92,0.18) 0%, transparent 70%);
  top: -180px; right: -120px;
}
.dproc-blob-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(61,126,198,0.10) 0%, transparent 70%);
  bottom: 80px; left: -100px;
}

/* ── Inner wrapper ── */
.dproc-inner {
  position: relative; z-index: 2;
  width: min(1200px, 90%);
  margin: 0 auto;
}

/* ── Header ── */
.dproc-header {
  max-width: 660px;
  margin: 0 auto 80px;
  text-align: center;
  opacity: 0; transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.dproc-header.dproc-in { opacity: 1; transform: translateY(0); }

.dproc-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: #C99B5C;
  margin-bottom: 24px;
  background: rgba(201,155,92,0.08);
  padding: 8px 20px; border-radius: 999px;
  border: 1px solid rgba(201,155,92,0.22);
}
.dproc-title {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(36px, 4.6vw, 62px); line-height: 1.06; letter-spacing: -0.035em;
  color: #120E08; margin-bottom: 20px;
}
.dproc-title em { font-style: italic; color: #C99B5C; }
.dproc-subtitle {
  font-family: 'Inter', sans-serif; font-size: 16.5px; line-height: 1.78;
  color: rgba(26,21,16,.52); max-width: 520px; margin: 0 auto;
}

/* ═══════════════════════════════════════
   3D MARQUEE STAGE
═══════════════════════════════════════ */
.dproc-3d-wrap {
  position: relative;
  -webkit-user-select: none; user-select: none;
  opacity: 0; transform: translateY(40px) scale(.97);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.dproc-3d-wrap.dproc-in { opacity: 1; transform: translateY(0) scale(1); }

.dproc-3d-stage {
  position: relative;
  height: 480px;
  perspective: 1700px;
  perspective-origin: 50% 50%;
  outline: none;
  touch-action: pan-y;
}
.dproc-3d-stage:focus-visible {
  box-shadow: 0 0 0 3px rgba(201,155,92,.35);
  border-radius: 32px;
}

.dproc-3d-scene {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}

/* Individual card — position / rotation / depth / blur are all driven
   by CSS custom properties set in JS, so every jump — however far —
   animates smoothly through the transition below. */
.dproc-3d-card {
  position: absolute;
  top: 50%; left: 50%;
  width: min(78vw, 460px);
  background: #FFFFFF;
  border: 1px solid rgba(26,21,16,.08);
  border-radius: 30px;
  padding: 34px 32px;
  box-shadow: 0 30px 70px -20px rgba(23,19,14,.22);
  transform: translate3d(calc(-50% + var(--x, 0px)), -50%, var(--z, 0px)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  opacity: var(--o, 1);
  filter: blur(var(--b, 0px));
  z-index: var(--zi, 1);
  pointer-events: var(--pe, auto);
  cursor: pointer;
  transition:
    transform .68s cubic-bezier(.22,1,.36,1),
    opacity .55s ease,
    filter .55s ease,
    box-shadow .35s ease,
    border-color .35s ease;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
.dproc-3d-card.dproc-3d-active {
  border-color: rgba(201,155,92,.28);
  box-shadow: 0 40px 90px -22px rgba(23,19,14,.28);
  cursor: default;
}

/* accent top strip, colour per stage */
.dproc-3d-card::before {
  content: '';
  position: absolute; top: 0; left: 32px; right: 32px;
  height: 3px; border-radius: 3px;
  opacity: 0; transition: opacity .4s ease;
}
.dproc-3d-card.dproc-3d-active::before { opacity: 1; }
.dproc-3d-card[data-index="0"]::before { background: linear-gradient(90deg, #C99B5C, rgba(201,155,92,0)); }
.dproc-3d-card[data-index="1"]::before { background: linear-gradient(90deg, #2e8b5a, rgba(46,139,90,0)); }
.dproc-3d-card[data-index="2"]::before { background: linear-gradient(90deg, #3d7ec6, rgba(61,126,198,0)); }
.dproc-3d-card[data-index="3"]::before { background: linear-gradient(90deg, #c94f2a, rgba(201,79,42,0)); }
.dproc-3d-card[data-index="4"]::before { background: linear-gradient(90deg, #7c4dc4, rgba(124,77,196,0)); }

.dproc-3d-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.dproc-3d-marker {
  position: relative; width: 58px; height: 58px; flex-shrink: 0;
  border-radius: 18px; display: flex; align-items: center; justify-content: center;
}
.dproc-3d-marker svg { width: 24px; height: 24px; }
.dproc-3d-card[data-index="0"] .dproc-3d-marker { background: rgba(201,155,92,.12); color: #C99B5C; }
.dproc-3d-card[data-index="1"] .dproc-3d-marker { background: rgba(46,139,90,.10);  color: #2e8b5a; }
.dproc-3d-card[data-index="2"] .dproc-3d-marker { background: rgba(61,126,198,.10); color: #3d7ec6; }
.dproc-3d-card[data-index="3"] .dproc-3d-marker { background: rgba(201,79,42,.10);  color: #c94f2a; }
.dproc-3d-card[data-index="4"] .dproc-3d-marker { background: rgba(124,77,196,.10); color: #7c4dc4; }

.dproc-3d-num {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 800;
  color: #FFF; border: 2px solid #FFF;
}
.dproc-3d-card[data-index="0"] .dproc-3d-num { background: #C99B5C; }
.dproc-3d-card[data-index="1"] .dproc-3d-num { background: #2e8b5a; }
.dproc-3d-card[data-index="2"] .dproc-3d-num { background: #3d7ec6; }
.dproc-3d-card[data-index="3"] .dproc-3d-num { background: #c94f2a; }
.dproc-3d-card[data-index="4"] .dproc-3d-num { background: #7c4dc4; }

.dproc-3d-titlewrap { min-width: 0; }
.dproc-3d-title {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 21px;
  letter-spacing: -0.025em; color: #120E08; line-height: 1.22;
}
.dproc-3d-dur {
  display: inline-flex; margin-top: 6px;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.dproc-3d-card[data-index="0"] .dproc-3d-dur { color: #C99B5C; background: rgba(201,155,92,.12); border: 1px solid rgba(201,155,92,.25); }
.dproc-3d-card[data-index="1"] .dproc-3d-dur { color: #2e8b5a; background: rgba(46,139,90,.10);  border: 1px solid rgba(46,139,90,.22); }
.dproc-3d-card[data-index="2"] .dproc-3d-dur { color: #3d7ec6; background: rgba(61,126,198,.10); border: 1px solid rgba(61,126,198,.22); }
.dproc-3d-card[data-index="3"] .dproc-3d-dur { color: #c94f2a; background: rgba(201,79,42,.10);  border: 1px solid rgba(201,79,42,.22); }
.dproc-3d-card[data-index="4"] .dproc-3d-dur { color: #7c4dc4; background: rgba(124,77,196,.10); border: 1px solid rgba(124,77,196,.22); }

.dproc-3d-desc {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.7;
  color: rgba(26,21,16,.52); margin-bottom: 16px;
}
.dproc-3d-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.dproc-3d-tag {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  color: rgba(26,21,16,.5); background: rgba(26,21,16,.05);
  border: 1px solid rgba(26,21,16,.08);
  padding: 4px 11px; border-radius: 999px;
}

/* ── Controls under the stage ── */
.dproc-3d-controls {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin-top: 40px;
}
.dproc-3d-arrow {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(26,21,16,.13); background: #FFF; color: #17130E;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .2s ease, border-color .25s ease;
}
.dproc-3d-arrow:hover { background: #17130E; color: #FFF; border-color: #17130E; }
.dproc-3d-arrow:active { transform: scale(.9); }
.dproc-3d-arrow svg { width: 17px; height: 17px; }

.dproc-3d-dots { display: flex; align-items: center; gap: 10px; }
.dproc-3d-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(26,21,16,.16); border: none; cursor: pointer; padding: 0;
  transition: background .3s ease, width .35s cubic-bezier(.22,1,.36,1), border-radius .3s ease;
}
.dproc-3d-dot.active { width: 30px; border-radius: 4px; background: linear-gradient(90deg, #C99B5C, #3d7ec6); }

.dproc-3d-hint {
  text-align: center; margin-top: 18px;
  font-family: 'Inter', sans-serif; font-size: 12.5px;
  color: rgba(26,21,16,.4); letter-spacing: .01em;
}

/* ── Footer CTA ── */
.dproc-footer-cta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
  margin-top: 72px; padding-top: 44px;
  border-top: 1px solid rgba(26,21,16,.08);
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s ease .2s, transform .8s cubic-bezier(.22,1,.36,1) .2s;
}
.dproc-footer-cta.dproc-in { opacity: 1; transform: translateY(0); }
.dproc-footer-text {
  font-family: 'Inter', sans-serif; font-size: 15px;
  color: rgba(26,21,16,.5); max-width: 440px; line-height: 1.65;
}
.dproc-footer-text strong { color: #120E08; font-weight: 700; }
.dproc-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  color: #FFFFFF; background: #17130E;
  padding: 15px 30px; border-radius: 999px;
  border: none; cursor: pointer; white-space: nowrap;
  transition: background .3s ease, transform .3s ease, color .3s ease;
}
.dproc-cta-btn:hover { background: #C99B5C; color: #17130E; transform: translateX(4px); }
.dproc-cta-btn svg { width: 15px; height: 15px; }

/* ═══════════════════════════════════════
   MOBILE tuning — same 3D component, smaller stage, swipe instead of wheel
═══════════════════════════════════════ */
@media (max-width: 900px) {
  .dproc-section { padding: 90px 0 100px; }
  .dproc-header  { margin-bottom: 52px; }
  .dproc-3d-stage { height: 460px; }
  .dproc-3d-card { padding: 28px 24px; border-radius: 26px; }
  .dproc-3d-title { font-size: 19px; }
  .dproc-3d-desc { font-size: 13.5px; }
  .dproc-3d-controls { margin-top: 32px; gap: 16px; }
  .dproc-footer-cta { flex-direction: column; align-items: flex-start; margin-top: 48px; }
}

@media (max-width: 520px) {
  .dproc-3d-stage { height: 540px; }
  .dproc-3d-card { width: 84vw; }
}

/* ══════════════════════════════════════════════════════
   TESTIMONIALS / SOCIAL PROOF — asymmetric bento grid,
   featured center card, trust bar footer
════════════════════════════════════════════════════════ */
.tst-section {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F3 55%, #F5EFE0 100%);
  color: #17130E;
  padding: 130px 0 120px;
  overflow: hidden;
}
.tst-blob-1 {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,155,92,0.14) 0%, transparent 70%);
  filter: blur(100px);
  top: -140px; left: -100px;
  pointer-events: none;
}
.tst-blob-2 {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23,19,14,0.06) 0%, transparent 70%);
  filter: blur(100px);
  bottom: -120px; right: -80px;
  pointer-events: none;
}
.tst-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, 90%);
  margin: 0 auto;
}

/* ── Header ── */
.tst-header {
  max-width: 640px;
  margin: 0 auto 76px;
  text-align: center;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.tst-header.tst-in { opacity: 1; transform: translateY(0); }
.tst-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: #C99B5C;
  margin-bottom: 22px; background: rgba(201,155,92,0.10);
  padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(201,155,92,0.22);
}
.tst-title {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -0.03em;
  color: #120E08; margin-bottom: 18px;
}
.tst-title em { font-style: italic; color: #C99B5C; }
.tst-subtitle {
  font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.75;
  color: rgba(26,21,16,.55); max-width: 540px; margin: 0 auto;
}

/* ══ TESTIMONIALS SECTION — Grand Hero Spotlight Showcase ══ */
.tst-section {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF6EF 40%, #F5ECE0 100%);
  color: #17130E;
  padding: 140px 0 130px;
  overflow: hidden;
}
.tst-blob-1 {
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,155,92,0.18) 0%, transparent 70%);
  filter: blur(120px);
  top: -140px; left: -100px;
  pointer-events: none;
}
.tst-blob-2 {
  position: absolute;
  width: 580px; height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,155,92,0.13) 0%, rgba(23,19,14,0.05) 50%, transparent 70%);
  filter: blur(120px);
  bottom: -120px; right: -80px;
  pointer-events: none;
}
.tst-inner {
  position: relative;
  z-index: 2;
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* ── Header ── */
.tst-header {
  max-width: 700px;
  margin: 0 auto 56px;
  text-align: center;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.tst-header.tst-in { opacity: 1; transform: translateY(0); }
.tst-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: #C99B5C;
  margin-bottom: 22px; background: rgba(201,155,92,0.12);
  padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(201,155,92,0.28);
}
.tst-title {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(36px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -0.03em;
  color: #120E08; margin-bottom: 18px;
}
.tst-title em { font-style: italic; color: #C99B5C; }
.tst-subtitle {
  font-family: 'Inter', sans-serif; font-size: 16.5px; line-height: 1.75;
  color: rgba(26,21,16,.58); max-width: 580px; margin: 0 auto;
}

/* ── Stage / Showcase Container for Horizontal Card ── */
.tst-showcase {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: 0 auto 28px;
  opacity: 0;
  transform: translateY(32px) scale(0.96);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.tst-showcase.tst-in { opacity: 1; transform: translateY(0) scale(1); }

/* Ambient card back-glow */
.tst-aura {
  position: absolute;
  inset: -12px;
  border-radius: 36px;
  background: radial-gradient(ellipse at 50% 40%, rgba(201,155,92,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tst-deck {
  position: relative;
  width: 100%;
  min-height: 280px;
  border-radius: 26px;
}

/* Horizontal Card with GPU hardware acceleration & smooth swipe */
.tst-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid rgba(201, 155, 92, 0.22);
  border-radius: 24px;
  padding: 28px 34px;
  box-shadow: 0 18px 50px -12px rgba(23,19,14,.08), 0 0 0 1px rgba(201,155,92,.07);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(70px, 0, 0) scale(0.96);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.55s;
  will-change: transform, opacity;
  backface-visibility: hidden;
  overflow: hidden;
  z-index: 1;
}

/* Active card — smooth horizontal arrival */
.tst-card.tst-card-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  z-index: 3;
}

/* Exiting forward / backward with horizontal sliding */
.tst-card.tst-card-exit-prev {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-70px, 0, 0) scale(0.96);
  z-index: 1;
}
.tst-card.tst-card-exit-next {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(70px, 0, 0) scale(0.96);
  z-index: 1;
}

/* Watermark quote glyph */
.tst-card-watermark {
  position: absolute;
  right: 28px;
  bottom: 20px;
  width: 86px;
  height: 86px;
  color: rgba(201, 155, 92, 0.07);
  pointer-events: none;
  z-index: 0;
}
.tst-card-watermark svg { width: 100%; height: 100%; }

/* Two-column Horizontal Grid */
.tst-card-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: center;
}

/* Left Column: Author info, Avatar, Stars, Verified pill, Index badge */
.tst-author-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid rgba(23, 19, 14, 0.08);
  padding-right: 32px;
}
.tst-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tst-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C99B5C, #F3D9A8);
  color: #17130E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(201,155,92,.30);
}
.tst-author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tst-author-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: #17130E;
  margin: 0;
}
.tst-author-role {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(26,21,16,.58);
  margin: 0;
}
.tst-author-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.tst-stars {
  display: flex;
  gap: 3px;
  color: #C99B5C;
}
.tst-stars svg { width: 16px; height: 16px; }
.tst-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1F7A4D;
  background: rgba(31,122,77,0.09);
  border: 1px solid rgba(31,122,77,0.20);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.tst-verified-pill svg { width: 12px; height: 12px; }
.tst-index-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: rgba(26,21,16,.4);
  background: rgba(23,19,14,.04);
  border: 1px solid rgba(23,19,14,.08);
  padding: 3px 11px;
  border-radius: 999px;
  letter-spacing: .05em;
}
.tst-index-badge .tst-current-num {
  color: #C99B5C;
  font-size: 14px;
  font-weight: 800;
}

/* Right Column: Quote + Badges */
.tst-quote-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tst-card-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tst-tag-badge {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #C99B5C;
  background: rgba(201,155,92,0.10);
  border: 1px solid rgba(201,155,92,0.22);
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.tst-date-badge {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  color: rgba(26,21,16,.5);
  background: rgba(23,19,14,.05);
  border: 1px solid rgba(23,19,14,.08);
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.tst-quote {
  position: relative;
  z-index: 1;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(14px, 1.4vw, 17.5px);
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: -0.01em;
  color: #17130E;
  margin: 0;
}

/* ── Interactive Controls Bar (Previous, Dots, Next) ── */
.tst-controls-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s ease .18s, transform .8s cubic-bezier(.16, 1, 0.3, 1) .18s;
  will-change: opacity, transform;
}
.tst-controls-bar.tst-in { opacity: 1; transform: translateY(0); }
.tst-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #FFFFFF;
  border: 1px solid rgba(23, 19, 14, 0.12);
  color: #17130E;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all .22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 3px 12px rgba(23, 19, 14, 0.04);
  -webkit-tap-highlight-color: transparent;
}
.tst-nav-btn svg {
  width: 16px; height: 16px;
  transition: transform .22s ease;
}
.tst-nav-prev:hover svg { transform: translateX(-3px); }
.tst-nav-next:hover svg { transform: translateX(3px); }
.tst-nav-btn:hover {
  background: #C99B5C;
  border-color: #C99B5C;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(201, 155, 92, 0.38);
  transform: translateY(-2px);
}
.tst-nav-btn:active {
  transform: translateY(0);
}
.tst-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}
.tst-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(23, 19, 14, 0.18);
  border: none;
  cursor: pointer;
  transition: all .30s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}
.tst-dot.active {
  width: 28px;
  background: #C99B5C;
  box-shadow: 0 2px 8px rgba(201, 155, 92, 0.35);
}

/* Mouse wheel scroll indicator hint */
.tst-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(26,21,16,.45);
  margin-bottom: 48px;
}
.tst-mouse-icon {
  width: 13px;
  height: 20px;
  border: 1.6px solid rgba(201,155,92,0.6);
  border-radius: 9px;
  position: relative;
  display: inline-block;
}
.tst-mouse-wheel {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 4px;
  background: #C99B5C;
  border-radius: 2px;
  animation: tst-wheel-bob 1.6s ease-in-out infinite;
}
@keyframes tst-wheel-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  50% { transform: translate(-50%, 4px); opacity: 0.3; }
}

/* ── Trust bar (animated counters) ── */
.tst-trustbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  background: #FFFFFF;
  border: 1px solid rgba(23,19,14,.08);
  border-radius: 24px;
  padding: 28px 20px;
  box-shadow: 0 14px 34px rgba(23,19,14,.06);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .75s cubic-bezier(.22,1,.36,1);
}
.tst-trustbar.tst-in { opacity: 1; transform: translateY(0); }
.tst-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 34px;
  text-align: center;
}
.tst-trust-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 30px);
  color: #120E08;
}
.tst-trust-value .tst-trust-star { color: #C99B5C; font-size: 0.6em; }
.tst-trust-label {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(26,21,16,.5);
}
.tst-trust-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(23,19,14,.10);
}

@media (max-width: 860px) {
  .tst-card-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .tst-author-col {
    border-right: none;
    border-bottom: 1px solid rgba(23, 19, 14, 0.08);
    padding-right: 0;
    padding-bottom: 16px;
  }
  .tst-card { padding: 26px 22px 24px; border-radius: 22px; }
  .tst-scroll-hint { display: none; }
}
@media (max-width: 640px) {
  .tst-section { padding: 90px 0 90px; }
  .tst-header { margin-bottom: 36px; }
  .tst-card { padding: 22px 18px 20px; border-radius: 20px; }
  .tst-quote { font-size: 13.5px; line-height: 1.5; }
  .tst-controls-bar { gap: 10px; }
  .tst-nav-btn { padding: 9px 16px; font-size: 12px; }
  .tst-trustbar { flex-direction: column; gap: 18px; padding: 26px 20px; }
  .tst-trust-sep { display: none; }
  .tst-trust-item { padding: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   TECHNOLOGY WE USE — CREAMY VELVET CONTAINER & SCALE-UP MATERIALIZE
   ══════════════════════════════════════════════════════════════════ */
.tech-section {
  position: relative;
  background: linear-gradient(180deg, #F5EFE0 0%, #FAF7F2 45%, #FFFFFF 100%);
  color: #17130E;
  padding: 90px 0 140px;
  overflow: hidden;
}
.mkt-section { padding-top: 0; padding-bottom: 90px; background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 55%, #F5ECE0 100%); }
.tech-ambient-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 155, 92, 0.14) 0%, transparent 70%);
  filter: blur(140px);
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.tech-inner {
  position: relative;
  z-index: 2;
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* Header: Left title, Right subtitle */
.tech-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.tech-header-left {
  max-width: 600px;
}
.tech-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #C99B5C;
  margin-bottom: 14px;
  background: rgba(201, 155, 92, 0.12);
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201, 155, 92, 0.25);
}
.tech-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #120E08;
}
.tech-title em {
  font-style: italic;
  color: #C99B5C;
}
.tech-header-right {
  max-width: 440px;
  padding-bottom: 6px;
}
.tech-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(26, 21, 16, 0.65);
}

/* Main Container — Rich Velvety Texture with Entry Scale-Up Materializing */
.tech-container {
  position: relative;
  background: #FAF7F2;
  border: 1px solid rgba(201, 155, 92, 0.22);
  border-radius: 30px;
  padding: 30px 36px 44px;
  box-shadow: 0 25px 60px -15px rgba(23, 19, 14, 0.08), 0 0 0 1px rgba(201, 155, 92, 0.08);
  opacity: 0;
  transition: opacity 0.9s ease,
              box-shadow 0.9s ease;
  will-change: transform, opacity;
  overflow: hidden;
}
.tech-container.tech-in {
  opacity: 1;
  box-shadow: 0 35px 80px -20px rgba(23, 19, 14, 0.12), 0 0 0 1px rgba(201, 155, 92, 0.20);
}

/* Velvety texture overlay */
.tech-texture {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.7) 0%, transparent 70%),
              radial-gradient(circle at 100% 100%, rgba(201,155,92,0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Category Tabs Pill Bar */
.tech-tabs-wrap {
  position: relative;
  z-index: 2;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 38px;
  padding-bottom: 6px;
}
.tech-tabs-wrap::-webkit-scrollbar { display: none; }
.tech-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(23, 19, 14, 0.04);
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(23, 19, 14, 0.06);
}
.tech-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: rgba(26, 21, 16, 0.65);
  background: transparent;
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.tech-tab-btn:hover {
  color: #17130E;
  background: rgba(255, 255, 255, 0.6);
}
.tech-tab-btn.active {
  background: #FFFFFF;
  color: #17130E;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(23, 19, 14, 0.08);
}

/* Panels */
.tech-panels {
  position: relative;
  z-index: 2;
}
.tech-panel {
  display: none;
}
.tech-panel.active {
  display: block;
}

/* Groups within panel (e.g. iOS and Android) */
.tech-group {
  margin-bottom: 36px;
}
.tech-group:last-child {
  margin-bottom: 0;
}
.tech-group-heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: #17130E;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

/* Grid of Pills — equal-width/equal-height cells so every tile in a
   category is exactly the same size, no matter how long its name is */
.tech-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 14px;
}

/* Individual Tech Pill */
.tech-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 58px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid rgba(23, 19, 14, 0.09);
  border-radius: 16px;
  padding: 0 22px;
  box-shadow: 0 4px 12px rgba(23, 19, 14, 0.03);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s ease,
              border-color 0.28s ease;
  cursor: default;
  user-select: none;
}
.tech-panel.active .tech-pill {
  animation: techPillSlideIn 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes techPillSlideIn {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.tech-pill:nth-child(1) { animation-delay: 0.03s; }
.tech-pill:nth-child(2) { animation-delay: 0.06s; }
.tech-pill:nth-child(3) { animation-delay: 0.09s; }
.tech-pill:nth-child(4) { animation-delay: 0.12s; }
.tech-pill:nth-child(5) { animation-delay: 0.15s; }
.tech-pill:nth-child(6) { animation-delay: 0.18s; }
.tech-pill:nth-child(7) { animation-delay: 0.21s; }
.tech-pill:nth-child(8) { animation-delay: 0.24s; }

.tech-pill:hover {
  transform: translate3d(0, -3px, 0) scale(1.02);
  border-color: rgba(201, 155, 92, 0.45);
  box-shadow: 0 10px 24px rgba(23, 19, 14, 0.08);
}

.tech-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tech-icon svg {
  width: 100%;
  height: 100%;
}
.tech-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tech-name {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #17130E;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .tech-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .tech-container {
    padding: 24px 22px 34px;
    border-radius: 24px;
  }
  .tech-group-heading {
    font-size: 22px;
    margin-bottom: 16px;
  }
  .tech-pill {
    padding: 10px 18px;
    border-radius: 14px;
  }
}
@media (max-width: 640px) {
  .tech-section {
    padding: 85px 0 95px;
  }
  .tech-title {
    font-size: 32px;
  }
  .tech-tab-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* Mobile Navigation & Carousel Controls for Technology Section */
.tech-mobile-nav,
.tech-mob-dots {
  display: none;
}

@media (max-width: 768px) {
  .tech-tabs-wrap {
    display: none !important;
  }

  .tech-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    padding: 0 4px;
  }

  .tech-mob-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid rgba(201, 155, 92, 0.35);
    color: #17130E;
    box-shadow: 0 6px 18px rgba(23, 19, 14, 0.08);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .tech-mob-arrow:active {
    transform: scale(0.92);
    background: #FAF8F5;
    border-color: #C99B5C;
  }

  .tech-mob-category-card {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #FFFFFF;
    border: 1.5px solid rgba(201, 155, 92, 0.35);
    border-radius: 999px;
    padding: 11px 18px;
    box-shadow: 0 6px 20px rgba(23, 19, 14, 0.06);
    text-align: center;
    min-width: 0;
  }

  .tech-mob-category-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #17130E;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tech-mob-counter {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #C99B5C;
    background: rgba(201, 155, 92, 0.12);
    border: 1px solid rgba(201, 155, 92, 0.22);
    padding: 3px 9px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
    line-height: 1.3;
  }

  .tech-mob-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
  }

  .tech-mob-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(23, 19, 14, 0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .tech-mob-dot.active {
    width: 24px;
    background: #C99B5C;
  }

  .tech-pills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .tech-pill {
    padding: 12px 10px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .tech-name {
    font-size: 13px !important;
  }

  .tech-group-heading {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 480px) {
  .tech-pills {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .tech-pill {
    padding: 10px 8px !important;
  }
  .tech-icon {
    width: 24px !important;
    height: 24px !important;
  }
  .tech-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .tech-name {
    font-size: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   CLIENTS REAL WORK — dark 3D showcase, reviews + mockups
   ══════════════════════════════════════════════════════════════ */
.crw-section {
  position: relative;
  background: #0A0908;
  overflow: hidden;
  padding: 130px 0 120px;
  perspective: 1600px;
}
.crw-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,239,224,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,239,224,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
  pointer-events: none;
}
.crw-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: .5;
  animation: crwOrbFloat 14s ease-in-out infinite alternate;
}
.crw-orb-1 {
  width: 480px; height: 480px;
  top: -140px; left: -120px;
  background: radial-gradient(circle, rgba(201,155,92,.35) 0%, transparent 70%);
}
.crw-orb-2 {
  width: 420px; height: 420px;
  bottom: -160px; right: -100px;
  background: radial-gradient(circle, rgba(138,107,201,.28) 0%, transparent 70%);
  animation-delay: -6s;
}
@keyframes crwOrbFloat {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(30px,-24px,40px) scale(1.08); }
  100% { transform: translate3d(-24px,20px,0) scale(0.96); }
}

.crw-inner {
  position: relative; z-index: 2;
  width: min(1360px, 94%); margin: 0 auto;
}

.crw-header {
  max-width: 680px; margin: 0 auto 60px; text-align: center;
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.crw-header.crw-in { opacity: 1; transform: translateY(0); }
.crw-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: #C99B5C;
  margin: 0 auto 20px;
}
.crw-eyebrow::before, .crw-eyebrow::after { content: ""; width: 22px; height: 2px; background: #C99B5C; border-radius: 2px; }
.crw-title {
  font-family: 'Outfit', sans-serif; font-weight: 900;
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08;
  letter-spacing: -0.032em; color: #F5EFE0; margin-bottom: 18px;
}
.crw-title em { font-style: italic; color: #C99B5C; }
.crw-subtitle {
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500;
  line-height: 1.7; color: rgba(245,239,224,.55);
}

.crw-cards {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.crw-card {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0,1fr) minmax(260px,400px);
  align-items: stretch;
  gap: 38px;
  border-radius: 26px;
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1.5px solid rgba(245,239,224,.09);
  padding: 34px 36px;
  transition: border-color .4s ease, box-shadow .4s ease, opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  opacity: 0; transform: translateY(40px);
}
.crw-card.crw-in {
  opacity: 1; transform: translateY(0);
}
.crw-card:hover {
  border-color: rgba(201,155,92,.35);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}

/* Scroll-progress fill line — sits before the review, fills going down, unfills going up */
.crw-line-track {
  position: relative;
  align-self: stretch;
  width: 4px;
  border-radius: 4px;
  background: rgba(245,239,224,.09);
  overflow: hidden;
}
.crw-line-fill {
  position: absolute;
  left: 0; top: 0; width: 100%;
  height: calc(var(--fill, 0) * 100%);
  background: linear-gradient(180deg, #E6C48B, #C99B5C);
  border-radius: 4px;
}

/* Mockup "screenshot" frame — built purely from CSS, no image files needed */
.crw-mock-wrap {
  perspective: 1200px;
}
.crw-mock {
  border-radius: 16px;
  overflow: hidden;
  background: #14110D;
  border: 1px solid rgba(245,239,224,.08);
  transform-style: preserve-3d;
  transform: rotateY(-10deg) rotateX(4deg);
  transition: transform .12s ease-out;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.crw-mock-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #1B1710;
  border-bottom: 1px solid rgba(245,239,224,.06);
}
.crw-mock-bar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(245,239,224,.18);
}
.crw-mock-bar span:nth-child(1) { background: #E8998A; }
.crw-mock-bar span:nth-child(2) { background: #E8D9A0; }
.crw-mock-bar span:nth-child(3) { background: #A8D8B9; }
.crw-mock-url {
  margin-left: 10px;
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600;
  color: rgba(245,239,224,.35);
  background: rgba(245,239,224,.05);
  padding: 3px 10px; border-radius: 999px;
}
.crw-mock-body {
  display: flex; gap: 10px; padding: 14px;
  min-height: 148px;
}
.crw-mock-side {
  flex: 0 0 44px; border-radius: 10px;
  background: linear-gradient(165deg, rgba(201,155,92,.22), rgba(201,155,92,.06));
}
.crw-mock-main { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.crw-mock-row { display: flex; gap: 8px; }
.crw-mock-stat {
  flex: 1; height: 38px; border-radius: 8px;
  background: rgba(245,239,224,.06);
}
.crw-mock-stat.crw-mock-accent { background: rgba(201,155,92,.28); }
.crw-mock-chart {
  flex: 1; border-radius: 8px;
  background:
    linear-gradient(to top, rgba(201,155,92,.30) 0 38%, transparent 38%) 0 100%/12% 100% no-repeat,
    linear-gradient(to top, rgba(245,239,224,.10) 0 55%, transparent 55%) 16% 100%/12% 100% no-repeat,
    linear-gradient(to top, rgba(245,239,224,.10) 0 30%, transparent 30%) 32% 100%/12% 100% no-repeat,
    linear-gradient(to top, rgba(201,155,92,.30) 0 68%, transparent 68%) 48% 100%/12% 100% no-repeat,
    linear-gradient(to top, rgba(245,239,224,.10) 0 44%, transparent 44%) 64% 100%/12% 100% no-repeat,
    linear-gradient(to top, rgba(245,239,224,.10) 0 60%, transparent 60%) 80% 100%/12% 100% no-repeat,
    rgba(245,239,224,.035);
}

.crw-quote-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.crw-stars { color: #C99B5C; font-size: 13px; letter-spacing: 3px; margin-bottom: 14px; }
.crw-quote {
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500;
  line-height: 1.7; color: rgba(245,239,224,.8);
  margin-bottom: 22px;
}
.crw-author { display: flex; align-items: center; gap: 12px; }
.crw-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 14px;
  color: #17130E;
  background: linear-gradient(150deg, #E6C48B, #C99B5C);
}
.crw-name { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 14.5px; color: #F5EFE0; }
.crw-role { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; color: rgba(245,239,224,.45); }

@media (max-width: 900px) {
  .crw-section { padding: 90px 0 90px; }
  .crw-header { margin-bottom: 42px; }
  .crw-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 24px;
  }
  .crw-line-track { width: 100%; height: 4px; }
  .crw-line-fill { height: 100%; width: calc(var(--fill, 0) * 100%); }
  .crw-mock-wrap { order: 3; }
  .crw-quote-block { order: 2; }
}

/* ══════════════════════════════════════════════════════════════
   START A PROJECT — CTA section, light/cream theme, before footer
   ══════════════════════════════════════════════════════════════ */
.sap-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EE 45%, #F5EFE0 100%);
  padding: 100px 0 110px;
}
.sap-glow-1 {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%);
  width: 720px; height: 420px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201,155,92,.14) 0%, transparent 72%);
  filter: blur(40px); pointer-events: none;
}
.sap-pattern {
  display: block;
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(23,19,14,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,19,14,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}

.sap-inner {
  position: relative; z-index: 2;
  width: min(920px, 92%); margin: 0 auto;
  text-align: center;
  border-radius: 32px;
  padding: 64px 56px;
  background: linear-gradient(155deg, #FFFFFF 0%, #FBF7EE 100%);
  border: 1.5px solid rgba(23,19,14,.08);
  box-shadow: 0 40px 90px rgba(60,45,20,.1), inset 0 1px 0 rgba(255,255,255,.6);
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.sap-inner.sap-in { opacity: 1; transform: translateY(0); }

.sap-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: #17130E;
  background: rgba(23,19,14,.04);
  border: 1px solid rgba(23,19,14,.1);
  padding: 7px 16px 7px 12px; border-radius: 999px;
  margin-bottom: 26px;
}
.sap-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6FCF97; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(111,207,151,.18);
  animation: sapPulse 2s ease-in-out infinite;
}
@keyframes sapPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(111,207,151,.18); }
  50% { box-shadow: 0 0 0 6px rgba(111,207,151,.1); }
}

.sap-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: #C99B5C;
  margin-bottom: 16px;
}
.sap-eyebrow::before, .sap-eyebrow::after { content: ""; width: 18px; height: 2px; background: #C99B5C; border-radius: 2px; }
.sap-title {
  font-family: 'Outfit', sans-serif; font-weight: 900;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.1;
  letter-spacing: -0.03em; color: #17130E; margin-bottom: 16px;
}
.sap-title em { font-style: italic; color: #C99B5C; }
.sap-subtitle {
  font-family: 'Inter', sans-serif; font-size: 15.5px; font-weight: 500;
  line-height: 1.7; color: rgba(23,19,14,.6);
  max-width: 480px; margin: 0 auto 34px;
}
.sap-cta-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 38px;
}
.sap-btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14.5px;
  color: #FFFFFF; background: #17130E;
  border: 1.5px solid #17130E;
  padding: 16px 32px; border-radius: 999px; text-decoration: none;
  box-shadow: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.svc-card[hidden] { display: none !important; }
.sap-btn-primary:hover { background: #33291d; border-color: #33291d; transform: translateY(-3px); box-shadow: 0 12px 26px rgba(23,19,14,.18); }
.sap-btn-primary svg { width: 15px; height: 15px; transition: transform .3s ease; }
.sap-btn-primary:hover svg { transform: translateX(3px); }
.sap-btn-secondary {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14.5px;
  color: #17130E; background: rgba(23,19,14,.03);
  padding: 16px 28px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid rgba(23,19,14,.34);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.sap-btn-secondary:hover { border-color: rgba(23,19,14,.3); background: rgba(23,19,14,.06); transform: translateY(-3px); }

.sap-meta-row {
  display: flex; align-items: stretch; justify-content: center;
  gap: 0; flex-wrap: wrap;
  padding-top: 30px; border-top: 1px solid rgba(23,19,14,.08);
}
.sap-meta-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  color: rgba(23,19,14,.5);
  padding: 0 24px;
  position: relative;
  flex: 1 1 0;
  min-width: 140px;
}
.sap-meta-item:not(:last-child)::after {
  content: "";
  position: absolute; right: 0; top: 4px; bottom: 4px;
  width: 1px; background: rgba(23,19,14,.08);
}
.sap-meta-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,155,92,.12);
  border: 1px solid rgba(201,155,92,.28);
  flex-shrink: 0;
}
.sap-meta-icon svg { width: 17px; height: 17px; color: #C99B5C; }
.sap-meta-item span:last-child { color: rgba(23,19,14,.72); font-weight: 600; line-height: 1.4; }

@media (max-width: 700px) {
  .sap-section { padding: 76px 0 84px; }
  .sap-inner { border-radius: 26px; padding: 44px 26px; }
  .sap-meta-row { flex-direction: column; gap: 22px; padding-top: 26px; }
  .sap-meta-item { padding: 0; flex-direction: row; text-align: left; }
  .sap-meta-item:not(:last-child)::after { display: none; }
  .sap-cta-row { flex-direction: column; width: 100%; }
  .sap-btn-primary, .sap-btn-secondary { width: 100%; justify-content: center; }
}

/* ─── Typography helpers ─── */
.display, h1, h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}
em { font-style: italic; color: var(--accent); }

/* ─── Container ─── */
.container {
  width: min(1160px, 90%);
  margin: 0 auto;
  padding: 96px 0;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ═══════════════════════════════
   NAVBAR
═══════════════════════════════ */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  padding: 0;
  /* transparent by default */
  background: transparent;
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition:
    background 0.45s ease,
    backdrop-filter 0.45s ease,
    border-color 0.45s ease,
    padding 0.3s ease,
    transform 0.38s cubic-bezier(.22,1,.36,1);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
}
/* Hidden while scrolling down; slides back in on scroll up */
.site-header.nav-hidden {
  transform: translateY(-110%);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1160px, 90%);
  margin: 0 auto;
  height: 64px;
}

.logo {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--dark);
  text-decoration: none;
  transition: opacity 0.25s;
}
.logo:hover { opacity: 0.7; }
.logo-img-link { display: inline-flex; align-items: center; }
.logo-img { height: 34px; width: auto; max-width: none; display: block; }
@media (max-width: 768px) { .logo-img { height: 27px; } }

.nav ul { list-style: none; display: flex; gap: 2px; }
.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--grey-1);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  display: block;
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover, .nav-link.active {
  color: var(--dark);
  background: var(--surface);
}

.btn-nav-cta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  background: var(--dark);
  text-decoration: none;
  padding: 9px 20px;
  border-radius: 8px;
  transition: opacity 0.25s, transform 0.25s;
}
.btn-nav-cta:hover { opacity: 0.85; transform: translateY(-1px); }

.menu-toggle {
  display: none;
  background: none; border: none;
  cursor: pointer; padding: 8px;
}
.menu-toggle span {
  display: block; width: 22px; height: 1.5px;
  background: var(--dark); margin: 5px 0;
  transition: transform 0.25s, opacity 0.25s;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */
.hero {
  position: relative;
  height: 100vh; min-height: 640px;
  overflow: hidden;
  background: #000;
}

/* Video — very visible */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: brightness(0.80) contrast(1.05);
  will-change: transform;
}

/* Vignette — subtle edges & bottom */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.32) 0%,
      rgba(0,0,0,0.08) 22%,
      rgba(0,0,0,0.08) 55%,
      rgba(0,0,0,0.65) 88%,
      rgba(10,10,10,1)  100%
    ),
    linear-gradient(to right,
      rgba(0,0,0,0.28) 0%,
      transparent 45%,
      transparent 65%,
      rgba(0,0,0,0.18) 100%
    );
}

/* Content: vertically centered */
.hero-content {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 min(5%, 80px);
  width: 100%;
  max-width: 1160px;
}

.hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--grey-1);
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Line-by-line hero headline */
.hero-headline {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 8.5vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-bottom: 36px;
}
.line-wrap {
  display: block;
  overflow: hidden;
}
.line-inner {
  display: block;
  transform: translateY(100%);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.line-inner.italic { color: var(--grey-1); font-style: italic; }

/* Entrance state */
.hero-ready .hero-eyebrow {
  opacity: 1; transform: none;
}
.hero-ready .line-inner {
  transform: translateY(0);
}
.hero-ready .line-wrap:nth-child(1) .line-inner { transition-delay: 0.08s; }
.hero-ready .line-wrap:nth-child(2) .line-inner { transition-delay: 0.18s; }
.hero-ready .line-wrap:nth-child(3) .line-inner { transition-delay: 0.28s; }

.hero-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.7s ease 0.48s, transform 0.7s ease 0.48s;
}
.hero-ready .hero-cta { opacity: 1; transform: none; }

/* Scroll hint */
.hero-scroll-hint {
  position: absolute; right: min(5%, 80px); bottom: 36px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; transition: opacity 0.7s ease 0.8s;
}
.hero-ready .hero-scroll-hint { opacity: 1; }
.scroll-line {
  display: block; width: 1px; height: 50px;
  background: linear-gradient(to bottom, transparent, var(--grey-2));
  animation: scrollDrop 2s ease-in-out infinite;
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  50.1%{ transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero-scroll-hint span:last-child {
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--grey-2); font-family: 'Inter', sans-serif;
  writing-mode: vertical-rl;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  padding: 13px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.btn.primary {
  background: var(--dark);
  color: #FFFFFF;
}
.btn.primary:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23,19,14,0.25);
}
.btn.ghost {
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--border);
}
.btn.ghost:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  background: var(--surface);
}
.btn.large { padding: 16px 30px; font-size: 14px; border-radius: 10px; }

/* ═══════════════════════════════
   MARQUEE
═══════════════════════════════ */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  background: var(--bg-alt);
}
.marquee-track {
  display: flex; align-items: center;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-track span {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.15em;
  font-weight: 400; color: var(--grey-2);
  white-space: nowrap; padding: 0 28px;
}
.marquee-track .mx {
  color: var(--grey-3); padding: 0 4px; font-size: 10px;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══════════════════════════════
   SECTION COMMONS
═══════════════════════════════ */
.section { position: relative; overflow: hidden; }

.section-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.22em;
  font-weight: 500; color: var(--grey-2);
  text-transform: uppercase; margin-bottom: 20px;
}
.section-title {
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 800; line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.section-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--grey-1); line-height: 1.75;
  max-width: 440px;
}

/* ═══════════════════════════════
   SERVICES
═══════════════════════════════ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 56px;
  perspective: 1200px;
}

.service-card {
  background: var(--bg-alt);
  padding: 36px 30px 32px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
  transform-style: preserve-3d;
  transition:
    background 0.35s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
  cursor: default;
}
.service-card:hover {
  background: var(--surface-h);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  z-index: 2;
}
/* Top-border accent on hover */
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.service-card:hover::before { transform: scaleX(1); }

.sc-num {
  font-family: 'Outfit', sans-serif;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--grey-3); font-weight: 700;
  margin-bottom: 36px;
}
.service-card strong {
  font-family: 'Outfit', sans-serif;
  font-size: 17px; font-weight: 700;
  display: block; margin-bottom: 10px;
  letter-spacing: -0.01em; line-height: 1.25;
  transition: color 0.25s;
}
.service-card span {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--grey-1);
  line-height: 1.65; flex: 1;
}
.sc-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--grey-2); text-decoration: none;
  transition: color 0.25s, gap 0.25s;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.25s, gap 0.25s;
}
.service-card:hover .sc-link { opacity: 1; transform: none; color: var(--accent); }
.sc-link:hover { gap: 8px; }

/* ═══════════════════════════════
   WHAT WE CREATE
═══════════════════════════════ */
.create { background: var(--bg-alt); }
.create-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start;
}
.create-left { position: sticky; top: 100px; }
.create-left .section-sub { margin-top: 0; }

.create-right { padding-top: 12px; }
.create-item {
  display: flex; align-items: center; gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left 0.35s ease;
  cursor: default;
}
.create-item:first-child { border-top: 1px solid var(--border); }
.create-item:hover { padding-left: 10px; }
.ci-num {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; color: var(--grey-3);
  font-weight: 700; flex-shrink: 0; width: 28px;
}
.ci-body { flex: 1; }
.ci-body h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 15px; font-weight: 700;
  margin-bottom: 5px; letter-spacing: -0.01em;
}
.ci-body p {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--grey-1); line-height: 1.6;
}
.ci-arrow {
  color: var(--grey-3); flex-shrink: 0;
  transition: color 0.25s, transform 0.25s;
}
.create-item:hover .ci-arrow { color: var(--accent); transform: translate(3px, -3px); }

/* ═══════════════════════════════
   FEATURED WORK
═══════════════════════════════ */
.work-head {
  display: flex; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap; gap: 20px;
  margin-bottom: 40px;
}
.work-head .section-title { margin-bottom: 0; }

.work-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 16px;
  perspective: 1000px;
}

.work-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden; background: var(--bg-alt);
  transform-style: preserve-3d;
  transition:
    transform 0.5s cubic-bezier(0.2,0.8,0.2,1),
    border-color 0.35s ease,
    box-shadow 0.4s ease;
  cursor: default;
}
.work-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}

.wc-media { overflow: hidden; }
.wc-placeholder {
  aspect-ratio: 16/10;
  background: var(--grey-4);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.work-card:hover .wc-placeholder { transform: scale(1.04); }
/* subtle grid pattern */
.wc-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grey-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--grey-3) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
}
.wc-placeholder span {
  position: absolute; top: 16px; left: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--grey-2); font-weight: 500;
}
.wc-play {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-hover);
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); position: relative; z-index: 1;
  transition: background 0.3s ease, transform 0.3s ease;
}
.work-card:hover .wc-play {
  background: rgba(255,255,255,0.14);
  transform: scale(1.1);
}

.wc-info { padding: 18px 20px 22px; }
.wc-tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.12em; font-weight: 500;
  color: var(--grey-2);
  border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 99px; margin-bottom: 10px;
}
.wc-info h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 16px; font-weight: 700;
  margin-bottom: 14px; letter-spacing: -0.01em;
}

/* ═══════════════════════════════
   PROCESS
═══════════════════════════════ */
.process { background: var(--bg-alt); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 48px;
}
.process-step {
  background: var(--bg-alt);
  padding: 36px 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: background 0.3s ease, transform 0.4s ease;
  cursor: default;
}
.process-step:hover { background: var(--surface-h); }
.process-step::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--white);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.process-step:hover::after { transform: scaleY(1); }
.ps-num {
  font-family: 'Outfit', sans-serif;
  font-size: 36px; font-weight: 800;
  color: var(--grey-4); line-height: 1;
  margin-bottom: 24px; letter-spacing: -0.03em;
  transition: color 0.3s ease;
}
.process-step:hover .ps-num { color: var(--grey-3); }
.process-step strong {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: block; margin-bottom: 10px;
}
.process-step span {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--grey-1); line-height: 1.65;
}

/* ═══════════════════════════════
   TECHNOLOGY
═══════════════════════════════ */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 48px;
}
.tech-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  transform-style: preserve-3d;
  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    transform 0.45s cubic-bezier(0.2,0.8,0.2,1),
    box-shadow 0.4s ease;
  cursor: default;
}
.tech-card:hover {
  border-color: var(--border-hover);
  background: var(--surface-h);
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.tech-card.wide { grid-column: span 2; }
.tech-card strong {
  font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 700;
  display: block; margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.tech-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tech-tags span {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 400;
  color: var(--grey-1);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px 11px; border-radius: 6px;
  transition: border-color 0.25s, color 0.25s;
}
.tech-card:hover .tech-tags span {
  border-color: rgba(255,255,255,0.18);
  color: var(--white);
}

/* ═══════════════════════════════
   ABOUT
═══════════════════════════════ */
.about-preview { background: var(--bg-alt); }
.split-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.split-left .section-sub { margin-top: 0; }

.about-stats {
  display: flex; gap: 32px; margin: 32px 0 30px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}
.ab-stat { display: flex; flex-direction: column; gap: 3px; }
.ab-stat span:first-child,
.ab-num {
  font-family: 'Outfit', sans-serif;
  font-size: 30px; font-weight: 800;
  color: var(--white); letter-spacing: -0.03em; line-height: 1;
}
.ab-stat span:nth-child(2):not(.ab-num) { font-size: 20px; font-weight: 700; color: var(--white); }
.ab-stat p {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--grey-2);
  letter-spacing: 0.1em; font-weight: 400;
}

/* About visual */
.about-visual {
  border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  aspect-ratio: 1/1; position: relative;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.av-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; position: absolute; inset: 0;
}
.av-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background 0.6s ease;
}
.av-cell.active { background: rgba(255,255,255,0.04); }
.av-text {
  position: relative; z-index: 1;
  text-align: center;
}
.av-text p {
  font-family: 'Outfit', sans-serif;
  font-size: 11px; letter-spacing: 0.3em;
  font-weight: 700; color: var(--grey-2);
  text-transform: uppercase; margin: 6px 0;
}

/* ═══════════════════════════════
   FINAL CTA
═══════════════════════════════ */
.final-cta { text-align: center; }
.cta-inner { max-width: 700px; margin: 0 auto; }
.cta-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(32px, 5.5vw, 68px);
  font-weight: 800; line-height: 0.97;
  letter-spacing: -0.04em; margin-bottom: 36px;
}
.cta-row {
  display: flex; gap: 12px;
  justify-content: center; flex-wrap: wrap;
}
.cta-inner .section-label {
  justify-content: center; display: block;
  text-align: center; margin-bottom: 20px;
}

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--cream);
}
.footer-inner {
  width: min(1160px, 90%); margin: 0 auto;
  padding: 40px 0 32px;
}
.footer-top {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: 20px; margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.footer-brand {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
}
.footer-nav { display: flex; gap: 24px; }
.footer-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--grey-1);
  text-decoration: none; transition: color 0.2s;
}
.footer-nav a:hover { color: var(--white); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.footer-bottom span {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--grey-2);
}

/* ═══════════════════════════════
   SCROLL REVEAL ANIMATIONS
═══════════════════════════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up[data-delay] {
  transition-delay: calc(var(--d, 0) * 1s);
}
.reveal-up.visible {
  opacity: 1; transform: none;
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 1024px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-card.wide { grid-column: span 2; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-card.large { grid-column: span 2; }
  .create-layout { grid-template-columns: 1fr; gap: 48px; }
  .create-left { position: static; }
  .split-layout { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  /* Mobile nav fully handled by mobile-fix.css */
  .btn-nav-cta { display: none; }
  .menu-toggle { display: block; }
  .service-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .work-grid { grid-template-columns: 1fr; }
  .work-card.large { grid-column: span 1; }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-card.wide { grid-column: span 1; }
  .about-stats { gap: 20px; }
  .footer-top { flex-direction: column; }
  .work-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .container { padding: 72px 0; }
  /* hero: keep centered, shrink font, tighten padding */
  .hero-content { padding: 0 24px; }
  .hero-headline { font-size: clamp(40px, 12vw, 72px); }
  .hero-eyebrow { font-size: 10px; margin-bottom: 14px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { padding: 12px 20px; font-size: 13px; }
  .hero-scroll-hint { right: 20px; bottom: 28px; }
  .process-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}

@media (max-width: 768px) {
  /* Keep sections perfectly centered while scrolling — no drift */
  .section > .container { transform: none !important; }

  /* Lighter blur + no 3D hover transforms = smoother scrolling on phones */
  .service-card, .process-step, .create-item, .contact-card,
  .sdd-stat, .cf-card { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }

  /* Mobile: lighter translucent cards */
  .service-card, .service-card:hover { background: rgba(245,237,224,0.72) !important; }
  .process-step, .process-step:hover { background: rgba(245,237,224,0.72) !important; }
  .create-item { background: rgba(255,255,255,0.60) !important; }

  .service-card, .tech-card {
    transform: none !important;
    box-shadow: none !important;
  }
  .service-card:hover, .tech-card:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}




/* Card links */
.sc-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 22px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: all 0.25s ease !important;
}

.sc-link:hover {
  color: #ffffff !important;
  gap: 10px !important;
}

.sc-link svg {
  stroke: currentColor;
  transition: transform 0.25s ease;
}

.sc-link:hover svg {
  transform: translate(2px, -2px);
}



/* ═════════════════════════════════════════════
   SECTION BACKGROUND VIDEOS (Clean, Contained)
   ═════════════════════════════════════════════ */
.section {
  position: relative !important;
  overflow: hidden !important;
  background: #000000 !important;
}

.section-bg-video-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.section-bg-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  opacity: 0.20 !important;
  filter: brightness(0.4) contrast(1.1) !important;
  pointer-events: none !important;
}

.section-bg-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at center, rgba(5, 5, 5, 0.4) 0%, rgba(0, 0, 0, 0.9) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.section > .container {
  position: relative !important;
  z-index: 2 !important;
}

/* ═════════════════════════════════════════════
   SERVICE CARDS & CRISP TYPOGRAPHY
   ═════════════════════════════════════════════ */
.service-card {
  background: #080808 !important;
  padding: 38px 32px 34px !important;
  position: relative !important;
  border-right: 1px solid #1a1a1a !important;
  border-bottom: 1px solid #1a1a1a !important;
  transition: all 0.3s ease !important;
}

.service-card:hover {
  background: #0f0f0f !important;
}

.sc-num {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}

.service-card strong {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  display: block !important;
  transition: color 0.25s ease !important;
}

.service-card:hover strong {
  color: #ffffff !important;
}

.service-card span {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.65 !important;
  display: block !important;
}

.sc-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 22px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: all 0.25s ease !important;
}

.sc-link:hover {
  color: #ffffff !important;
  gap: 10px !important;
}

.sc-link svg {
  stroke: currentColor !important;
  transition: transform 0.25s ease !important;
}

.sc-link:hover svg {
  transform: translate(2px, -2px) !important;
}


/* ═════════════════════════════════════════════
   SECTION BACKGROUND VIDEOS (Visible & Cinematic)
   ═════════════════════════════════════════════ */
.section {
  position: relative !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

.section.create {
  background: #F5EDE0 !important;
}

.section-bg-video-wrap {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Videos hidden in light theme — sections use cream/white bg */
.section-bg-video { display: none !important; }
.section-bg-video-overlay { display: none !important; }

.section > .container {
  position: relative !important;
  z-index: 2 !important;
}

/* ═════════════════════════════════════════════
   CARDS — Light Cream/White Theme
   ═════════════════════════════════════════════ */
.service-grid {
  background: transparent !important;
  border: 1px solid rgba(23,19,14,0.09) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  gap: 1px !important;
}

.service-card {
  background: #FAF6EF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid rgba(23,19,14,0.08) !important;
  border-bottom: 1px solid rgba(23,19,14,0.08) !important;
  padding: 38px 32px 34px !important;
  transition: all 0.3s ease !important;
}

.service-card:hover {
  background: #FFFFFF !important;
  border-color: rgba(201,155,92,0.25) !important;
  box-shadow: 0 16px 40px rgba(23,19,14,0.08) !important;
}

.process-grid {
  background: transparent !important;
  border: 1px solid rgba(23,19,14,0.09) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  gap: 1px !important;
}

.process-step {
  background: #FAF6EF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid rgba(23,19,14,0.08) !important;
  border-bottom: 1px solid rgba(23,19,14,0.08) !important;
  padding: 32px 28px !important;
  transition: all 0.3s ease !important;
}

.process-step:hover {
  background: #FFFFFF !important;
}

.create-item {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 24px 20px !important;
  border-radius: 10px !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(23,19,14,0.08) !important;
  transition: all 0.25s ease !important;
}

.create-item:hover {
  background: #FFFFFF !important;
  border-color: rgba(201,155,92,0.22) !important;
}


/* ═══════════════════════════════
   Our Client
═══════════════════════════════ */
/* ══ CLIENTS / TRUSTED BY SECTION — 3-row shape-grouped marquee ══ */
.clients-section {
  padding: 110px 0 120px;
  background: linear-gradient(180deg, #fff 0%, #FDFBF7 50%, #fff 100%);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Ambient decorative backdrop (SVG blobs + dot grid) */
.cl-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cl-bg-blob {
  position: absolute;
  width: 560px;
  height: 560px;
  animation: cl-blob-float 16s ease-in-out infinite;
}
.cl-bg-blob--1 { top: -220px; left: -180px; animation-delay: 0s; }
/* Pulled further down and out so it never peeks into the bottom edge of
   the section (that stray gold patch + hard seam right above the
   Selected Work heading below it) */
.cl-bg-blob--2 { bottom: -520px; right: -220px; width: 560px; height: 560px; animation-delay: -8s; opacity: .6; }
.cl-bg-dots {
  position: absolute;
  inset: 0;
  opacity: .55;
  mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 40%, transparent 90%);
}
@keyframes cl-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(24px, -18px) scale(1.06); }
}

.clients-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* Header */
.clients-header {
  text-align: center;
  margin-bottom: 64px;
}

.clients-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C99B5C;
  margin-bottom: 14px;
}
.clients-eyebrow svg { animation: cl-spark-spin 6s linear infinite; }
@keyframes cl-spark-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

.clients-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 800;
  color: #17130E;
  line-height: 1.3;
  padding-top: 0.12em;
  margin: -0.12em 0 16px;
  overflow: visible;
}

/* Golden-brown italic accent, scoped to this heading only */
.clients-heading em {
  font-style: italic;
  font-weight: 800;
  background: linear-gradient(100deg, #A9793B 0%, #D9AD6C 35%, #C99B5C 60%, #8E6A34 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #C99B5C; /* fallback */
  animation: cl-gold-shimmer 6s ease-in-out infinite;
  position: relative;
  display: inline-block;
  overflow: visible;
  line-height: 1.3;
}

@keyframes cl-gold-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.clients-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 16.5px;
  font-weight: 400;
  color: rgba(26,20,14,.52);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Stats strip — 200+ Clients · 15+ Countries · 98% Retention ── */
.cl-stats {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 5vw, 64px);
  margin: 0 auto 64px;
  padding: clamp(14px, 3.5vw, 24px) clamp(14px, 5vw, 60px);
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(26,20,14,.08);
  border-radius: 20px;
  box-shadow: 0 18px 44px -22px rgba(23,19,14,.18);
}
.cl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
}
.cl-stat-num {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(21px, 6vw, 40px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(100deg, #A9793B 0%, #D9AD6C 35%, #C99B5C 60%, #8E6A34 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #C99B5C;
}
.cl-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(9px, 2.4vw, 13px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(26,20,14,.5);
}
.cl-stat-div {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, transparent, rgba(26,20,14,.14), transparent);
  flex-shrink: 0;
}

/* ── Logo marquee — two infinite rows scrolling in opposite directions.
     Each row's track holds the logo set duplicated once, animated from
     translateX(0) to translateX(-50%) so the loop never jumps or resets.
     Spacing between cards is done with margin-right (not flex `gap`) —
     with `gap`, translateX(-50%) lands half a gap short of the real
     halfway point and causes a visible snap each time the loop repeats;
     margin-right keeps the two halves exactly identical in width so the
     wrap is invisible. ── */
.cl-marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 36px;
  isolation: isolate;
  /* fade the far left/right edges instead of a hard cut */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.cl-marquee-row { overflow: hidden; }

.cl-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: none;
  flex: 0 0 auto;
  will-change: transform;
  --clm-gap: 32px; /* must equal .cl-logo-card's margin-right below */
  animation: cl-marquee-left 32s linear infinite;
}
.cl-marquee-row--left  .cl-marquee-track { animation-name: cl-marquee-left; animation-duration: 32s; }
.cl-marquee-row--right .cl-marquee-track { animation-name: cl-marquee-right; animation-duration: 36s; }
.cl-marquee-track:hover { animation-play-state: paused; }

/* NOTE: a flex track sized with width:max-content does NOT count the very
   last child's trailing margin in its own width. Since spacing between
   cards is set via margin-right (see .cl-logo-card), a plain -50%
   translate lands half a gap short of the true halfway point and the
   loop visibly snaps back each cycle. Subtracting half the gap here
   corrects for that missing trailing margin so the wrap is invisible. */
@keyframes cl-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--clm-half, calc(-50% - (var(--clm-gap) / 2)))); }
}
@keyframes cl-marquee-right {
  from { transform: translateX(var(--clm-half, calc(-50% - (var(--clm-gap) / 2)))); }
  to   { transform: translateX(0); }
}

.cl-logo-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 200px;
  width: 200px;
  height: 120px;
  padding: 14px;
  margin-right: 32px;
  /* Background removed — logos run directly on the page, no card/box
     behind them. */
  background: transparent;
  border: none;
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
  transition: transform .3s ease;
}

.cl-logo-card:hover {
  transform: translateY(-4px);
  z-index: 5;
}

/* Logos sit at a slightly reduced opacity by default so the row reads
   as a cohesive strip; hovering brings a card to full brightness. */
.cl-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: .88;
  transition: transform .35s ease, opacity .3s ease;
}
.cl-logo-card:hover img {
  opacity: 1;
  transform: scale(1.06);
}

/* Pakbrunei & Futehally logos render small inside their source images —
   zoom them in further on the card so they read clearly, and zoom in
   a touch more on hover like the rest of the row. */
.cl-logo-card--zoom img { transform: scale(1.35); }
.cl-logo-card--zoom:hover img { transform: scale(1.48); }

/* ── Client testimonials — horizontal auto-sliding carousel ── */
.clt-wrap { margin-top: 68px; position: relative; }

.clt-header { text-align: center; margin-bottom: 36px; }
.clt-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #C99B5C; margin-bottom: 14px;
}
.clt-eyebrow svg { animation: cl-spark-spin 6s linear infinite; }
.clt-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800; color: #17130E; margin: 0;
}
.clt-heading em {
  font-style: italic; font-weight: 800;
  background: linear-gradient(100deg, #A9793B 0%, #D9AD6C 35%, #C99B5C 60%, #8E6A34 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: #C99B5C;
  animation: cl-gold-shimmer 6s ease-in-out infinite;
}

.clt-viewport {
  overflow: hidden;
  width: 100%;
}
.clt-track {
  display: flex;
  align-items: flex-start;
  will-change: transform;
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}

/* Slide wrapper — always exactly one full viewport width, never shrunk
   by the visual card's own max-width, so the track math (index * width)
   lines up perfectly and neighbouring slides never peek into view. */
.clt-card {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 0 14px;
  opacity: .28;
  transition: opacity .5s ease;
}
.clt-card.is-active { opacity: 1; }

/* Visual card — the actual white panel, capped and centered inside the slide */
.clt-card-inner {
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
  padding: 44px 48px;
  background: #fff;
  border: 1px solid rgba(26,20,14,.08);
  border-radius: 24px;
  box-shadow: 0 24px 60px -30px rgba(23,19,14,.16);
  transform: scale(.94);
  transition: transform .5s ease;
}
.clt-card.is-active .clt-card-inner {
  transform: scale(1);
  animation: clt-card-in .6s cubic-bezier(.16,1,.3,1);
}
@keyframes clt-card-in {
  0%   { opacity: 0; transform: translateY(20px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.clt-quote { display: block; margin-bottom: 18px; }
.clt-text {
  font-family: 'Inter', sans-serif; font-size: 16.5px; font-weight: 500;
  line-height: 1.74; color: rgba(23,19,14,.72); margin: 0;
}

.clt-footer {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(26,20,14,.08);
}
.clt-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--av, #C99B5C); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15px;
}
.clt-person { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.clt-project {
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #C99B5C;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}
.clt-name {
  font-family: 'Outfit', sans-serif; font-size: 14.5px; font-weight: 700; color: #17130E;
}
.clt-stars { color: #D4A24E; font-size: 15px; letter-spacing: 2px; flex-shrink: 0; }

.clt-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 32px; }
.clt-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(26,20,14,.12); background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: #17130E; cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.clt-arrow svg { width: 18px; height: 18px; }
.clt-arrow:hover { background: #17130E; color: #fff; border-color: #17130E; transform: scale(1.07); }
.clt-arrow:active { transform: scale(.94); }
.clt-dots { display: flex; align-items: center; gap: 8px; }
.clt-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
  background: rgba(26,20,14,.16); cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.clt-dot.is-active { background: #C99B5C; width: 24px; border-radius: 5px; }

@media (max-width: 768px) {
  .clt-wrap { margin-top: 48px; }
  .clt-card { padding: 0 4px; }
  .clt-card-inner { padding: 30px 24px; border-radius: 18px; }
  .clt-text { font-size: 15px; }
  .clt-footer { margin-top: 22px; padding-top: 18px; }
  .clt-nav { margin-top: 24px; gap: 14px; }
  .clt-arrow { width: 40px; height: 40px; }
}

/* Marquee never pauses — it keeps scrolling continuously even on hover */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cl-bg-blob { animation: none; }
  .clients-eyebrow svg { animation: none; }
  .clients-heading em { animation: none; background-position: 50% 50%; }
  .cl-marquee-track { animation: none; }
  .cl-logo-card img { opacity: 1; }
  .clt-track { transition: none; }
  .clt-card.is-active .clt-card-inner { animation: none; }
}

/* Mobile */
@media (max-width: 768px) {
  .clients-section { padding: 76px 0 84px; }
  .clients-inner { padding: 0 20px; }
  .clients-header { margin-bottom: 40px; }
  .cl-stats { margin-bottom: 40px; }
  .cl-stat-div { height: 32px; }
  .cl-marquee { gap: 22px; }
  .cl-marquee-track { --clm-gap: 18px; }
  .cl-logo-card { flex-basis: 128px; width: 128px; height: 96px; padding: 10px; margin-right: 18px; }
  .cl-marquee-row--left  .cl-marquee-track { animation-duration: 11s; }
  .cl-marquee-row--right .cl-marquee-track { animation-duration: 13s; }
  .cl-bg-blob { width: 340px; height: 340px; }
  .cl-bg-blob--2 { width: 380px; height: 380px; }
}
/* ══ /CLIENTS SECTION ══ */
/* ════════════════════════════════════════════════════════
   GRAND OVERLAPPING FOOTER — Obsidian Dark & Creamy Accents
   Curved architectural overlap with smooth scroll pull-over
════════════════════════════════════════════════════════ */
.site-footer {
  position: relative !important;
  z-index: 50 !important;
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(201, 155, 92, 0.14) 0%, transparent 60%),
    radial-gradient(circle 500px at 90% 90%, rgba(245, 239, 224, 0.04) 0%, transparent 70%),
    linear-gradient(180deg, #0A0908 0%, #060504 35%, #020202 100%) !important;
  color: #FAF8F5 !important;
  border-top: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding: 80px 0 40px !important;
  overflow: hidden !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.footer-ambient-glow {
  position: absolute;
  width: 650px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201,155,92,0.16) 0%, transparent 70%);
  filter: blur(80px);
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.footer-inner {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ── 5-Column Grid ── */
.footer-grid-grand {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(245, 239, 224, 0.10);
  will-change: transform;
  transition: transform 0.15s ease-out;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #FAF8F5 !important;
  text-decoration: none !important;
  margin-bottom: 16px;
}
.footer-logo-img { height: 30px; width: auto; display: block; }

/* ═══════ FOOTER 3D ENTRANCE ENGINE ═══════
   Mirrors the #svc reveal animation (rise / flip) so the footer animates in
   the same way on every page, not just the dynamic service pages. */
.site-footer [data-fx] {
  opacity: 0; transform: var(--from, none); transform-origin: 50% 60%;
  transition: opacity .8s ease calc(var(--i,0) * 85ms), transform 1.15s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 85ms);
  will-change: transform, opacity;
}
.site-footer.is-in [data-fx] { opacity: 1; transform: none; }
.site-footer:not(.is-in) [data-fx] { transition-duration: .3s; transition-delay: 0s; }
.site-footer [data-fx="rise"]  { --from: perspective(1100px) translate3d(0,64px,-140px) rotateX(-30deg); }
.site-footer [data-fx="flipl"] { --from: perspective(1100px) translate3d(-70px,0,-110px) rotateY(-64deg); transform-origin: 0% 50%; }
.site-footer [data-fx="flipr"] { --from: perspective(1100px) translate3d(70px,0,-110px) rotateY(64deg); transform-origin: 100% 50%; }
@media (prefers-reduced-motion: reduce) {
  .site-footer [data-fx] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.footer-brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C99B5C;
  box-shadow: 0 0 10px #C99B5C;
}
.footer-brand-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.002em;
  color: rgba(245, 239, 224, 0.68) !important;
  max-width: 320px;
  margin-bottom: 20px;
}
.footer-location-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(245, 239, 224, 0.7) !important;
  text-decoration: none;
  margin-bottom: 14px;
  transition: color 0.2s ease;
}
.footer-location-row svg { color: #C99B5C; flex-shrink: 0; }
.footer-location-row:hover { color: rgba(245, 239, 224, 0.95) !important; }

.footer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(245, 239, 224, 0.85) !important;
  background: rgba(201, 155, 92, 0.10) !important;
  border: 1px solid rgba(201, 155, 92, 0.22) !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  margin-bottom: 24px;
}
.status-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #27c975;
  box-shadow: 0 0 8px #27c975;
}
.footer-social-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-social-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 239, 224, 0.45);
}
.footer-social-links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(245, 239, 224, 0.05);
  border: 1px solid rgba(245, 239, 224, 0.14);
  color: rgba(245, 239, 224, 0.75) !important;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-social-btn:hover {
  background: rgba(201, 155, 92, 0.2) !important;
  border-color: #C99B5C !important;
  color: #FAF8F5 !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(201, 155, 92, 0.25);
}

.footer-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FAF8F5 !important;
  margin-bottom: 24px;
}
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-links-list a {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0.002em;
  color: rgba(245, 239, 224, 0.62) !important;
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-block;
}
.footer-links-list a:hover {
  color: #FAF8F5 !important;
  transform: translateX(3px);
}

.footer-col-contact .footer-contact-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-link-highlight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.002em;
  color: #FAF8F5 !important;
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer-link-highlight svg {
  color: #C99B5C;
  flex-shrink: 0;
}
.footer-link-highlight:hover {
  color: #C99B5C !important;
}
.footer-reply-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(245, 239, 224, 0.55);
}
.footer-avail-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #C99B5C;
  background: rgba(201, 155, 92, 0.12);
  border: 1px solid rgba(201, 155, 92, 0.25);
  padding: 5px 12px;
  border-radius: 999px;
  margin-top: 4px;
  width: fit-content;
}
.avail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C99B5C;
}

/* ── Bottom Bar ── */
.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(245, 239, 224, 0.55) !important;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-bottom-sep {
  color: rgba(245, 239, 224, 0.3);
}
.footer-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 239, 224, 0.06);
  border: 1px solid rgba(245, 239, 224, 0.16);
  color: #FAF8F5;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.footer-back-to-top:hover {
  background: rgba(201, 155, 92, 0.18);
  border-color: #C99B5C;
  color: #FAF8F5;
  transform: translateY(-2px);
}
.footer-back-to-top svg {
  transition: transform 0.25s ease;
}
.footer-back-to-top:hover svg {
  transform: translateY(-2px);
}

@media (max-width: 1080px) {
  .footer-grid-grand {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-col-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 680px) {
  .site-footer {
    border-radius: 28px 28px 0 0 !important;
    margin-top: -36px !important;
    padding: 56px 0 32px !important;
  }
  .footer-grid-grand {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* Mobile responsive handled by mobile-fix.css */
/* Hero strip: black line icons */
.cap-icon svg { stroke: #111; }

/* ═══════════════════════════════════════════════════════════════
   HERO BRAND STRIP — client logos, endless loop (never pauses)
═══════════════════════════════════════════════════════════════ */
.hero-cap-strip {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.hero-cap-track {
  gap: 0;
  padding-left: 0;
  animation: heroCapSlide 50s linear infinite;
  will-change: transform;
}
/* keep running on hover / touch — never pause */
.hero-cap-strip:hover .hero-cap-track,
.hero-cap-track:hover { animation-play-state: running !important; }
.hc-logo {
  flex: 0 0 auto;
  display: flex; align-items: center;
  padding: 0 30px;           /* padding (not gap) keeps the -50% loop seamless */
}
.hc-logo img {
  display: block;
  height: 38px; width: auto;
  max-width: 150px;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 860px) {
  .hero-cap-track { animation-duration: 36s; }
  .hc-logo { padding: 0 20px; }
  .hc-logo img { height: 28px; max-width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cap-track { animation: none; }
}

/* Services cards — technologies wrap onto multiple rows so every tag is visible */
.svc-reveal-tags { flex-wrap: wrap; overflow: visible; }
.svc-reveal-tag { flex: 0 0 auto; white-space: nowrap; }

.svc-reveal-tag.svc-tag-hide { display: none; }

/* ═══════════════════════════════════════════════════════════════
   SERVICE CARDS — subtle service-themed activity in the card corners
   (falling code columns + cursor-reactive floating icons).
   Everything is very low opacity and kept away from the card centre.
═══════════════════════════════════════════════════════════════ */
.svc-fx {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  overflow: hidden;
  color: var(--card-accent, #C99B5C);
}
/* code columns — left & right edges, fading out towards the centre */
.svc-fx-code {
  position: absolute; top: 0; bottom: 92px; width: 24%;
  overflow: hidden; opacity: .13;
  font: 600 10px/2 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: .02em; white-space: nowrap;
}
.svc-fx-code--l {
  left: 16px; text-align: left;
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, transparent 100%);
}
.svc-fx-code--r {
  right: 16px; text-align: right; top: 76px; bottom: 0;
  -webkit-mask-image: linear-gradient(270deg, #000 0, transparent 100%);
          mask-image: linear-gradient(270deg, #000 0, transparent 100%);
}
.svc-fx-code-in { display: block; animation: svcCodeScroll 26s linear infinite; will-change: transform; }
.svc-fx-code--r .svc-fx-code-in { animation-duration: 32s; animation-direction: reverse; }
.svc-fx-code-in span { display: block; }
@keyframes svcCodeScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* corner icons — outer span is moved by JS (cursor), inner svg floats via CSS */
.svc-fx-ico {
  position: absolute; width: 26px; height: 26px;
  opacity: .16; will-change: transform;
  transition: opacity .35s ease;
}
.svc-fx-ico svg {
  display: block; width: 100%; height: 100%;
  animation: svcIcoFloat 7s ease-in-out infinite alternate;
}
.svc-fx-ico:nth-of-type(2n) svg { animation-duration: 9s; animation-delay: -3s; }
.svc-fx-ico:nth-of-type(3n) svg { animation-duration: 11s; animation-delay: -5s; }
.svc-card:hover .svc-fx-ico { opacity: .24; }
@keyframes svcIcoFloat {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(3px, -6px) rotate(6deg); }
  100% { transform: translate(-3px, 4px) rotate(-5deg); }
}
/* corner slots only (never the middle band of the card) */
.svc-fx-ico.p1 { left: 6%;  top: 44%; }
.svc-fx-ico.p2 { left: 19%; top: 13%; width: 22px; height: 22px; }
.svc-fx-ico.p3 { right: 20%; top: 15%; width: 22px; height: 22px; }
.svc-fx-ico.p4 { right: 6%;  top: 47%; width: 30px; height: 30px; }
.svc-fx-ico.p5 { right: 25%; bottom: 12%; width: 24px; height: 24px; }

@media (max-width: 768px) {
  .svc-fx-code { width: 30%; font-size: 9px; }
  .svc-fx-ico { width: 20px; height: 20px; }
  .svc-fx-ico.p4 { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-fx-code-in, .svc-fx-ico svg { animation: none; }
}


/* Tech icon in card background: static, no floating motion */
.svc-bg-motion { animation: none !important; top: 22px; left: 22px; width: 64px; height: 64px; opacity: 0.16; }
.svc-card:hover .svc-bg-motion { opacity: 0.26; }


/* Card background: no animations, no decorative layers. Only the colour theme stays. */
.svc-bg-motion, .svc-bg-motion-2, .svc-fx { display: none !important; }
.svc-card *, .svc-card-visual * { animation: none !important; }

/* Technology logos: small outline-only side actors in the top-left corner, in the card's accent colour */
.svc-play { position: absolute; left: 14px; top: 14px; width: 76px; height: 92px; z-index: 1; }
.svc-logo { position: absolute; left: 0; top: 0; display: block; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; will-change: transform; filter: none; box-shadow: none; color: var(--card-accent, #C99B5C); }
.svc-logo .svc-ol { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; opacity: .32; transition: opacity .3s ease; }
.svc-logo .svc-ol, .svc-logo .svc-ol * { fill: none !important; stroke: currentColor !important; stroke-width: 1.3px !important; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.svc-logo:hover .svc-ol, .svc-logo.is-drag .svc-ol { opacity: .55; }
.svc-logo.is-drag { cursor: grabbing; }


/* Reviews now sits in its own section (split from the brands marquee) */
#reviews.clients-section { padding-top: 72px; }
#reviews .clt-wrap { margin-top: 0 !important; }


/* ==========================================================================
   Source: mobile-fix.css
   ========================================================================== */
/* ================================================================
   ELYVEN — MOBILE RESPONSIVE MASTER FIX
   Covers: Navbar oval/pill, all sections full-width,
   WCU icon badges, every breakpoint 320px–768px
   ================================================================ */

/* The mobile-menu "Let's Talk" CTA only ever shows inside the open
   mobile dropdown (see .nav.open .nav-mobile-cta below); hidden on desktop. */
.nav-mobile-cta { display: none; }

/* ────────────────────────────────────────────────────────────────
   1. GLOBAL — prevent ALL horizontal overflow on every screen
   ──────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
  overflow-x: clip !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
}
* , *::before, *::after {
  box-sizing: border-box;
  max-width: 100%;
}
img, video, svg, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* Any horizontal-scroll widget (service carousel, tech tabs, etc.) must
   clip its own track so its slides can never widen the document itself */
.svc-track-outer, .svc-wrap, #svcTrackOuter,
.tech-tabs-wrap, .tech-panels,
.hero-cap-strip {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* ────────────────────────────────────────────────────────────────
   2. ALL SECTION WRAPPERS — always clamp to viewport
   ──────────────────────────────────────────────────────────────── */
.container,
.wcu-inner,
.pfh-inner,
.tst-inner,
.dproc-inner,
.tech-inner,
.mkt-inner,
.svc-wrap,
.header-inner {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ────────────────────────────────────────────────────────────────
   3. NAVBAR — Desktop: pill/oval shape. Mobile: oval centered.
   ──────────────────────────────────────────────────────────────── */

/* === MOBILE NAVBAR — Floating Oval === */
@media (max-width: 768px) {
  /* Header wrapper: transparent, no edge-to-edge bar */
  .site-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 12px 16px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
  }

  /* The oval pill — centered, floating */
  .header-inner {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(23, 19, 14, 0.10) !important;
    border-radius: 999px !important;
    padding: 0 8px 0 20px !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 4px 24px rgba(23, 19, 14, 0.12) !important;
    height: 52px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Logo stays left */
  .logo {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    flex-shrink: 0 !important;
  }

  /* Hide desktop nav links and CTA button */
  .nav { display: none !important; }
  .btn-nav-cta { display: none !important; }
  .nav-right-group { display: flex !important; gap: 0 !important; }

  /* Hamburger stays visible */
  .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(23, 19, 14, 0.06) !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  .menu-toggle span {
    display: block !important;
    width: 18px !important;
    height: 1.5px !important;
    background: #17130E !important;
    margin: 2.5px 0 !important;
    transition: transform 0.25s, opacity 0.25s !important;
  }
  .menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) !important; }
  .menu-toggle.open span:nth-child(2) { opacity: 0 !important; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) !important; }

  /* Fullscreen dropdown nav when hamburger opened */
  .nav.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 76px !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100% - 24px) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(23, 19, 14, 0.08) !important;
    box-shadow: 0 20px 60px rgba(23, 19, 14, 0.15) !important;
    padding: 12px !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .nav.open ul {
    flex-direction: column !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav.open .nav-link {
    display: block !important;
    padding: 14px 20px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(23, 19, 14, 0.7) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background 0.2s, color 0.2s !important;
  }

  .nav.open .nav-link:hover,
  .nav.open .nav-link.active {
    background: rgba(23, 19, 14, 0.05) !important;
    color: #17130E !important;
  }

  .nav.open .nav-link.active {
    color: #C99B5C !important;
    font-weight: 700 !important;
  }

  /* "Let's Talk" CTA inside the mobile dropdown menu */
  .nav-mobile-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 10px 6px 4px !important;
    padding: 14px 20px !important;
    background: #17130E !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.25s, transform 0.25s !important;
  }
  .nav-mobile-cta:hover,
  .nav-mobile-cta:active {
    background: #C99B5C !important;
    color: #17130E !important;
    transform: translateY(-1px) !important;
  }
  .nav-mobile-cta svg { flex-shrink: 0 !important; }

  /* Push page content below fixed navbar */
  body {
    padding-top: 76px !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   4. HERO SECTION — full width, single column on mobile
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero {
    height: calc(100vh - 76px) !important;
    min-height: calc(100vh - 76px) !important;
    padding-top: 0 !important;
  }

  .hero-content {
    grid-template-columns: 1fr !important;
    padding: 0 24px !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }

  .hero-left {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .hero-art-layer,
  .hero-pedestal,
  .hero-pedestal-shadow,
  .hero-logo-slot,
  .hw-pill,
  .art-dot,
  .hero-orbit-ring,
  .hero-art-icon,
  .hero-deco-blocks,
  .hero-deco-leaf {
    display: none !important;
  }

  .hero-headline {
    font-size: clamp(38px, 10vw, 64px) !important;
  }

  .hero-glitch-line {
    font-size: clamp(38px, 10vw, 64px) !important;
  }

  .hero-sub {
    font-size: 14.5px !important;
    max-width: 100% !important;
    margin-bottom: 28px !important;
  }

  .hero-orbit-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .swipe-cta {
    width: 100% !important;
    max-width: 280px !important;
  }

  .hero-secondary-link {
    font-size: 13px !important;
  }

  .hero-scroll-hint {
    display: none !important;
  }

  .hero-cap-strip {
    height: 56px !important;
  }

  .hero-eyebrow {
    font-size: 10px !important;
    margin-bottom: 18px !important;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding: 0 20px !important;
  }
  .hero-headline {
    font-size: clamp(32px, 9.5vw, 52px) !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   5. WHY CHOOSE US (WCU) — full width, 1-col grid, badge icons
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .wcu-section {
    overflow: hidden !important;
  }

  .wcu-inner {
    width: 100% !important;
    padding: 72px 20px 64px !important;
    box-sizing: border-box !important;
  }

  .wcu-header {
    text-align: left !important;
    margin-bottom: 36px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .wcu-title {
    font-size: clamp(32px, 8.5vw, 52px) !important;
  }

  .wcu-subtitle {
    margin: 0 !important;
    font-size: 14px !important;
  }

  .wcu-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* CARD COMPACT — badge icon style on mobile */
  .wcu-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 20px !important;
    border-radius: 18px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Badge icon — circular, left side */
  .wcu-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    transition: none !important;
  }

  .wcu-icon-wrap svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Text group */
  .wcu-item-text-group {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  /* Number badge as small top label */
  .wcu-num {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    color: rgba(201, 155, 92, 0.55) !important;
    margin-bottom: 4px !important;
  }

  .wcu-item-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  .wcu-item-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: rgba(26, 21, 16, 0.5) !important;
  }

  /* Hide decorative corner on mobile */
  .wcu-corner,
  .wcu-item::before,
  .wcu-item::after,
  .wcu-item-line {
    display: none !important;
  }

  .wcu-bottom-bar {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
    margin-top: 32px !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   6. SERVICES SECTION — full width carousel
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .svc-section {
    padding: 96px 0 64px !important;
    overflow: hidden !important;
  }

  .svc-wrap {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  /* Card fills the track width exactly — the side gutters already come
     from .svc-wrap's own padding, so this keeps it centered instead of
     hugging the left edge. Shadow is softened + hover-lift disabled so it
     doesn't look like it's floating on tap (mobile has no real :hover). */
  .svc-track {
    justify-content: flex-start !important;
  }
  .svc-card {
    flex: 0 0 calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    min-width: 0 !important;
    min-height: 400px !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 18px rgba(23,19,14,.07) !important;
  }
  .svc-card.svc-in:hover,
  .svc-card:hover {
    box-shadow: 0 6px 18px rgba(23,19,14,.07) !important;
    transform: none !important;
  }

  .svc-header {
    margin-bottom: 28px !important;
  }

  .svc-title {
    font-size: clamp(28px, 8vw, 48px) !important;
  }

  .svc-track-outer {
    margin: 0 -20px !important;
    padding: 0 20px !important;
  }

  .svc-footer-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .svc-wrap { padding: 0 16px !important; }
  .svc-card { flex: 0 0 calc(100vw - 32px) !important; width: calc(100vw - 32px) !important; min-width: 0 !important; min-height: 360px !important; }
  .svc-card-body { padding: 18px 18px 22px !important; }
  .svc-card-title { font-size: 19px !important; }
}

/* ────────────────────────────────────────────────────────────────
   7. PORTFOLIO SECTION — full width
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .pfh-section {
    padding: 80px 0 64px !important;
    overflow: hidden !important;
  }

  .pfh-inner {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  .pfh-header {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 36px !important;
  }

  .pfh-title {
    font-size: clamp(28px, 8vw, 48px) !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   8. PROCESS (dproc) SECTION — full width
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dproc-section {
    padding: 80px 0 90px !important;
    overflow: hidden !important;
  }

  .dproc-inner {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  .dproc-header {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 40px !important;
    max-width: 100% !important;
  }

  .dproc-title {
    font-size: clamp(28px, 8vw, 48px) !important;
  }

  .dproc-3d-stage {
    height: 520px !important;
  }

  .dproc-3d-card {
    width: 88vw !important;
    padding: 24px 20px !important;
    border-radius: 22px !important;
  }

  .dproc-3d-title {
    font-size: 18px !important;
  }

  .dproc-footer-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   9. TESTIMONIALS SECTION — full width
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tst-section {
    padding: 80px 0 80px !important;
    overflow: hidden !important;
  }

  .tst-inner {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  .tst-header {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 36px !important;
    max-width: 100% !important;
  }

  .tst-title {
    font-size: clamp(28px, 8vw, 48px) !important;
  }

  .tst-card {
    padding: 22px 18px 20px !important;
    border-radius: 18px !important;
  }

  .tst-trustbar {
    flex-direction: column !important;
    gap: 18px !important;
    padding: 24px 20px !important;
  }

  .tst-trust-sep { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────
   10. TECHNOLOGY SECTION — full width
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tech-section,
  .mkt-section {
    padding: 80px 0 90px !important;
    overflow: hidden !important;
  }

  .tech-inner,
  .mkt-inner {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  .tech-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 28px !important;
  }

  .tech-title {
    font-size: clamp(26px, 8vw, 44px) !important;
  }

  .tech-container {
    padding: 20px 16px 30px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 480px) {
  .tech-inner, .mkt-inner { padding: 0 16px !important; }
  .tech-pills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .tech-pill {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }
  .tech-name { font-size: 12.5px !important; }
  .tech-icon { width: 20px !important; height: 20px !important; }
}

/* ────────────────────────────────────────────────────────────────
   11. FOOTER — full width on mobile
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .site-footer {
    border-radius: 20px 20px 0 0 !important;
    padding: 52px 0 28px !important;
    overflow: hidden !important;
  }

  .site-footer .container,
  .footer-inner,
  .footer-grid-grand {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  .footer-grid-grand {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .footer-bottom-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   12. TYPOGRAPHY — prevent any text from overflowing
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  h1, h2, h3 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* General section titles */
  .svc-title, .pfh-title, .wcu-title, .dproc-title,
  .tst-title, .tech-title {
    font-size: clamp(26px, 8vw, 44px) !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   13. WCU ITEM — Badge icon layout on mobile
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Card row layout: icon badge left, text right */
  .wcu-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: 18px 20px !important;
  }

  /* Number badge floats top-right */
  .wcu-item > .wcu-num {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    margin: 0 !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
  }

  /* Badge icon — circular, left aligned */
  .wcu-item > .wcu-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    transition: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .wcu-item > .wcu-icon-wrap svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Text group fills remaining space */
  .wcu-text-group {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .wcu-item-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
  }

  .wcu-item-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: rgba(26, 21, 16, 0.5) !important;
    font-weight: 500 !important;
  }

  /* Hide decorative elements */
  .wcu-corner,
  .wcu-item-line {
    display: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   14. FORM DRAWER — full width on tiny screens
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .form-drawer {
    width: 100% !important;
    padding: 36px 20px !important;
  }

  .fd-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   15. FIX: Scrolled header state on mobile — keep oval style
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-header.scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
  }

  .site-header.scrolled .header-inner {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 4px 24px rgba(23, 19, 14, 0.14) !important;
  }

  /* nav-hidden: slide out */
  .site-header.nav-hidden .header-inner {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   16. VERY SMALL SCREENS (≤ 360px — iPhone SE, Galaxy A series)
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .header-inner {
    padding: 0 6px 0 16px !important;
  }

  .logo {
    font-size: 10.5px !important;
    letter-spacing: 0.05em !important;
  }

  .wcu-inner,
  .pfh-inner,
  .tst-inner,
  .dproc-inner,
  .tech-inner,
  .mkt-inner,
  .svc-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero-content {
    padding: 0 16px !important;
  }

  .wcu-item {
    padding: 16px 14px !important;
  }

  .wcu-icon-wrap {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}


/* ==========================================================================
   MOBILE PERFORMANCE LAYER
   Huge blurred blobs and per-card backdrop blur are what make phones lag.
   Blobs are radial gradients that already fade to transparent, so dropping
   the blur filter looks the same but costs almost nothing.
   ========================================================================== */
@media (max-width: 820px), (pointer: coarse) {
  .tech-ambient-glow, .dproc-blob, .wcu-blob, .tst-blob-1, .tst-blob-2, .pfh-blob, .crw-orb,
  .footer-ambient-glow, .sap-glow-1, .pfh-halo, .rp-halo,
  .hb-zz-art.hb-zz-photo::before, .cs2-vis::before, .pz-art::before, .pfh-ground {
    -webkit-filter: none !important; filter: none !important;
  }
  .wcu-blob, .dproc-blob, .crw-orb { animation: none !important; }

  .process-step, .service-card, .create-item, .contact-card, .sdd-stat, .cf-card,
  .dproc-step-card, .svc-card .svc-reveal-tag, .svc-card .svc-reveal-pf-item, .svc-card .svc-card-body,
  .hb-chip-float, .cs2-chip, .shp-step-card, .sv-fcard, .sv-top-form-card, .ta-hud div, .tw-hud div,
  .ts-cap, .ts-term, .tx-plat-chip, .pf-cover-chip, .pf-cover-icon, .pz-chip {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* sections that are off screen do not run their endless animations */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

/* ===== inline field errors: same red look in every form and drawer ===== */
.fd-field.has-err > input, .fd-field.has-err > select, .fd-field.has-err > textarea,
.stf-field.has-err > input, .stf-field.has-err > select, .stf-field.has-err > textarea,
.ep-field.has-err > input, .ep-field.has-err > select, .ep-field.has-err > textarea {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, .16) !important;
}
.fd-field > .ep-err-msg, .stf-field > .ep-err-msg {
  display: flex; align-items: flex-start; gap: 6px; margin: 6px 2px 0;
  font: 600 12.5px/1.4 'Inter', sans-serif; color: #ff8f8f;
}
.fd-field > .ep-err-msg::before, .stf-field > .ep-err-msg::before {
  content: '!'; flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%;
  background: #ff6b6b; color: #170b0b; font: 800 10px/15px 'Inter', sans-serif; text-align: center;
}
.fd-field.ep-shake, .stf-field.ep-shake { animation: epNudge .36s ease; }
@keyframes epNudge { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fd-field.ep-shake, .stf-field.ep-shake { animation: none; } }

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE OPTIMIZATION: Low-Resolution PCs, Laptops & Projectors
   Targets: 1024x768, 1280x720, 1280x800, 1366x768 & short viewports (<=840px)
   Eliminates the need for users to zoom out with Ctrl + mouse wheel.
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 993px) and (max-width: 1366px), (min-width: 993px) and (max-height: 840px) {
  /* Hero section scaling */
  .hero-content {
    grid-template-columns: 1.15fr 0.85fr !important;
    padding: 0 5vw !important;
    gap: 20px !important;
  }
  .hero-headline {
    font-size: clamp(36px, 4.2vw, 54px) !important;
    line-height: 1.12 !important;
  }
  .hero-glitch-line {
    font-size: clamp(36px, 4.2vw, 54px) !important;
  }
  .hero-eyebrow {
    font-size: 10.5px !important;
    margin-bottom: 16px !important;
  }
  .hero-sub {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    max-width: 480px !important;
    margin-bottom: 22px !important;
  }
  .hero-left {
    max-width: 540px !important;
  }
  .hero-orbit-cta {
    gap: 16px !important;
  }
  .hero-orbit-ring.ring-1 {
    width: 26vw !important;
    height: 26vw !important;
    max-width: 330px !important;
    max-height: 330px !important;
  }
  .hero-orbit-ring.ring-2 {
    width: 19vw !important;
    height: 19vw !important;
    max-width: 240px !important;
    max-height: 240px !important;
  }
  .hero-art-layer {
    transform: scale(0.86);
    transform-origin: 75% center;
  }
  .hero-card-front {
    max-width: 350px !important;
    max-height: 250px !important;
  }

  /* Section rhythm & titles */
  .sec-header {
    margin-bottom: 34px !important;
  }
  .sec-title, .tech-title, .pfh-title, .sv-title, .ai-title, .mk-h2, .ab-h2 {
    font-size: clamp(30px, 3.2vw, 44px) !important;
    line-height: 1.18 !important;
  }
  .sec-lede, .ai-sub, .mk-lede {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  /* Grid containers */
  .svc-grid {
    gap: 18px !important;
  }
  .svc-card {
    padding: 24px 20px !important;
  }
  .svc-card-title {
    font-size: 20px !important;
  }
  .pfh-row {
    gap: clamp(24px, 3vw, 42px) !important;
    padding: 36px 0 !important;
  }
  .pfh-idx {
    font-size: 48px !important;
  }
  .wcu-grid {
    gap: 16px !important;
  }
  .wcu-item {
    padding: 24px 20px !important;
  }
  .tech-grid {
    gap: 16px !important;
  }
  .stats-strip {
    padding: 36px 0 !important;
  }
  .stat-num {
    font-size: clamp(36px, 3.8vw, 52px) !important;
  }
}

/* Specific projector screens (height <= 768px, width >= 993px) */
@media (min-width: 993px) and (max-height: 768px) {
  .hero-content {
    top: 48% !important;
  }
  .hero-headline {
    font-size: clamp(34px, 3.8vw, 46px) !important;
  }
  .hero-sub {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }
  .hero-eyebrow {
    margin-bottom: 12px !important;
  }
  .hero-cap-strip {
    height: 50px !important;
  }
  .hero-art-layer {
    transform: scale(0.78);
    transform-origin: 75% center;
  }
}


/* ══ NAVBAR — "Contact us on (WhatsApp)" button (light green pill, distinct from the black Let's Talk) ══ */
.btn-nav-wa {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 5px 5px 16px;
  background: #fff; color: #17130E;
  border: 1.5px solid rgba(37,211,102,.55); border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(37,211,102,.14);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn-nav-wa:hover { transform: translateY(-2px); background: #F1FBF5; border-color: #25D366; box-shadow: 0 8px 20px rgba(37,211,102,.28); }
.wa-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: #25D366; color: #fff;
  animation: waPulse 2.6s ease-out infinite;
}
.wa-badge .wa-ico { width: 18px; height: 18px; fill: currentColor; }
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) { .wa-badge { animation: none; } }
.nav-mobile-wa { display: none; }
@media (max-width: 940px) { .btn-nav-wa { padding-left: 12px; font-size: 12px; } }
@media (max-width: 768px) {
  .btn-nav-wa { display: none !important; }
  .nav.open .nav-mobile-wa {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 8px 6px 4px; padding: 8px 10px 8px 20px;
    background: #fff; color: #17130E; border: 1.5px solid rgba(37,211,102,.55); border-radius: 999px;
    font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 700; text-decoration: none;
  }
  .nav-mobile-wa .wa-badge { animation: none; }
}


.footer-col-contact .footer-link-highlight { white-space: nowrap; }