/* ============ TOKENS ============ */
:root{
  --bg: #0b0b0d;
  --bg-alt: #121214;
  --card: #0f0f11;
  --ink: #f4f2ee;
  --ink-dim: #a8a6a2;
  --accent: #c6ff3d;
  --accent-ink: #0b0b0d;
  --teal: #2dd4bf;
  --line: rgba(244,242,238,0.1);
  --glass: rgba(18,18,20,0.55);
  --cream: #f4f2ee;
  --radius: 14px;
  --radius-lg: 24px;
  --ff-display: 'Space Grotesk', system-ui, sans-serif;
  --ff-text: 'Geist', system-ui, sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:100px; background:var(--bg); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal, .stagger-item, .section-divider::before{ opacity:1 !important; transform:none !important; }
  .hero-glow, .cursor-label{ display:none !important; }
}
body{
  background:transparent;
  color:var(--ink);
  font-family:var(--ff-text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--accent); color:var(--accent-ink); }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
.hl{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ============ AMBIENT BACKGROUND (fixed, behind everything) ============ */
.ambient{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.orb{
  position:absolute; border-radius:50%;
  translate:0 calc(var(--sy, 0) * var(--depth, 0) * 1px);
  will-change:transform;
}
.orb-1{
  --depth:-.08;
  width:80vmax; height:80vmax; left:-28vmax; top:-30vmax;
  background:radial-gradient(circle, rgba(198,255,61,.11) 0%, rgba(198,255,61,.04) 35%, transparent 65%);
  animation:drift-a 34s ease-in-out infinite alternate;
}
.orb-2{
  --depth:-.04;
  width:70vmax; height:70vmax; right:-30vmax; top:20vh;
  background:radial-gradient(circle, rgba(45,212,191,.08) 0%, rgba(45,212,191,.03) 38%, transparent 66%);
  animation:drift-b 42s ease-in-out infinite alternate;
}
.orb-3{
  --depth:-.12;
  width:60vmax; height:60vmax; left:15vw; top:70vh;
  background:radial-gradient(circle, rgba(150,200,40,.07) 0%, rgba(150,200,40,.025) 40%, transparent 66%);
  animation:drift-c 48s ease-in-out infinite alternate;
}
@keyframes drift-a{ to{ transform:translate(14vw, 18vh) scale(1.12); } }
@keyframes drift-b{ to{ transform:translate(-18vw, -12vh) scale(.9); } }
@keyframes drift-c{ to{ transform:translate(-12vw, -30vh) scale(1.15); } }
.ambient-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(244,242,238,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(244,242,238,.028) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 85%);
}

/* Film grain: dithers every soft gradient on the page so nothing bands */
.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:10010;
  background:url('assets/grain.png') repeat;
  /* Grain stays put and only breathes in strength: enough life to feel like film,
     no visible crawling. Still dithers every gradient so nothing bands. */
  animation:grain-breathe 4.5s ease-in-out infinite alternate;
}
@keyframes grain-breathe{
  from{ opacity:.7; } to{ opacity:1; }
}

.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1001;
  background:var(--accent); transform-origin:0 50%; transform:scaleX(var(--p, 0));
  box-shadow:0 0 12px rgba(198,255,61,.6);
}

/* "View" bubble that follows the cursor over work tiles (fine pointers only) */
.cursor-label{
  position:fixed; top:0; left:0; z-index:9000; pointer-events:none;
  width:86px; height:86px; margin:-43px 0 0 -43px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--ff-display); font-weight:600; font-size:14px;
  transform:translate(var(--cx, -200px), var(--cy, -200px)) scale(0);
  transition:transform .35s var(--ease);
}
.cursor-label.show{ transform:translate(var(--cx), var(--cy)) scale(1); }
@media (hover:none){ .cursor-label{ display:none; } }

/* ============ PROMO POPUP ============ */
.promo-overlay{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(5,5,6,.75); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s .4s;
}
.promo-overlay.open{ opacity:1; visibility:visible; transition:opacity .4s var(--ease); }
.promo-modal{
  position:relative; width:100%; max-width:440px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius);
  padding:44px 36px 36px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(198,255,61,.08);
  transform:translateY(24px) scale(.97); transition:transform .45s var(--ease);
}
.promo-overlay.open .promo-modal{ transform:translateY(0) scale(1); }
.promo-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--ink-dim);
  font-size:20px; line-height:1; cursor:pointer; transition:color .25s, border-color .25s;
}
.promo-close:hover{ color:var(--ink); border-color:var(--ink-dim); }
.promo-eyebrow{
  font-family:var(--ff-display); font-weight:600; font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.promo-title{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(24px,4vw,32px);
  letter-spacing:-.01em; margin-bottom:14px; line-height:1.2;
}
.promo-body{ color:var(--ink-dim); font-size:15px; line-height:1.6; margin-bottom:28px; }
.promo-cta{ margin-bottom:14px; }
.promo-dismiss{
  background:none; border:none; color:var(--ink-dim); font-size:13px;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; transition:color .25s;
}
.promo-dismiss:hover{ color:var(--ink); }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-display); font-weight:600; font-size:15px;
  padding:14px 28px; border-radius:100px; border:1px solid transparent;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  cursor:pointer; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 0 rgba(198,255,61,0); }
