:root{
  --cream:#F6EED8;
  --cream-soft:#FBF7EE;
  --green:#266041;
  --green-deep:#173E29;
  --charcoal:#1C1C1C;
  --gold:#D9A441;
  --gold-deep:#C49339;
  --line:#DADADA;
  --max:1320px;
  --text-sm: 14px;                              /* captions, labels, eyebrows, nav, footer, UI numerals */
  --text-md: clamp(16px, 1.1vw + 13px, 18px);   /* body copy */
  --text-lg: clamp(32px, 2.6vw + 22px, 92px);   /* headline tier (h1/h2/h3 each anchor differently within it) */
  --leading-md: 1.7;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--cream);
  color:var(--charcoal);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
.display{font-family:'Fraunces',serif;}
::selection{background:var(--gold);color:var(--charcoal);}

a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 48px;}
section[id]{scroll-margin-top:90px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--green));
  z-index:200;
}

/* ---------- GRAIN TEXTURE ---------- */
.grain{
  position:fixed;inset:-10%;
  width:120%;height:120%;
  pointer-events:none;
  z-index:250;
  opacity:0.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0);}
  10%{transform:translate(-2%,-4%);}
  20%{transform:translate(-6%,2%);}
  30%{transform:translate(4%,-8%);}
  40%{transform:translate(-4%,6%);}
  50%{transform:translate(2%,-2%);}
  60%{transform:translate(-8%,4%);}
  70%{transform:translate(6%,-4%);}
  80%{transform:translate(-2%,8%);}
  90%{transform:translate(4%,2%);}
  100%{transform:translate(0,0);}
}

/* ---------- CUSTOM CURSOR ---------- */
/* body only gets cursor:none once JS confirms a fine pointer + hover device
   and successfully wires up the listeners -- see script.js. If JS never
   runs, the native cursor is untouched. */
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{cursor:none;}
.cursor-dot, .cursor-ring{
  position:fixed;top:0;left:0;
  pointer-events:none;z-index:300;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
  display:none;
}
body.has-custom-cursor .cursor-dot, body.has-custom-cursor .cursor-ring{display:block;}
.cursor-dot{
  width:8px;height:8px;
  background:var(--gold);
}
.cursor-ring{
  width:36px;height:36px;
  border:1.5px solid var(--green);
  opacity:0.6;
  transition:width .25s ease, height .25s ease, border-color .25s ease, background .25s ease, opacity .25s ease;
}
.cursor-ring.hover{
  width:64px;height:64px;
  background:rgba(217,164,65,0.15);
  border-color:var(--gold);
  opacity:1;
}

/* ---------- NAV (inverted: deep green bar, cream text) ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--green-deep);
  color:var(--cream);
  transition:background .35s ease, box-shadow .35s ease;
}
.nav-inner{
  max-width:var(--max);margin:0 auto;
  padding:22px 48px;
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .35s ease;
}
nav.scrolled{
  background:rgba(23,62,41,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(246,238,216,0.15);
}
nav.scrolled .nav-inner{padding:14px 48px;}
.logo{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:0.02em;
  color:var(--cream);
}
.nav-links{display:flex;gap:36px;align-items:center;font-size:var(--text-sm);font-weight:600;}
.nav-links a:not(.nav-cta){opacity:0.75;transition:opacity .2s;position:relative;padding-bottom:4px;}
.nav-links a:not(.nav-cta)::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--gold);
  transition:right .25s ease;
}
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta).active{opacity:1;}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after{right:0;}
.nav-cta{
  color:var(--charcoal);
  padding:10px 22px;
  border-radius:3px;
  font-weight:700;
  font-size:var(--text-sm);
  letter-spacing:0.01em;
  transition:transform .2s;
  display:inline-block;
  /* gold background + liquid hover come from the shared
     .btn-primary/.nav-cta pseudo-element rules in the hero section */
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;border:none;cursor:pointer;padding:6px;
  z-index:110;
}
.nav-toggle span{
  width:24px;height:2px;background:var(--cream);
  transition:transform .3s ease, opacity .3s ease;
}
.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);}

