/* ECOPIXEL — dark/light, neon-purple lines, corner brackets */
:root{
  --purple:#A54687; --green:#82BE3C; --grey:#808080;
  --bg:#07060b; --bg2:#0d0b13; --panel:#100d18; --text:#f4f1f7; --muted:#a9a3b3;
  --line:rgba(165,70,135,.55); --line-soft:rgba(165,70,135,.25); --glow:0 0 18px rgba(165,70,135,.45);
  --nav:rgba(7,6,11,.78); --shadow:0 20px 60px rgba(0,0,0,.5);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --head:'Space Grotesk','Inter',system-ui,sans-serif;
}
:root[data-theme="light"]{
  --bg:#f7f5f9; --bg2:#efebf3; --panel:#ffffff; --text:#1a1420; --muted:#5d5568;
  --line:rgba(165,70,135,.7); --line-soft:rgba(165,70,135,.28); --glow:0 0 0 rgba(0,0,0,0);
  --nav:rgba(247,245,249,.85); --shadow:0 18px 50px rgba(60,30,70,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* nav jumps: section title lands ~16px under the 68px top bar (section top padding is 96px, 68px on phones) */
section{scroll-margin-top:-12px}
#enq{scroll-margin-top:84px}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
section{padding:96px 0;position:relative}
h1,h2,h3{font-family:var(--head);line-height:1.1;letter-spacing:-.01em}
h2,.page-top h1{font-size:clamp(28px,4vw,44px);font-weight:700}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--purple);font-weight:600;margin-bottom:14px}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--purple);vertical-align:middle;margin-right:12px}
.lead{color:var(--muted);max-width:640px;margin-top:14px}
.sec-head{margin-bottom:48px}

/* corner brackets */
.brk{position:relative}
.brk::before{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:2;
  --b:linear-gradient(var(--purple),var(--purple));
  background:
   var(--b) top left/18px 2px no-repeat, var(--b) top left/2px 18px no-repeat,
   var(--b) top right/18px 2px no-repeat, var(--b) top right/2px 18px no-repeat,
   var(--b) bottom left/18px 2px no-repeat, var(--b) bottom left/2px 18px no-repeat,
   var(--b) bottom right/18px 2px no-repeat, var(--b) bottom right/2px 18px no-repeat}