.btn-primary:hover{ background:#daff70; box-shadow:0 10px 40px -8px rgba(198,255,61,.55); }
.btn-ghost{ background:rgba(244,242,238,.03); color:var(--ink); border-color:var(--line); backdrop-filter:blur(8px); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-small{ padding:10px 20px; font-size:13px; }
.btn-large{ padding:20px 40px; font-size:17px; }
.btn-full{ width:100%; }
.btn span{ transition:transform .3s var(--ease); }
.btn:hover span{ transform:translateX(4px); }
/* Magnetic buttons: translate is driven from script.js */
[data-magnetic]{ translate:var(--mx, 0) var(--my, 0); transition:translate .35s var(--ease), transform .3s var(--ease), background .3s, box-shadow .3s; }

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(11,11,13,0.72);
  backdrop-filter:blur(16px) saturate(1.3);
  padding:14px 0;
  border-color:var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--ff-display); font-weight:700; }
.logo-mark{
  width:34px; height:34px; border-radius:9px; background:var(--accent);
  padding:6px; object-fit:contain;
}
.logo-word{ font-size:16px; letter-spacing:.01em; }

.main-nav{ display:flex; gap:32px; font-size:14.5px; font-weight:500; }
.main-nav > a{ position:relative; color:var(--ink-dim); transition:color .25s; }
.main-nav > a:hover, .main-nav > a.active{ color:var(--ink); }
.main-nav > a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--accent);
  transition:width .3s var(--ease);
}
.main-nav > a:hover::after, .main-nav > a.active::after{ width:100%; }
.nav-extra, .nav-backdrop{ display:none; }

.skip-link{
  position:fixed; top:12px; left:12px; z-index:10002; padding:10px 18px; border-radius:100px;
  background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:14px;
  transform:translateY(-160%); transition:transform .3s var(--ease);
}
.skip-link:focus{ transform:none; }

.header-cta{ flex-shrink:0; }
.nav-toggle{ display:none; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:120px; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 28% 18%, rgba(198,255,61,0.13), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 85%, rgba(45,212,191,0.06), transparent 60%);
}
.hero-scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 52% at 50% 52%, rgba(11,11,13,.9) 0%, rgba(11,11,13,.78) 55%, rgba(11,11,13,.58) 100%),
    linear-gradient(180deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,0) 24%, rgba(11,11,13,0) 68%, var(--bg) 100%);
}
/* Cursor-following glow: fine-pointer devices only, gated in script.js */
.hero-glow{
  position:absolute; z-index:0; top:0; left:0; width:520px; height:520px; margin:-260px;
  border-radius:50%; pointer-events:none; opacity:0; filter:blur(30px);
  background:radial-gradient(circle, rgba(198,255,61,.16), transparent 70%);
  transform:translate(var(--x,50vw), var(--y,50vh)); transition:opacity .5s var(--ease);
}
.hero-glow.active{ opacity:1; }
/* Future showreel video: hidden until real markup/footage is added (see index.html comment) */
.hero-video{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .hero-video{ display:none; } }
.hero-inner{ position:relative; z-index:1; max-width:900px; margin:0 auto; text-align:center; }
.eyebrow{
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.12em;
  font-size:12.5px; color:var(--accent); font-weight:600; margin-bottom:22px;
}
.hero-title{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(42px, 8vw, 92px); line-height:1.02; letter-spacing:-.02em;
  margin-bottom:26px;
}

/* ============ STAGGERED WORD/PHRASE REVEAL ============ */
.stagger-item{
  display:inline-block; opacity:0; transform:translateY(.35em);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.stagger.in-view .stagger-item{ opacity:1; transform:translateY(0); }
.hero-sub{
  font-size:clamp(16px, 2vw, 19px); color:var(--ink-dim); max-width:560px; margin:0 auto 40px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  width:24px; height:38px; border:1px solid var(--line); border-radius:100px;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--accent);
  animation:scrollcue 1.8s infinite;
}
@keyframes scrollcue{
  0%{ opacity:1; top:8px; } 80%{ opacity:0; top:22px; } 100%{ opacity:0; top:22px; }
}

/* ============ MARQUEE ============ */
.marquee-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:24px 0; background:rgba(18,18,20,.6); backdrop-filter:blur(8px);
}
.marquee-track{
  display:flex; align-items:center; gap:32px; white-space:nowrap; width:max-content;
  font-family:var(--ff-display); font-weight:600; font-size:15px; letter-spacing:.08em;
  color:var(--ink); animation:marquee 36s linear infinite;
}
.marquee-track span:nth-child(even){ color:var(--accent); font-size:12px; }
@keyframes marquee{
  from{ transform:translateX(0); } to{ transform:translateX(-50%); }
}

/* ============ SHARED SECTION BITS ============ */
section{ position:relative; isolation:isolate; overflow-x:clip; }
.section-glow{
  position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  width:70vw; height:70vw; max-width:1100px; max-height:1100px;
  background:radial-gradient(circle, rgba(198,255,61,.075) 0%, rgba(198,255,61,.025) 38%, transparent 66%);
}
.glow-left{ left:-30vw; top:-10%; }
.glow-right{ right:-30vw; top:0; background:radial-gradient(circle, rgba(45,212,191,.07) 0%, rgba(45,212,191,.025) 38%, transparent 66%); }
.glow-center{ left:50%; top:10%; transform:translateX(-50%); }

.section-tag{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ff-display); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:24px;
}
.tag-num{
  width:28px; height:28px; border-radius:50%; border:1px solid rgba(198,255,61,.35);
  display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--accent);
}
.section-title, .about-copy h2, .services-title, .work-head h2, .testimonials h2{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(30px,4.4vw,54px);
  line-height:1.06; letter-spacing:-.025em;
}