.nav-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,0.35);
  opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:99;
}
.nav-scrim.open{opacity:1;pointer-events:auto;}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  padding-top:80px;
  overflow:hidden;
}
.hero-blob-parallax{
  position:absolute;inset:0;
  z-index:0;
  pointer-events:none;
  /* GSAP ScrollTrigger scrubs this wrapper's translateY (script.js);
     the CSS float below animates the inner .hero-blob independently
     so the two transforms compose instead of fighting each other. */
}
.hero-blob{
  position:absolute;
  width:640px;height:640px;
  border-radius:50%;
  top:-180px;right:-200px;
  background:radial-gradient(circle at 30% 30%, rgba(217,164,65,0.35), rgba(38,96,65,0.18) 45%, transparent 70%);
  filter:blur(10px);
  animation:blobFloat 14s ease-in-out infinite;
  pointer-events:none;
}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-30px,30px) scale(1.08);}
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:48px;
  align-items:end;
  width:100%;
  position:relative;
  z-index:1;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--text-sm);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--green);
  margin-bottom:28px;
  opacity:0;
  animation:rise .8s ease forwards .1s;
}
.hero-eyebrow::before{
  content:'';width:28px;height:1.5px;background:var(--gold);display:inline-block;
}
h1.hero-title{
  font-family:'Fraunces',serif;
  font-weight:800;
  font-size:clamp(48px, 6.4vw, 92px);
  line-height:0.98;
  letter-spacing:-0.02em;
  color:var(--charcoal);
  /* opacity/reveal is owned by GSAP SplitText (script.js) when available;
     no static opacity:0 here so content stays visible if the CDN scripts fail */
}
.hero-title .accent{color:var(--green);font-style:italic;font-weight:700;}
.hero-side{
  padding-bottom:14px;
  opacity:0;
  animation:rise .9s ease forwards .5s;
}
.hero-side p{
  font-size:var(--text-md);
  line-height:var(--leading-md);
  color:#4a4a4a;
  margin-bottom:26px;
  max-width:380px;
}
.btn-primary{
  display:inline-block;
  color:var(--charcoal);
  padding:15px 30px;
  border-radius:3px;
  font-weight:700;
  font-size:var(--text-sm);
  letter-spacing:0.01em;
  transition:transform .2s;
}
/* liquid-fill hover: gold-deep "sauce" rises inside the button with a
   wobbly meniscus. Base gold lives on ::before so the rising layer can
   paint between the background and the text. */
.btn-primary, .nav-cta{
  position:relative;
  z-index:0;
  background:transparent;
  overflow:hidden;
}
.btn-primary::before, .nav-cta::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:var(--gold);
  border-radius:inherit;
}
.btn-primary::after, .nav-cta::after{
  content:'';position:absolute;left:-20%;right:-20%;top:100%;height:190%;z-index:-1;
  background:var(--gold-deep);
  border-radius:46% 38% 0 0 / 26px 20px 0 0;
  transition:transform .55s cubic-bezier(.6,.1,.3,1);
}
.btn-primary:hover::after, .nav-cta:hover::after{
  transform:translateY(-97%);
  animation:meniscus 2.2s ease-in-out .55s infinite alternate;
}
@keyframes meniscus{
  from{border-radius:46% 38% 0 0 / 26px 18px 0 0;}
  to{border-radius:38% 46% 0 0 / 18px 26px 0 0;}
}
.btn-secondary{
  display:inline-block;
  border:1.5px solid var(--green);
  color:var(--green);
  padding:13.5px 28px;
  border-radius:3px;
  font-weight:700;
  font-size:var(--text-sm);
  transition:all .2s;
}
.btn-secondary:hover{background:var(--green);color:var(--cream);}

.magnetic{will-change:transform;transition:transform .15s ease-out, background .2s, color .2s;}

@keyframes rise{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}

/* signature: proof ticker */
.ticker-band{
  background:var(--green-deep);
  color:var(--cream);
  padding:16px 0;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}
