/* =========================================================================
   LIENE — Creative Studio landing page
   Table of contents:
   1. Reset & base                                    11. About
   2. Custom properties     7. Header & nav           12. Services
   3. Typography            8. Menu overlay           13. Work
   4. Layout utilities       9. Buttons                14. Process
   5. Grain overlay         10. Hero / marquee        15. Stats / Testimonials
                                                       16. Team / CTA / Footer
                                                       17. Modal / Reveals
                                                       18. Responsive / a11y
   ========================================================================= */

/* ---------- 1. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
html { scroll-behavior: auto; }
::selection { background: #D6FF4A; color: #08090B; }

/* ---------- 2. Custom properties ---------- */
:root{
  --c-ink: #08090B;
  --c-ink-alt: #121319;
  --c-ink-soft: #1D1F27;
  --c-cream: #F4F0E6;
  --c-cream-soft: #E4DDC9;
  --c-lime: #D6FF4A;
  --c-coral: #FF5C38;
  --c-violet: #7C5CFF;
  --c-process: #130E1F;

  --c-fg: #F5F3ED;
  --c-fg-muted: #9C998F;
  --c-ink-text: #0E0F12;
  --c-ink-muted: #6C6A61;

  --font-display: 'Clash Display', 'General Sans', Arial, sans-serif;
  --font-body: 'General Sans', Arial, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --space-section: clamp(5rem, 9vw, 9rem);
  --container-pad: clamp(1.5rem, 5vw, 4rem);
  --radius: 1.1rem;

  --z-grain: 9998;
  --z-modal: 9000;
  --z-menu: 8000;
  --z-header: 500;
  --z-dots: 400;
  --z-progress: 600;
}

body{
  background: var(--c-ink);
  color: var(--c-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
}
body.is-locked{ overflow: hidden; height: 100vh; }

/* ---------- 3. Typography ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-lime);
  margin-bottom: 1.4rem;
}
.eyebrow--dark{ color: var(--c-ink-text); opacity: .65; }

.dot-pulse{
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse{
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.65); }
}

.h1, h1{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
}
.h2, h2{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
}
h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  letter-spacing: -0.01em;
}
p { color: var(--c-fg-muted); }
.section--cream p, .section--accent p { color: var(--c-ink-muted); }

.link-arrow{
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: .85rem; letter-spacing: .04em;
  color: inherit; padding-bottom: .2rem; border-bottom: 1px solid currentColor;
}
.link-arrow i{ font-style: normal; display: inline-block; transition: transform .4s var(--ease-out-expo); }
.link-arrow:hover i{ transform: translateX(6px); }

/* ---------- 4. Layout utilities ---------- */
.container{ position: relative; z-index: 5; max-width: 88rem; margin: 0 auto; padding: 0 var(--container-pad); }
.section{ position: relative; padding: var(--space-section) 0; overflow: hidden; }
.section--ink{ background: var(--c-ink); color: var(--c-fg); }
.section--ink-alt{ background: var(--c-ink-alt); color: var(--c-fg); }
.section--cream{ background: var(--c-cream); color: var(--c-ink-text); }
.section--accent{ background: var(--c-lime); color: var(--c-ink-text); }

.section-head{ max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head--split{ display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; max-width: none; flex-wrap: wrap; }

/* ---------- 5. Grain overlay ---------- */
.grain{
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---------- Scroll progress + section dots ---------- */
.scroll-progress{
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: var(--z-progress);
  background: rgba(255,255,255,.06); pointer-events: none;
}
.section--cream ~ .scroll-progress{ background: rgba(0,0,0,.06); }
.scroll-progress span{
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--c-lime), var(--c-coral));
}

.section-dots{
  position: fixed; right: clamp(1rem, 3vw, 2.4rem); top: 50%; transform: translateY(-50%);
  z-index: var(--z-dots); display: flex; flex-direction: column; gap: 1rem;
}
.section-dots button{
  position: relative; width: 10px; height: 10px; padding: 6px; display: flex; align-items: center; justify-content: center;
}
.section-dots button span{
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35);
  transition: background .3s ease, transform .3s ease;
}
.section-dots button.is-active span{ background: var(--c-lime); transform: scale(1.5); }
.section-dots button em{
  position: absolute; right: 140%; top: 50%; transform: translateY(-50%) translateX(6px);
  font-style: normal; font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; white-space: nowrap; opacity: 0; transition: opacity .3s ease, transform .3s ease;
  background: rgba(8,9,11,.85); padding: .3em .7em; border-radius: 3em;
}
.section-dots button:hover em{ opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1100px){ .section-dots{ display: none; } }