/* ============ ABOUT ============ */
.about{ padding:150px 0 130px; }
.about-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center;
}
.about-copy h2{ max-width:620px; margin-bottom:30px; }
.about-copy h2 .stagger-item{ display:block; }
.about-copy p{ max-width:540px; color:var(--ink-dim); font-size:17px; margin-bottom:18px; }

.about-visual{ position:relative; height:600px; }
.about-photo{ position:absolute; overflow:hidden; border-radius:var(--radius-lg); background:var(--bg-alt); }
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-photo-main{
  right:0; top:0; width:76%; height:88%;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8), 0 0 0 1px var(--line);
}
.about-photo-main::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, transparent 50%, rgba(11,11,13,.55));
}
.about-photo-float{
  left:0; bottom:0; width:44%; aspect-ratio:4/5;
  border:6px solid var(--bg);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
}
.about-badge{
  position:absolute; left:8%; top:8%; width:128px; height:128px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(11,11,13,.7); backdrop-filter:blur(10px);
  border:1px solid var(--line);
}
.badge-ring{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); animation:spin 22s linear infinite; }
.badge-ring text{ fill:var(--ink); font-family:var(--ff-display); font-size:11.2px; font-weight:600; letter-spacing:.18em; }
.badge-core{
  width:46px; height:46px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-weight:700; font-size:14px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.about-pillars{
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px;
}
.pillar{
  position:relative; overflow:hidden;
  padding:30px 28px 28px; border-radius:var(--radius-lg);
  background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(12px);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.pillar:hover{ border-color:rgba(198,255,61,.35); transform:translateY(-4px); }
.about-pillars .pillar.reveal:nth-child(2){ transition-delay:.1s; }
.about-pillars .pillar.reveal:nth-child(3){ transition-delay:.2s; }
.pillar-num{
  display:block; font-family:var(--ff-display); font-weight:700; font-size:52px; line-height:1;
  letter-spacing:-.03em; margin-bottom:22px;
  color:transparent; -webkit-text-stroke:1px rgba(198,255,61,.7);
}
.pillar h3{ font-family:var(--ff-display); font-size:18px; margin-bottom:8px; }
.pillar p{ font-size:14.5px; color:var(--ink-dim); margin:0; }

/* ============ SERVICES ============ */
.services{ padding:130px 0; }
.services-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap;
  margin-bottom:56px;
}
.services-lede{ max-width:380px; color:var(--ink-dim); font-size:16px; }

/* The 1px gaps between cards light up under the cursor (--gx/--gy set in script.js) */
.services-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:1px;
  border-radius:var(--radius-lg); overflow:hidden;
  background:
    radial-gradient(520px circle at var(--gx, -999px) var(--gy, -999px), rgba(198,255,61,.65), transparent 45%),
    var(--line);
}
.service-card{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--card); padding:40px 28px 36px; min-height:460px;
  display:flex; flex-direction:column;
}
.service-card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--cx, 50%) var(--cy, 50%), rgba(198,255,61,.09), transparent 45%);
}
.service-card:hover::before{ opacity:1; }
.service-photo{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  opacity:.4; transform:scale(1.06); filter:grayscale(1) brightness(.8);
  transition:opacity .7s var(--ease), transform 1.2s var(--ease), filter .7s var(--ease);
}
.service-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,15,17,.55) 0%, rgba(15,15,17,.88) 55%, var(--card) 100%);
}
.service-card:hover .service-photo{ opacity:1; transform:scale(1); filter:grayscale(0) brightness(1); }
.services-grid .service-card.reveal:nth-child(2){ transition-delay:.1s; }
.services-grid .service-card.reveal:nth-child(3){ transition-delay:.2s; }
.services-grid .service-card.reveal:nth-child(4){ transition-delay:.3s; }
.service-num{
  position:absolute; top:26px; right:30px;
  font-family:var(--ff-display); font-weight:700; font-size:64px; line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(244,242,238,.14);
  transition:-webkit-text-stroke-color .4s var(--ease), transform .6s var(--ease);
}
.service-card:hover .service-num{ -webkit-text-stroke-color:rgba(198,255,61,.8); transform:translateY(-4px); }
.service-icon{
  width:56px; height:56px; color:var(--accent); padding:12px;
  border-radius:16px; border:1px solid rgba(198,255,61,.25); background:rgba(198,255,61,.06);
}
.service-icon svg{ width:100%; height:100%; }
.service-card h3{ font-family:var(--ff-display); font-size:22px; letter-spacing:-.01em; margin:56px 0 14px; color:var(--ink); }
.service-card p{ color:var(--ink-dim); font-size:15px; margin-bottom:22px; transition:color .4s; }
.service-card:hover p{ color:#cfcdc8; }
.service-list{ display:flex; flex-direction:column; gap:9px; padding-top:20px; margin-top:auto; border-top:1px solid var(--line); }
.service-list li{
  font-size:13.5px; color:var(--ink-dim); padding-left:18px; position:relative;
}
.service-list li::before{
  content:''; position:absolute; left:0; top:9px; width:8px; height:1px; background:var(--accent);
}

/* ============ WORK (bento) ============ */
.work{ padding:130px 0; }
.work-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:52px; }
.work-note{ color:var(--ink-dim); font-size:15px; text-align:right; }
.work-note span{ font-size:13px; opacity:.7; }

