/* Ember Creative — single-page site v1.2
   Brand: electric blue #0000EE, ember red #FF1E1E, deep navy, plum. Type: Kreadon (Urbanist stand-in). */
:root{
  --blue:#0000EE; --blue-deep:#06006B; --navy:#04042A; --ink:#020214; --red:#FF1E1E; --plum:#8A0B5E;
  --white:#fff; --paper:#F5F4F0; --muted:rgba(255,255,255,.64); --line:rgba(255,255,255,.14);
  --font:"Kreadon","Urbanist","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4vw,56px); --maxw:1480px; --radius:14px; --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.h-xl{font-size:clamp(44px,9vw,148px);line-height:.92;font-weight:800;letter-spacing:-.035em;margin:0}
.h-lg{font-size:clamp(34px,5.4vw,86px);line-height:.98;font-weight:800;letter-spacing:-.03em;margin:0;text-wrap:balance}
.h-md{font-size:clamp(26px,3vw,44px);line-height:1.08;font-weight:700;letter-spacing:-.02em;margin:0}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--muted);max-width:44ch;font-weight:400}
.accent{color:var(--red)}
.sec{padding:clamp(72px,11vw,150px) 0;position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(32px,5vw,64px);flex-wrap:wrap}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.bg-blue{background:var(--blue)}
.bg-navy{background:var(--navy)}

.btn{display:inline-flex;align-items:center;gap:.6em;padding:16px 26px;border-radius:999px;font-weight:700;font-size:15px;background:var(--white);color:var(--blue);border:0;cursor:pointer;transition:transform .3s var(--ease),background .3s,color .3s;white-space:nowrap}
.btn:hover{background:var(--red);color:var(--white);transform:translateY(-2px)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--red{background:var(--red);color:var(--white)}
.btn--red:hover{background:var(--white);color:var(--blue)}

/* Logo + brand marks */
.logo{display:inline-flex;align-items:center;gap:12px;line-height:1}
.logo svg{width:34px;height:34px;flex:none}
.logo .wm{font-weight:700;font-size:13px;letter-spacing:.3em;line-height:1.15;text-transform:uppercase}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.nav.scrolled{background:rgba(2,2,20,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.nav-links{display:flex;gap:34px;align-items:center;font-size:15px;font-weight:500}
.nav-links a:not(.btn){position:relative;opacity:.85;transition:opacity .2s}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:not(.btn):hover,.nav-links a.on{opacity:1}
.nav-links a:not(.btn):hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav .btn{padding:12px 20px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:#fff;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:25px}
.menu-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:21px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:40;background:var(--blue);display:flex;flex-direction:column;justify-content:flex-end;padding:110px var(--gutter) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
.menu-open .mobile-menu{clip-path:inset(0 0 0 0);visibility:visible}
.mobile-menu a{font-size:clamp(34px,10vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.14}
@media (max-width:960px){.nav-links{display:none}.burger{display:block}}

/* Hero */
.hero{position:relative;min-height:var(--vh,100svh);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;background:var(--blue-deep)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media .v-mobile{display:none}
@media (max-width:820px){.hero-media .v-desktop{display:none}.hero-media .v-mobile{display:block}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,2,20,.6) 0%,rgba(2,2,20,.05) 26%,rgba(2,2,20,.1) 46%,rgba(2,2,20,.88) 100%)}
.hero-bottom{position:relative;display:flex;justify-content:flex-start;align-items:end;gap:28px;padding-bottom:clamp(26px,5vh,56px)}
.hero-tag{font-size:clamp(13px,1.1vw,16px);letter-spacing:.24em;text-transform:uppercase;font-weight:700;display:flex;flex-wrap:wrap;gap:6px 18px;opacity:.9}
.hero-tag span+span::before{content:"/";margin-right:18px;opacity:.5}
.scroll-cue{position:absolute;left:50%;bottom:clamp(26px,5vh,56px);transform:translateX(-50%);display:inline-flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap}
.scroll-cue i{display:block;width:1px;height:38px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}
  56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.sound{position:absolute;top:96px;right:var(--gutter);display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.34);background:rgba(2,2,20,.4);backdrop-filter:blur(8px);cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.06em;z-index:2}
.sound .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
@media (max-width:760px){.hero-tag{font-size:10px;letter-spacing:.16em}.scroll-cue{display:none}.sound{top:88px}}

/* Work carousel — circles */
.car{position:relative}
.car-view{overflow:hidden}
.car-track{display:flex;gap:var(--cgap,26px);transition:transform .8s var(--ease);will-change:transform}
.car-col{flex:0 0 calc((100% - var(--cgap,26px)*2)/3);display:grid;gap:clamp(20px,2.4vw,38px)}
.cir{margin:0;text-align:center}
.disc{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--navy);box-shadow:0 0 0 1px rgba(255,255,255,.12);transition:transform .55s var(--ease),box-shadow .45s}
.disc img,.disc video{width:100%;height:100%;object-fit:cover}
.disc video{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.cir.playing .disc video{opacity:1}
.cir:hover .disc{transform:scale(1.05);box-shadow:0 0 0 2px var(--red),0 22px 50px rgba(0,0,0,.45)}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,rgba(0,0,238,.12),rgba(2,2,20,.42));opacity:1;transition:opacity .45s}
.cir:hover .disc::after{opacity:.25}
.cir figcaption{margin-top:14px;font-size:clamp(12px,1.05vw,15px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.car-nav{display:flex;gap:12px;align-items:center}
.car-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.34);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;font-size:20px;transition:all .3s var(--ease)}
.car-btn:hover{background:#fff;color:var(--blue);border-color:#fff;transform:translateY(-2px)}
.car-dots{display:flex;gap:7px;justify-content:center;margin-top:clamp(28px,3.5vw,46px)}
.car-dots button{width:7px;height:7px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.28);cursor:pointer;transition:all .3s}
.car-dots button[aria-current="true"]{background:var(--red);width:26px;border-radius:999px}
@media (max-width:860px){.car-col{flex:0 0 calc((100% - var(--cgap,18px))/2);}:root{--cgap:18px}}
@media (max-width:520px){.car-col{flex:0 0 calc((100% - var(--cgap,14px)*.5)/1.7)}}

/* Clients orbit — one ring, names cycle, always upright */
.orbit-wrap{position:relative;display:grid;place-items:center;min-height:min(92vw,820px)}
.orbit{--os:min(92vw,820px);position:relative;width:var(--os);aspect-ratio:1}
.orbit::before{content:"";position:absolute;inset:-12%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,238,.30),rgba(255,30,30,.10) 45%,transparent 68%);pointer-events:none}
.ring{position:absolute;inset:0;animation:spin var(--dur,150s) linear infinite}
.ring::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--rr)*var(--os)*2);aspect-ratio:1;
  transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.10);border-radius:50%}