/* ---------- 7. Header & nav ---------- */
.header{
  position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-header);
  transition: transform .5s var(--ease-out-expo), background .4s ease, border-color .4s ease, z-index 0s;
  border-bottom: 1px solid transparent;
}
.header.is-solid{ background: rgba(8,9,11,.82); backdrop-filter: blur(8px); border-color: rgba(255,255,255,.08); }
.header.is-hidden{ transform: translateY(-100%); }
.header.menu-open{ z-index: 8500; background: transparent; border-color: transparent; }
.header.menu-open .nav-links, .header.menu-open .header__actions .btn{ opacity: 0; pointer-events: none; }
.header__inner{ display: flex; align-items: center; justify-content: space-between; padding-top: 1.3rem; padding-bottom: 1.3rem; }
.logo{ display: inline-flex; align-items: baseline; gap: .15em; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; }
.logo__reg{ font-size: .55em; color: var(--c-lime); }

.nav-links{ display: flex; gap: clamp(1.2rem, 2.4vw, 2.4rem); transition: opacity .25s ease; }
.nav-links a{ position: relative; font-size: .92rem; padding: .2rem 0; }
.nav-links a span{ position: relative; display: inline-block; }
.nav-links a span::after{
  content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out-expo);
}
.nav-links a:hover span::after{ transform: scaleX(1); transform-origin: left; }

.header__actions{ display: flex; align-items: center; gap: 1.4rem; }
.menu-btn{ display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.menu-btn__lines{ position: relative; width: 22px; height: 14px; display: inline-block; }
.menu-btn__lines i{ position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out-expo), top .35s var(--ease-out-expo); }
.menu-btn__lines i:first-child{ top: 0; }
.menu-btn__lines i:last-child{ top: 100%; }
.menu-btn.is-open .menu-btn__lines i:first-child{ top: 50%; transform: rotate(45deg); }
.menu-btn.is-open .menu-btn__lines i:last-child{ top: 50%; transform: rotate(-45deg); }

@media (max-width: 900px){ .nav-links, .header__actions .btn{ display: none; } }

