/* Studio — Creative Agency Template. Brand color: --accent. */
:root{--bg:#0e0e0e;--fg:#f4f1ea;--muted:#9a978f;--line:#2a2a2a;--accent:#ff4d2e;--font:"Space Grotesk",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.wrap{width:min(1320px,100% - 48px);margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;background:var(--accent);color:#fff;border:0;font:600 1rem var(--font);cursor:pointer;transition:transform .2s}
.btn:hover{transform:scale(1.04)}.btn--sm{height:44px;padding:0 20px}
.nav{position:sticky;top:0;z-index:20;background:rgba(14,14,14,.8);backdrop-filter:blur(12px)}
.nav__in{display:flex;align-items:center;gap:32px;height:80px}
.logo{font-size:1.6rem;font-weight:700;letter-spacing:-.04em}.logo span{color:var(--accent);font-size:.8em;vertical-align:super}
.nav__links{display:flex;gap:28px;margin-left:auto}.nav__links a{color:var(--muted)}.nav__links a:hover{color:var(--fg)}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;gap:7px}
.burger span{display:block;height:2px;background:var(--fg)}
@media (max-width:820px){.nav__links{display:none;position:absolute;top:80px;left:0;right:0;flex-direction:column;background:var(--bg);padding:20px 24px;border-bottom:1px solid var(--line)}.nav__links.open{display:flex}.burger{display:flex}.nav .btn{display:none}}

.hero{padding:80px 0 60px}
.kicker{color:var(--muted);font-size:.95rem;text-transform:uppercase;letter-spacing:.14em;margin:0 0 24px}
.hero h1{font-size:clamp(3rem,1rem + 9vw,10rem);line-height:.9;letter-spacing:-.06em;margin:0;font-weight:700}
.line{display:block}
.pill-img{display:inline-block;width:1.6em;height:.8em;border-radius:999px;background:linear-gradient(120deg,var(--accent),#ffb199,#ffe29a);vertical-align:.02em;animation:wob 6s ease-in-out infinite}
@keyframes wob{50%{border-radius:40% 60% 45% 55%/60% 40% 60% 40%;transform:rotate(-4deg)}}
.dot{color:var(--accent)}
.hero__foot{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:48px}
.hero__foot p{max-width:460px;color:var(--muted);font-size:1.15rem;margin:0}
.round{width:110px;height:110px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);font-size:2rem;transition:background .3s,transform .3s}
.round:hover{background:var(--accent);transform:rotate(-45deg)}

.ticker{overflow:hidden;border-block:1px solid var(--line);padding:22px 0}
.ticker div{display:flex;gap:40px;width:max-content;animation:tk 28s linear infinite;font-size:clamp(1.8rem,1rem + 2vw,3rem);font-weight:600;letter-spacing:-.03em}
.ticker b{color:var(--accent)}
@keyframes tk{to{transform:translateX(-50%)}}

.section{padding:110px 0}
.head{display:flex;align-items:baseline;gap:22px;margin-bottom:50px;border-bottom:1px solid var(--line);padding-bottom:22px}
.num{color:var(--accent);font-weight:600}
.head h2{margin:0;font-size:clamp(2.2rem,1rem + 3vw,4rem);letter-spacing:-.05em;line-height:1}
.services{display:grid}
.service{border-bottom:1px solid var(--line)}
.service summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:30px 0;cursor:pointer;font-size:clamp(1.5rem,1rem + 1.6vw,2.6rem);font-weight:600;letter-spacing:-.03em}
.service summary::-webkit-details-marker{display:none}
.service summary em{font-style:normal;color:var(--accent);transition:transform .3s}
.service[open] summary em{transform:rotate(45deg)}
.service p{color:var(--muted);max-width:620px;margin:0 0 16px;font-size:1.1rem}
.service ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 30px}
.service li{padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-size:.9rem}

.work{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.case{display:grid;gap:16px}
.case--tall .case__art{aspect-ratio:4/5}.case--wide{grid-column:1/-1}.case--wide .case__art{aspect-ratio:21/9}
.case__art{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:linear-gradient(140deg,var(--c1),var(--c2));transition:border-radius .5s}
.case:hover .case__art{border-radius:80px}
.shape{position:absolute;border-radius:50%;background:rgba(255,255,255,.28);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.s1{width:45%;aspect-ratio:1;left:10%;top:15%}.s2{width:30%;aspect-ratio:1;right:12%;bottom:12%;border-radius:30%;background:rgba(0,0,0,.18)}
.s3{width:60%;aspect-ratio:2/1;left:20%;top:30%;border-radius:999px}.s4{width:35%;aspect-ratio:1;right:15%;top:20%;border-radius:20px;transform:rotate(20deg)}
.case:hover .shape{transform:translate(8%,-6%) rotate(10deg)}
.case__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.case__meta h3{margin:0;font-size:1.6rem;letter-spacing:-.03em}.case__meta span{color:var(--muted)}
@media (max-width:760px){.work{grid-template-columns:1fr}.case--wide{grid-column:auto}}

.numbers{background:var(--accent);color:#fff;padding:70px 0}
.numbers__in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.numbers strong{display:block;font-size:clamp(3rem,1rem + 5vw,6rem);letter-spacing:-.06em;line-height:1}
@media (max-width:760px){.numbers__in{grid-template-columns:1fr 1fr}}

.process{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:p}
.process li{padding:28px;border:1px solid var(--line);border-radius:24px;counter-increment:p;min-height:240px;display:flex;flex-direction:column;transition:background .3s}
.process li:hover{background:#171717}
.process li::before{content:"0" counter(p);color:var(--accent);font-weight:600;margin-bottom:auto}
.process b{font-size:1.6rem;letter-spacing:-.03em;margin-top:40px}.process p{color:var(--muted);margin:8px 0 0}
@media (max-width:900px){.process{grid-template-columns:1fr 1fr}}@media (max-width:560px){.process{grid-template-columns:1fr}}

.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team figure{margin:0}
.avatar{aspect-ratio:3/4;border-radius:24px;display:grid;place-items:center;font-size:3.5rem;font-weight:700;letter-spacing:-.04em;background:linear-gradient(160deg,hsl(var(--h) 70% 55%),hsl(calc(var(--h) + 40) 70% 30%));filter:grayscale(.6);transition:filter .4s}
.team figure:hover .avatar{filter:none}
.team figcaption{display:grid;margin-top:12px}.team figcaption span{color:var(--muted)}
@media (max-width:900px){.team{grid-template-columns:1fr 1fr}}

.contact{padding:120px 0;border-top:1px solid var(--line)}
.mega{display:block;font-size:clamp(3rem,1rem + 9vw,9rem);font-weight:700;letter-spacing:-.06em;line-height:1;margin-bottom:60px;transition:color .3s}
.mega:hover{color:var(--accent)}
.form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.form textarea{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:16px;padding:16px 18px;outline:0}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--accent)}
.form select option{background:var(--bg)}
.form .btn{justify-self:start}
@media (max-width:760px){.form{grid-template-columns:1fr}}
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:32px 0;border-top:1px solid var(--line);color:var(--muted)}
.footer nav{display:flex;gap:22px}.footer a:hover{color:var(--accent)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}