.ticker-track{
  display:inline-flex;
  animation:scrollTicker 32s linear infinite;
}
.ticker-item{
  display:inline-flex;align-items:center;gap:14px;
  padding:0 40px;
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:0.02em;
}
.ticker-item b{
  font-family:'Inter',sans-serif;
  color:var(--gold);
  font-weight:800;
  font-size:var(--text-sm);
}
.ticker-item::after{content:'◆';color:var(--green);font-size:9px;margin-left:30px;}
@keyframes scrollTicker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* sauce-drip edge where dark sections meet cream */
.drip-divider{line-height:0;margin-top:-1px;}
.drip-divider svg{display:block;width:100%;height:56px;overflow:visible;}
.drip-divider path, .drip-divider circle{fill:var(--green-deep);}
/* slow drip-and-fall cycle: swell at the edge, detach and fall while
   fading, long pause, repeat -- staggered so the drips never sync */
.droplet{
  transform-box:fill-box;
  transform-origin:center;
  animation:dropletFall 8s ease-in-out infinite;
}
.droplet.d2{animation-duration:9.5s;animation-delay:3.2s;}
.droplet.d3{animation-duration:11s;animation-delay:6.1s;}
@keyframes dropletFall{
  0%{transform:translateY(-4px) scale(0.5);opacity:0;}
  30%{transform:translateY(-1px) scale(1);opacity:1;}
  42%{transform:translateY(2px) scale(1);opacity:1;}
  58%{transform:translateY(30px) scale(0.85);opacity:0;}
  100%{transform:translateY(30px) scale(0.85);opacity:0;}
}

/* ---------- SECTION SCAFFOLD ---------- */
section{padding:180px 0;}

.eyebrow{
  font-size:var(--text-sm);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--green);margin-bottom:22px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:'';width:24px;height:1.5px;background:var(--gold);
  transform-origin:left center;
  transition:transform .5s ease .1s;
}
/* dash starts hidden ONLY once JS confirms GSAP loaded (body.gsap-ready);
   without JS the dash is simply visible -- never JS-dependent hiding */
body.gsap-ready .eyebrow:not(.drawn)::before{transform:scaleX(0);}

h2{
  font-family:'Fraunces',serif;
  font-weight:800;
  font-size:clamp(32px, 3.2vw, 56px);
  line-height:1.05;
  letter-spacing:-0.015em;
}

/* SplitText's line-mask reveal clips each line to an overflow:clip box
   sized by the (deliberately tight) heading line-height, which cuts off
   descenders (g/y/p) on h1/h2. Extending the mask box downward and pulling
   the same amount back with a negative margin keeps the line rhythm
   visually unchanged while giving descenders room to render. */
.line-mask{padding-bottom:0.25em;margin-bottom:-0.25em;}

/* ---------- SECTION GLOW (abstract fill for the numbered sections'
   empty zones -- extends the hero blob's soft-gradient language rather
   than adding stock-style icons or requiring real photography) ---------- */
.story, .services, .capability-light, .capability-dark{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.section-glow{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
  animation:glowDrift 19s ease-in-out infinite;
}
.section-glow-light{
  width:560px;height:560px;
  left:-120px;bottom:-100px;
  background:radial-gradient(circle at 35% 35%, rgba(217,164,65,0.32), rgba(38,96,65,0.2) 45%, transparent 70%);
  filter:blur(35px);
}
/* .capability-light sits on --cream-soft, notably whiter than .story's
   --cream, so the same gradient needs more punch to read at all */
.capability-light .section-glow-light{
  background:radial-gradient(circle at 35% 35%, rgba(217,164,65,0.42), rgba(38,96,65,0.28) 45%, transparent 70%);
}
.section-glow-dark{
  width:680px;height:680px;
  right:-160px;top:200px;
  background:radial-gradient(circle at 40% 40%, rgba(217,164,65,0.4), rgba(217,164,65,0.16) 45%, transparent 72%);
  filter:blur(40px);
}
@keyframes glowDrift{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-24px,20px) scale(1.05);}
}