/* ---------- 8. Menu overlay ---------- */
.menu-overlay{
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--c-ink); color: var(--c-fg);
  clip-path: circle(0% at calc(100% - 3.4rem) 3.4rem);
  transition: clip-path .85s var(--ease-in-out);
  pointer-events: none;
  /* Chrome-only bug: animating clip-path on a large fixed element without a
     promoted compositor layer can leave stale tiles unpainted mid-transition
     (and sometimes after), showing the page underneath through a hard edge
     instead of the circle sweeping cleanly. will-change + a 3D transform
     force Chrome to promote/rasterize the whole shape as one GPU layer
     instead of tiling it, which is the standard fix for this glitch. */
  will-change: clip-path;
  transform: translateZ(0);
}
.menu-overlay.is-open{ clip-path: circle(150% at calc(100% - 3.4rem) 3.4rem); pointer-events: auto; }
.menu-overlay__inner{ height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4rem; flex-wrap: wrap; padding-top: 6rem; padding-bottom: 4rem; }
.menu-overlay__links{ display: flex; flex-direction: column; gap: .3rem; }
.menu-overlay__links a{
  display: flex; align-items: baseline; gap: 1.4rem; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.25; color: var(--c-fg-muted);
  transition: color .4s ease, transform .4s var(--ease-out-expo); transform: translateX(0);
}
.menu-overlay__links a em{ font-style: normal; font-family: var(--font-mono); font-size: .9rem; color: var(--c-lime); }
.menu-overlay__links a:hover{ color: var(--c-fg); transform: translateX(.4em); }
.menu-overlay__side{ display: flex; flex-direction: column; gap: 2.2rem; min-width: 15rem; }
.menu-overlay__block p{ color: var(--c-fg-muted); font-size: .95rem; }
.menu-overlay__email{ font-family: var(--font-display); font-size: 1.3rem; }
.menu-overlay__clock{ font-family: var(--font-mono) !important; color: var(--c-lime) !important; margin-top: .3rem; }
.menu-overlay__social{ display: flex; flex-direction: column; gap: .5rem; }
.menu-overlay__social a{ font-size: .95rem; width: fit-content; border-bottom: 1px solid rgba(255,255,255,.2); }
.menu-overlay__shards{ position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.menu-overlay__shards span{ position: absolute; top: 0; height: 100%; width: 16.6%; border-right: 1px solid rgba(255,255,255,.04); }
.menu-overlay__shards span:nth-child(1){ left: 0%; } .menu-overlay__shards span:nth-child(2){ left: 16.6%; }
.menu-overlay__shards span:nth-child(3){ left: 33.2%; } .menu-overlay__shards span:nth-child(4){ left: 49.8%; }
.menu-overlay__shards span:nth-child(5){ left: 66.4%; } .menu-overlay__shards span:nth-child(6){ left: 83%; }

@media (max-width: 700px){
  .menu-overlay__inner{ flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2.4rem; overflow-y: auto; }
}

/* ---------- 9. Buttons ---------- */
.btn{
  --btn-bg: var(--c-fg); --btn-fg: var(--c-ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.9rem; border-radius: 100px; font-size: .92rem; font-weight: 600;
  background: var(--btn-bg); color: var(--btn-fg); overflow: hidden;
}
.btn--primary{ --btn-bg: var(--c-lime); --btn-fg: var(--c-ink); }
.btn--dark{ --btn-bg: var(--c-ink); --btn-fg: var(--c-fg); }
.btn--ghost{ --btn-bg: transparent; --btn-fg: var(--c-fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.btn--outline{ --btn-bg: transparent; --btn-fg: var(--c-fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.btn--sm{ padding: .7rem 1.3rem; font-size: .82rem; }
.btn__label{ display: inline-flex; flex-direction: column; height: 1.2em; overflow: hidden; }
.btn__label span{ transition: transform .5s var(--ease-out-expo); line-height: 1.2em; }
.btn:hover .btn__label span{ transform: translateY(-100%); }

/* ---------- 10. Hero / marquee ---------- */
.hero{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 8rem; padding-bottom: 6rem; }
.hero__canvas{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .8; }
.hero__inner{ position: relative; z-index: 2; }
.hero__title{ max-width: 60rem; }
.split-line{ display: block; overflow: hidden; }
.split-line__inner{ display: block; will-change: transform; }
.hero__cycle-wrap{ position: relative; display: inline-block; vertical-align: top; }
.hero__cycle{
  position: relative; display: inline-block; height: 1em; overflow: hidden; vertical-align: top;
  color: var(--c-lime); width: 7.4ch; margin-left: .12em;
}
.hero__cycle-word{ position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(60%) rotate(4deg); transition: transform .6s var(--ease-out-expo), opacity .5s ease; white-space: nowrap; }
.hero__cycle-word.is-active{ opacity: 1; transform: translateY(0) rotate(0); animation: cycleTextGlow 2.6s ease-in-out infinite; }
.hero__cycle-word.is-leaving{ opacity: 0; transform: translateY(-60%) rotate(-4deg); }
@keyframes cycleTextGlow{
  0%, 100% { text-shadow: 0 0 16px rgba(214,255,74,.4), 0 0 34px rgba(214,255,74,.18); }
  50% { text-shadow: 0 0 26px rgba(214,255,74,.75), 0 0 52px rgba(214,255,74,.4); }
}
.hero__sub{ max-width: 34rem; margin-top: 1.6rem; font-size: 1.05rem; }
.hero__actions{ display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero__meta{ display: flex; gap: clamp(1.6rem, 4vw, 3.2rem); margin-top: 3.6rem; flex-wrap: wrap; }
.hero__meta li{ display: flex; flex-direction: column; }
.hero__meta strong{ font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.hero__meta span{ font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-fg-muted); margin-top: .2rem; }

.hero__floats{ position: absolute; inset: 0; z-index: 1; }
.hero__float{ position: absolute; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.hero__float.shard-reveal{ position: absolute; }
.hero__float img{ width: 100%; height: 100%; object-fit: cover; }
.hero__float--1{ width: clamp(120px, 12vw, 180px); aspect-ratio: 3/4; top: 16%; right: 8%; }
.hero__float--2{ width: clamp(95px, 9vw, 145px); aspect-ratio: 4/5; bottom: 16%; right: 23%; }
.hero__float--3{ width: clamp(85px, 7.5vw, 125px); aspect-ratio: 4/5; top: 47%; right: 3%; display: none; }
@media (min-width: 1200px){
  .hero__float--3{ display: block; }
}

.hero__particles{ position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero__particles span{
  position: absolute; bottom: -4%; width: 3px; height: 3px; border-radius: 50%;
  background: var(--c-fg); opacity: 0; animation: particleFloat linear infinite;
}
.hero__particles span:nth-child(1){ left: 6%; animation-duration: 13s; animation-delay: 0s; }
.hero__particles span:nth-child(2){ left: 16%; animation-duration: 16s; animation-delay: 1.4s; }
.hero__particles span:nth-child(3){ left: 27%; animation-duration: 11s; animation-delay: 2.8s; }
.hero__particles span:nth-child(4){ left: 38%; animation-duration: 15s; animation-delay: .6s; }
.hero__particles span:nth-child(5){ left: 49%; animation-duration: 12s; animation-delay: 3.6s; }
.hero__particles span:nth-child(6){ left: 58%; animation-duration: 17s; animation-delay: 2s; }
.hero__particles span:nth-child(7){ left: 68%; animation-duration: 10.5s; animation-delay: 4.4s; }
.hero__particles span:nth-child(8){ left: 78%; animation-duration: 14s; animation-delay: 1s; }
.hero__particles span:nth-child(9){ left: 88%; animation-duration: 16.5s; animation-delay: 3.2s; }
.hero__particles span:nth-child(10){ left: 94%; animation-duration: 12.5s; animation-delay: 5s; }
@keyframes particleFloat{
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  8% { opacity: .55; }
  85% { opacity: .35; }
  100% { transform: translateY(-105vh) scale(1); opacity: 0; }
}

.hero__scrollcue{
  position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-fg-muted);
}
.hero__scrollcue-line{ width: 1px; height: 40px; background: linear-gradient(var(--c-fg-muted), transparent); position: relative; overflow: hidden; }
.hero__scrollcue-line::after{ content: ''; position: absolute; top: -40px; left: 0; width: 100%; height: 40px; background: linear-gradient(var(--c-lime), transparent); animation: scrollcue 2s var(--ease-in-out) infinite; }
@keyframes scrollcue{ to{ transform: translateY(80px); } }

@media (max-width: 900px){
  .hero__float--2{ display: none; }
  .hero__float--1{ right: 4%; top: 10%; opacity: .5; }
}

.logos{ padding: 2.6rem 0; background: var(--c-ink-alt); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.logos__label{ text-align: center; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-fg-muted); margin-bottom: 1.6rem; }
.marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track{ display: flex; width: max-content; gap: clamp(2.4rem, 5vw, 5rem); animation: marquee 32s linear infinite; }
.marquee__track span{ font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.8rem); color: var(--c-fg-muted); white-space: nowrap; opacity: .55; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- Shard layer (section background reveal) ---------- */
.shard-layer{ position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.shard-layer span{ position: absolute; top: -25%; height: 150%; width: 12%; background: var(--shard-color, var(--c-ink)); }
.shard-layer span:nth-child(1){ left: -2%; } .shard-layer span:nth-child(2){ left: 8.6%; }
.shard-layer span:nth-child(3){ left: 19.2%; } .shard-layer span:nth-child(4){ left: 29.8%; }
.shard-layer span:nth-child(5){ left: 40.4%; } .shard-layer span:nth-child(6){ left: 51%; }
.shard-layer span:nth-child(7){ left: 61.6%; } .shard-layer span:nth-child(8){ left: 72.2%; }
.shard-layer span:nth-child(9){ left: 82.8%; } .shard-layer span:nth-child(10){ left: 93.4%; }
.shard-layer--from-ink{ --shard-color: var(--c-ink); }
.shard-layer--from-inkalt{ --shard-color: var(--c-ink-alt); }
.shard-layer--from-cream{ --shard-color: var(--c-cream); }
.shard-layer--from-accent{ --shard-color: var(--c-lime); }
.shard-layer--from-process{ --shard-color: var(--c-process); }
.shard-layer--process{ --shard-color: #8B7BC7; }

/* ---------- Media jagged reveal ---------- */
.shard-reveal{
  position: relative; overflow: hidden;
  clip-path: polygon(0 22%, 13% 4%, 27% 17%, 41% 0%, 56% 16%, 70% 3%, 84% 15%, 100% 0%, 100% 100%, 0 100%);
  transition: clip-path 1.2s var(--ease-out-expo);
}
.shard-reveal img{ transition: transform 1.4s var(--ease-out-expo), filter 1.2s ease; transform: scale(1.15); filter: saturate(.3) contrast(1.05); }
.shard-reveal.is-visible{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.shard-reveal.is-visible img{ transform: scale(1); filter: saturate(1) contrast(1); }

/* ---------- 11. About ---------- */
.statement{ font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3.4vw, 2.7rem); line-height: 1.3; letter-spacing: -.01em; max-width: 52rem; color: var(--c-ink-text); }
.statement .word{ opacity: .18; transition: opacity .05s linear; }
.statement .word.is-lit{ opacity: 1; }
.about__grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; margin-top: clamp(3rem, 6vw, 5rem); align-items: start; }
.about__copy p{ font-size: 1.05rem; max-width: 30rem; }
.about__copy .link-arrow{ margin-top: 1.6rem; }
.about__stats{ display: flex; gap: 2.4rem; margin-top: 2.2rem; }
.about__stats strong{ display: block; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.8rem); }
.about__stats span{ font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-muted); }
.about__image{ grid-column: 2; grid-row: 1 / span 2; border-radius: var(--radius); aspect-ratio: 4/3.2; }
.about__image img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px){
  .about__grid{ grid-template-columns: 1fr; }
  .about__image{ grid-column: 1; grid-row: auto; order: -1; }
}

/* ---------- 12. Services ---------- */
.services-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); overflow: hidden; }
.service-card{ position: relative; background: var(--c-ink); padding: clamp(1.8rem, 3vw, 2.6rem); min-height: 15rem; display: flex; flex-direction: column; transform-style: preserve-3d; transition: background .4s ease; }
.service-card:hover{ background: var(--c-ink-soft); }
.service-card__num{ font-family: var(--font-mono); font-size: .78rem; color: var(--c-lime); }
.service-card h3{ margin-top: 1.6rem; }
.service-card p{ margin-top: .8rem; font-size: .92rem; max-width: 22rem; }
.service-card__icon{ margin-top: auto; align-self: flex-end; width: 2.6rem; height: 2.6rem; color: var(--c-fg-muted); transition: color .4s ease, transform .5s var(--ease-out-expo); }
.service-card__icon svg{ width: 100%; height: 100%; }
.service-card:hover .service-card__icon{ color: var(--c-lime); transform: rotate(20deg) scale(1.1); }
@media (max-width: 900px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .services-grid{ grid-template-columns: 1fr; } }

/* ---------- 13. Work ---------- */
.work-filters{ display: flex; gap: .5rem; flex-wrap: wrap; }
.work-filters button{
  padding: .55rem 1.2rem; border-radius: 100px; font-size: .82rem; font-family: var(--font-mono);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); color: var(--c-fg-muted); transition: all .35s var(--ease-out-expo);
}
.work-filters button.is-active, .work-filters button:hover{ background: var(--c-lime); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-lime); }

.work-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3rem; }
.work-card{ transition: opacity .5s ease, transform .5s ease; }
.work-card.is-hidden{ display: none; }
.work-card__media{ position: relative; display: block; width: 100%; aspect-ratio: 4/5; border-radius: var(--radius); background: var(--c-ink-soft); }
.work-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.work-card__info{ padding-top: 1rem; display: flex; flex-direction: column; gap: .25rem; }
.work-card__info p{ font-size: .88rem; }
.tag{ font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-fg-muted); margin-top: .3rem; }
.work-card__play{
  position: absolute; inset: 0; margin: auto; width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: rgba(8,9,11,.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
  color: var(--c-fg); transition: transform .4s var(--ease-out-expo), background .4s ease;
}
.work-card__play svg{ width: 1.4rem; height: 1.4rem; margin-left: 3px; }
.work-card__media:hover .work-card__play{ transform: scale(1.15); background: var(--c-lime); color: var(--c-ink); }

.ig-card{ display: block; }
.ig-card__head{ display: flex; align-items: center; gap: .6rem; font-size: .85rem; margin-bottom: .7rem; }
.ig-card__avatar{ width: 1.7rem; height: 1.7rem; border-radius: 50%; background: linear-gradient(135deg, var(--c-coral), var(--c-violet)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: #fff; }
.ig-card__logo{ width: 1.1rem; height: 1.1rem; margin-left: auto; opacity: .6; }
.ig-card__caption{ font-size: .86rem; margin-top: .7rem; max-width: 26rem; }

.work-more{ margin-top: 3rem; text-align: center; }

@media (max-width: 1024px){ .work-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .work-grid{ grid-template-columns: 1fr; } .section-head--split{ align-items: flex-start; flex-direction: column; } }

/* ---------- 14. Process ---------- */
.section--process{ background: radial-gradient(120% 100% at 20% 0%, #1b1330 0%, var(--c-process) 55%, #0c0a14 100%); color: var(--c-fg); }
.process__head{ margin-bottom: clamp(2rem, 6vw, 4rem); }
.process__pin{ height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--container-pad); }
.process__progress{ max-width: 88rem; margin: 0 auto; width: 100%; height: 2px; background: rgba(255,255,255,.12); margin-bottom: clamp(2rem, 6vw, 4rem); }
.process__progress span{ display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--c-violet), var(--c-lime)); }
.process__steps{ position: relative; max-width: 88rem; margin: 0 auto; width: 100%; height: 40vh; min-height: 16rem; }
.process-step{ position: absolute; inset: 0; opacity: 0; transform: translateY(50px); transition: opacity .6s ease, transform .7s var(--ease-out-expo); pointer-events: none; display: flex; flex-direction: column; justify-content: center; }
.process-step.is-active{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.process-step__num{ font-family: var(--font-mono); font-size: 1rem; color: var(--c-lime); }
.process-step h3{ font-size: clamp(2rem, 5vw, 3.6rem); margin-top: 1rem; }
.process-step p{ max-width: 34rem; margin-top: 1.2rem; font-size: 1.05rem; }

@media (max-width: 900px){
  .section--process{ min-height: auto !important; }
  .process__pin{ height: auto; position: static !important; transform: none !important; padding-top: 1rem; }
  .process__steps{ height: auto; position: static; }
  .process-step{ position: static; opacity: 1; transform: none; pointer-events: auto; padding: 2rem 0; border-top: 1px solid rgba(255,255,255,.1); }
  .process-step:first-child{ border-top: none; }
}

/* ---------- 15. Stats / Testimonials ---------- */
.stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.stat{ text-align: center; padding: 2rem 1rem; border-right: 1px solid rgba(0,0,0,.1); }
.stat:last-child{ border-right: none; }
.stat strong{ display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; }
.stat span{ display: block; margin-top: .8rem; font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-muted); }
@media (max-width: 760px){ .stats-grid{ grid-template-columns: repeat(2, 1fr); } .stat{ border-right: none; border-bottom: 1px solid rgba(0,0,0,.1); } }

.testimonials{ position: relative; margin-top: 1rem; }
.testimonials__track{ display: flex; transition: transform .7s var(--ease-out-expo); cursor: grab; }
.testimonials__track:active{ cursor: grabbing; }
.testimonial{ flex: 0 0 100%; max-width: 100%; padding-right: 2rem; }
.testimonial p{ font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.35; color: var(--c-fg); letter-spacing: -.01em; }
.testimonial footer{ display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; font-family: var(--font-mono); font-size: .82rem; }
.testimonial footer strong{ color: var(--c-fg); }
.testimonial footer span{ color: var(--c-fg-muted); }
.testimonials__controls{ display: flex; align-items: center; gap: 1.2rem; margin-top: 2.4rem; }
.testimonials__controls button{ width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; transition: background .3s ease; }
.testimonials__controls button:hover{ background: var(--c-lime); color: var(--c-ink); }
.testimonials__controls svg{ width: 1.1rem; height: 1.1rem; }
.testimonials__dots{ display: flex; gap: .5rem; }
.testimonials__dots span{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .3s ease, transform .3s ease; }
.testimonials__dots span.is-active{ background: var(--c-lime); transform: scale(1.4); }

/* ---------- 16. Team / CTA / Footer ---------- */
.team-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.team-card h3{ margin-top: 1rem; font-size: 1.05rem; }
.team-card p{ font-size: .82rem; margin-top: .2rem; }
.team-card__media{ border-radius: var(--radius); aspect-ratio: 3/3.7; }
.team-card__media img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s ease, transform .6s var(--ease-out-expo); }
.team-card:hover .team-card__media img{ filter: grayscale(0); transform: scale(1.04); }
@media (max-width: 1024px){ .team-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } }

.cta__head{ max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cta__head p{ margin-top: 1rem; font-size: 1.05rem; }

/* Decorative layer: floating blobs, cursor spotlight, rotating badge */
.cta__decor{ position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.cta__blob{ position: absolute; border-radius: 50%; filter: blur(70px); animation: ctaBlobDrift 16s ease-in-out infinite; }
.cta__blob--1{ width: 24rem; height: 24rem; top: -7rem; left: -5rem; background: var(--c-violet); opacity: .3; }
.cta__blob--2{ width: 19rem; height: 19rem; bottom: -6rem; right: 10%; background: var(--c-coral); opacity: .28; animation-delay: -5s; }
.cta__blob--3{ width: 15rem; height: 15rem; top: 38%; right: -4rem; background: var(--c-ink); opacity: .1; animation-delay: -10s; }
@keyframes ctaBlobDrift{
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(1.6rem, -1.4rem) scale(1.08); }
  66% { transform: translate(-1.4rem, 1.6rem) scale(.94); }
}
.cta__spotlight{
  position: absolute; width: 34rem; height: 34rem; border-radius: 50%; left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 68%);
  mix-blend-mode: overlay; opacity: 0; transition: opacity .5s ease;
}
.cta__spotlight.is-active{ opacity: 1; }

.cta__badge{
  position: absolute; top: clamp(1.4rem, 4vw, 3rem); right: var(--container-pad);
  width: clamp(96px, 11vw, 140px); height: clamp(96px, 11vw, 140px); color: var(--c-ink-text);
}
.cta__badge-ring{ width: 100%; height: 100%; display: block; animation: ctaBadgeSpin 18s linear infinite; }
.cta__badge-ring text{ fill: var(--c-ink-text); text-transform: uppercase; opacity: .75; }
.cta__badge-center{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 36%; height: 36%; border-radius: 50%; background: var(--c-ink); color: var(--c-lime);
  display: flex; align-items: center; justify-content: center;
}
.cta__badge-center svg{ width: 46%; height: 46%; }
@keyframes ctaBadgeSpin{ to { transform: rotate(360deg); } }
@media (max-width: 760px){ .cta__badge{ display: none; } }

