@import url('assets/fonts.css');
:root{--paper:#fafaf7;--ink:#191919;--acid:#d9ff43;--font:'Be Vietnam Pro',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:65px}body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.65 var(--font);-webkit-font-smoothing:antialiased}button,a,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:6px}h1,h2,h3,p{margin:0}img{display:block;width:100%;height:auto}button:disabled{cursor:default}::selection{background:var(--acid);color:var(--ink)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:-100px;left:20px;padding:10px 20px;background:var(--acid);z-index:200}.skip:focus{top:50px}.arrow{display:inline-block;font-family:Arial,sans-serif;font-size:1.4em;line-height:1}.header{display:flex;align-items:center;justify-content:space-between;padding:23px 32px 30px;gap:48px}.wordmark{font-size:64px;line-height:1.3;font-weight:900;letter-spacing:-.065em;white-space:nowrap;flex-shrink:0}.wordmark>span{font-size:20px;letter-spacing:0;vertical-align:top;position:relative;top:10px;margin-left:5px}.main-nav{display:flex;align-items:center;gap:36px;margin-left:auto;font-size:17px}.main-nav a{position:relative}.menu-toggle{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:8px 2px;margin-left:25px}.menu-toggle>span{display:block;height:2px;width:29px;background:var(--ink);transition:width .2s}.menu-toggle:hover>span:last-child{width:19px}.hero{padding:8px 32px 54px}.hero-layout{display:grid;grid-template-columns:40% 60%;align-items:start;padding-top:44px}.expertise{padding-top:10px}.expertise h2{font-size:24px;letter-spacing:-1px;line-height:1.4;font-weight:500}.expertise ul{display:grid;grid-template-columns:auto auto;column-gap:20px;row-gap:2px;max-width:360px;margin:32px 0 22px;padding:0;list-style:none;font-size:13px}.studio-note{color:#77776f;font-size:11px}.hero-statement{min-width:0}.hero h1{font-size:clamp(40px,5.9vw,106px);line-height:1.12;letter-spacing:-.065em;font-weight:900}.hero h1>span{display:block;white-space:nowrap}.outline{color:transparent;-webkit-text-stroke:1.2px var(--ink)}.work{padding:0 32px}.work-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0}.work-toolbar h2{font-size:12px;font-weight:400;white-space:nowrap}.work-toolbar sup{font-size:9px;margin-left:5px}.filters{display:flex;gap:22px}.filters button{padding:5px 0;position:relative;font-size:12px}.filters button{opacity:.6}.filters button[aria-pressed=true]{font-weight:700;opacity:1}.filters button:hover{opacity:1}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 24px}.project{min-width:0}.project-wide{grid-column:1/-1}.project-visual{position:relative;aspect-ratio:1;overflow:hidden}.project-visual>img{height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}.project-wide .project-visual{aspect-ratio:2.05}.la-visual{background:#283bea}.mua-visual{background:#a63e2e}.song-visual{background:#171a1b}.vom-visual{background:#ead4ca}.project-link:hover .project-visual>img{transform:scale(1.035)}.project-link:is(:hover,:focus-visible) h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}.image-label{position:absolute;left:24px;top:21px;font-size:10px;letter-spacing:.08em;color:white;mix-blend-mode:difference}.project-caption{display:flex;gap:20px;align-items:baseline;justify-content:space-between;padding-top:13px}.project-caption h3{font-size:19px;line-height:1.5;font-weight:600;letter-spacing:-.04em}.project-caption h3 span{font-size:13px;font-weight:400;letter-spacing:-.02em;margin-left:9px}.project-caption p{font-size:10px;text-align:right;color:#6c6c64;max-width:50%}.project:not(.project-wide) .project-caption{display:block}.project:not(.project-wide) .project-caption p{max-width:none;text-align:left;margin-top:4px}.work-bottom{display:flex;justify-content:flex-end;gap:20px;font-size:11px;margin-top:26px;padding-bottom:70px}.work-bottom>a{display:flex;align-items:center;gap:12px}.studio{display:grid;grid-template-columns:30% 70%;padding:66px 32px 90px}.section-label{font-size:11px;display:flex;align-items:start;justify-content:space-between;padding-right:50px;gap:10px}.studio-main h2{font-size:clamp(32px,4.6vw,72px);line-height:1.2;letter-spacing:-.06em;font-weight:500}.studio-main h2 em{font-style:normal}.studio-copy{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin:37px 0 45px;max-width:820px}.studio-copy p{font-size:14px;line-height:1.85}.services{max-width:820px;overflow-anchor:none}.services details{overflow:hidden}summary{list-style:none;display:flex;align-items:center;gap:28px;cursor:pointer;padding:20px 0;font-size:21px;letter-spacing:-.04em}summary::-webkit-details-marker{display:none}summary>span:first-child{font-size:10px;letter-spacing:0;color:#686860}.plus{font:26px Arial,sans-serif;margin-left:auto;transition:transform .45s cubic-bezier(.6,0,.2,1)}details[open]:not(.is-closing) .plus{transform:rotate(45deg)}details>p{margin:0 35px 24px 44px;max-width:580px;font-size:13px;color:#62625a;transition:opacity .35s}details.is-closing>p{opacity:0}.contact{background:var(--acid);padding:28px 32px 42px}.contact-top,.contact-bottom{display:flex;justify-content:space-between;gap:20px;font-size:11px}.contact-link{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:54px 0}.contact h2{font-size:clamp(65px,10vw,160px);font-weight:600;letter-spacing:-.075em;line-height:1.03}.contact h2>span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}.contact-arrow{font:clamp(100px,18vw,260px)/.9 Arial,sans-serif;transition:transform .3s}.contact-link:hover .contact-arrow{transform:translate(10px,-10px)}.contact-bottom{align-items:end}.contact-bottom>a{font-size:14px;display:flex;align-items:center;gap:30px;padding-bottom:6px}footer{padding:28px 32px;display:flex;align-items:center;gap:45px}.footer-mark{font-size:38px;font-weight:900;letter-spacing:-3px;line-height:1}footer p{font-size:10px;color:#62625c}footer>span{font-size:10px;margin-left:auto}dialog{border:0;padding:0;color:var(--ink);background:var(--paper);max-width:none}dialog::backdrop{background:#101010b8;backdrop-filter:blur(7px)}body:has(dialog[open]){overflow:hidden}.menu-dialog{inset:42px 0 0;max-height:calc(100dvh - 42px);height:calc(100dvh - 42px);width:100%;margin:0;background:var(--acid);padding:28px 6vw 40px}.menu-top{display:flex;justify-content:space-between;align-items:center}.menu-top .wordmark{font-size:50px}.close-menu{position:absolute;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:8px 2px;z-index:1}.close-menu>span{display:block;height:2px;width:29px;background:var(--ink);}.menu-dialog[open] .close-menu>span:first-child{animation:menu-fold-top .6s cubic-bezier(.6,0,.2,1) .1s both}.menu-dialog[open] .close-menu>span:last-child{animation:menu-fold-bottom .6s cubic-bezier(.6,0,.2,1) .1s both}@keyframes menu-fold-top{0%{transform:none}45%{transform:translateY(4.5px)}100%{transform:translateY(4.5px) rotate(45deg)}}@keyframes menu-fold-bottom{0%{transform:none;width:var(--w,29px)}45%{transform:translateY(-4.5px);width:29px}100%{transform:translateY(-4.5px) rotate(-45deg);width:29px}}@keyframes menu-unfold-top{0%{transform:translateY(4.5px) rotate(45deg)}55%{transform:translateY(4.5px)}100%{transform:none}}@keyframes menu-unfold-bottom{0%{transform:translateY(-4.5px) rotate(-45deg)}55%{transform:translateY(-4.5px)}100%{transform:none}}@media(hover:hover){.close-menu{--w:19px}}.menu-dialog[open].is-closing{clip-path:inset(0 0 100% 0);transition-delay:.4s}.menu-dialog[open].is-closing::backdrop{opacity:0;transition-delay:.45s}.menu-dialog[open].is-closing :is(nav a,.menu-top,nav~p){opacity:0;transform:translateY(32px);transition:opacity .25s,transform .25s}.menu-dialog[open].is-closing .close-menu>span:first-child{animation:menu-unfold-top .5s cubic-bezier(.6,0,.2,1) both}.menu-dialog[open].is-closing .close-menu>span:last-child{animation:menu-unfold-bottom .5s cubic-bezier(.6,0,.2,1) both}.menu-dialog nav{max-width:950px;margin:45px auto}.menu-dialog nav a{display:flex;align-items:center;gap:30px;padding:16px 0;font-size:clamp(40px,7vw,100px);line-height:1.1;letter-spacing:-.06em;}.menu-dialog nav a span:first-child{font-size:12px;letter-spacing:0}.menu-dialog>p{font-size:12px}.project-dialog{width:calc(100% - 64px);max-width:1360px;max-height:calc(100dvh - 80px);overscroll-behavior:contain}.case-top{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;background:var(--paper);padding:16px 30px;z-index:2;font-size:10px}.close-project{display:flex;align-items:center;gap:15px;font-size:12px;min-height:36px}.close-project>span{font:26px Arial,sans-serif}.case-heading{padding:45px 40px 36px}.case-heading>p{font-size:10px;margin-bottom:15px}.case-heading h2{font-size:clamp(70px,12vw,150px);line-height:1.1;font-weight:800;letter-spacing:-.075em}.case-heading h3{font-size:clamp(22px,3vw,40px);font-weight:400;letter-spacing:-.04em;margin-top:16px}.case-image{width:100%;max-height:650px;object-fit:cover}.case-story{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:44px 40px}.case-facts{font-size:11px}.case-facts dt{color:#72726b;font-size:10px;margin-bottom:5px}.case-facts dd{margin:0 0 22px}.case-story h4{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px}.case-story p{font-size:17px;line-height:1.85;max-width:700px;margin-bottom:26px}.palette{display:flex;height:70px;margin:0 40px 38px}.palette span{flex:1;display:flex;align-items:end;justify-content:center;padding:10px;font-size:10px}.case-note{font-size:10px;padding:0 40px 32px;color:#6c6c64}.next-project{width:100%;display:flex;align-items:center;padding:26px 40px;gap:25px;text-align:left}.next-project>span:first-child{font-size:11px}.next-project>span:nth-child(2){font-size:35px;font-weight:700;letter-spacing:-.05em}.next-project>span:last-child{margin-left:auto;font:40px Arial,sans-serif}
.menu-dialog{clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.7,0,.2,1),overlay .55s allow-discrete,display .55s allow-discrete}.menu-dialog[open]{clip-path:inset(0)}.menu-dialog::backdrop{opacity:0;transition:opacity .4s,overlay .55s allow-discrete,display .55s allow-discrete}.menu-dialog[open]::backdrop{opacity:1}.menu-dialog :is(nav a,.menu-top,nav~p){opacity:0;transform:translateY(32px);transition:opacity .25s,transform .25s}.menu-dialog[open] :is(nav a,.menu-top,nav~p){opacity:1;transform:none;transition:opacity .5s var(--d,.2s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,.2s)}.menu-dialog .menu-top{--d:.15s}.menu-dialog nav a:nth-child(1){--d:.25s}.menu-dialog nav a:nth-child(2){--d:.32s}.menu-dialog nav a:nth-child(3){--d:.39s}.menu-dialog nav~p{--d:.48s}@starting-style{.menu-dialog[open]{clip-path:inset(0 0 100% 0)}.menu-dialog[open]::backdrop{opacity:0}.menu-dialog[open] :is(nav a,.menu-top,nav~p){opacity:0;transform:translateY(32px)}}@media(prefers-reduced-motion:reduce){.menu-dialog,.menu-dialog::backdrop,.menu-dialog *{transition:none!important;animation-duration:0s!important;animation-delay:0s!important}}
.project-dialog{will-change:opacity,transform;transition:opacity .45s,transform .7s cubic-bezier(.2,.7,.2,1)}.project-dialog::backdrop{transition:opacity .45s,backdrop-filter .45s}.project-dialog[open].is-closing{opacity:0;transform:translateY(48px);transition:opacity .3s,transform .35s cubic-bezier(.7,0,.8,.4)}.project-dialog[open].is-closing::backdrop{opacity:0;backdrop-filter:blur(0);transition:opacity .35s,backdrop-filter .35s}@starting-style{.project-dialog[open]{opacity:0;transform:translateY(72px)}.project-dialog[open]::backdrop{opacity:0;backdrop-filter:blur(0)}}
@media(min-width:1800px){body{max-width:2000px;margin:auto}.hero h1{font-size:115px}}
@media(max-width:900px){.hero-layout{grid-template-columns:34% 66%}.hero h1{font-size:6.3vw}.expertise h2{font-size:19px}.expertise ul{grid-template-columns:1fr;margin-top:22px;font-size:12px}.studio-note{display:none}.project-caption h3 span{display:block;margin:2px 0 0}.studio{grid-template-columns:25% 75%}.section-label{padding-right:30px}.studio-copy{gap:25px}.project-caption p{font-size:9px}}
@media(max-width:600px){.header{padding:19px 18px 23px;gap:15px}.wordmark{font-size:clamp(36px,10vw,49px);letter-spacing:-.065em}.menu-top .wordmark{font-size:clamp(36px,10vw,49px)}.wordmark>span{font-size:16px;top:7px}.main-nav{display:none}.menu-toggle{margin-left:auto}.hero{padding:0 18px 28px}.hero-layout{display:flex;flex-direction:column;padding-top:26px}.hero-statement{width:100%;order:0}.hero h1{font-size:13.4vw;line-height:1.16;letter-spacing:-.065em}.outline{-webkit-text-stroke:1px var(--ink)}.expertise{order:1;padding-top:25px;display:grid;grid-template-columns:1fr 1.1fr;gap:12px;width:100%;margin-top:23px}.expertise h2{font-size:16px;letter-spacing:-.05em}.expertise ul{display:block;font-size:11px;margin:0}.expertise li{line-height:1.8}.work{padding:0 18px}.work-toolbar{display:block;padding:17px 0}.work-toolbar h2{font-size:11px;margin-bottom:14px}.filters{gap:25px;flex-wrap:wrap}.filters button{font-size:11px;min-height:30px}.project-grid{grid-template-columns:1fr;gap:28px}.project-wide{grid-column:auto}.project-wide .project-visual{aspect-ratio:1.05}.project-visual{aspect-ratio:1.05}.project-visual.vom-visual>img{object-fit:cover;object-position:38%}.project-caption{display:block;padding-top:10px}.project-caption h3{font-size:19px}.project-caption h3 span{display:inline;margin-left:7px;font-size:11px}.project-caption p{max-width:none;text-align:left;font-size:9px;margin-top:4px}.image-label{left:16px;top:13px;font-size:8px}.work-bottom{font-size:9px;gap:20px;padding-bottom:38px;margin-top:22px}.work-bottom a{white-space:nowrap}.studio{display:block;padding:30px 18px 45px}.section-label{padding:0;margin-bottom:30px;font-size:10px}.studio-main h2{font-size:35px}.studio-copy{display:block;margin:30px 0}.studio-copy p{font-size:13px;margin-bottom:17px;line-height:1.8}summary{font-size:19px;gap:22px;padding:17px 0}details>p{margin-left:35px;font-size:12px}.contact{padding:22px 18px 28px}.contact-top{font-size:9px}.contact-top>span:last-child{max-width:125px;text-align:right}.contact-link{margin:40px 0;gap:10px}.contact h2{font-size:10.5vw;line-height:1.12}.contact h2>span{-webkit-text-stroke:1px var(--ink)}.contact-arrow{font-size:20vw}.contact-bottom{font-size:9px;gap:15px}.contact-bottom>a{font-size:10px;gap:10px}footer{padding:23px 18px;gap:20px}footer p{font-size:8px}.footer-mark{font-size:30px}footer>span{font-size:8px}.menu-dialog{padding:20px 22px}.menu-dialog nav{margin:50px 0}.menu-dialog nav a{font-size:clamp(30px,7.8vw,46px);padding:25px 0;gap:18px}.project-dialog{width:100%;max-height:calc(100dvh - 42px);height:calc(100dvh - 42px);margin:42px 0 0}.case-top{padding:10px 18px}.case-heading{padding:30px 20px}.case-heading h2{font-size:80px}.case-image{aspect-ratio:1;object-fit:cover}.case-story{grid-template-columns:1fr;padding:26px 20px;gap:15px}.case-facts{display:flex;gap:35px}.case-story p{font-size:15px}.palette{margin:0 20px 25px;height:60px}.case-note{padding:0 20px 25px}.next-project{padding:22px 20px;gap:20px}.next-project>span:nth-child(2){font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* SÓNG: simple, flat typographic identity. */
.song-visual{background:#171a1b}
song-art{display:block;position:relative;container-type:inline-size;width:100%;height:100%;overflow:hidden;background:#171a1b;color:#f7f7eb}
.song-topline,.song-baseline{position:absolute;left:7%;right:7%;display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.08em;line-height:1.5}
.song-topline{top:7%}.song-baseline{bottom:7%;padding-top:16px;}
.song-word{position:absolute;top:47%;left:5%;right:5%;transform:translateY(-50%);display:flex;justify-content:center;font-size:clamp(64px,28cqw,320px);font-weight:900;letter-spacing:-.085em;line-height:1.4;padding-right:.06em}
.song-word>span{display:block;animation:song-letter 4.8s ease-in-out infinite}
.song-word>span:nth-child(2){animation-delay:-.6s}.song-word>span:nth-child(3){animation-delay:-1.2s}.song-word>span:nth-child(4){animation-delay:-1.8s}
.song-word>sup{font-size:.09em;letter-spacing:0;align-self:flex-start;margin-top:3.6em;margin-left:.9em}
.song-wave{position:absolute;top:65%;left:-10%;width:120%;height:18%;color:#d9ff43;overflow:visible;animation:song-wave 4.8s ease-in-out infinite}
.song-wave path{stroke:currentColor;stroke-width:5;vector-effect:non-scaling-stroke}
song-art.is-paused *{animation-play-state:paused!important}
.song-visual>.image-label{display:none}
.case-song{height:min(65vw,680px);min-height:340px}
@keyframes song-letter{0%,100%{transform:translateY(.02em)}50%{transform:translateY(-.055em)}}
@keyframes song-wave{0%,100%{transform:translateX(-2%) scaleY(.7)}50%{transform:translateX(2%) scaleY(1.1)}}
@media(max-width:600px){.song-topline,.song-baseline{font-size:8px;letter-spacing:.035em}.song-wave path{stroke-width:3}.case-song{height:105vw;min-height:320px}}
@media(prefers-reduced-motion:reduce){song-art *{animation:none!important}}

/* Changing content: type, hold, backspace. The line box stays in place. */
.changing-word{min-height:1.12em;position:relative}
.typewriter-caret{display:inline-block;width:.045em;height:.77em;margin-left:.1em;background:currentColor;vertical-align:-.015em;animation:caret-blink 1s steps(1) infinite}
.changing-word.is-typing .typewriter-caret{animation:none}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.typewriter-caret{display:none}}


/* Agency descriptor keeps the full name compact at every viewport. */
.wordmark>small,.footer-mark>small{display:block;margin-top:3px;font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.16em;text-transform:uppercase}
.wordmark>.wordmark-location{display:flex;align-items:baseline;gap:12px}
.wordmark-coordinates{font-size:9px;letter-spacing:.035em;color:#62625c}

/* The shared portfolio chrome follows this showcase’s divider-free layout. */
body .portfolio-nav{border-bottom:0}
body .portfolio-nav .language-switch>[data-language].is-active:after{content:none}