:root{
  --bg: #FAF6EE;
  --bg-alt: #F1EADA;
  --line: #E0D5BE;
  --text: #211D17;
  --text-dim: #6B6152;
  --gold: #2FA6A4;
  --teal: #14615F;
  --whatsapp: #25D366;
  --display: 'Bebas Neue', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.65;overflow-x:hidden;}
::selection{background:var(--gold);color:var(--bg);}
a{color:inherit;}

.grain{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:0.02;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.timecode{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;color:var(--gold);text-transform:uppercase;}

nav{position:sticky;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem 4vw;background:rgba(250,246,238,0.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
.logo{font-family:var(--display);font-size:1.6rem;letter-spacing:0.06em;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:0.6rem;}
.logo img{height:34px;width:auto;display:block;}
.logo span{color:var(--gold);}
.navlinks{display:flex;gap:1.5rem;font-size:0.83rem;color:var(--text-dim);}.navlinks a{color:var(--text-dim);text-decoration:none;transition:color .2s;}
.navlinks a:hover,.navlinks a.active{color:var(--gold);}
.nav-cta{border:1px solid var(--gold);color:var(--gold);padding:0.55rem 1.2rem;font-size:0.8rem;text-decoration:none;
  font-family:var(--mono);letter-spacing:0.05em;white-space:nowrap;}
@media(max-width:820px){.navlinks{display:none;}}

/* mobile menu — three-dot toggle, built dynamically by script.js */
.mobile-nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);
  width:40px;height:40px;font-size:1.3rem;line-height:1;cursor:pointer;border-radius:6px;
  transition:border-color .2s,color .2s;flex-shrink:0;}
.mobile-nav-toggle:hover{border-color:var(--gold);color:var(--gold);}
.mobile-nav-panel{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;
  background:var(--bg);border-bottom:1px solid var(--line);padding:0.5rem 4vw 1.2rem;
  box-shadow:0 14px 28px rgba(33,29,23,0.12);z-index:99;
  animation:mobileNavIn .22s ease;}
@keyframes mobileNavIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.mobile-nav-panel.open{display:flex;}
.mobile-nav-panel a{padding:1rem 0;border-bottom:1px solid var(--line);color:var(--text);
  text-decoration:none;font-size:1rem;font-weight:500;}
.mobile-nav-panel a:last-child{border-bottom:none;color:var(--gold);font-weight:600;margin-top:0.4rem;}
@media(max-width:820px){.mobile-nav-toggle{display:flex;align-items:center;justify-content:center;}}
@media(min-width:821px){.mobile-nav-panel{display:none !important;}}
.mobile-actions{display:flex;align-items:center;gap:0.7rem;}
@media(max-width:480px){
  nav{padding:1rem 4vw;}
  .nav-cta{padding:0.5rem 0.85rem;font-size:0.72rem;}
  .logo{font-size:1.35rem;}
  .logo img{height:28px;}
}

section{padding:6.5rem 4vw;border-bottom:1px solid var(--line);}
.eyebrow{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;color:var(--gold);text-transform:uppercase;
  margin-bottom:0.8rem;display:flex;align-items:center;gap:0.6rem;}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--gold);}
h1,h2,h3{font-family:var(--display);letter-spacing:0.01em;font-weight:400;}
h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1rem;max-width:820px;}
.section-sub{color:var(--text-dim);max-width:600px;font-size:1.02rem;margin-bottom:3rem;}

.btn-primary{background:var(--gold);color:var(--bg);padding:0.9rem 1.8rem;text-decoration:none;
  font-family:var(--mono);font-size:0.85rem;letter-spacing:0.04em;font-weight:500;display:inline-block;}
.btn-secondary{border:1px solid var(--line);color:var(--text);padding:0.9rem 1.8rem;text-decoration:none;
  font-family:var(--mono);font-size:0.85rem;letter-spacing:0.04em;display:inline-block;}

.update-note{font-family:var(--mono);font-size:0.72rem;color:var(--text-dim);border:1px dashed var(--line);padding:1rem;margin-top:1rem;}

footer{padding:3rem 4vw 2rem;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;}
footer .fine{font-family:var(--mono);font-size:0.72rem;color:var(--text-dim);}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--line);}