.work-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(190px, 19vw, 260px); gap:16px;
  grid-template-areas:
    "a a b c"
    "a a d c"
    "e f f g"
    "e h h g";
}
.tile-aerial{ grid-area:a; } .tile-automotive{ grid-area:b; } .tile-architecture{ grid-area:c; }
.tile-food{ grid-area:d; } .tile-sport{ grid-area:e; } .tile-nature{ grid-area:f; }
.tile-people{ grid-area:g; } .tile-products{ grid-area:h; }

.work-grid{ perspective:1400px; --ramp:cubic-bezier(.78,0,.12,1); }
/* Tiles float up toward the viewer on hover and overlap their neighbours.
   Lift (translate + scale) runs on a speed-ramp curve: slow start, fast burst, long soft landing.
   The cursor tilt (--tx/--ty, -0.5..0.5, from script.js) lives on `transform` with a quicker timing
   so it stays responsive, and the stacked shadow slides opposite the tilt. */
.work-tile{
  --tx:0; --ty:0; --lift:1.12; --rise:-28px;
  position:relative; z-index:0; overflow:hidden; display:block; width:100%; height:100%;
  border:0; padding:0; text-align:left; cursor:pointer;
  border-radius:var(--radius-lg); background:var(--bg-alt);
  box-shadow:0 0 0 1px var(--line), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(198,255,61,0);
  translate:0 0; scale:1;
  will-change:transform, translate, scale;
}
/* .work-grid prefix outranks .reveal, which also animates transform/transition on these tiles */
.work-grid .work-tile{
  transition:
    opacity .8s var(--ease), translate .6s var(--ramp), scale .6s var(--ramp), transform .6s var(--ease),
    box-shadow .6s var(--ramp), filter .5s var(--ease), z-index 0s .6s;
}
.tile-aerial{ --lift:1.05; --rise:-20px; }
.work-tile::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:radial-gradient(520px circle at var(--px, 50%) var(--py, 30%), rgba(255,255,255,.18), transparent 42%);
  opacity:0; transition:opacity .5s var(--ease);
}
.has-cursor-label .work-tile{ cursor:none; }
.work-tile::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,0) 60%);
  transition:opacity .5s var(--ease);
}
.work-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), opacity 2.2s ease-in-out;
}
.work-fade-img{ opacity:0; }
.work-fade-img.active{ opacity:1; z-index:1; }
@media (hover:hover){
  .work-grid .work-tile:hover{
    z-index:5;
    translate:0 var(--rise); scale:var(--lift);
    transform:rotateX(calc(var(--ty) * 10deg)) rotateY(calc(var(--tx) * 12deg));
    box-shadow:
      0 0 0 1px rgba(198,255,61,.6),
      calc(var(--tx) * -16px) calc(14px + var(--ty) * 16px) 22px -4px rgba(0,0,0,.6),
      calc(var(--tx) * -34px) calc(44px + var(--ty) * 34px) 70px -10px rgba(0,0,0,.8),
      calc(var(--tx) * -60px) calc(96px + var(--ty) * 60px) 150px -24px rgba(0,0,0,.95),
      0 0 70px -10px rgba(198,255,61,.3);
    transition:
      opacity .8s var(--ease), translate .75s var(--ramp), scale .75s var(--ramp), transform .25s ease-out,
      box-shadow .75s var(--ramp), filter .5s var(--ease), z-index 0s;
  }
  .work-tile:hover::before{ opacity:1; }
  .work-tile:hover img{ transform:scale(1.06); }
  /* Everything else sinks back so the lifted tile owns the spotlight */
  .work-grid:has(.work-tile:hover) .work-tile:not(:hover){ filter:brightness(.5) saturate(.75); scale:.97; }
}
.work-meta{
  position:absolute; left:24px; right:24px; bottom:22px; z-index:2;
  display:flex; flex-direction:column; gap:2px; color:#fff;
}
.work-idx{ font-family:var(--ff-display); font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.1em; }
.work-cat{
  font-family:var(--ff-display); font-weight:600; font-size:20px; letter-spacing:-.01em;
  transition:transform .5s var(--ease);
}
.tile-aerial .work-cat{ font-size:clamp(24px, 2.6vw, 34px); }
.work-count{
  font-size:13px; color:rgba(255,255,255,.7);
  max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .5s var(--ease);
}
.work-tile:hover .work-count, .work-tile:focus-visible .work-count{ max-height:24px; opacity:1; }
.work-arrow{
  position:absolute; top:16px; right:16px; z-index:2;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff;
  background:rgba(11,11,13,.45); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18);
  transition:background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease), border-color .4s;
}
.work-tile:hover .work-arrow{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:rotate(45deg); }


/* ============ WEB DESIGN / CASE STUDY ============ */
.web{ padding:130px 0; }
.glow-gold{ right:-30vw; top:15%; background:radial-gradient(circle, rgba(201,167,74,.09) 0%, rgba(201,167,74,.03) 38%, transparent 66%); }
.web-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:52px;
}
.web-head h2{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(30px,4.4vw,54px);
  line-height:1.06; letter-spacing:-.025em; max-width:640px;
}
.web-lede{ max-width:400px; color:var(--ink-dim); font-size:16px; }