/* ---------- STORY (asymmetric) ---------- */
.story{padding-top:130px;}
.story .wrap{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:72px;
  align-items:start;
}
.story-num{
  /* decorative background numeral, intentionally exempt from the 3-tier
     type scale -- forcing it down to --text-lg's ~92px ceiling would
     visibly weaken the layout's one big graphic flourish */
  font-family:'Inter',sans-serif;
  font-weight:900;
  font-size:120px;
  line-height:0.8;
  color:var(--line);
  margin-bottom:-10px;
}
.story-body p{
  font-size:var(--text-md);
  line-height:var(--leading-md);
  color:#3a3a3a;
  margin-bottom:20px;
}
.story-body strong{color:var(--green-deep);}
.story-stats{
  margin-top:36px;
  display:flex;
  gap:48px;
  border-top:1px solid var(--line);
  padding-top:28px;
}
.stat b{
  font-family:'Inter',sans-serif;
  font-size:32px;font-weight:800;color:var(--green-deep);display:block;
}
.stat span{font-size:var(--text-sm);color:#6a6a6a;}

/* ---------- SERVICES ---------- */
.services{background:var(--green-deep);color:var(--cream);}
.services .eyebrow{color:var(--gold);}
.services .eyebrow::before{background:var(--cream);}
.services h2{color:var(--cream);}
.services-sub{color:rgba(246,238,216,0.65);font-size:var(--text-md);max-width:480px;margin-top:18px;}
.service-grid{
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(246,238,216,0.14);
}
.service-card{
  background:var(--green-deep);
  padding:44px 36px;
  position:relative;
  /* single transform expression driven by CSS vars so the JS tilt handler,
     hover lift, and GSAP skew never overwrite each other */
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:background .3s, transform .25s ease-out;
}
.service-card:hover{background:#1d4f35;--lift:-6px;}
.service-card::before{
  content:'';position:absolute;inset:0;z-index:3;
  background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%), rgba(251,247,238,0.22), transparent 55%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.service-card.tilting::before{opacity:1;}
.service-num{
  font-family:'Inter',sans-serif;
  font-size:var(--text-sm);font-weight:700;color:var(--gold);letter-spacing:0.08em;
  margin-bottom:30px;display:block;
}
.service-card h3{
  font-family:'Fraunces',serif;
  font-size:24px;font-weight:600;margin-bottom:14px;
}
.service-card p{
  font-size:var(--text-md);line-height:1.65;color:rgba(246,238,216,0.7);
}

/* ---------- CLIENT WALL (deck: "Who we've worked with") ---------- */
.client-wall{background:var(--cream-soft);padding-bottom:24px;}
.client-wall-minor{background:var(--cream-soft);padding-top:24px;padding-bottom:70px;}
.client-wall-intro{
  font-size:var(--text-md);
  color:#4a4a4a;
  max-width:520px;
  margin-top:18px;
}
/* tier 1: marquee corporates, editorial index list in big serif */
.client-major{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  column-gap:72px;
}
.client-major-item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .25s ease;
}
.client-major-item:hover{padding-left:10px;}
.client-major-item b{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:clamp(26px, 2.4vw, 40px);
  line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--green-deep);
  transition:color .25s ease;
}
.client-major-item:hover b{color:var(--green);}
.client-major-item span{
  font-size:var(--text-sm);
  color:#8a8a8a;
  white-space:nowrap;
}
/* tier 2: the rest, deliberately quiet -- revolving band styled to match
   the ticker-band up top exactly (full-bleed green, cream text, green dots) */
.client-minor-label{
  margin-top:56px;
  font-size:var(--text-sm);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#8a8a8a;
  margin-bottom:18px;
}
.client-minor-marquee{
  background:var(--green-deep);
  color:var(--cream);
  padding:16px 0;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}