/* micro-interactions */
.navlinks a{position:relative;}
.navlinks a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--gold);transition:width .25s ease;}
.navlinks a:hover::after,.navlinks a.active::after{width:100%;}

.work-card,.service-card,.value-card,.svc-link,.team-card,.price-card,.proj-card,.why-card,.wt-card,.package-card{
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}
.work-card:hover,.wt-card:hover,.proj-card:hover{transform:translateY(-6px);border-color:var(--gold);}
.service-card:hover,.value-card:hover,.svc-link:hover,.team-card:hover,.why-card:hover{transform:translateY(-4px);}
.price-card:hover,.package-card:hover{transform:translateY(-5px);border-color:var(--gold);}

.btn-primary,.btn-secondary,.nav-cta{transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;}
.btn-primary:hover{transform:translateY(-2px);background:#1F8A88;}
.btn-secondary:hover,.nav-cta:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold);}

/* hero load-in sequence */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.hero-meta{animation:fadeUp .7s ease both;}
.hero h1{animation:fadeUp .8s ease both;animation-delay:.1s;}
.hero-sub{animation:fadeUp .8s ease both;animation-delay:.3s;}
.hero-actions{animation:fadeUp .8s ease both;animation-delay:.45s;}

/* marquee for past clients */
.marquee-wrap{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.2rem 0;}
.marquee-track{display:flex;gap:4.5rem;width:max-content;animation:marquee 28s linear infinite;align-items:center;}
.marquee-track span{font-family:var(--mono);font-size:1.05rem;color:var(--text-dim);white-space:nowrap;letter-spacing:0.02em;}
.marquee-track img{height:64px;width:auto;filter:none;opacity:1;transition:transform .3s;}
.marquee-track img:hover{transform:scale(1.06);}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

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

/* video lightbox */
.lightbox-overlay{position:fixed;inset:0;background:rgba(14,13,12,0.94);z-index:1000;display:none;align-items:center;justify-content:center;padding:4vw;}
.lightbox-overlay.active{display:flex;animation:lightboxFadeIn .25s ease;}
@keyframes lightboxFadeIn{from{opacity:0;}to{opacity:1;}}
.lightbox-content{position:relative;width:100%;background:#000;transform:scale(0.92);opacity:0;animation:lightboxScaleIn .3s ease forwards;}
@keyframes lightboxScaleIn{from{transform:scale(0.92);opacity:0;}to{transform:scale(1);opacity:1;}}
.lightbox-content iframe{width:100%;height:100%;display:block;border:0;}
.lightbox-16x9{max-width:900px;aspect-ratio:16/9;}
.lightbox-9x16{max-width:400px;aspect-ratio:9/16;max-height:85vh;}
.lightbox-close{position:fixed;top:1.6rem;right:1.6rem;z-index:1001;background:none;border:1px solid var(--line);color:var(--text);
  width:44px;height:44px;font-size:1.1rem;cursor:pointer;transition:border-color .2s,color .2s;font-family:var(--body);}
.lightbox-close:hover{border-color:var(--gold);color:var(--gold);}
[data-lightbox]{cursor:pointer;}
@media (prefers-reduced-motion: reduce){.lightbox-content{animation:none !important;opacity:1;transform:none;}}

/* floating WhatsApp widget */
.wa-float{position:fixed;bottom:1.6rem;right:1.6rem;z-index:900;display:flex;align-items:center;gap:0.7rem;
  background:var(--whatsapp);color:#fff;text-decoration:none;padding:0.85rem 1.2rem;border-radius:999px;
  font-family:var(--body);font-weight:600;font-size:0.88rem;box-shadow:0 6px 20px rgba(37,211,102,0.35);
  transition:transform .2s ease,box-shadow .2s ease;}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(37,211,102,0.45);}
.wa-float svg{width:22px;height:22px;flex-shrink:0;}
.wa-float .wa-label{white-space:nowrap;}
@keyframes waPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0.45);}50%{box-shadow:0 0 0 10px rgba(37,211,102,0);}}
.wa-float{animation:waPulse 2.5s ease infinite;}
@media(max-width:600px){.wa-float .wa-label{display:none;}.wa-float{padding:0.9rem;}}
@media (prefers-reduced-motion: reduce){.wa-float{animation:none !important;}}