.card{background:var(--panel);border:1px solid var(--line-soft)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;border-bottom:1px solid var(--line-soft)}
/* blur lives on a pseudo layer: backdrop-filter on .nav itself would trap the fixed mobile tab bar inside the header */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--nav);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo img{height:42px;width:auto}
.logo .l-dark{display:block}.logo .l-light{display:none}
:root[data-theme="light"] .logo .l-dark{display:none}:root[data-theme="light"] .logo .l-light{display:block}
.menu{display:flex;gap:28px;align-items:center}
.menu a{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s,border-color .2s;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--purple)}
/* section in view (scrollspy in script.js) */
.menu a.active{color:var(--purple);border-bottom-color:var(--purple);text-shadow:var(--glow)}
.menu .m-only{display:none}
.nav-cta{display:flex;gap:10px;align-items:center}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-soft);background:transparent;color:var(--text);cursor:pointer;transition:.2s}
.icon-btn:hover{border-color:var(--purple);box-shadow:var(--glow)}
.icon-btn svg{width:18px;height:18px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;font:600 13px var(--font);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--purple);color:var(--text);background:transparent;cursor:pointer;transition:.25s;position:relative}
.btn:hover{box-shadow:var(--glow);background:rgba(165,70,135,.15)}
.btn.solid{background:var(--purple);color:#fff}
.btn.solid:hover{background:#b85599}
.btn.wa{background:var(--green);border-color:var(--green);color:#0b1405}
.btn.wa:hover{background:#93d04b;box-shadow:0 0 18px rgba(130,190,60,.4)}
.btn svg{width:16px;height:16px}

/* hero */
.hero{min-height:100svh;padding:120px 0 80px;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 8%,rgba(7,6,11,.55) 55%,rgba(7,6,11,.25)),linear-gradient(0deg,var(--bg),transparent 35%)}
:root[data-theme="light"] .hero-bg::after{background:linear-gradient(90deg,var(--bg) 10%,rgba(247,245,249,.7) 55%,rgba(247,245,249,.3)),linear-gradient(0deg,var(--bg),transparent 35%)}
.hero-bg canvas{width:100%;height:100%;display:block}
.hero-grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 20% 50%,#000,transparent 70%);opacity:.5}
.hero h1{font-size:clamp(38px,6.4vw,84px);font-weight:700;max-width:900px}
.hero h1 em{font-style:normal;color:var(--purple);text-shadow:var(--glow)}
/* rotating purple word (script.js) */
#heroWord{display:block;width:max-content;/* own line always, so short/long words never move the page */transition:opacity .35s,transform .35s,filter .35s}
#heroWord.out{opacity:0;transform:translateY(.25em);filter:blur(6px)}
#heroWord.fast{transition:none;opacity:.85}
.hero p.sub{font-size:clamp(16px,1.8vw,20px);color:var(--muted);max-width:620px;margin:22px 0 34px}
.hero .tag{display:inline-block;padding:7px 14px;border:1px solid var(--line);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:26px}
/* hero buttons: all the same size (4 in a row, 2x2 on phone) */
.cta-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:760px}
.cta-row .btn{justify-content:center;padding-inline:12px}
/* outline hero buttons get a frosted (blurred) background so they read over the LED grid */
.cta-row .btn:not(.wa){background:rgba(7,6,11,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
:root[data-theme="light"] .cta-row .btn:not(.wa){background:rgba(255,255,255,.6)}
.cta-row .btn:not(.wa):hover{background:rgba(165,70,135,.25)}
@media (max-width:640px){.cta-row{grid-template-columns:repeat(2,1fr)}}
[hidden]{display:none!important}
.stats{display:flex;gap:44px;margin-top:64px;flex-wrap:wrap}
.stats b{display:block;font:700 34px var(--head);color:var(--text)}
#statWhere{min-width:7.6em} /* city names shuffle here; fixed width stops the row from jumping */
.stats span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* about */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.about p{color:var(--muted);margin-top:16px}
.about-img{aspect-ratio:4/3;background-size:cover;background-position:center;border:1px solid var(--line-soft)}
/* About photo box: stacked photos, one fades in every 4s (script.js) */
.about-img .f{position:absolute;inset:0;background:center/cover;opacity:0;transition:opacity 1.2s}
.about-img .f.on{opacity:1}
.checks{list-style:none;margin-top:24px;display:grid;gap:10px}
.checks li{padding-left:28px;position:relative;color:var(--text)}
.checks li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--green)}

/* services */
.bg2{background:var(--bg2)}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.services{grid-template-columns:1fr}}
/* service card = link to its gallery filter, random blurred photo behind (tinted to theme) */
.svc{padding:34px 26px;transition:.3s;overflow:hidden;color:inherit}
.svc:hover{transform:translateY(-4px);border-color:var(--purple);box-shadow:var(--glow)}
.svc .ph{position:absolute;inset:-10px;background:center/cover;filter:blur(2.5px);transform:scale(1.03);transition:transform .6s}
/* tint: lighter at top so the photo shows, stronger behind the text at the bottom-left */
.svc .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,11,.35),rgba(7,6,11,.82) 70%)}
:root[data-theme="light"] .svc .ph::after{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.88) 70%)}
.svc{display:flex;flex-direction:column;justify-content:flex-end;min-height:230px}
.svc h3,.svc p{text-shadow:0 1px 10px rgba(0,0,0,.6)}
:root[data-theme="light"] .svc h3,:root[data-theme="light"] .svc p{text-shadow:0 1px 10px rgba(255,255,255,.9)}
.svc p{color:var(--text);opacity:.85}
.svc:hover .ph{transform:scale(1.12)}
.svc h3,.svc p,.svc .go{position:relative}
.svc h3{font-size:21px;margin:0 0 10px}
.svc p{font-size:15px}
.svc .go{display:inline-block;align-self:flex-start;margin-top:16px;font:600 12px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}

