:root{
  --volt:#E8FF00;
  --ink:#101113;
  --smoke:#17181B;
  --paper:#F2F2F0;
  --mid:#9A9CA0;
  --line:rgba(255,255,255,.14);
  --display:'Boldonse', Impact, 'Arial Black', sans-serif;
  --body:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ease-lazy:cubic-bezier(.77,0,.18,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--volt);color:var(--ink)}

/* ---------- utility type ---------- */
.eyebrow{font:600 12px/1.5 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--paper)}
.eyebrow .dot{color:var(--volt)}
.display{font-family:var(--display);text-transform:uppercase;font-weight:400;line-height:1.18;letter-spacing:.01em}
.uc{display:block}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;background:rgba(16,17,19,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.nav .brand{font:600 13px/1 var(--body);letter-spacing:.22em;text-transform:uppercase}
.nav .brand b{color:var(--volt);font-weight:700}
.nav ul{display:flex;gap:28px;list-style:none}
.nav ul a{font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--paper);opacity:.85;transition:opacity .2s,color .2s}
.nav ul a:hover,.nav ul a:focus-visible{opacity:1;color:var(--volt)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;
  border:1px solid rgba(255,255,255,.3);color:var(--paper);font-size:20px;cursor:pointer;transition:border-color .2s,color .2s}
.burger:hover,.burger:focus-visible{border-color:var(--volt);color:var(--volt)}
@media(max-width:760px){
  .burger{display:flex}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(16,17,19,.97);border-bottom:1px solid rgba(255,255,255,.1)}
  .nav ul.open{display:flex}
  .nav ul a{display:block;padding:18px 32px;border-top:1px solid rgba(255,255,255,.06)}
}

/* ---------- hero slider ---------- */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--smoke)}
.track{display:flex;height:100%;transition:transform 1.5s var(--ease-lazy)}
.slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.slide .media{position:absolute;inset:0;z-index:1}
.slide .media img,.slide .media video{width:100%;height:100%;object-fit:cover;object-position:center right}
.slide .copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:110px 6vw 120px;max-width:1250px}
.slide .copy .eyebrow{margin-bottom:24px}
.h-lines{color:var(--volt);font-size:clamp(34px,6.2vw,104px)}
.slide .sub{max-width:46ch;margin-top:26px;color:var(--paper);font-size:clamp(15px,1.2vw,18px);line-height:1.65}
.slide .sub strong{color:#fff}
.ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-block;font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  padding:16px 26px;border:1px solid var(--volt);transition:background .25s,color .25s;cursor:pointer}
.btn.solid{background:var(--volt);color:var(--ink)}
.btn.solid:hover{background:transparent;color:var(--volt)}
.btn.ghost{color:var(--volt)}
.btn.ghost:hover{background:var(--volt);color:var(--ink)}

.slide--reel .media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,17,19,.85) 0%,rgba(16,17,19,.5) 45%,rgba(16,17,19,.15) 100%)}

.mosaic{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:4px}
.mosaic img{width:100%;height:100%;object-fit:cover;filter:grayscale(35%) brightness(.55);transition:filter .5s}
.slide--mosaic:hover .mosaic img{filter:grayscale(0) brightness(.7)}
@media(max-width:760px){.mosaic{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr)}}

/* slider controls */
.hud{position:absolute;z-index:20;left:6vw;bottom:34px;display:flex;align-items:center;gap:22px}
.count{font:600 12px/1 var(--body);letter-spacing:.25em;color:var(--paper)}
.count b{color:var(--volt);font-weight:700}
.arrows{display:flex;gap:8px}
.arrow{width:44px;height:44px;border:1px solid rgba(255,255,255,.35);background:rgba(16,17,19,.55);color:var(--paper);
  font-size:18px;cursor:pointer;transition:border-color .2s,color .2s}
.arrow:hover,.arrow:focus-visible{border-color:var(--volt);color:var(--volt)}
.progress{position:absolute;z-index:20;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.12)}
.progress i{display:block;height:100%;width:0;background:var(--volt);transition:width .3s linear}

/* ---------- sections ---------- */
section{padding:110px 6vw}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:56px;flex-wrap:wrap}
.sec-head .display{font-size:clamp(26px,4.6vw,64px);color:var(--paper)}
.sec-head p{max-width:44ch;color:var(--mid)}