.case{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; align-items:center;
  padding:52px; border-radius:32px;
  background:linear-gradient(155deg, rgba(32,29,20,.75), rgba(14,14,16,.75));
  border:1px solid var(--line); backdrop-filter:blur(14px);
  box-shadow:0 60px 140px -50px rgba(0,0,0,.9);
}
.case::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px circle at 85% 40%, rgba(201,167,74,.16), transparent 55%),
    radial-gradient(500px circle at 0% 0%, rgba(198,255,61,.07), transparent 50%);
}
.case-kicker{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  font-family:var(--ff-display); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.case-title{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(40px, 5vw, 64px);
  line-height:1; letter-spacing:-.035em; margin-bottom:16px;
}
.case-sub{ color:var(--ink-dim); font-size:16.5px; max-width:460px; margin-bottom:28px; }
.case-meta{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:26px;
  padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.case-meta dt{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); margin-bottom:4px; }
.case-meta dd{ font-family:var(--ff-display); font-weight:600; font-size:15px; }
.case-points{ display:flex; flex-direction:column; gap:11px; margin-bottom:32px; }
.case-points li{ position:relative; padding-left:28px; font-size:14.5px; color:#d6d4cf; }
.case-points li::before{
  content:''; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%;
  background:rgba(198,255,61,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23c6ff3d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  border:1px solid rgba(198,255,61,.35);
}
.case-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Device mockups: browser + phone, straightening up on hover */
.case-devices{ position:relative; display:block; perspective:1800px; padding:10px 9% 64px 0; }
.has-cursor-label .case-devices{ cursor:none; }
.device-browser{
  position:relative; border-radius:14px; overflow:hidden;
  background:#141417; border:1px solid rgba(255,255,255,.13);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.95), 0 0 90px -25px rgba(201,167,74,.45);
  transform:rotateY(-14deg) rotateX(5deg) rotateZ(1deg); transform-origin:30% 50%;
  transition:transform 1s var(--ease), box-shadow 1s var(--ease);
}
.case-devices:hover .device-browser{ transform:rotateY(-4deg) rotateX(1deg); box-shadow:0 60px 120px -30px rgba(0,0,0,.95), 0 0 120px -20px rgba(201,167,74,.55); }
.browser-bar{
  display:flex; align-items:center; gap:12px; height:34px; padding:0 12px;
  background:#1c1c21; border-bottom:1px solid rgba(255,255,255,.07);
}
.dots{ display:flex; gap:6px; }
.dots i{ width:9px; height:9px; border-radius:50%; background:#ff5f57; opacity:.85; }
.dots i:nth-child(2){ background:#febc2e; }
.dots i:nth-child(3){ background:#28c840; }
.url{
  flex:1; max-width:260px; margin:0 auto; transform:translateX(-24px);
  height:22px; border-radius:7px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:11.5px; color:var(--ink-dim);
}
.device-browser img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.device-phone{
  position:absolute; right:0; bottom:0; width:27%;
  aspect-ratio:9/19.5; padding:6px; border-radius:30px;
  background:#0c0c0f; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6);
  transform:rotate(4deg); transition:transform 1s var(--ease);
}
.device-phone::before{
  content:''; position:absolute; top:12px; left:50%; z-index:1; transform:translateX(-50%);
  width:30%; height:4.5%; border-radius:100px; background:#000;
}
.device-phone img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:24px; }
.case-devices:hover .device-phone{ transform:translateY(-12px) rotate(1.5deg); }
.web-footnote{ margin-top:28px; text-align:center; font-size:14px; color:var(--ink-dim); }

/* ============ TESTIMONIALS ============ */
.testimonials{ padding:130px 0; }
.testi-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; align-items:center; }
.testimonials h2{ margin-bottom:40px; max-width:420px; }
.testi-tabs{ display:flex; flex-direction:column; gap:10px; }
.testi-tab{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:14px;
  width:100%; text-align:left; cursor:pointer;
  padding:16px 18px; border-radius:16px;
  background:transparent; border:1px solid var(--line);
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.testi-tab:hover{ background:rgba(244,242,238,.03); }
.testi-tab.active{ background:var(--glass); border-color:rgba(198,255,61,.3); backdrop-filter:blur(10px); }
.testi-avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-weight:700; font-size:14px;
  background:rgba(244,242,238,.06); color:var(--ink-dim); border:1px solid var(--line);
  transition:background .4s, color .4s, border-color .4s;
}
.testi-tab.active .testi-avatar{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.testi-who{ display:flex; flex-direction:column; }
.testi-who cite{ font-style:normal; font-weight:600; font-size:15px; }
.testi-role{ font-size:13px; color:var(--ink-dim); }
.testi-bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent; }
.testi-bar span{ display:block; height:100%; width:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); }
.testi-tab.active .testi-bar span{ animation:testi-progress 8s linear forwards; }
.testi-layout.paused .testi-tab.active .testi-bar span{ animation-play-state:paused; }
.testi-layout.static .testi-tab.active .testi-bar span{ animation:none; transform:scaleX(1); }
@keyframes testi-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.testi-stage{
  position:relative; display:grid;
  padding:84px 56px 52px; border-radius:28px;
  background:linear-gradient(160deg, rgba(30,32,26,.7), rgba(14,14,16,.7));
  border:1px solid var(--line); backdrop-filter:blur(14px);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9);
  min-height:420px;
}
.testi-stage::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(600px circle at 0% 0%, rgba(198,255,61,.1), transparent 50%);
}
.testi-mark{
  position:absolute; top:-6px; left:44px;
  font-family:var(--ff-display); font-weight:700; font-size:180px; line-height:1;
  color:var(--accent); text-shadow:0 0 60px rgba(198,255,61,.35);
}
.testi-quote{
  grid-area:1 / 1; align-self:center;
  opacity:0; visibility:hidden; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s;
}
.testi-quote.active{ opacity:1; visibility:visible; transform:none; transition:opacity .7s var(--ease) .1s, transform .7s var(--ease) .1s; }
.testi-quote p{
  font-family:var(--ff-display); font-weight:500; font-size:clamp(21px, 2.3vw, 30px);
  line-height:1.32; letter-spacing:-.015em; margin-bottom:30px;
}
.testi-quote footer{ font-family:var(--ff-display); font-weight:600; color:var(--accent); font-size:15px; }
.testi-quote footer span{ color:var(--ink-dim); font-weight:500; }

/* ============ CTA BANNER (tilted wall of work) ============ */
.cta-banner{
  min-height:92vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center; padding:140px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.photo-wall{
  position:absolute; z-index:-2; top:50%; left:50%;
  width:150vw; height:240%;
  display:flex; justify-content:center; gap:18px;
  transform:translate(-50%, -50%) rotate(-11deg);
  pointer-events:none;
}
.hero-wall{ transform:translate(-50%, -50%) rotate(9deg); height:260%; }
.hero-wall .wall-col{ width:clamp(140px, 16vw, 260px); }
.hero-wall .wall-track{ animation-duration:90s; }
.hero-wall .wall-col:nth-child(even) .wall-track{ animation-duration:100s; }
.wall-col{ width:clamp(150px, 19vw, 300px); flex-shrink:0; overflow:hidden; }
.wall-track{ display:flex; flex-direction:column; gap:18px; animation:wall-up 70s linear infinite; }
.wall-col:nth-child(even) .wall-track{ animation-name:wall-down; animation-duration:80s; }
.wall-track img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; }
@keyframes wall-up{ from{ transform:translateY(0); } to{ transform:translateY(calc(-50% - 9px)); } }
@keyframes wall-down{ from{ transform:translateY(calc(-50% - 9px)); } to{ transform:translateY(0); } }
.cta-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(11,11,13,.86) 0%, rgba(11,11,13,.7) 55%, rgba(11,11,13,.55) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(11,11,13,0) 22%, rgba(11,11,13,0) 78%, var(--bg) 100%);
}
.cta-inner{ display:flex; flex-direction:column; align-items:center; gap:34px; }
.cta-inner .eyebrow{ margin:0; }
.cta-inner h2{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(40px, 7.2vw, 100px);
  line-height:1; letter-spacing:-.035em; max-width:1000px;
  text-shadow:0 10px 60px rgba(0,0,0,.6);
}