.cta__grid{ display: grid; grid-template-columns: 1.3fr .7fr; gap: 4rem; }
.field-row{ display: flex; gap: 2rem; }
.field-row .field{ flex: 1; }
.field{ position: relative; margin-bottom: 1.6rem; }
.field input, .field textarea, .field select{
  width: 100%; border-bottom: 1px solid rgba(14,15,18,.25); padding: 1rem 0 .7rem; font-size: 1rem; background: transparent;
}
.field select{ appearance: none; -webkit-appearance: none; }
.field textarea{ resize: vertical; min-height: 4rem; }
.field label{ position: absolute; left: 0; top: 1rem; opacity: .55; transition: transform .3s var(--ease-out-expo), font-size .3s ease, opacity .3s ease; pointer-events: none; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  transform: translateY(-1rem); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8;
}
.field__select-label{ display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .55; margin-bottom: .3rem; }
.field--select label.field__select-label{ position: static; top: auto; left: auto; transform: none; }
.field--select{ position: relative; }
.field--select select{ padding-right: 1.6rem; }
.field__chevron{ position: absolute; right: 0; bottom: .95rem; width: 1rem; height: 1rem; opacity: .45; pointer-events: none; }
.field input:focus, .field textarea:focus, .field select:focus{ outline: none; border-color: var(--c-ink-text); }
.field--hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cta__form-status{ margin-top: 1rem; font-family: var(--font-mono); font-size: .82rem; min-height: 1.2em; }
.cta__form .btn{ margin-top: 1rem; }