.orb,.fix,.spin{position:absolute;left:0;top:0;width:0;height:0}
.orb{left:50%;top:50%;transform:rotate(var(--a)) translateY(calc(var(--rr) * var(--os) * -1))}
.fix{transform:rotate(calc(var(--a) * -1))}
.spin{animation:spinback var(--dur,150s) linear infinite}
.oname{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:clamp(11px,1vw,14px);font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.9);padding:6px 10px;
  animation:recycle var(--dur,50s) linear infinite;
  animation-delay:calc(var(--dur,50s) * -1 * var(--phase,0))}
/* 0% = top of the circle, 50% = bottom. Names fade out into the bottom third,
   swap to a new brand while hidden, then rise back up the other side. */
@keyframes recycle{0%,28%{opacity:1}36%,64%{opacity:0}72%,100%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinback{to{transform:rotate(-360deg)}}
.orbit-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(44%,360px);aspect-ratio:1;
  border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(125% 125% at 25% 18%,#0000EE 0%,#3A0090 36%,#8A0B5E 62%,#FF1E1E 100%);
  box-shadow:0 0 90px rgba(0,0,238,.45),0 0 160px rgba(255,30,30,.22)}
.orbit-core span{font-weight:700;letter-spacing:.32em;font-size:clamp(13px,2vw,26px);line-height:1.5;text-transform:uppercase;padding:0 12%}
.orbit-count{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.marquees{display:none}
.mq{overflow:hidden;padding:9px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.mq-in{display:flex;gap:28px;width:max-content;animation:slide var(--dur) linear infinite;animation-direction:var(--dir,normal)}
.mq span{font-size:13px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.82);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
@media (max-width:820px){
  .orbit-wrap{min-height:0;display:block}
  .orbit{display:none}
  .marquees{display:grid;gap:2px;margin-top:6px}
  .core-m{width:210px;aspect-ratio:1;margin:0 auto clamp(30px,7vw,48px);border-radius:50%;display:grid;place-items:center;
    text-align:center;background:radial-gradient(125% 125% at 25% 18%,#0000EE 0%,#3A0090 36%,#8A0B5E 62%,#FF1E1E 100%);
    box-shadow:0 0 60px rgba(0,0,238,.45)}
  .core-m span{font-weight:700;letter-spacing:.3em;font-size:14px;line-height:1.5;text-transform:uppercase;padding:0 12%}
}
@media (min-width:821px){.core-m{display:none}}

/* Services — two columns, categories left, subcategories right */
.svc2{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,6vw,96px);align-items:start}
.svc-list{display:grid;gap:2px;border-top:1px solid rgba(255,255,255,.12)}
.svc-item{position:relative;width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.12);
  cursor:pointer;display:flex;align-items:center;gap:14px;padding:clamp(15px,1.9vw,24px) 0;text-align:left;
  color:rgba(255,255,255,.5);transition:color .45s var(--ease)}
.svc-item:hover{color:rgba(255,255,255,.82)}
.svc-item[aria-selected="true"]{color:#fff}
.svc-idx{font-size:11px;font-weight:700;letter-spacing:.2em;opacity:.55;width:24px;flex:none;font-variant-numeric:tabular-nums}
.svc-name{font-size:clamp(20px,2.5vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.1;transition:transform .5s var(--ease)}
.svc-item[aria-selected="true"] .svc-name{transform:translateX(2px)}
.brk{width:clamp(11px,1.05vw,15px);height:clamp(17px,1.6vw,23px);flex:none;color:var(--red);
  opacity:0;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.brk-l{transform:translateX(10px)}
.brk-r{transform:translateX(-10px);margin-left:auto}
.svc-item[aria-selected="true"] .brk{opacity:1;transform:translateX(0)}
.svc-panels{position:relative;min-height:clamp(210px,24vw,300px);padding-top:clamp(10px,1.6vw,22px)}
.svc-panel{position:absolute;inset:0;padding-top:inherit;visibility:hidden;opacity:0;transition:opacity .45s var(--ease)}
.svc-panel[data-on="true"]{visibility:visible;opacity:1;position:relative}
.svc-panel h3{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin:0 0 clamp(16px,2vw,26px)}
.svc-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(9px,1.1vw,14px)}
.svc-panel li{font-size:clamp(15px,1.55vw,21px);font-weight:400;color:rgba(255,255,255,.78);line-height:1.3;
  padding-left:20px;position:relative;opacity:0;transform:translateY(8px)}
.svc-panel li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1.5px;background:var(--red);opacity:.85}
.svc-panel[data-on="true"] li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i) * 55ms + 90ms)}
@media (max-width:860px){
  .svc2{grid-template-columns:1fr;gap:clamp(18px,4vw,28px)}
  .svc-panels{min-height:clamp(170px,44vw,230px)}
}