/* ============ CONTACT ============ */
.contact{ padding:140px 0 130px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.status-pill{
  display:flex; width:fit-content; align-items:center; gap:10px; margin-bottom:22px;
  padding:7px 14px 7px 12px; border-radius:100px; font-size:13px; font-weight:500;
  background:rgba(198,255,61,.08); border:1px solid rgba(198,255,61,.25); color:var(--accent);
}
.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(198,255,61,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(198,255,61,0); } 100%{ box-shadow:0 0 0 0 rgba(198,255,61,0); } }
.contact-info h2{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(32px,4.4vw,54px);
  line-height:1.05; letter-spacing:-.025em; margin-bottom:18px;
}
.contact-info > p{ color:var(--ink-dim); max-width:440px; margin-bottom:40px; font-size:16.5px; }
.contact-list{ display:flex; flex-direction:column; }
.contact-list a{
  display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:16px;
  padding:20px 0; border-top:1px solid var(--line);
}
.contact-list li:last-child a{ border-bottom:1px solid var(--line); }
.contact-label{ grid-column:1; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); margin-bottom:4px; }
.contact-value{ grid-column:1; font-family:var(--ff-display); font-size:clamp(18px, 2vw, 22px); font-weight:600; transition:color .3s var(--ease), transform .4s var(--ease); }
.contact-arrow{
  grid-column:2; grid-row:1 / span 2;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), color .3s var(--ease), transform .4s var(--ease), border-color .3s;
}
.contact-list a:hover .contact-value{ color:var(--accent); transform:translateX(6px); }
.contact-list a:hover .contact-arrow{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:rotate(45deg); }