.client-minor-marquee.is-draggable{cursor:grab;}
.client-minor-marquee.is-draggable:active{cursor:grabbing;}
.client-minor-marquee.is-draggable .client-minor-track{user-select:none;}
.client-minor-track{
  display:inline-flex;
  animation:scrollClientMarquee 50s linear infinite;
}
.client-minor-item{
  display:inline-flex;align-items:center;
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:0.02em;
}
.client-minor-item::after{
  content:'';
  display:inline-block;
  width:3px;height:14px;
  background:var(--gold);
  border-radius:1px;
  margin:0 20px;
}
@keyframes scrollClientMarquee{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}

/* ---------- SHOWREEL (real client work) ---------- */
.showreel{background:var(--green-deep);color:var(--cream);}
.showreel .eyebrow{color:var(--gold);}
.showreel .eyebrow::before{background:var(--cream);}
.showreel h2{color:var(--cream);}
.showreel-intro{
  font-size:var(--text-md);
  color:rgba(246,238,216,0.65);
  max-width:520px;
  margin-top:18px;
}
.showreel-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.showreel-card{
  position:relative;
  display:block;
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:4 / 5;
  background:var(--charcoal);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .25s ease-out, box-shadow .3s ease;
}
.showreel-card:hover{--lift:-6px;box-shadow:0 20px 40px rgba(0,0,0,0.18);}
.showreel-card::before{
  content:'';position:absolute;inset:0;z-index:3;
  background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%), rgba(251,247,238,0.25), transparent 55%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.showreel-card.tilting::before{opacity:1;}
.showreel-card img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease, opacity .3s ease;
}
.showreel-card:hover img{transform:scale(1.05);opacity:0.85;}
.showreel-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
  pointer-events:none;
}
.showreel-play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:56px;height:56px;
  border-radius:50%;
  background:rgba(246,238,216,0.9);
  color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  padding-left:4px;
  z-index:2;
  transition:transform .3s ease, background .3s ease;
}
.showreel-card:hover .showreel-play{transform:translate(-50%,-50%) scale(1.12);background:var(--gold);color:var(--charcoal);}
.showreel-caption{
  position:absolute;left:0;right:0;bottom:0;
  z-index:2;
  padding:18px;
  display:flex;flex-direction:column;gap:2px;
  font-size:12.5px;
  color:rgba(246,238,216,0.75);
}
.showreel-caption b{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:var(--text-sm);
  color:var(--cream);
}

/* ---------- CAPABILITY SECTIONS (Social Media Marketing / Influencer Marketing) ---------- */
.capability-light{background:var(--cream-soft);}
.capability-light .wrap{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:72px;
  align-items:start;
}
.capability-body p{
  font-size:var(--text-md);
  line-height:var(--leading-md);
  color:#3a3a3a;
  max-width:520px;
}

.capability-dark{background:var(--green-deep);color:var(--cream);}
.capability-dark .eyebrow{color:var(--gold);}
.capability-dark .eyebrow::before{background:var(--cream);}
.capability-dark h2{color:var(--cream);}
.capability-dark .capability-intro{color:rgba(246,238,216,0.65);font-size:var(--text-md);max-width:520px;margin-top:18px;}