.cta__info{ display: flex; flex-direction: column; gap: 1.8rem; padding-top: .5rem; }
.cta__info a, .cta__info p{ font-family: var(--font-display); font-size: 1.15rem; margin-top: .3rem; }
.cta__social{ display: flex; gap: 1.2rem; margin-top: .5rem; }
.cta__social a{ font-family: var(--font-mono) !important; font-size: .85rem !important; border-bottom: 1px solid rgba(14,15,18,.3); width: fit-content; }

@media (max-width: 900px){
  .cta__grid{ grid-template-columns: 1fr; gap: 2.4rem; }
  .field-row{ flex-direction: column; gap: 0; }
}

.footer{ position: relative; background: var(--c-ink); padding: clamp(4rem, 8vw, 7rem) 0 2rem; overflow: hidden; }
.footer__wordmark{
  display: block; font-family: var(--font-display); font-weight: 700; text-align: center;
  font-size: clamp(3.5rem, 16vw, 12rem); line-height: .85; letter-spacing: -.03em; margin-bottom: clamp(2.5rem, 6vw, 5rem);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--c-lime) 0%, var(--c-violet) 35%, var(--c-fg) 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 44rem; margin: 0 auto; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer__col{ display: flex; flex-direction: column; gap: .7rem; }
.footer__col a{ font-size: .92rem; color: var(--c-fg-muted); transition: color .3s ease; width: fit-content; }
.footer__col a:hover{ color: var(--c-fg); }
.footer__bottom{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-size: .82rem; color: var(--c-fg-muted); }
.footer__clock{ font-family: var(--font-mono); }
.footer__totop{ display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .78rem; color: var(--c-fg); }
.footer__totop svg{ width: 1rem; height: 1rem; transition: transform .3s var(--ease-out-expo); }
.footer__totop:hover svg{ transform: translateY(-3px); }