.contact-form{
  position:relative; display:flex; flex-direction:column; gap:16px;
  padding:40px; border-radius:28px;
  background:linear-gradient(160deg, rgba(28,30,24,.72), rgba(14,14,16,.72));
  border:1px solid var(--line); backdrop-filter:blur(16px);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9);
}
.contact-form::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(500px circle at 100% 0%, rgba(198,255,61,.09), transparent 50%);
}
.form-title{ font-family:var(--ff-display); font-weight:600; font-size:22px; margin-bottom:8px; }
.form-row{ position:relative; }
.form-row input, .form-row textarea{
  width:100%; display:block;
  background:rgba(11,11,13,.6); border:1px solid var(--line); border-radius:14px;
  padding:26px 18px 10px; color:var(--ink); font-family:var(--ff-text); font-size:15.5px; resize:vertical;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.form-row textarea{ min-height:140px; }
.form-row label{
  position:absolute; left:19px; top:18px; pointer-events:none;
  font-size:15px; color:var(--ink-dim);
  transform-origin:0 0; transition:transform .3s var(--ease), color .3s var(--ease);
}
.form-row input:focus + label, .form-row input:not(:placeholder-shown) + label,
.form-row textarea:focus + label, .form-row textarea:not(:placeholder-shown) + label{
  transform:translateY(-10px) scale(.76); color:var(--accent);
}
.form-row input:hover, .form-row textarea:hover{ border-color:rgba(244,242,238,.2); }
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--accent); background:rgba(11,11,13,.85); box-shadow:0 0 0 4px rgba(198,255,61,.12); }
.contact-form .btn{ margin-top:6px; padding:18px 28px; }
.form-chips{ border:0; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.form-chips legend{ width:100%; font-size:13.5px; color:var(--ink-dim); margin-bottom:10px; }
.form-chips legend span{ opacity:.6; margin-left:6px; font-size:12.5px; }
.form-chips label{ position:relative; cursor:pointer; }
.form-chips input{ position:absolute; opacity:0; pointer-events:none; }
.form-chips label span{
  display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:100px;
  border:1px solid var(--line); background:rgba(11,11,13,.5); font-size:13.5px; color:var(--ink-dim);
  transition:border-color .25s, color .25s, background .25s;
}
.form-chips label:hover span{ border-color:rgba(244,242,238,.25); color:var(--ink); }
.form-chips input:checked + span{ border-color:var(--accent); color:var(--accent); background:rgba(198,255,61,.08); }
.form-chips input:checked + span::before{ content:'✓'; font-size:12px; }
.form-chips input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:3px; }
.form-alt{
  align-self:center; background:none; border:0; padding:4px 2px; cursor:pointer;
  font-size:14px; color:var(--ink-dim); text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(244,242,238,.25); transition:color .25s, text-decoration-color .25s;
}
.form-alt:hover{ color:var(--accent); text-decoration-color:var(--accent); }
.form-note{ font-size:13.5px; color:var(--ink-dim); min-height:18px; }
.form-note.success{ color:#7be08a; }

/* ============ FOOTER ============ */
.site-footer{ position:relative; border-top:1px solid var(--line); padding:56px 0 28px; overflow:hidden; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.footer-nav{ display:flex; gap:28px; font-size:14px; color:var(--ink-dim); }
.footer-nav a{ transition:color .3s; }
.footer-nav a:hover{ color:var(--ink); }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s, transform .3s var(--ease);
}
.footer-social a:hover{ border-color:var(--accent); color:var(--accent); }
.footer-social .to-top{ font-size:16px; }
.footer-social .to-top:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-3px); }
.footer-word{
  font-family:var(--ff-display); font-weight:700; text-align:center; white-space:nowrap;
  font-size:clamp(56px, 15.4vw, 236px); line-height:1.05; letter-spacing:-.055em;
  margin:36px 0 12px; padding:0 .04em; user-select:none;
  background:linear-gradient(180deg, rgba(244,242,238,.22) 0%, rgba(198,255,61,.12) 50%, rgba(244,242,238,.02) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px;
  border-top:1px solid var(--line); padding-top:24px; font-size:13px; color:var(--ink-dim);
}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:10001;
  display:grid; grid-template-rows:auto 1fr auto; gap:16px;
  padding:22px 28px 26px;
  background:rgba(6,6,7,.94); backdrop-filter:blur(18px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.open{ opacity:1; }
.lb-top{ display:flex; align-items:center; gap:18px; }
.lb-title{ font-family:var(--ff-display); font-weight:700; font-size:20px; }
.lb-count{ color:var(--ink-dim); font-size:14px; font-variant-numeric:tabular-nums; margin-right:auto; }
.lb-close{
  background:transparent; border:1px solid var(--line); border-radius:100px; padding:10px 18px;
  font-family:var(--ff-display); font-weight:600; font-size:14px; cursor:pointer; transition:border-color .3s, color .3s;
}
.lb-close:hover{ border-color:var(--accent); color:var(--accent); }
.lb-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:0; }
.lb-img{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:12px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.9);
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.lb-img.swap{ opacity:0; transform:scale(.985); }
.lb-nav{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%; cursor:pointer; font-size:20px;
  background:rgba(11,11,13,.6); border:1px solid var(--line); backdrop-filter:blur(8px);
  transition:background .3s, color .3s, border-color .3s;
}
.lb-nav:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.lb-prev{ left:0; } .lb-next{ right:0; }
.lb-thumbs{ display:flex; gap:8px; justify-content:center; overflow-x:auto; padding:2px; }
.lb-thumbs button{
  flex-shrink:0; width:60px; height:60px; padding:0; border:0; border-radius:10px; overflow:hidden; cursor:pointer;
  opacity:.4; box-shadow:0 0 0 1px var(--line); transition:opacity .3s, box-shadow .3s;
}
.lb-thumbs button:hover{ opacity:.8; }
.lb-thumbs button.active{ opacity:1; box-shadow:0 0 0 2px var(--accent); }
.lb-thumbs img{ width:100%; height:100%; object-fit:cover; }

/* ============ REVEAL ANIMATION ============ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* Animated lime hairline drawn in at each section boundary */
.section-divider{ position:relative; }
.section-divider::before{
  content:''; position:absolute; top:0; left:50%; z-index:2;
  width:min(1180px, calc(100% - 64px)); height:1px;
  background:linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent); opacity:.5;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  transition:transform 1.1s var(--ease);
}
.section-divider.in-view::before{ transform:translateX(-50%) scaleX(1); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .service-card{ min-height:400px; }
}