.capability-grid{
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
}
.capability-tag{
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px 20px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.capability-tag:hover{transform:translateY(-4px);border-color:var(--gold);}
.capability-tag b{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:var(--text-sm);
  color:var(--green-deep);
  margin-bottom:4px;
}
.capability-tag span{font-size:13px;color:#6a6a6a;line-height:1.4;}

.capability-dark .capability-tag{
  border-color:rgba(246,238,216,0.18);
  background:rgba(246,238,216,0.04);
}
.capability-dark .capability-tag:hover{border-color:var(--gold);background:rgba(246,238,216,0.08);}
.capability-dark .capability-tag b{color:var(--cream);}
.capability-dark .capability-tag span{color:rgba(246,238,216,0.6);}

/* ---------- PROMO ---------- */
.promo .wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);
}
.promo-text{
  background:var(--cream-soft);padding:70px 56px;
  display:flex;flex-direction:column;justify-content:center;
}
.promo-text .eyebrow{margin-bottom:16px;}
.promo-text h2{margin-bottom:18px;}
.promo-text p{font-size:var(--text-md);line-height:var(--leading-md);color:#444;margin-bottom:32px;max-width:420px;}
.promo-visual{
  background:var(--green);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:380px;
  overflow:hidden;
  perspective:700px;
}
.promo-visual::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg, rgba(246,238,216,0.05) 0px, rgba(246,238,216,0.05) 2px, transparent 2px, transparent 18px);
}
.promo-visual .badge{
  background:var(--gold);color:var(--charcoal);
  font-family:'Inter',sans-serif;font-weight:800;
  padding:26px 34px;border-radius:4px;
  font-size:var(--text-sm);text-align:center;line-height:1.5;
  box-shadow:0 18px 40px rgba(0,0,0,0.25);
  position:relative;z-index:2;
  animation:badgeFloat 7s ease-in-out infinite;
}
.promo-visual .badge b{display:block;font-size:26px;margin-top:4px;}
@keyframes badgeFloat{
  0%,100%{transform:rotate(-3deg) translateY(0) rotateY(-22deg);}
  50%{transform:rotate(-2deg) translateY(-10px) rotateY(22deg);}
}

/* ---------- CONTACT ---------- */
.contact{background:var(--green-deep);color:var(--cream);}
.contact .wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;
}
.contact h2{color:var(--cream);}
.contact-sub{color:rgba(246,238,216,0.65);font-size:var(--text-md);margin-top:18px;max-width:380px;}
.contact-actions{margin-top:40px;display:flex;flex-direction:column;gap:16px;max-width:340px;}
.contact-btn{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-radius:4px;
  font-weight:700;font-size:var(--text-sm);
  transition:transform .2s;
}
.contact-btn:hover{transform:translateX(4px);}
.contact-btn.whatsapp{background:var(--gold);color:var(--charcoal);}
.contact-btn.mail{background:transparent;border:1.5px solid rgba(246,238,216,0.4);color:var(--cream);}
.contact-direct{
  border-top:1px solid rgba(246,238,216,0.2);
  margin-top:36px;padding-top:28px;
  font-size:var(--text-sm);color:rgba(246,238,216,0.75);
  line-height:2;
}
.contact-direct a{font-weight:700;color:var(--cream);}
.contact-visual{
  border-left:1px solid rgba(246,238,216,0.18);
  padding-left:80px;
}
.contact-visual .big-quote{
  font-family:'Fraunces',serif;
  font-size:24px;font-weight:600;line-height:1.5;color:rgba(246,238,216,0.92);
}
.contact-visual .big-quote .gold{color:var(--gold);}

footer{
  background:var(--green-deep);
  color:rgba(246,238,216,0.5);
  padding:30px 0;
  border-top:1px solid rgba(246,238,216,0.12);
  font-size:var(--text-sm);
  display:flex;justify-content:space-between;
}

@media (max-width:880px){
  .wrap{padding:0 24px;}
  .nav-inner{padding:18px 24px;}
  nav.scrolled .nav-inner{padding:14px 24px;}
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed;top:0;right:0;
    height:100vh;width:min(320px,80vw);
    background:var(--green-deep);
    color:var(--cream);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:28px;
    padding:40px;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.65,0,.35,1);
    box-shadow:-10px 0 40px rgba(0,0,0,0.15);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a:not(.nav-cta){opacity:1;font-size:18px;}
  .nav-links a.nav-cta{margin-top:10px;}
  .hero .wrap, .story .wrap, .promo .wrap, .contact .wrap, .capability-light .wrap{
    grid-template-columns:1fr !important;
  }
  .service-grid{grid-template-columns:1fr;}
  .showreel-grid{grid-template-columns:repeat(2, 1fr);}
  .client-major{grid-template-columns:1fr;column-gap:0;}
  .client-major-item span{white-space:normal;text-align:right;}
  .contact-visual{border-left:none;padding-left:0;margin-top:40px;border-top:1px solid rgba(246,238,216,0.18);padding-top:40px;}
  section{padding:110px 0;}
  .story-stats{flex-wrap:wrap;gap:28px;}
}