:root{--bg:#101010;--ink:#f1f0eb;--muted:#9a9a96;--red:#ff302a;--line:#343431;--english:'Satoshi';--gutter:clamp(24px,5vw,96px);color-scheme:dark}
html[data-font="general"]{--english:'General Sans'}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:45px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--english),'SUIT',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:var(--red);color:var(--bg)}:focus-visible{outline:2px solid var(--red);outline-offset:7px}p,h1,h2,dl{margin:0}a:hover{color:var(--red)}.red{color:var(--red)}.header{padding:40px var(--gutter);display:flex;justify-content:space-between;align-items:center}.logo{display:block;width:136px;height:auto}.header nav{display:flex;gap:42px;align-items:center;font-size:15px}.header nav a{display:flex;align-items:center;gap:9px}.dot{width:5px;height:5px;border-radius:50%;background:var(--red)}.hero{padding:clamp(72px,10vh,130px) var(--gutter) 55px;min-height:min(900px,calc(100svh - 115px));display:flex;flex-direction:column}.eyebrow,.section-label{font-size:12px;letter-spacing:.04em}.eyebrow{color:var(--muted);margin-bottom:42px}.hero h1{font-size:clamp(50px,8.7vw,172px);font-weight:400;line-height:1.08;letter-spacing:-.04em}.hero h1 span{display:block}.hero h1 .red{display:inline}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:90px;font-size:13px;line-height:1.6;color:var(--muted)}.hero-bottom a{display:flex;align-items:center;gap:50px}.hero-bottom a span{font-size:28px;color:var(--ink)}.section{margin:0 var(--gutter);padding:160px 0;border-top:1px solid var(--line)}.section-label{color:var(--muted)}.section-label .red{margin-right:14px}.intro{display:grid;grid-template-columns:1fr 2.2fr;gap:50px;padding-top:180px;padding-bottom:200px}.intro h2{font-family:'SUIT',sans-serif;font-weight:400;font-size:clamp(28px,3.1vw,50px);letter-spacing:-.035em;line-height:1.55}.lead{font-size:clamp(17px,1.5vw,23px);line-height:1.9;color:#c8c8c3;margin-top:50px;font-family:'SUIT',sans-serif}.body-copy{max-width:590px;margin-top:70px;margin-left:auto;color:var(--muted);font:400 18px/1.9 'SUIT',sans-serif;word-break:keep-all}.body-copy p+p{margin-top:24px}.display{font-size:clamp(48px,7vw,112px);font-weight:400;letter-spacing:-.045em;line-height:1.12}.practice .display{margin-top:75px}.services{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:100px}.services span{border-top:1px solid var(--line);padding-top:22px;font-size:clamp(17px,1.6vw,24px)}.history{display:grid;grid-template-columns:1fr 2.2fr;gap:50px}.timeline{margin-top:75px}.timeline>div{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:31px 0;border-bottom:1px solid var(--line)}.timeline dt{font-size:26px}.timeline dd{margin:0;align-self:center;font-size:16px;color:#bcbcb6;line-height:1.7;word-break:keep-all}.clients .display{margin-top:70px}.clients-intro{font:400 16px/1.8 'SUIT',sans-serif;color:var(--muted);margin-top:25px}.client-list{list-style:none;margin:90px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:70px 35px;align-items:center}.client-list li{font-size:clamp(17px,2vw,30px);letter-spacing:.015em}.client-list li:nth-child(11){font-size:clamp(13px,1.4vw,22px)}footer{margin:0 var(--gutter);border-top:1px solid var(--line);padding:65px 0 150px;display:flex;justify-content:space-between;gap:30px;align-items:flex-start;font-size:13px;line-height:1.7;color:var(--muted)}footer img{width:140px;height:auto}.font-panel{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:18px;background:#20201ff5;border:1px solid #44443f;border-radius:8px;padding:10px 13px;box-shadow:0 8px 35px #0005;font:12px 'SUIT',sans-serif;white-space:nowrap}.font-panel>div{display:flex;gap:5px}.font-panel button{background:transparent;color:#b6b6b1;border:1px solid transparent;padding:9px 13px;border-radius:4px;cursor:pointer;font-family:system-ui,sans-serif;font-size:12px}.font-panel button[aria-pressed="true"]{background:var(--ink);color:#151515}.panel-note{color:var(--muted);font-size:11px}.sr-only,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{width:auto;height:auto;clip-path:none;top:10px;left:20px;z-index:20;padding:10px;background:var(--bg)}
@media(min-width:1700px){footer{max-width:1920px;margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}.section{max-width:1728px;margin-left:auto;margin-right:auto;width:calc(100% - 2 * var(--gutter))}}
@media(max-width:760px){.header{padding-top:26px;padding-bottom:26px}.logo{width:93.6px}.header nav{gap:18px;font-size:12px}.hero{min-height:calc(88svh - 80px);padding-top:65px;padding-bottom:40px}.eyebrow{font-size:10px;margin-bottom:36px}.hero h1{font-size:clamp(40px,9.4vw,72px);letter-spacing:-.04em;line-height:1.14}.hero-bottom{font-size:11px;padding-top:100px}.hero-bottom a{gap:15px}.section{padding:95px 0}.intro,.history{grid-template-columns:1fr;gap:50px}.intro h2{font-size:28px}.lead{font-size:17px;margin-top:34px}.desktop-break{display:none}.body-copy{font-size:16px;margin-top:40px;margin-left:0}.practice .display,.clients .display{margin-top:50px}.services{grid-template-columns:repeat(2,1fr);margin-top:60px;gap:35px 20px}.timeline{margin-top:45px}.timeline>div{grid-template-columns:70px 1fr;padding:25px 0}.timeline dd{font-size:14px}.timeline dt{font-size:22px}.client-list{grid-template-columns:repeat(3,1fr);gap:42px 20px;margin-top:60px}.client-list li{font-size:17px}.client-list li:nth-child(11){font-size:10px}footer{padding-top:40px;flex-wrap:wrap}footer img{width:110px}.font-panel{bottom:12px;gap:10px;max-width:calc(100vw - 24px)}.panel-note{display:none}.font-panel button{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Showreel hero */
.header{position:absolute;top:0;left:0;right:0;z-index:3;background:linear-gradient(#000b,transparent)}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(1000px,100svh);padding-top:clamp(180px,25vh,290px)}
.hero-video,.hero-shade{position:absolute;inset:0;width:100%;height:100%;z-index:-2;object-fit:cover}
.hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.15)),linear-gradient(0deg,#101010 0%,transparent 35%,rgba(0,0,0,.15) 100%)}
.hero .eyebrow,.hero-bottom{color:#e2e2dc}.hero h1{text-shadow:0 2px 24px #0004}
.reel-actions{display:flex;gap:25px;align-items:center}.reel-actions button{color:var(--ink);cursor:pointer}.reel-open{border:1px solid #ffffff70;background:#0003;padding:15px 23px;border-radius:40px;font-size:14px}.reel-open span{margin-left:35px}.reel-pause{border:0;border-bottom:1px solid #ffffff60;background:none;padding:6px 0;font-size:12px}.reel-actions button:hover{color:white;background:#ffffff20}
.reel-dialog{padding:48px 0 0;border:0;background:#101010;width:min(1200px,94vw);max-width:94vw;max-height:92svh;color:white;overflow:auto}.reel-dialog::backdrop{background:#000e}.full-reel{display:block;width:100%;max-height:calc(92svh - 48px)}.reel-close{position:absolute;top:12px;right:18px;color:white;background:none;border:0;cursor:pointer;font:14px 'SUIT',sans-serif;padding:4px 8px}body:has(.reel-dialog[open]){overflow:hidden}body:has(.reel-dialog[open]) .font-panel{visibility:hidden}
@media(max-width:760px){.hero{min-height:90svh;padding-top:180px}.reel-actions{gap:15px}.reel-open{padding:12px 15px;font-size:12px}.reel-open span{margin-left:18px}.hero-bottom>a{font-size:0}.hero-bottom>a span{font-size:25px}.hero-shade{background:linear-gradient(90deg,#0007,#0003),linear-gradient(0deg,#101010,transparent 45%)}}

/* Expand the reel with the viewport, capped at 2500px. */
.hero{width:100%;max-width:2500px;margin-inline:auto}
.header{max-width:2500px;margin-inline:auto}
/* Center-crop the reel to 2:1 above 1280px; hold its 640px height below. */
.hero{height:640px;min-height:640px;padding-top:clamp(160px,13vw,290px)}
.hero-video{object-position:center center}
@media(min-width:1281px){.hero{height:auto;min-height:0;aspect-ratio:2 / 1}}

/* Bottom-align the slogan over the reel. */
.hero{justify-content:flex-end;padding-bottom:clamp(44px,5vw,100px)}
.hero .eyebrow{position:absolute;top:clamp(130px,10vw,180px);left:var(--gutter);margin-bottom:0}
/* Keep headline size within a readable range across viewport sizes. */
.hero h1{font-size:clamp(80px,8.7vw,130px);overflow-wrap:normal;word-break:normal}
/* Place the studio descriptor directly above the slogan. */
.hero .eyebrow{position:static;font-size:clamp(14px,1.1vw,18px);margin:0 0 24px;line-height:1.5}
/* Wider, more readable Korean introduction. */
.intro{grid-template-columns:clamp(120px,12vw,190px) minmax(0,1fr);gap:40px}
.intro h2{font-size:clamp(36px,3.8vw,60px);line-height:1.5;word-break:keep-all}
.intro .lead{font-size:clamp(20px,1.9vw,28px);line-height:1.85;word-break:keep-all}
.intro .body-copy{max-width:850px;margin-left:0;margin-top:55px;font-size:clamp(20px,1.55vw,23px);line-height:1.9}
.intro-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.intro-reveal.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:760px){.intro{grid-template-columns:1fr;gap:36px}.intro h2{font-size:clamp(30px,5.8vw,40px)}.intro .lead{font-size:20px}.intro .body-copy{font-size:19px;margin-top:38px}}
@media(prefers-reduced-motion:reduce){.intro-reveal{opacity:1;transform:none;transition:none}}
/* Editorial pacing: offset text blocks instead of a single left edge. */
.section{border-top:0;padding-top:110px;padding-bottom:110px}
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:44px;padding-top:110px;padding-bottom:100px}
.intro>.section-label{grid-column:1 / 4;grid-row:1;align-self:start;padding-top:12px}
.intro-copy{display:contents}
.intro h2{grid-column:4 / 13;grid-row:1;font-size:clamp(32px,3.1vw,48px);line-height:1.55;letter-spacing:-.035em}
.intro .lead{grid-column:2 / 11;grid-row:2;margin-top:15px;font-size:clamp(18px,1.65vw,24px);line-height:1.85}
.intro .body-copy{grid-column:6 / 13;grid-row:3;max-width:600px;margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.9}
.intro .body-copy p+p{margin-top:22px}
.practice .display{margin-top:45px}.services{margin-top:65px}
.clients .display{margin-top:45px}.client-list{margin-top:65px}
footer{border-top:0}
@media(max-width:760px){
 .section{padding-top:75px;padding-bottom:75px}
 .intro{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px;row-gap:30px}
 .intro>.section-label{grid-column:1 / 7;grid-row:1;padding-top:0}
 .intro h2{grid-column:1 / 7;grid-row:2;font-size:clamp(27px,5vw,36px)}
 .intro .lead{grid-column:2 / 7;grid-row:3;margin-top:6px;font-size:18px}
 .intro .body-copy{grid-column:1 / 6;grid-row:4;margin-top:5px;font-size:16px}
}

/* Brand-red accents and a contrasting practice spread. */
.intro-accent{color:#ff4941}
.copy-emphasis{color:var(--ink)}
.practice.section{background:#E52622;color:#101010;width:100%;max-width:2500px;margin:35px auto 45px;padding:80px var(--gutter) 70px;position:relative}
.practice .section-label,.practice .section-label .red,.practice .display .red{color:#101010}
.practice .display{margin:45px 0 0 12%;font-size:clamp(56px,8vw,124px)}
.practice .services{margin:60px 0 0 36%;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px}
.practice .services span{border-top:0;padding-top:0;font-size:clamp(17px,1.5vw,23px)}
.history .timeline dt{color:#ff4941}
.clients .display{color:#ff4941}
@media(max-width:760px){.practice.section{padding:60px var(--gutter);margin:10px auto 20px}.practice .display{margin-left:0;font-size:clamp(52px,10vw,76px)}.practice .services{margin:45px 0 0 12%;gap:20px}.practice .services span{font-size:16px}}
/* White typography on the brand-red practice section. */
.practice.section,.practice .section-label,.practice .section-label .red,.practice .display .red{color:#ffffff}
/* Original client marks and staggered project history. */
.client-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:65px 45px}
.client-list li{display:flex;align-items:center;justify-content:center;min-height:85px}
.client-list img{display:block;width:auto;height:auto;max-width:170px;max-height:75px;object-fit:contain;max-inline-size:min(170px,100%)}
.timeline>div{padding:32px 0;border-bottom:0;align-items:start}
.timeline dd ul{list-style:none;padding:0;margin:0}.timeline dd li{padding:0 0 13px;line-height:1.7}
.history-animated dt,.history-animated li{opacity:0;transform:translateY(16px);clip-path:inset(0 0 100% 0);transition:opacity .45s ease,transform .65s cubic-bezier(.22,1,.36,1),clip-path .65s cubic-bezier(.22,1,.36,1)}
.history-animated li{transition-delay:calc(var(--order) * 85ms + 65ms)}
.history-visible dt,.history-visible li{opacity:1;transform:none;clip-path:inset(0)}
@media(max-width:760px){.client-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 24px}.client-list img{max-height:52px}.client-list li{min-height:65px}.timeline>div{padding:24px 0}.timeline dd li{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.history-animated dt,.history-animated li{opacity:1;transform:none;clip-path:none;transition:none}}
/* Compact history in two columns on larger screens. */
.history.section{display:block}
.history.section>div:last-child{margin-top:45px}
.history .timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,110px);row-gap:20px;margin-top:55px}
.history .timeline>div{grid-template-columns:80px minmax(0,1fr);gap:22px;padding:24px 0}
@media(max-width:900px){.history .timeline{grid-template-columns:1fr;row-gap:0;margin-top:35px}.history .timeline>div{grid-template-columns:70px minmax(0,1fr);gap:20px}}
/* Align history content with the practice headline above. */
.history.section{width:100%;max-width:2500px;margin-inline:auto;padding-inline:var(--gutter)}
.history.section>div:last-child{margin-left:12%}
.history .timeline dd{align-self:start}
@media(max-width:760px){.history.section>div:last-child{margin-left:0}}

/* Mobile hero slogan at 80% of the desktop size rule. */
@media(max-width:760px){.hero h1{font-size:clamp(64px,6.96vw,104px)}}