@media (max-width: 700px){
  .footer__grid{ grid-template-columns: repeat(2, 1fr); }
  .footer__bottom{ flex-direction: column; align-items: flex-start; }
}

/* ---------- 17. Modal ---------- */
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.modal.is-open{ opacity: 1; pointer-events: auto; }
.modal__backdrop{ position: absolute; inset: 0; background: rgba(6,6,8,.9); backdrop-filter: blur(10px); }
.modal__body{ position: relative; width: min(90vw, 1100px); aspect-ratio: 16/9; transform: scale(.94); transition: transform .45s var(--ease-out-expo); }
.modal.is-open .modal__body{ transform: scale(1); }
.modal__frame{ width: 100%; height: 100%; background: #000; border-radius: .5rem; overflow: hidden; }
.modal__frame iframe{ width: 100%; height: 100%; border: 0; }
.modal__close{ position: absolute; top: -3.2rem; right: 0; width: 2.6rem; height: 2.6rem; color: var(--c-fg); }
.modal__close svg{ width: 100%; height: 100%; }

/* ---------- Reveal utilities ---------- */
.reveal-up{ opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo); }
.reveal-up.is-visible{ opacity: 1; transform: translateY(0); }
[data-tilt]{ transition: transform .35s var(--ease-out-quad); }