/* work grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.card{display:block;background:var(--smoke);border:1px solid transparent;transition:border-color .3s}
.card .thumb{aspect-ratio:16/10;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-lazy)}
.card:hover .thumb img{transform:scale(1.05)}
.card:hover{border-color:var(--volt)}
.card .meta{padding:18px 18px 22px}
.card .meta .k{font:700 11px/1.5 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--volt)}
.card .meta h3{font:600 18px/1.3 var(--body);margin:10px 0 6px;color:#fff}
.card .meta p{font-size:14px;color:var(--mid)}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:38px 24px;border-left:1px solid var(--line)}
.stats div:first-child{border-left:0}
.stats .n{font-family:var(--display);font-size:clamp(24px,3vw,44px);color:var(--volt);line-height:1.2;display:block}
.stats .l{margin-top:10px;font:600 11px/1.5 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--mid);display:block}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.stats div:nth-child(3){border-left:0}}

/* ---------- about : volt block + client logo strip ---------- */
.about-sec{background:var(--volt);color:var(--ink);position:relative;overflow:hidden;padding:130px 6vw 0;min-height:min(92svh,880px);
  --logo-h:110px;  /* strip height */
  --ear-y:43.5%;   /* ear center, % of portrait height : tune here */
  --ear-x:38%}     /* ear position from the portrait's right edge : tune here */
/* The strip lives INSIDE .about-pic and is positioned relative to the portrait,
   so it always exits at mid-ear at any viewport size (desktop, iPad, mobile).
   Tile width = height × (3518.63 / 50) = height × 70.3726 */
.logo-strip{position:absolute;z-index:1;top:calc(var(--ear-y) - var(--logo-h)/2);right:var(--ear-x);
  width:100vw;height:var(--logo-h);
  background-image:url("../img/logos-clients.svg");background-repeat:repeat-x;background-size:auto 100%;
  animation:logosL 120s linear infinite;pointer-events:none;
  /* fade IN out of the head (right end), 100% only in the open gap, 10% across the whole text zone */
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.1) 66%,rgba(0,0,0,.9) 80%,#000 84%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.1) 66%,rgba(0,0,0,.9) 80%,#000 84%,#000 91%,transparent 100%)}
@keyframes logosL{from{background-position-x:0}to{background-position-x:-7741px}}
.about-wrap{position:static;display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:end}
.about-panel{position:relative;z-index:2;padding:0 48px 130px 0}
.about-panel .eyebrow{color:var(--ink)}
.about-panel .eyebrow .dot{color:var(--ink)}
.about-panel h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,4vw,56px);line-height:1.2;margin:18px 0 26px}
.about-panel p{color:rgba(16,17,19,.82);max-width:60ch}
.about-panel p+p{margin-top:16px}
.about-panel .lede{font-size:clamp(17px,1.5vw,21px);color:var(--ink);font-weight:500}
/* portrait above the strip so logos emerge from behind the head;
   full section height, flush to the right border */
.about-pic{position:absolute;z-index:3;right:0;top:76px;bottom:0;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none} /* top:76px clears the fixed nav */
.about-pic img{position:relative;z-index:2;height:100%;width:auto}
@media(max-width:900px){
  .about-sec{--logo-h:56px;padding:100px 6vw 0;min-height:0}
  .about-wrap{display:flex;flex-direction:column}
  .about-panel{padding:0 0 34px}
  /* image at the bottom of the screen, below the text block; strip stays ear-anchored */
  .about-pic{position:relative;top:auto;bottom:auto;margin:0 -6vw 0 auto}
  .about-pic img{height:auto;width:min(72vw,380px)}
  .logo-strip{animation-name:logosLm}
  @keyframes logosLm{from{background-position-x:0}to{background-position-x:-3941px}}
}

/* capabilities */
.caps{border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:320px 1fr;gap:24px;padding:32px 0;border-bottom:1px solid var(--line);transition:background .25s}
.cap:hover{background:rgba(232,255,0,.04)}
.cap h3{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:17px;line-height:1.4;letter-spacing:.02em;color:var(--paper)}
.cap:hover h3{color:var(--volt)}
.cap p{color:var(--mid);max-width:70ch}
@media(max-width:760px){.cap{grid-template-columns:1fr;gap:8px}}

/* contact */
.contact{background:var(--smoke)}
.contact .display{font-size:clamp(40px,7vw,110px);color:var(--volt)}
.contact p{max-width:52ch;color:var(--mid);margin:26px 0 36px}
.socials{display:flex;gap:26px;margin-top:34px}
.socials a{font:600 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--paper);border-bottom:1px solid var(--line);padding-bottom:6px;transition:color .2s,border-color .2s}
.socials a:hover{color:var(--volt);border-color:var(--volt)}

footer{padding:34px 6vw;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:500 12px/1.6 var(--body);letter-spacing:.06em;color:var(--mid);border-top:1px solid var(--line)}

a:focus-visible,button:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .track{transition:none}
  .card .thumb img,.mosaic img{transition:none}
  .m-a,.m-b{animation:none}
  html{scroll-behavior:auto}
}