@font-face {
 font-family:Urbanist; font-style:normal; font-weight:400 900; font-display:swap;
 src:url('/assets/fonts/urbanist-latin-variable.woff2') format('woff2');
}
:root {
 --studio-type:Urbanist,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",Arial,sans-serif;
 --studio-key:#4b5409; --studio-key-text:#454c0b; --studio-tint:#d8ddbd;
 --paper:#f8f8f5; --brown:#191916; --line:#19191634; --muted:#625f57;
 --accent:var(--studio-key); --accent-soft:#e9ecdc; --accent-sage:#c4cba1; --accent-sand:var(--studio-tint); --accent-ink:#191916;
 font-family:var(--studio-type)
}
body {font-family:var(--studio-type)}
button,input,textarea,select {font-family:inherit}
::selection {background:var(--studio-key); color:#fff}
body:not(.ink) {--muted:#615e59}
h1 i,h2 i,h3 i,.contact-big i,.service-row h3 small,.studio-capability h3 small {font-style:normal}
:is(.page-intro,.studio-hero,.svc-page) h1,.contact-big {font-weight:650; letter-spacing:-.062em}
.header {color:var(--brown)}
.header.scrolled {background:var(--paper)}
.header .wordmark:focus-visible,.index-hero a:focus-visible,.index-section a:focus-visible,.index-section button:focus-visible {outline:2px solid currentColor; outline-offset:3px}
.header-nav>a::after,.header-nav .nav-services>a::after {background:var(--studio-key)}
.menu .menu-service-links a:is(:hover,:focus-visible) {color:var(--studio-tint)}
.index-hero {position:relative; isolation:isolate; display:grid; align-content:start; margin:0 auto; max-width:2048px; padding:clamp(115px,9vw,155px) max(var(--gutter),3%) clamp(56px,5vw,96px); color:var(--brown); background:var(--paper)}
.index-hero-top {z-index:1; font-weight:600}
.index-hero-top>p {font-size:clamp(13px,1.15vw,18px); letter-spacing:.005em; line-height:1.4; margin:0}
.index-disciplines {display:flex; align-items:center; flex-wrap:wrap; column-gap:0; row-gap:3px; margin-top:1px; width:fit-content; font-size:clamp(14px,1.2vw,19px); font-weight:535}
.index-disciplines>a {display:inline-flex; align-items:center; min-height:44px}
.index-disciplines>a:not(:last-child)::after {content:'·'; margin:0 .52em; color:var(--muted)}
.index-disciplines a:is(:focus-visible,:hover) {color:var(--studio-key-text); text-decoration:underline; text-underline-offset:5px}
.index-lockup {position:relative; display:grid; place-items:center; height:clamp(300px,32vw,560px); margin:clamp(24px,2.5vw,54px) 0}
.index-symbol {position:absolute; width:clamp(240px,26vw,475px); max-width:82%; pointer-events:none}
.index-symbol svg {display:block; width:100%; height:auto; overflow:visible}
.mark-row {transform-box:view-box; transform:translateY(var(--mark-shift))}
.mark-upper {--mark-shift:-14%}
.mark-lower {--mark-shift:14%}
.index-lockup h1 {position:relative; z-index:1; padding:0; margin:0; width:100%; text-align:center; font:740 clamp(53px,8.2vw,160px)/.98 var(--studio-type); letter-spacing:-.048em; word-spacing:.02em; color:var(--brown); white-space:nowrap}
.index-lockup h1 span {display:inline-block; padding:.035em .12em .075em .07em; background:var(--paper)}
.index-lockup h1 i {color:var(--studio-key); font-style:normal; font-weight:inherit}
.index-hero-foot {display:flex; align-items:end; justify-content:space-between; gap:20px; margin-top:clamp(14px,2vw,35px)}
.index-statement p:first-child {font-size:clamp(20px,2vw,35px); line-height:1.35; font-weight:590; margin:0; letter-spacing:-.065em}
.index-jump {display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:14px; font-weight:600}
.index-jump span {display:grid; place-items:center; border:1px solid var(--line); width:38px; height:38px; border-radius:50%; transition:background-color .18s}
.index-jump:is(:hover,:focus-visible) span {background:var(--studio-key); color:white; border-color:var(--studio-key)}
.index-section {padding:clamp(88px,8.5vw,164px) max(var(--gutter),3%); color:var(--brown); background:var(--paper)}
.home-work {border-top:1px solid var(--line); scroll-margin-top:74px; outline:none}
.index-heading {display:flex; align-items:end; justify-content:space-between; gap:16px; margin:0 0 clamp(32px,3.4vw,64px)}
.index-label,.case-section-label {font-size:14px; font-weight:570; line-height:1.4; margin:0}
.index-heading h2,.home-inquiry h2 {font:710 clamp(49px,6vw,110px)/1 var(--studio-type); letter-spacing:-.046em; margin:6px 0 0}
.index-heading .pill {min-height:44px; margin:0; white-space:nowrap}
.case-section-label {margin:0 0 12px; font-size:16px; color:var(--muted)}
.home-cases .portfolio-roller {padding:0}
.home-cases .roller--detail .hero-panel-caption {border-bottom:1px solid var(--line)}
.home-cases .roller-position {font-variant-numeric:tabular-nums}
.home-cases .roller-controls button:focus-visible {outline-offset:-3px}
.archive-roadmap {margin-top:clamp(36px,5vw,80px); display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,1.6fr); column-gap:7%}
.roadmap-heading h3 {font-size:clamp(22px,2vw,38px); font-weight:640; letter-spacing:-.065em; margin:0}
.roadmap-heading p {font-size:14px; line-height:1.65; color:var(--muted); margin:8px 0 0}
.archive-roadmap ul {list-style:none; padding:0; margin:0; border-bottom:1px solid var(--line)}
.archive-roadmap li {display:grid; grid-template-columns:minmax(75px,.8fr) minmax(85px,1fr) auto; align-items:baseline; gap:12px; padding:19px 0; border-top:1px solid var(--line)}
.archive-roadmap strong {font-size:clamp(18px,1.7vw,29px); font-weight:610; letter-spacing:-.055em}
.archive-roadmap li>span,.archive-roadmap small {font-size:13px; line-height:1.5; color:var(--muted)}
.archive-roadmap small {text-align:right; word-break:keep-all}
.archive-roadmap li:first-child small {color:var(--studio-key-text); font-weight:580}
.home-studio {display:grid; grid-template-columns:minmax(150px,.7fr) minmax(0,1.6fr); gap:7%; align-items:start; background:var(--brown); color:var(--paper)}
.home-studio h2 {font:650 clamp(34px,4.6vw,84px)/1.14 var(--studio-type); letter-spacing:-.055em; margin:0 0 .5em}
.home-studio div>p {font-size:clamp(16px,1.2vw,22px); line-height:1.8; max-width:40em; margin-bottom:22px; word-break:keep-all}
.home-studio strong {font-weight:680}
.home-studio .pill {color:var(--paper); border-color:#f8f8f580}
.home-services .service-row h3 {font-weight:620}
.home-services .service-row h3 small {font-weight:500; font-size:14px}
.home-services .service-row p {color:var(--muted)}
.home-services .service-list {margin-top:20px}
.home-inquiry {background:var(--studio-key); color:#fff; padding-block:clamp(76px,7.6vw,146px)}
.home-inquiry>a {display:flex; flex-wrap:nowrap; gap:18px; justify-content:space-between; align-items:center}
.home-inquiry h2 {font-size:clamp(48px,6.7vw,125px)}
.home-inquiry>a>span {font-size:clamp(48px,7vw,115px); line-height:1; transition:transform .2s}
.home-inquiry>a:hover>span {transform:translate(4px,-4px)}
@media(min-width:701px) {
 .index-hero-foot,.index-heading {padding-right:max(0px,calc(var(--quick-action-width) + var(--quick-action-right) + var(--quick-action-clearance) - max(var(--gutter),3vw)))}
}
.work-index .archive-roadmap {margin-bottom:clamp(30px,4vw,70px)}
@media(min-width:1600px) {
 .index-section {padding-inline:max(3%,calc((100vw - 1920px)/2))}
}
@media(max-width:830px) {
 .archive-roadmap {grid-template-columns:1fr; gap:19px}
 .home-studio {grid-template-columns:1fr; gap:26px}
}
@media(max-width:700px) {
 .index-hero {padding:calc(92px + env(safe-area-inset-top)) var(--gutter) 46px}
 .index-hero-top>p {font-size:13px}
 .index-disciplines {font-size:13px; row-gap:0; max-width:100%}
 .index-disciplines>a:not(:last-child)::after {margin:0 .35em}
 .index-lockup {height:clamp(190px,53vw,332px); margin-block:20px 26px}
 .index-symbol {width:clamp(168px,46vw,270px)}
 .index-lockup h1 {font-size:8.65vw; letter-spacing:-.043em}
 .index-hero-foot {flex-wrap:wrap; align-items:end; gap:8px 14px; margin-top:0}
 .index-statement p:first-child {font-size:clamp(16px,4.3vw,24px)}
 .index-jump {font-size:12px; white-space:nowrap; gap:5px}
 .index-jump span {width:28px; height:28px}
 .index-section {padding:clamp(64px,15vw,88px) var(--gutter)}
 .index-heading {gap:10px; flex-wrap:wrap; margin-bottom:30px}
 .index-heading h2 {font-size:clamp(43px,11.2vw,70px)}
 .index-heading .pill {font-size:12px; padding:9px 13px; gap:9px; min-height:44px}
 .index-label,.case-section-label {font-size:13px}
 .case-section-label {margin-bottom:9px}
 .archive-roadmap {margin-top:32px; gap:16px}
 .archive-roadmap li {grid-template-columns:1fr max-content; gap:3px 7px; padding:13px 0; align-items:center}
 .archive-roadmap li strong {grid-column:1; font-size:19px}
 .archive-roadmap li>span {grid-column:1; grid-row:2; font-size:13px}
 .archive-roadmap li small {grid-column:2; grid-row:1 / 3; max-width:9em; text-wrap:balance}
 .home-studio {gap:20px}
 .home-studio h2 {font-size:clamp(31px,7.7vw,46px)}
 .home-studio div>p {font-size:15px; line-height:1.75}
 .home-inquiry h2 {font-size:clamp(36px,8vw,57px)}
 .home-inquiry>a {gap:6px}
 .home-inquiry>a>span {font-size:36px}
}
@media(max-width:370px) {
 .index-disciplines {column-gap:0; font-size:12px}
 .index-heading .pill {font-size:11px; padding-inline:10px}
 .home-inquiry h2 {font-size:32px}
}
@media(prefers-reduced-motion:reduce) {
 .index-jump span,.home-inquiry>a>span {transition:none}
}

.index-statement p+p {
  color:var(--muted); margin:13px 0 0; font-size:clamp(14px,1.08vw,18px);
  line-height:1.8; font-weight:440; letter-spacing:-.02em; word-break:keep-all
}
.index-disciplines a {justify-content:center; min-width:44px}
.index-disciplines>a:not(:last-child)::after {content:''; width:3px; height:3px; border-radius:50%; background:currentColor}
body.ink .header {color:var(--paper)}
body.ink .header.scrolled {background:var(--brown)}
body.ink .header .service-dropdown {--muted:#625f57}
body.ink .work-index {--studio-key-text:var(--studio-tint)}
body .pill:is(:hover,:focus-visible),body .light-panel .pill:is(:hover,:focus-visible),
.quick-actions a:is(:hover,:focus-visible),.quick-actions .quick-contact:is(:hover,:focus-visible),
.submit-inquiry:is(:hover,:focus-visible),.roller-controls button:is(:hover,:focus-visible) {
  color:white; background:var(--studio-key); border-color:var(--studio-key)
}
body :is(.home-studio,.work-index,.studio-team,.svc-deliverables) .pill:is(:hover,:focus-visible) {
  background:var(--studio-tint); border-color:var(--studio-tint); color:var(--brown)
}
.menu .menu-body nav>a:is(:hover,:focus-visible) {color:var(--studio-tint)}

@keyframes mark-apart {
  from {transform:translateY(0)}
  to {transform:translateY(var(--mark-shift))}
}
@keyframes mark-line-in {
  from {opacity:0; clip-path:inset(50% 0); transform:translateY(.06em)}
  to {opacity:1; clip-path:inset(0); transform:translateY(0)}
}
@media(prefers-reduced-motion:no-preference) {
  .index-symbol .mark-row {animation:mark-apart 1.02s cubic-bezier(.24,.74,.19,1) .52s both}
  .index-lockup h1 span {animation:mark-line-in .79s cubic-bezier(.18,.82,.22,1) .74s both}
}

.portfolio-tabs {display:flex; flex-wrap:wrap; gap:0 clamp(15px,3vw,56px); border-bottom:1px solid var(--line); margin-bottom:clamp(24px,2.6vw,45px)}
.portfolio-tabs button {position:relative; font-size:clamp(15px,1.3vw,21px); font-weight:540; min-height:48px; padding:.55em .06em .7em; color:var(--muted); white-space:nowrap}
.portfolio-tabs button[aria-selected=true] {color:var(--studio-key); font-weight:680}
.portfolio-tabs button[aria-selected=true]::after {background:currentColor; height:3px; content:''; position:absolute; bottom:-1px; left:0; right:0}
.portfolio-tabs button:is(:hover,:focus-visible) {color:var(--studio-key)}
.work-tab-panel:focus-visible {outline:2px solid var(--studio-key); outline-offset:5px}
.archive-pending {padding:clamp(42px,6vw,95px) clamp(22px,4.4vw,78px); background:#eeefe6; border-left:2px solid var(--studio-key)}
.pending-status {color:var(--studio-key); font-size:14px; font-weight:630; display:inline-flex; align-items:center; gap:8px}
.pending-status::before {content:''; width:7px; height:7px; border:1px solid currentColor; border-radius:50%}
.archive-pending h3 {font-size:clamp(30px,4.3vw,68px); font-weight:600; letter-spacing:-.065em; line-height:1.22; margin:20px 0 12px; word-break:keep-all}
.archive-pending p {font-size:clamp(14px,1.2vw,19px); color:#54564c; line-height:1.7}

.archive-tools,.archive-results {--facet-border:#fff4; --facet-muted:#d0d0c6; --facet-bg:#23241e; --facet-light:#d8ddbd}
.work-tools.archive-tools {display:grid; grid-template-columns:minmax(180px,.65fr) minmax(0,1.65fr); align-items:start; gap:clamp(24px,5vw,85px); color:var(--text); padding:32px 0; border-block:1px solid var(--line); scroll-margin-top:100px}
.archive-search,.archive-select {display:flex; flex-direction:column; gap:8px; min-width:0}
.archive-tools :is(label>span:first-child,legend) {font-size:14px; font-weight:560}
.archive-search input,.archive-select select,.archive-sort select {width:100%; min-width:0; min-height:46px; min-block-size:46px; border:1px solid var(--facet-border); border-radius:3px; color:inherit; background:var(--facet-bg); font-size:16px; padding:8px 12px}
.archive-search input::placeholder {color:#b7b8ae}
.archive-select select,.archive-sort select {color-scheme:dark; padding-inline-end:20px}
.archive-tools :is(select,input,summary):focus-visible,.archive-results :is(button,select):focus-visible {outline:2px solid var(--studio-tint); outline-offset:3px}
.archive-facets summary {display:flex; align-items:center; cursor:pointer; list-style:none; min-height:44px; gap:12px; font-size:17px; font-weight:580}
.archive-facets summary::-webkit-details-marker {display:none}
.archive-facets summary i {position:relative; width:15px; height:15px; margin-left:auto; flex-shrink:0}
.archive-facets summary i::before,.archive-facets summary i::after {content:''; position:absolute; background:currentColor; width:12px; height:1px; top:7px; left:1px}
.archive-facets summary i::after {transform:rotate(90deg)}
.archive-facets[open] summary i::after {transform:rotate(0)}
.facet-preview {font-size:13px; font-weight:450; color:var(--facet-muted); word-break:keep-all}
.facet-body {padding:16px 0 2px}
.archive-selects {display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.8vw,32px)}
.archive-colors {margin:24px 0 0; padding:0; border:0; min-width:0}
.archive-colors legend {padding:0; margin-bottom:8px}
.color-choices {display:flex; flex-wrap:wrap; gap:3px 6px}
.color-choices label {position:relative; display:inline-flex; cursor:pointer; min-height:44px; align-items:center}
.color-choices input {position:absolute; width:1px; height:1px; opacity:0}
.color-choices span {display:inline-flex; align-items:center; gap:7px; min-height:34px; border-radius:99px; border:1px solid transparent; padding:5px 10px; font-size:13px; white-space:nowrap}
.color-choices i {width:14px; height:14px; border-radius:50%; background:var(--swatch); box-shadow:inset 0 0 0 1px #ffffff45}
.color-choices input:checked+span {border-color:var(--facet-light); background:var(--facet-light); color:var(--brown)}
.color-choices input:focus-visible+span {outline:2px solid var(--studio-tint); outline-offset:2px}
.color-choices label:hover span {border-color:var(--facet-light)}
.archive-results,.archive-results>div {display:flex; justify-content:space-between; align-items:center; gap:16px}
.archive-results {margin:18px 0 32px}
.archive-results .work-count {font-size:15px; font-weight:550; color:var(--text)}
.archive-reset {font-size:13px; min-height:44px; text-decoration:underline; text-underline-offset:3px}
.archive-sort select {min-height:44px; min-block-size:44px; width:auto; border:0; border-bottom:1px solid var(--facet-border); border-radius:0; font-size:14px; background:var(--surface); padding-inline-start:3px}
.archive-empty {padding:58px 0 70px; text-align:center}
.archive-empty p {font-size:20px; margin:0 0 20px}
.portfolio-tabs[hidden],.work-tab-panel[hidden],.archive-tools[hidden],.archive-grid>.work-card[hidden],
.archive-empty[hidden],.archive-reset[hidden],.archive-sort[hidden],#load-more[hidden] {display:none}
main :is(.studio-chapter,.studio-team,.case-study,.case-decisions,.svc-premise,.svc-process,.svc-deliverables,.svc-faq,.content-story,.content-approach,.brand-examples,.detail-archive) {
  padding-block:clamp(104px,8.5vw,156px)
}
@media(max-width:760px) {
  .work-tools.archive-tools {grid-template-columns:1fr; gap:16px; padding:23px 0 12px; scroll-margin-top:84px}
  .archive-facets {border-top:1px solid var(--line); padding-top:6px}
  .archive-facets summary {gap:10px; font-size:15px}
  .facet-preview {font-size:12px}
  .facet-body {padding-top:12px}
  .archive-colors {margin-top:18px}
  .color-choices {gap:0 4px}
  .color-choices span {padding-inline:8px}
  .archive-results {gap:8px; margin:12px 0 26px}
  .archive-results>div {gap:10px}
  .archive-results .work-count {font-size:14px}
  main :is(.studio-chapter,.studio-team,.case-study,.case-decisions,.svc-premise,.svc-process,.svc-deliverables,.svc-faq,.content-story,.content-approach,.brand-examples,.detail-archive) {padding-block:clamp(72px,14vw,96px)}
}
@media(max-width:700px) {
  .index-statement p+p {font-size:14px; margin-top:10px; line-height:1.72}
  .portfolio-tabs {display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px}
  .portfolio-tabs button {min-width:0; font-size:clamp(14px,3.6vw,17px)}
  .archive-pending {padding:44px 22px 50px}
}

/* The home page works as five editorial chapters; portfolio media carries the colour. */
.studio-home .header {height:70px; padding-inline:max(var(--gutter),3%); background:var(--paper); border:0}
.studio-home .header .wordmark {width:max-content; height:44px; align-items:center}
.studio-home .header .logo-image {width:clamp(145px,12vw,190px); height:auto}
.studio-home .header.scrolled {box-shadow:0 1px 0 #1919161a; backdrop-filter:none}
.studio-home .header.over-dark {background:#20201d; color:#f8f8f5; box-shadow:0 1px 0 #ffffff35}
.studio-home .header.over-dark .logo-image {filter:invert(1)}
.studio-home .header.over-dark .service-dropdown {color:var(--brown); background:var(--paper)}
.studio-home .index-hero {padding-top:clamp(98px,8.1vw,144px); padding-bottom:clamp(52px,5vw,94px)}
.studio-home .index-hero-top {display:flex; justify-content:space-between; align-items:center; gap:12px}
.studio-home .index-hero-top>p {font-size:clamp(12px,1.05vw,16px); font-weight:520}
.studio-home .index-disciplines {font-size:clamp(12px,1vw,16px); margin:0}
.studio-home .index-lockup {height:clamp(236px,33svh,405px); margin:clamp(19px,2vw,36px) 0}
.studio-home .index-symbol {width:clamp(176px,min(22vw,28svh),355px)}
.studio-home .index-lockup h1 {font-size:clamp(50px,7.5vw,148px); font-weight:625; letter-spacing:-.055em}
.studio-home .index-statement p:first-child {font-weight:545}
.studio-home .index-hero-foot {margin-top:0; padding-right:max(0px,calc(var(--quick-action-width) + var(--quick-action-right) + var(--quick-action-clearance) - max(var(--gutter),3vw)))}
.studio-home .index-jump {font-weight:550}
.studio-home .home-work {display:grid; grid-template-columns:minmax(215px,.76fr) minmax(0,2.5fr); gap:clamp(32px,4.2vw,85px); align-items:start; padding-block:clamp(78px,7vw,142px) clamp(96px,9vw,164px); scroll-margin-top:0}
.portfolio-index,.portfolio-stage {min-width:0}
.portfolio-index .index-heading {margin:0; padding:0}
.portfolio-index h2 {font-size:clamp(48px,5.55vw,115px); font-weight:565; letter-spacing:-.065em; line-height:.95; max-width:5.4em; margin:.22em 0 0; text-wrap:balance}
.portfolio-index .index-label,.home-studio>.index-label,.home-services .index-label,.home-inquiry .index-label {font-size:clamp(12px,1vw,16px); font-weight:530}
.portfolio-index .portfolio-tabs {display:grid; grid-template-columns:1fr; border:0; gap:0; margin:clamp(30px,3.8vw,70px) 0 clamp(24px,2.8vw,44px)}
.portfolio-index .portfolio-tabs[hidden] {display:none}
.portfolio-index .portfolio-tabs button {display:flex; align-items:center; gap:.6em; text-align:start; min-height:49px; padding:.55em 0; font-size:clamp(15px,1.13vw,21px); border-bottom:1px solid var(--line); color:#63635a}
.portfolio-index .portfolio-tabs button::before {content:''; flex:0 0 7px; height:7px; background:currentColor; border-radius:50%; opacity:0; transition:opacity .2s}
.portfolio-index .portfolio-tabs button[aria-selected=true] {color:var(--studio-key); font-weight:650}
.portfolio-index .portfolio-tabs button[aria-selected=true]::after {display:none}
.portfolio-index .portfolio-tabs button:is([aria-selected=true],:hover,:focus-visible)::before {opacity:1}
.portfolio-index>.pill {display:inline-flex; align-items:center; min-height:44px; font-weight:550}
.portfolio-stage .archive-pending {display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:clamp(330px,36vw,680px); border:0; padding:clamp(30px,5.6vw,110px); background:#e9ecdd}
.portfolio-stage .archive-pending h3 {font-weight:560}
.home-cases .portfolio-roller {--roller-gap:clamp(10px,1.2vw,24px); --roller-card:92%}
.home-cases .roller-window {clip-path:inset(0 var(--work-inset,0%) 0 0); background:transparent}
.home-cases .hero-preview {display:grid; height:auto; aspect-ratio:2; grid-template-columns:1fr 1fr; overflow:hidden; background:var(--paper)}
.home-cases .work-cover,.home-cases .work-detail-crop {display:block; min-width:0; height:100%; overflow:hidden}
.home-cases .hero-preview img {display:block; width:100%; height:100%; object-fit:cover; opacity:1; transition:none}
.home-cases .work-detail-crop img {object-position:center; transform-origin:center; transition:transform .65s cubic-bezier(.22,.67,.22,1)}
.home-cases .roller--detail .hero-panel-caption {min-height:98px; padding:16px clamp(12px,1.3vw,24px) 18px}
.home-cases .hero-panel-caption b {font-weight:660; font-size:16px}
.home-cases .roller-controls {padding-top:18px}
.home-cases .roller-controls button {width:44px; height:44px}
.home-cases .roller-item:not(.current-work):not(:focus-within) .hero-panel-caption {opacity:0; pointer-events:none}
.home-cases .roller-item:not(.current-work) .hero-panel {background:transparent}
.home-cases .hero-panel-caption {transition:opacity .3s}
.home-cases .roller-position {font-size:12px; letter-spacing:.05em}
.studio-home .home-studio {background:#e9ebdf; color:var(--brown); grid-template-columns:minmax(190px,.76fr) minmax(0,2.5fr); gap:clamp(32px,4.2vw,85px)}
.studio-home .home-studio h2 {font-weight:555; letter-spacing:-.065em; max-width:17em}
.studio-home .home-studio .pill {border-color:#19191677; color:var(--brown)}
.studio-home .home-studio .pill:is(:hover,:focus-visible) {background:var(--studio-key); border-color:var(--studio-key); color:white}
.studio-home .home-services {--line:#f8f8f54a; --muted:#c8c9bf; background:#20201d; color:var(--paper)}
.studio-home .home-services .index-heading {padding-right:0; margin-bottom:clamp(36px,5.5vw,90px)}
.studio-home .home-services h2,.studio-home .home-inquiry h2 {font-weight:555; letter-spacing:-.06em}
.studio-home .home-services .pill {color:var(--paper); border-color:#f8f8f580}
.studio-home .home-services .pill:is(:hover,:focus-visible) {color:var(--brown); background:var(--studio-tint); border-color:var(--studio-tint)}
.studio-home .home-services .service-row {padding-block:clamp(26px,2.6vw,53px)}
.studio-home .home-services .service-row::after {content:none}
.studio-home .home-services .service-row h3 {font-size:clamp(29px,3.7vw,67px); font-weight:535; letter-spacing:-.064em}
.studio-home .home-services .service-row h3 small {font-size:clamp(12px,1vw,16px); font-weight:460; letter-spacing:0}
.studio-home .home-services .service-row p {color:#dadbd3}
.studio-home .home-services .service-row>span:last-child {color:inherit}
.studio-home .home-services .service-row:is(:focus-visible,:hover)>span:last-child {color:var(--studio-tint)}
.studio-home .home-inquiry {padding-block:clamp(92px,11vw,190px)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .home-cases .hero-panel:is(:hover,:focus-visible) .work-detail-crop img {transform:scale(1.035)!important}
}
@media(max-width:999px) {
 .studio-home .home-work {grid-template-columns:minmax(0,1fr); gap:clamp(23px,3.2vw,42px)}
 .portfolio-index {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px 12px; align-items:end}
 .portfolio-index .index-heading {grid-column:1; grid-row:1}
 .portfolio-index h2 {font-size:clamp(32px,6.5vw,65px); max-width:none}
 .portfolio-index>.pill {grid-column:2; grid-row:1; margin:0}
 .portfolio-index .portfolio-tabs {grid-column:1/-1; grid-row:2; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; gap:0}
 .portfolio-index .portfolio-tabs button {justify-content:center; min-height:46px; gap:6px; font-size:clamp(13px,2vw,16px)}
 .portfolio-index .portfolio-tabs button::before {flex-basis:6px; height:6px}
 .portfolio-index .portfolio-tabs button[aria-selected=true] {border-bottom:2px solid currentColor}
 .home-cases .portfolio-roller {--roller-card:66%; --roller-gap:14px}
 .home-cases .hero-preview {display:block; aspect-ratio:1}
 .home-cases .work-detail-crop {display:none}
 .portfolio-stage .archive-pending {min-height:clamp(310px,56vw,500px)}
 .studio-home .home-studio {grid-template-columns:minmax(0,1fr); gap:26px}
}
@media(max-width:700px) {
 .studio-home .header {height:calc(58px + env(safe-area-inset-top)); padding-inline:var(--gutter)}
 .studio-home .header .logo-image {width:150px}
 .studio-home .index-hero {padding:calc(89px + env(safe-area-inset-top)) var(--gutter) 54px}
 .studio-home .index-hero-top {display:block}
 .studio-home .index-hero-top>p {font-size:12px}
 .studio-home .index-disciplines {font-size:13px}
 .studio-home .index-lockup {height:clamp(183px,48vw,295px); margin:27px 0 36px}
 .studio-home .index-symbol {width:clamp(141px,42vw,253px)}
 .studio-home .index-lockup h1 {font-size:8.65vw; font-weight:640}
 .studio-home .index-hero-foot {align-items:flex-end; padding-right:0}
 .studio-home .home-work {padding-block:clamp(64px,15vw,92px); scroll-margin-top:0}
 .portfolio-index {gap:20px 6px}
 .portfolio-index h2 {font-size:clamp(30px,8vw,47px); letter-spacing:-.054em}
 .portfolio-index>.pill {padding:8px 10px; gap:6px; font-size:11px}
 .home-cases .portfolio-roller {--roller-card:91%; --roller-gap:10px}
 .home-cases .roller--detail .hero-panel-caption {padding:14px 12px 16px; min-height:100px}
 .portfolio-stage .archive-pending {min-height:295px}
 .studio-home .home-services .service-row {padding-block:23px}
 .studio-home .home-services .service-row h3 {font-size:27px}
 .studio-home .home-services .service-row h3 small {font-size:12px}
 .studio-home .home-services .service-row p {line-height:1.6}
 .studio-home .home-inquiry {padding-block:82px}
}
@media(max-width:370px) {
 .studio-home .index-disciplines {font-size:12px}
 .studio-home .index-hero-foot {gap:10px}
}
@media(prefers-reduced-motion:reduce) {
 .home-cases .roller-window {clip-path:none}
 .home-cases .work-detail-crop img,.portfolio-index .portfolio-tabs button::before {transition:none}
}