@media (max-width: 900px){
  .about{ padding:120px 0 100px; }
  .about-grid{ grid-template-columns:1fr; gap:56px; }
  .about-visual{ height:min(560px, 118vw); max-width:560px; width:100%; margin:0 auto; }
  .about-pillars{ grid-template-columns:1fr; gap:14px; margin-top:0; }
  .services, .work, .testimonials{ padding:100px 0; }
  .services-grid{ grid-template-columns:1fr; }
  .service-card{ min-height:0; }
    .service-card h3{ margin-top:40px; }
  .work-grid{
    grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(170px, 42vw, 280px);
    grid-template-areas: "a a" "b c" "d c" "e f" "e g" "h h";
  }
  .work-note{ text-align:left; }
  .testi-layout{ grid-template-columns:1fr; gap:40px; }
  .web{ padding:100px 0; }
  .case{ grid-template-columns:1fr; padding:36px 28px; gap:44px; }
  .case-devices{ grid-row:1; }
  .testi-stage{ min-height:380px; }
  .contact{ padding:110px 0 100px; }
  .contact-grid{ grid-template-columns:1fr; gap:48px; }
}

@media (max-width: 760px){
  .wrap{ padding:0 20px; }
  /* Mobile menu: full-height sheet with large type, a call to action and quick contacts */
  .main-nav{
    position:fixed; top:0; right:0; height:100dvh; width:min(88vw,400px);
    background:rgba(18,18,20,.97); border-left:1px solid var(--line);
    flex-direction:column; justify-content:center; align-items:flex-start; gap:6px;
    padding:96px 32px 40px; transform:translateX(100%); transition:transform .5s var(--ease);
    font-family:var(--ff-display); font-size:32px; font-weight:600; letter-spacing:-.02em; z-index:900;
    visibility:hidden;
  }
  .main-nav.open{ transform:translateX(0); visibility:visible; }
  .main-nav:not(.open){ transition:transform .4s var(--ease), visibility 0s .4s; }
  .main-nav > a{ color:var(--ink); padding:6px 0; opacity:0; translate:24px 0; transition:opacity .4s var(--ease), translate .5s var(--ease), color .25s; }
  .main-nav > a::after{ display:none; }
  .main-nav > a.active{ color:var(--accent); }
  .main-nav.open > a, .main-nav.open .nav-extra{ opacity:1; translate:0 0; }
  .main-nav.open > a:nth-child(2){ transition-delay:.04s; } .main-nav.open > a:nth-child(3){ transition-delay:.08s; }
  .main-nav.open > a:nth-child(4){ transition-delay:.12s; } .main-nav.open > a:nth-child(5){ transition-delay:.16s; }
  .main-nav.open > a:nth-child(6){ transition-delay:.2s; } .main-nav.open .nav-extra{ transition-delay:.26s; }
  .nav-extra{
    display:flex; flex-direction:column; gap:22px; width:100%; margin-top:28px; padding-top:28px;
    border-top:1px solid var(--line); font-family:var(--ff-text); font-size:15px; font-weight:500; letter-spacing:0;
    opacity:0; translate:24px 0; transition:opacity .4s var(--ease), translate .5s var(--ease);
  }
  .nav-extra .btn{ width:100%; }
  .nav-extra-links{ display:flex; gap:20px; color:var(--ink-dim); }
  .nav-extra-links a:hover{ color:var(--accent); }
  .nav-backdrop{
    /* sized explicitly: the scrolled header's backdrop-filter makes it the containing block */
    display:block; position:fixed; top:0; left:0; width:100vw; height:100dvh; z-index:800; background:rgba(5,5,6,.6); backdrop-filter:blur(4px);
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  }
  .nav-backdrop.open{ opacity:1; pointer-events:auto; }
  .header-cta{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; background:none; border:none; z-index:1001; cursor:pointer;
  }
  .nav-toggle span{ width:100%; height:2px; background:var(--ink); transition:transform .3s, opacity .3s; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero{ padding-top:110px; }
  .about-badge{ width:104px; height:104px; left:2%; top:4%; }
  .badge-ring text{ font-size:10.5px; }
  .work-grid{ gap:10px; }
  .work-tile{ border-radius:18px; }
  .work-meta{ left:16px; right:16px; bottom:14px; }
  .work-cat{ font-size:16px; }
  .work-arrow{ width:34px; height:34px; top:10px; right:10px; font-size:14px; }
  .testi-stage{ padding:84px 26px 34px; border-radius:22px; min-height:0; }
  .services-grid{ grid-template-columns:1fr; }
  .service-card{ min-height:0; }
  .service-card h3{ margin-top:40px; }
  .case{ padding:26px 18px 30px; border-radius:24px; }
  .case-meta{ grid-template-columns:1fr; }
  .case-devices{ padding-right:12%; padding-bottom:48px; }
  .device-phone{ width:30%; border-radius:20px; padding:4px; }
  .device-phone img{ border-radius:16px; }
  .browser-bar{ height:26px; }
  .url{ height:17px; font-size:9.5px; transform:none; }
  .hero-wall .wall-col{ width:40vw; }
  .testi-mark{ font-size:140px; left:22px; top:-4px; }
  .cta-banner{ min-height:80vh; padding:110px 0; }
  .wall-col{ width:42vw; }
  .contact-form{ padding:28px 20px; border-radius:22px; }
  .lightbox{ padding:16px 12px 18px; }
  .lb-nav{ width:44px; height:44px; }
  .lb-thumbs button{ width:48px; height:48px; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-word{ margin:44px 0 20px; }
}

/* Cursor glow is fine-pointer only (also gated in script.js) */
@media (hover:none){
  .hero-glow{ display:none !important; }
}