/* Contact */
.contact-in{max-width:840px;margin:0 auto}
.form{background:var(--navy);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,3vw,44px);margin-top:clamp(28px,4vw,46px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:15px 16px;font-size:16px;outline:none;transition:border-color .25s,background .25s}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:var(--navy)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);background:rgba(0,0,238,.14)}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.form-foot p{margin:0;font-size:13px;color:var(--muted)}
.done{display:none;text-align:center;padding:clamp(40px,6vw,80px) 10px}
.done .tick{width:84px;height:84px;margin:0 auto 26px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:38px;font-weight:800;animation:pop .6s var(--ease)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.form.sent .form-body{display:none}.form.sent .done{display:block}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}

/* Floating WhatsApp */
.wa{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:60;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .35s var(--ease),box-shadow .35s}
.wa:hover{transform:scale(1.08);box-shadow:0 14px 38px rgba(37,211,102,.5)}
.wa svg{width:34px;height:34px;fill:#fff}
.wa .pulse{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:wapulse 2.6s infinite}
@keyframes wapulse{70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media (max-width:620px){.wa{width:54px;height:54px}.wa svg{width:30px;height:30px}}

/* Footer */
.foot{background:var(--ink);border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0 30px}
.foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:start}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.foot h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.foot ul a:hover{color:var(--red)}
.foot-big{margin-top:clamp(36px,5vw,64px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}