/* Stagger children of grids as they become visible */
.services-grid .service-card:nth-child(2){ transition-delay: .06s; }
.services-grid .service-card:nth-child(3){ transition-delay: .12s; }
.services-grid .service-card:nth-child(4){ transition-delay: .18s; }
.services-grid .service-card:nth-child(5){ transition-delay: .24s; }
.services-grid .service-card:nth-child(6){ transition-delay: .3s; }
.work-grid .work-card:nth-child(2){ transition-delay: .05s; }
.work-grid .work-card:nth-child(3){ transition-delay: .1s; }
.team-grid .team-card:nth-child(2){ transition-delay: .05s; }
.team-grid .team-card:nth-child(3){ transition-delay: .1s; }
.team-grid .team-card:nth-child(4){ transition-delay: .15s; }
.team-grid .team-card:nth-child(5){ transition-delay: .2s; }
.team-grid .team-card:nth-child(6){ transition-delay: .25s; }

/* ---------- 18. Responsive & accessibility ---------- */
@media (max-width: 1200px){ .team-grid{ grid-template-columns: repeat(3,1fr); } }

@media (max-width: 620px){
  .hero{ padding-top: 7rem; }
  .cta__grid{ gap: 2rem; }
  .footer__grid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .grain{ display: none !important; }
}

/* Graceful degradation if GSAP/CDN scripts fail to load: never leave content stuck hidden */
.no-gsap .reveal-up, .no-gsap .shard-reveal, .no-gsap .work-card,
.no-gsap .process-step, .no-gsap .split-line__inner{
  opacity: 1 !important; transform: none !important; clip-path: none !important; pointer-events: auto !important;
}
.no-gsap .header{ opacity: 1 !important; visibility: visible !important; }
.no-gsap .section-dots, .no-gsap .scroll-progress{ display: none !important; }

/* Custom scrollbar (webkit) */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--c-ink); }
::-webkit-scrollbar-thumb{ background: var(--c-ink-soft); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--c-lime); }

:focus-visible{ outline: 2px solid var(--c-lime); outline-offset: 3px; }