/* gallery preview + page */
/* Our Work: 2 photo rows, top slides left, bottom slides right; stops on hover (PC), touch-and-hold (phone) or while popup open */
.gal-prev{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.gal-track{display:flex;gap:14px;padding-right:14px;width:max-content;animation:scroll 90s linear infinite}
.gal-track+.gal-track{margin-top:14px}
.gal-track.rev{animation-direction:reverse}
.gal-prev:hover .gal-track,.gal-prev.hold .gal-track,.lb-on .gal-track{animation-play-state:paused}
.gal-track a{flex:0 0 290px;height:210px;overflow:hidden;position:relative;border:1px solid var(--line-soft);-webkit-touch-callout:none;user-select:none}
.gal-prev img,.mas img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gal-prev a:hover img,.mas a:hover img{transform:scale(1.06)}
.center{text-align:center;margin-top:40px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filters button{padding:10px 20px;background:transparent;color:var(--muted);border:1px solid var(--line-soft);font:600 12px var(--font);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s}
.filters button:hover{color:var(--text);border-color:var(--purple)}
.filters button.on{background:var(--purple);border-color:var(--purple);color:#fff}
.mas{columns:3 300px;column-gap:14px}
.mas a{display:block;margin-bottom:14px;break-inside:avoid;overflow:hidden;border:1px solid var(--line-soft);cursor:zoom-in;position:relative}
.mas a.hide{display:none}
.mas img{height:auto}
.page-top{padding:150px 0 40px}

/* gallery popup on home page (script.js gmOpen); photo popup .lb sits above it */
.gm{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(4,3,8,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.gm.open{opacity:1;visibility:visible;transition:opacity .35s}
.gm-in{width:min(1200px,100%);max-height:100%;overflow:auto;background:var(--bg);border:1px solid var(--line);padding:0 24px 10px;transform:translateY(24px) scale(.98);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.gm.open .gm-in{transform:none}
.gm-head{position:sticky;top:0;z-index:3;background:var(--bg);padding:20px 0 4px}
.gm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.gm-top h3{font-size:24px}
.gm-x{font-size:24px;line-height:1}
.gm .filters{margin-bottom:16px}
.gm-on{overflow:hidden}
.gm-on .gal-track{animation-play-state:paused}
@media (max-width:900px){
  .gm{padding:0}
  .gm-in{height:100%;border:0;padding:0 16px 70px}
  .gm .filters button{padding:8px 12px;font-size:11px}
}
.lb{position:fixed;inset:0;z-index:100;background:rgba(4,3,8,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:30px;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.lb.open{opacity:1;visibility:visible;transition:opacity .35s}
.lb img{max-height:88vh;max-width:92vw;border:1px solid var(--line);opacity:0;transform:scale(.92);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.lb.open img.ld{opacity:1;transform:none}
.lb button{position:absolute;background:transparent;border:1px solid var(--line);color:#fff;width:46px;height:46px;font-size:22px;cursor:pointer}
.lb button:hover{background:var(--purple)}
.lb .x{top:20px;right:20px}.lb .p{left:20px;top:50%}.lb .nx{right:20px;top:50%}
.lb .c{position:absolute;bottom:18px;color:#bbb;font-size:13px;letter-spacing:.2em}

/* clients */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);border-block:1px solid var(--line-soft);padding:30px 0}
.track{display:flex;gap:18px;padding-right:18px;width:max-content;animation:scroll 40s linear infinite}
.track+.track{margin-top:18px}
.track.rev{animation-direction:reverse}
/* moving strips get their own GPU layer: smoother scrolling on phones */
.track,.gal-track{will-change:transform;backface-visibility:hidden}
/* theme switch icon shows current mode: moon in dark mode, sun in light mode */
#themeBtn .i-sun,:root[data-theme="light"] #themeBtn .i-moon{display:none}
:root[data-theme="light"] #themeBtn .i-sun{display:block}
@keyframes scroll{to{transform:translateX(-50%)}}
.client{flex:none;min-width:190px;height:64px;padding:0 26px;display:grid;place-items:center;background:var(--purple);color:#fff;font:700 15px var(--head);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.client img{max-height:36px;width:auto}
.client.logo-box{background:#fff}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.info{display:grid;gap:18px;margin-top:30px}
.info a,.info div{display:flex;gap:16px;align-items:center;padding:18px 20px}
.info svg{width:22px;height:22px;color:var(--green);flex:none}
.info small{display:block;color:var(--muted);font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.info b{font-size:18px;overflow-wrap:anywhere} /* long email wraps on small phones */
.info span{min-width:0}
form{padding:34px;display:grid;gap:18px;grid-template-columns:1fr 1fr}
/* iPhone email chooser (script.js) */
.mailpick{position:fixed;inset:0;z-index:120;background:rgba(4,3,8,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.mailpick.open{opacity:1;visibility:visible;transition:opacity .25s}
.mailpick-in{width:min(440px,100%);margin:12px;padding:18px;background:var(--panel);border:1px solid var(--line);display:grid;gap:10px;transform:translateY(20px);transition:transform .3s}
.mailpick.open .mailpick-in{transform:none}
.mailpick-in p{color:var(--muted);font-size:14px;margin-bottom:4px;overflow-wrap:anywhere}
.mailpick-in p b{color:var(--text)}
.mailpick-in button{padding:14px;font:600 14px var(--font);letter-spacing:.06em;color:var(--text);background:transparent;border:1px solid var(--purple);cursor:pointer}
.mailpick-in button:first-of-type{background:var(--purple);color:#fff}
.mailpick-in .mp-x{border-color:var(--line-soft);color:var(--muted)}
.form-title{font-size:22px;margin-bottom:2px;color:var(--purple)}
form .full{grid-column:1/-1}
label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:grid;gap:8px}
input,select,textarea{width:100%;padding:13px 14px;background:var(--bg);border:1px solid var(--line-soft);color:var(--text);font:400 15px var(--font);outline:none;transition:.2s;border-radius:0}
:root[data-theme="light"] input,:root[data-theme="light"] textarea{background:#faf8fb}
input:focus,textarea:focus{border-color:var(--purple);box-shadow:var(--glow)}
textarea{min-height:96px;resize:vertical}
.note{font-size:13px;color:var(--muted)}
.err{color:#ff6b8a;font-size:13px;min-height:18px}

footer{border-top:1px solid var(--line-soft);padding:40px 0 100px;background:var(--bg2)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer .logo img{height:38px}
footer p{color:var(--muted);font-size:13px}
.soc{display:flex;gap:10px}

.float{position:fixed;right:18px;bottom:18px;z-index:60;display:grid;gap:10px;transition:opacity .3s,transform .3s}
/* hide floating call/WhatsApp while the Contact section is on screen, so they never cover the form */
.at-contact .float,.at-hero .float{opacity:0;transform:translateY(20px);pointer-events:none}
/* native date pickers etc. follow the theme */
:root[data-theme="dark"]{color-scheme:dark}:root[data-theme="light"]{color-scheme:light}
.float a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.float .w{background:#25D366;color:#fff}.float .c{background:var(--purple);color:#fff}
.float svg{width:26px;height:26px}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

@media (max-width:900px){
  section{padding:68px 0;scroll-margin-top:16px}
  .about,.contact{grid-template-columns:1fr;gap:36px}
  /* phone: section tabs in a bottom bar, easy to reach with a thumb */
  .menu{position:fixed;left:0;right:0;bottom:0;z-index:55;justify-content:space-around;gap:0;padding:0 4px env(safe-area-inset-bottom);background:var(--nav);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line-soft)}
  .menu a,.menu .m-only{display:block;flex:1;text-align:center;font-size:10.5px;letter-spacing:.08em;padding:18px 2px 16px;border-bottom:0;border-top:2px solid transparent}
  .menu a.active{border-top-color:var(--purple)}
  .menu .d-only{display:none}
  body{padding-bottom:58px}
  .float{bottom:76px}
  /* footer has its own Call / WhatsApp icons on phones */
  .at-footer .float{opacity:0;transform:translateY(20px);pointer-events:none}
  .nav-cta .btn{display:none}
  .gal-track a{flex-basis:190px;height:140px}
  form{grid-template-columns:1fr;padding:22px}
  .stats{gap:18px 28px;margin-top:44px}
  .stats b{font-size:26px}
}