@font-face {
  font-family: "Maru Buri";
  src: url("assets/fonts/MaruBuri-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #111111;
  --paper: #e8e6df;
  --paper-2: #d7d4cc;
  --acid: #e4f04a;
  --accent-emissive: #ff6548;
  --accent-ink: #b83220;
  --accent-wash: rgba(255, 101, 72, 0.18);
  --line: rgba(17, 17, 17, 0.32);
  --line-dark: rgba(255, 255, 255, 0.25);
  --pad: clamp(18px, 2.4vw, 38px);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; padding: 0 var(--pad); color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); transition: background .25s, color .25s, border-color .25s; }
.site-header.on-paper { background: rgba(232,230,223,.92); color: var(--ink); border-color: var(--line); backdrop-filter: blur(12px); }
.identity { display: inline-flex; align-items: baseline; gap: 12px; width: max-content; text-decoration: none; font-weight: 700; }
.identity small { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.site-header nav { display: flex; gap: 28px; }
.site-header nav a, .header-action, .menu-button { font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.light-label { position: relative; display: inline-grid; place-items: center; isolation: isolate; }
.light-label:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.light-label__text { grid-area: 1 / 1; transition: opacity 180ms ease; }
.light-label__canvas { position: absolute; z-index: 2; left: 50%; top: 50%; width: calc(100% + 28px); height: 38px; transform: translate(-50%,-50%); overflow: visible; pointer-events: none; }
.light-label.is-assembling .light-label__text { opacity: .28; }
.light-label.is-assembled .light-label__text { opacity: 1; }
.header-action { justify-self: end; }
.menu-button, .mobile-menu { display: none; }
.verb-orbit-canvas { position: fixed; z-index: 55; inset: 0; width: 100%; height: 100%; mix-blend-mode: difference; pointer-events: none; }
.phrase-source { opacity: var(--phrase-opacity, 1); }
.verb-destination { opacity: var(--destination-opacity, 1); }

.slot-tag, .section-marker, .section-head, .collection-group > p, .footer > * span, .hero-note, .work-meta, .work-number { font: 11px/1.35 var(--mono); letter-spacing: .085em; text-transform: uppercase; }
.placeholder { position: relative; overflow: hidden; border: 1px dashed currentColor; }
.placeholder::before, .placeholder::after { content: ""; position: absolute; z-index: 0; background: currentColor; opacity: .23; }
.placeholder::before { width: 140%; height: 1px; left: -20%; top: 50%; transform: rotate(28deg); }
.placeholder::after { width: 1px; height: 140%; left: 50%; top: -20%; transform: rotate(28deg); }
.placeholder > * { position: relative; z-index: 1; }

.text-placeholder { display: grid; gap: 10px; width: 100%; }
.text-placeholder i { display: block; height: 1em; background: currentColor; opacity: .82; }
.text-placeholder--small i { height: 7px; }.text-placeholder--small i:nth-child(2) { width: 82%; }.text-placeholder--small i:nth-child(3) { width: 58%; }
.text-placeholder--body i { height: 15px; }.text-placeholder--body i:nth-child(2) { width: 94%; }.text-placeholder--body i:nth-child(3) { width: 74%; }.text-placeholder--body i:nth-child(4) { width: 42%; }
.action-placeholder { width: max-content; margin-top: 34px; padding: 11px 14px; border: 1px solid currentColor; font: 9px var(--mono); letter-spacing: .08em; }

.hero { position: relative; min-height: 100svh; overflow: hidden; background: #090909; color: #fff; }
.hero-media { position: absolute; inset: 0; overflow: hidden; background: #090909; }
.hero-sun-canvas { display: block; width: 100%; height: 100%; pointer-events: none; touch-action: pan-y; }
.hero-media[data-interaction-mode="on"] .hero-sun-canvas { pointer-events: auto; touch-action: none; cursor: grab; }
.hero-media[data-interaction-mode="on"] .hero-sun-canvas:active { cursor: grabbing; }
.hero-media[data-state="failed"] .hero-sun-canvas { visibility: hidden; }
.hero-interaction-toggle { position: absolute; z-index: 5; left: var(--pad); top: 84px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.45); color: inherit; background: rgba(9,9,9,.58); font: 10px var(--mono); letter-spacing: .08em; cursor: pointer; }
.hero-interaction-toggle b { font: inherit; }
.hero-interaction-toggle[aria-pressed="true"] { background: rgba(255,255,255,.14); }
.hero-interaction-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.hero-interaction-toggle:disabled { opacity: .45; cursor: default; }
.hero-target-reticle { position: absolute; z-index: 3; top: var(--target-y,50%); left: var(--target-x,50%); width: var(--target-size,100px); height: var(--target-size,100px); opacity: 0; transform: translate(-50%,-50%) scale(1.16); transition: opacity 180ms ease, transform 560ms cubic-bezier(.2,.78,.2,1); pointer-events: none; }
.hero-target-reticle[data-on-screen="true"] { opacity: .92; transform: translate(-50%,-50%) scale(1); }
.hero-target-corner { position: absolute; width: 18%; height: 18%; border-color: rgba(244,242,236,.86); }
.hero-target-corner--tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.hero-target-corner--tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.hero-target-corner--bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
.hero-target-corner--br { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }
.hero-target-label { position: absolute; top: calc(100% + 9px); left: 50%; width: max-content; color: rgba(244,242,236,.82); font: 9px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; transform: translateX(-50%); }
.hero-focus-note { position: absolute; z-index: 4; top: 112px; right: var(--pad); display: grid; gap: 12px; width: min(286px,calc(100% - var(--pad) * 2)); padding: 16px 17px; border: 1px solid rgba(244,242,236,.32); background: rgba(9,9,9,.76); box-shadow: 0 18px 52px rgba(0,0,0,.24); opacity: 0; visibility: hidden; transform: translateX(18px); transition: opacity 220ms ease, visibility 0s linear 280ms, transform 480ms cubic-bezier(.2,.74,.16,1), width 480ms cubic-bezier(.2,.74,.16,1); backdrop-filter: blur(12px); pointer-events: none; }
.hero-focus-note[data-mode="auto"], .hero-focus-note[data-mode="selected"] { opacity: 1; visibility: visible; transform: translateX(0); transition-delay: 0s; }
.hero-focus-note__topline { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid rgba(244,242,236,.2); color: rgba(244,242,236,.52); font: 9px/1.3 var(--mono); letter-spacing: .1em; }
.hero-focus-note__identity { display: grid; gap: 12px; }
.hero-focus-note__identity > span { color: rgba(244,242,236,.52); font: 9px/1.3 var(--mono); letter-spacing: .1em; }
.hero-focus-note strong { color: #f4f2ec; font: 400 30px/.92 Georgia,"Times New Roman",serif; letter-spacing: -.035em; }
.hero-focus-note__identity > p { margin: 0; color: rgba(244,242,236,.68); font: 12px/1.55 Arial,Helvetica,sans-serif; }
.hero-focus-note__role { color: rgba(244,242,236,.5); font: 9px/1.4 var(--mono); letter-spacing: .08em; }
.hero-focus-note__footer { display: grid; gap: 12px; align-content: end; }
.hero-mission-board__details { display: none; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid rgba(244,242,236,.2); border-bottom: 1px solid rgba(244,242,236,.2); }
.hero-mission-board__details > div { display: grid; align-content: start; gap: 16px; min-width: 0; padding: 18px 16px 18px 0; }
.hero-mission-board__details > div + div { padding-left: 16px; border-left: 1px solid rgba(244,242,236,.2); }
.hero-mission-board__details span, .hero-mission-board__details b { font: 9px/1.45 var(--mono); letter-spacing: .08em; overflow-wrap: anywhere; }
.hero-mission-board__details span { color: rgba(244,242,236,.46); }
.hero-mission-board__details b { color: rgba(244,242,236,.82); font-weight: 400; }
.hero-focus-note button { display: none; justify-self: start; padding: 3px 0; border: 0; border-bottom: 1px solid rgba(244,242,236,.55); background: transparent; color: #f4f2ec; font: 9px/1.4 var(--mono); letter-spacing: .08em; cursor: pointer; pointer-events: auto; }
.hero-focus-note[data-mode="selected"] { top: 10%; right: 3%; bottom: 8%; width: min(520px,37%); padding: 22px 24px; grid-template-rows: auto 1fr auto auto; gap: 24px; pointer-events: auto; }
.hero-focus-note[data-mode="selected"] .hero-focus-note__identity { align-content: center; }
.hero-focus-note[data-mode="selected"] strong { font-size: clamp(46px,4.2vw,72px); }
.hero-focus-note[data-mode="selected"] .hero-focus-note__identity > p { max-width: 38ch; font-size: 13px; }
.hero-focus-note[data-mode="selected"] .hero-mission-board__details { display: grid; }
.hero-focus-note[data-mode="selected"] button { display: block; }
.hero-focus-note button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.hero-lockup { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: 30px; display: grid; justify-items: start; gap: 18px; margin: 0; color: #f0eee7; }
.hero-identity-latin { margin: 0; font: 400 clamp(56px, 7vw, 116px)/.8 Georgia, "Times New Roman", serif; letter-spacing: -.06em; }
.hero-services { margin: 0; font: 15px/1.35 var(--mono); letter-spacing: .07em; }
.hero-primary-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 44px; min-width: min(100%, 232px); padding: 14px 16px; border: 1px solid rgba(244,242,236,.72); background: rgba(9,9,9,.28); color: inherit; font: 10px/1 var(--mono); letter-spacing: .09em; text-decoration: none; backdrop-filter: blur(7px); transition: background 180ms ease, color 180ms ease; }
.hero-primary-action:hover, .hero-primary-action:focus-visible { background: #f0eee7; color: #111; }
.hero-primary-action:focus-visible { outline: 1px solid #f0eee7; outline-offset: 4px; }

.section-marker { position: absolute; left: var(--pad); right: var(--pad); top: 94px; display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

.work { padding: 100px var(--pad) 130px; background: var(--ink); color: #fff; }
.section-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 16px; border-bottom: 1px solid var(--line-dark); }
.section-head > div { display: flex; gap: 22px; align-items: baseline; }.section-head h2 { margin: 0; font: inherit; }
.work-row { position: relative; display: grid; grid-template-columns: 38px minmax(320px,1fr) minmax(180px,260px) 170px; align-items: center; min-height: 154px; gap: 22px; border-bottom: 1px solid var(--line-dark); }
.work-title { display: grid; gap: 14px; }.work-title small { font: 10px var(--mono); letter-spacing: .08em; opacity: .62; }.work-title i { display: block; width: min(88%,680px); height: clamp(42px, 5.6vw, 86px); background: #fff; }
.work-row:nth-child(2) .work-title i { width: 74%; }.work-row:nth-child(3) .work-title i { width: 82%; }.work-row:nth-child(4) .work-title i { width: 62%; }
.work-media { height: 104px; display: grid; place-items: center; color: rgba(255,255,255,.7); background: #252525; }
.work-media span { padding: 10px; text-align: center; font: 9px var(--mono); letter-spacing: .06em; }.work-media b { position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.2); }
.placeholder--system { background: repeating-linear-gradient(0deg,#252525 0 13px,#343434 14px 15px); }
.work-meta { opacity: .65; }

.work-row--constellation { --media-width: clamp(220px, 18vw, 286px); --media-gap: 30px; --aperture: calc(var(--media-width) + var(--media-gap) * 2); isolation: isolate; cursor: crosshair; outline: none; }
.work-row--constellation:focus-visible { outline: 1px solid rgba(255,255,255,.8); outline-offset: -4px; }
.work-row--constellation .work-number { grid-column: 1; grid-row: 1; align-self: center; }
.work-title--interactive { position: relative; z-index: 3; grid-column: 1 / -1; grid-row: 1; justify-self: center; justify-items: center; min-width: 0; text-align: center; }
.work-row--constellation .work-meta { z-index: 5; grid-column: 4; grid-row: 1; justify-self: end; }
.work-name { display: grid; grid-template-columns: max-content 0 max-content; align-items: baseline; width: max-content; max-width: 100%; color: #f4f2ec; font: 400 clamp(30px, 3.35vw, 52px)/.92 Georgia, "Times New Roman", serif; letter-spacing: -.045em; white-space: nowrap; transition: grid-template-columns 620ms cubic-bezier(.2,.74,.16,1), opacity 220ms ease; }
.work-name-part { display: block; }
.work-name-part--left { justify-self: end; }
.work-name-part--right { justify-self: start; }
.work-name-part--right { margin-left: .12em; }
.work-name-gap { width: 100%; }
.work-row--constellation.is-active .work-name { width: 100%; grid-template-columns: minmax(0,1fr) var(--aperture) minmax(0,1fr); }
.work-row--constellation.is-active .work-name-part--right { margin-left: 0; }
.work-name--single { display: block; transition: opacity 260ms ease; }
.work-row--constellation.is-active .work-name--single { opacity: .16; }
.work-media--reveal { position: absolute; z-index: 2; left: var(--media-left, 42%); top: 50%; width: var(--media-width); height: 112px; display: grid; place-items: end start; overflow: hidden; transform: translateY(-50%) scale(.82); transform-origin: center; opacity: 0; border: 1px solid rgba(255,255,255,.5); background: radial-gradient(circle at 68% 34%, rgba(255,255,255,.92) 0 2%, transparent 3%), radial-gradient(circle at 35% 70%, rgba(255,255,255,.64) 0 1.5%, transparent 2.5%), linear-gradient(135deg,#161b2b 0%,#4d3156 46%,#d27764 100%); transition: opacity 260ms ease, transform 700ms cubic-bezier(.2,.74,.16,1); pointer-events: none; }
.work-media--reveal::after { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 46% 52%, transparent 0 8px, rgba(255,255,255,.1) 9px 10px); mix-blend-mode: screen; }
.work-media--reveal > picture { position: absolute; inset: 0; }
.work-media--reveal > picture > img { width: 100%; height: 100%; object-fit: cover; }
.work-media--baila img { object-position: 50% 42%; }
.work-media--jcdoan img { object-position: 50% 50%; }
.work-media--monopension img { object-position: 50% 50%; }
.work-media--ai-lecture img { object-position: 50% 50%; }
.work-media--museia img { object-position: 50% 46%; }
.work-media--pending { background: #171717; }
.work-media--pending::after { opacity: .35; }
.work-media--reveal span { z-index: 2; padding: 9px; color: #fff; font: 8px var(--mono); letter-spacing: .08em; }
.work-media--reveal b { position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.22); }
.work-row--constellation.is-image-visible .work-media--reveal { opacity: 1; transform: translateY(-50%) scale(1); }
.constellation-layer { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.team { position: relative; height: 100svh; min-height: 680px; overflow: hidden; background: var(--ink); color: #fff; }
.section-marker--dark { z-index: 6; top: 98px; color: #fff; border-color: rgba(255,255,255,.32); mix-blend-mode: difference; }
.team-marker-label { color: inherit; }
.team-statement { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: clamp(80px,10vh,126px); width: auto; max-width: 1240px; text-shadow: 0 2px 28px rgba(0,0,0,.44); }
.team-statement .slot-tag { display: block; margin-bottom: clamp(18px,2.4vh,30px); color: rgba(255,255,255,.78); }
.team-statement-lead, .team-statement-support { word-break: keep-all; overflow-wrap: normal; }
.team-statement-lead { margin: 0; font-family: "Maru Buri", "Noto Serif KR", serif; font-size: clamp(29px,2.8vw,48px); font-weight: 400; line-height: 1.14; letter-spacing: -.04em; }
.team-statement-lead span { display: block; }
.statement-mobile-break { display: none; }
.statement-accent { color: inherit; font-weight: inherit; }
.team-statement-support { max-width: 38em; margin: clamp(14px,2vh,22px) 0 0; font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; font-size: clamp(14px,1vw,18px); font-weight: 400; line-height: 1.5; letter-spacing: -.025em; color: rgba(255,255,255,.88); }
.team-visual { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #151515; outline: none; }
.team-visual:focus-visible { outline: 1px solid rgba(255,255,255,.9); outline-offset: -6px; }
.product-slides, .product-slide { position: absolute; inset: 0; }
.product-slide { margin: 0; overflow: hidden; opacity: 0; transform: scale(1.025); transition: opacity 900ms ease, transform 4200ms cubic-bezier(.2,.68,.2,1); pointer-events: none; background: #151515; }
.product-slide::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.04) 34%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.8) 100%); }
.product-slide.is-active { z-index: 2; opacity: 1; transform: scale(1); }
.product-slide video { width: 100%; height: 100%; object-fit: cover; background: #0b0b0b; filter: saturate(.94) contrast(1.015); }
.product-slide figcaption { position: absolute; z-index: 2; top: clamp(142px,15vh,176px); right: var(--pad); color: #fff; font: 9px var(--mono); letter-spacing: .1em; mix-blend-mode: difference; }
.product-slideshow-controls { position: absolute; z-index: 5; left: var(--pad); right: var(--pad); bottom: 24px; display: flex; align-items: center; gap: 13px; }
.product-slideshow-toggle { position: relative; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; background: rgba(0,0,0,.28); cursor: pointer; }
.product-slideshow-toggle span::before, .product-slideshow-toggle span::after { content: ""; position: absolute; top: 10px; width: 2px; height: 11px; background: currentColor; }
.product-slideshow-toggle span::before { left: 12px; }.product-slideshow-toggle span::after { right: 12px; }
.product-slideshow-toggle[aria-pressed="true"] span::before { left: 12px; top: 9px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid currentColor; background: none; }
.product-slideshow-toggle[aria-pressed="true"] span::after { display: none; }
.product-slideshow-progress { display: grid; grid-template-columns: repeat(var(--slide-count,3),1fr); flex: 1; gap: 4px; }
.product-slideshow-progress button { position: relative; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.product-slideshow-progress button::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: rgba(255,255,255,.38); }
.product-slideshow-progress button::after { content: ""; position: absolute; left: 0; top: 8px; width: var(--slide-progress,0%); height: 1px; background: rgba(255,255,255,.94); }
.collection { padding: clamp(112px,13vw,200px) var(--pad) 140px; background: #f4f2ec; }
.collection-title { display: grid; grid-template-columns: 1fr 2fr; align-items: start; gap: clamp(36px,6vw,100px); padding-bottom: clamp(96px,12vw,184px); }
.collection-title .slot-tag { padding-top: 8px; }
.collection-heading { max-width: 10ch; margin: 0; font: 400 clamp(48px,6.4vw,96px)/.9 Arial,Helvetica,sans-serif; letter-spacing: -.06em; }
.collection-group { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(36px,6vw,100px); padding: 0; }
.collection-group > p { margin: 0; padding-top: 24px; color: rgba(17,17,17,.56); }
.collection-group ol { margin: 0; padding: 0; border-top: 1px solid rgba(17,17,17,.24); list-style: none; }
.collection-group li { position: relative; display: grid; grid-template-columns: clamp(44px,5vw,72px) minmax(0,1fr); align-items: start; min-height: clamp(136px,12vw,188px); padding: clamp(28px,3.2vw,46px) 0; border-bottom: 1px solid rgba(17,17,17,.24); }
.collection-group li::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 620ms cubic-bezier(.2,.74,.16,1); }
.collection-group li > span { padding-top: 7px; color: rgba(17,17,17,.54); font: 10px var(--mono); letter-spacing: .07em; transition: color 360ms ease; }
.collection-copy { display: grid; grid-template-columns: minmax(220px,.9fr) minmax(280px,1.1fr); align-items: start; gap: clamp(28px,5vw,84px); }
.collection-copy strong { font: 400 clamp(27px,3vw,46px)/.98 Arial,Helvetica,sans-serif; letter-spacing: -.045em; transition: color 360ms ease; }
.collection-copy p { max-width: 39em; margin: 0; padding-top: 5px; color: rgba(17,17,17,.67); font-family: "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; font-size: clamp(14px,1.05vw,17px); line-height: 1.62; letter-spacing: -.02em; word-break: keep-all; transition: color 360ms ease; }
.collection-group.has-active-principle li:not(.is-active) > span { color: rgba(17,17,17,.24); }
.collection-group.has-active-principle li:not(.is-active) .collection-copy strong { color: rgba(17,17,17,.24); }
.collection-group.has-active-principle li:not(.is-active) .collection-copy p { color: rgba(17,17,17,.3); }
.collection-group li.is-active::after { transform: scaleX(1); }
.contact-preview { display: grid; grid-template-columns: minmax(230px,.72fr) minmax(0,1.28fr); gap: clamp(42px,7vw,120px); margin: 0; padding: clamp(100px,11vw,168px) var(--pad) 140px; border-top: 1px solid var(--line); background: var(--paper); }
.contact-preview__intro { display: grid; align-content: start; gap: 24px; }
.contact-preview__intro h2 { max-width: 6ch; margin: clamp(40px,7vw,100px) 0 0; font: 400 clamp(54px,7.4vw,118px)/.86 "Maru Buri",serif; letter-spacing: -.06em; word-break: keep-all; }
.contact-preview__intro p { max-width: 23em; margin: 0; font-size: 16px; line-height: 1.55; word-break: keep-all; }
.contact-form { display: grid; grid-template-columns: 1fr; align-content: start; border-top: 1px solid var(--ink); }
.contact-field { --contact-field-pad-top: 22px; --contact-field-gap: 18px; display: grid; gap: var(--contact-field-gap); min-width: 0; margin: 0; padding: var(--contact-field-pad-top) 0 30px; border: 0; border-bottom: 1px solid var(--ink); }
.contact-field:nth-child(1), .contact-field:nth-child(2) { grid-column: 1; padding-right: 0; padding-left: 0; border-left: 0; }
.contact-field > span, .contact-field legend { padding: 0; font: 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.contact-field--type { display: block; padding-top: 0; }
.contact-field--type legend { float: left; width: 100%; margin: 0 0 var(--contact-field-gap); padding-top: var(--contact-field-pad-top); }
.contact-field input[type="text"], .contact-field textarea { width: 100%; padding: 0; border: 0; outline: 0; border-radius: 0; background: transparent; color: var(--ink); font: 400 clamp(20px,1.75vw,30px)/1.3 Arial,Helvetica,sans-serif; }
.contact-field textarea { min-height: 150px; resize: vertical; font-size: clamp(17px,1.4vw,23px); line-height: 1.5; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: rgba(17,17,17,.48); opacity: 1; }
.contact-field input:focus-visible, .contact-field textarea:focus-visible { box-shadow: 0 2px 0 var(--ink); }
.contact-field--type, .contact-field--message, .contact-form__action { grid-column: 1 / -1; }
.contact-options { clear: both; display: grid; grid-template-columns: repeat(4,1fr); }
.contact-options label { position: relative; display: grid; place-items: center; min-height: 58px; border: 1px solid var(--ink); border-right: 0; cursor: pointer; }
.contact-options label:last-child { border-right: 1px solid var(--ink); }
.contact-options input { position: absolute; opacity: 0; }
.contact-options span { font: 11px/1.3 var(--mono); letter-spacing: .04em; text-align: center; }
.contact-options input:checked + span { display: grid; place-items: center; position: absolute; inset: 0; background: var(--ink); color: #fff; }
.contact-options input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.contact-form__action { display: flex; align-items: center; gap: 22px; padding-top: 24px; }
.contact-form__action button { min-width: min(100%,240px); padding: 17px 20px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.contact-form__action button span { float: right; }
.contact-form__action button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.contact-form__action p { margin: 0; font: 10px/1.45 var(--mono); letter-spacing: .035em; }

.footer { padding: 90px var(--pad) 30px; background: var(--ink); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.footer-grid > * { display: grid; align-content: start; justify-items: start; gap: 12px; min-width: 0; }
.footer-grid span { margin-bottom: 20px; color: rgba(255,255,255,.54); }
.footer-grid strong { font: 400 clamp(38px,4.4vw,70px)/.88 Georgia,"Times New Roman",serif; letter-spacing: -.055em; }
.footer-grid p, .footer-grid a { margin: 0; color: #fff; font: 12px/1.5 var(--mono); letter-spacing: .04em; text-decoration: none; }
.footer-grid a { border-bottom: 1px solid rgba(255,255,255,.34); }
.footer-grid a:hover { border-color: #fff; }
.footer-contact { font-style: normal; }
.footer-contact p { display: flex; gap: 12px; }
.footer-contact p small { color: rgba(255,255,255,.52); font: inherit; }
.footer-action { display: grid; gap: 24px; margin-top: 150px; padding-top: 26px; border-top: 1px solid var(--line-dark); }
.footer-action > span { color: rgba(255,255,255,.54); }
.footer-action > a { width: fit-content; color: #fff; font: 400 clamp(44px,7.8vw,126px)/.88 "Maru Buri",serif; letter-spacing: -.065em; text-decoration: none; border-bottom: .05em solid rgba(255,255,255,.48); }
.footer-action > a:hover { border-color: #fff; }
.footer-legal { display: flex; justify-content: space-between; gap: 24px; margin-top: 80px; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.footer-legal small { font: 10px var(--mono); letter-spacing: .08em; opacity: .5; }

@media (min-width: 961px) {
  .site-header nav a, .header-action { font-size: 14px; }
  .identity small { font-size: 13px; }
  .hero-services { font-size: 20px; }
  .hero-primary-action { padding: 17px 19px; font-size: 13px; }
  .slot-tag, .section-marker, .section-head, .collection-group > p, .footer > * span, .work-meta, .work-number { font-size: 14px; line-height: 1.4; }
  .work-title small { font-size: 13px; }
  .work-name { font-size: clamp(36px,4vw,62px); }
  .product-slide figcaption { font-size: 12px; }
  .collection-group li > span { font-size: 13px; }
  .collection-copy strong { font-size: clamp(34px,3.6vw,54px); }
  .collection-copy p { max-width: 42em; font-size: 20px; line-height: 1.65; }
  .contact-preview { padding-bottom: clamp(154px,12vw,194px); }
  .contact-preview__intro { gap: 30px; }
  .contact-preview__intro h2 { margin-top: clamp(56px,6vw,88px); font-size: clamp(62px,6.4vw,96px); }
  .contact-preview__intro p { font-size: 20px; line-height: 1.65; }
  .contact-field { --contact-field-pad-top: 40px; --contact-field-gap: 28px; padding: var(--contact-field-pad-top) 0 46px; }
  .contact-field > span, .contact-field legend { font-size: 13px; }
  .contact-field input[type="text"] { font-size: clamp(30px,2.35vw,38px); }
  .contact-field textarea { min-height: 190px; font-size: clamp(21px,1.75vw,28px); }
  .contact-options label { min-height: 68px; }
  .contact-options span { font-size: 14px; }
  .contact-form__action { gap: 28px; padding-top: 38px; }
  .contact-form__action button { font-size: 14px; }
  .contact-form__action p { font-size: 13px; }
  .footer-grid p, .footer-grid a { font-size: 14px; }
  .footer-legal small { font-size: 12px; }
}

@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; }.site-header nav, .header-action { display: none; }.menu-button { display: block; justify-self: end; border: 0; background: none; color: inherit; }
  .mobile-menu { position: absolute; top: 64px; left: 0; width: 100%; padding: 24px var(--pad); background: var(--ink); color: #fff; }.mobile-menu:not([hidden]) { display: grid; gap: 18px; }.mobile-menu a { font: 20px var(--mono); text-decoration: none; }
  .work-row { grid-template-columns: 28px 1fr 210px; }.work-meta { display: none; }
  .team { min-height: 660px; }.team-statement-lead { font-size: clamp(25px,3.8vw,38px); }.team-statement-support { max-width: 32em; }
}

@media (max-width: 640px) {
  .hero-focus-note { top: 126px; right: 18px; width: min(300px,calc(100% - 36px)); padding: 14px 15px; }
  .hero-focus-note[data-mode="selected"] { top: auto; right: 14px; bottom: 14px; left: 14px; width: auto; max-height: min(228px,32vh); padding: 11px 13px 12px; grid-template-rows: auto auto auto auto; gap: 8px; overflow: hidden; }
  .hero-focus-note[data-mode="selected"] .hero-focus-note__topline { padding-bottom: 6px; }
  .hero-focus-note[data-mode="selected"] .hero-focus-note__identity { gap: 4px; align-content: start; }
  .hero-focus-note[data-mode="selected"] .hero-focus-note__identity > span { display: none; }
  .hero-focus-note[data-mode="selected"] strong { font-size: clamp(28px,9.4vw,36px); line-height: .88; }
  .hero-focus-note[data-mode="selected"] .hero-focus-note__identity > p { max-width: none; font-size: 10px; line-height: 1.35; }
  .hero-focus-note[data-mode="selected"] .hero-mission-board__details { grid-template-columns: 1.05fr .72fr 1.32fr; }
  .hero-focus-note[data-mode="selected"] .hero-mission-board__details > div { gap: 4px; padding: 7px 6px 7px 0; }
  .hero-focus-note[data-mode="selected"] .hero-mission-board__details > div + div { padding-left: 7px; border-left: 1px solid rgba(244,242,236,.2); border-top: 0; }
  .hero-focus-note[data-mode="selected"] .hero-mission-board__details span, .hero-focus-note[data-mode="selected"] .hero-mission-board__details b { font-size: 7px; line-height: 1.3; letter-spacing: .055em; }
  .hero-focus-note[data-mode="selected"] .hero-focus-note__footer { grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
  .hero-focus-note[data-mode="selected"] .hero-focus-note__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-focus-note[data-mode="selected"] button { white-space: nowrap; }
  .hero-focus-note strong { font-size: 24px; }
  .hero-target-label { font-size: 7px; }
  .hero-lockup { bottom: 22px; gap: 14px; }
  .hero-identity-latin { font-size: clamp(48px,15vw,72px); }
  .hero-services { max-width: 100%; font-size: clamp(9.25px,3vw,12.5px); line-height: 1.5; letter-spacing: .035em; white-space: nowrap; }
  .hero-primary-action { min-width: min(100%,210px); padding: 14px 15px; font-size: 11px; }
  .work { padding-block: 70px 90px; }.section-head > span { display: none; }.work-row { grid-template-columns: 24px 1fr; min-height: 108px; gap: 12px; }.work-title i { height: 34px; width: 94% !important; }.work-media { grid-column: 2; width: 58%; height: 64px; margin-bottom: 14px; }.work-row--constellation .work-number { grid-row: 1/3; align-self: start; padding-top: 20px; }
  .team { height: calc(368px + 56.25vw); min-height: 540px; max-height: 100svh; }.section-marker--dark { top: 78px; }.team-statement { left: 18px; right: 18px; top: calc(132px + 56.25vw); bottom: auto; }.team-statement .slot-tag { margin-bottom: 8px; }.team-statement-lead { font-size: clamp(13px,4.5vw,20px); line-height: 1.22; letter-spacing: -.035em; }.team-statement-lead span { display: block; white-space: nowrap; }.statement-mobile-break { display: block; }.team-statement-support { max-width: 29em; margin-top: 8px; font-size: 12px; line-height: 1.5; letter-spacing: -.02em; }.product-slide video { position: absolute; top: 132px; left: 18px; width: calc(100% - 36px); height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: 50% 50%; border: 1px solid rgba(255,255,255,.2); background: #090909; filter: none; }.product-slide figcaption { top: 106px; right: 18px; }.product-slideshow-controls { left: 18px; right: 18px; top: calc(290px + 56.25vw); bottom: auto; }
  .collection { padding-block: 88px 100px; }.collection-title, .collection-group { grid-template-columns: 1fr; gap: 34px; }.collection-title { padding-bottom: 84px; }.collection-title .slot-tag { padding-top: 0; }.collection-heading { max-width: none; font-size: clamp(44px,13vw,64px); }.collection-group > p { padding-top: 0; }.collection-group li { grid-template-columns: 34px 1fr; min-height: 0; padding: 30px 0 34px; }.collection-group li > span { padding-top: 4px; font-size: 11px; }.collection-copy { grid-template-columns: 1fr; gap: 14px; }.collection-copy strong { font-size: clamp(25px,7.4vw,32px); }.collection-copy p { max-width: 32em; padding-top: 0; font-size: 15px; line-height: 1.58; }.contact-preview { grid-template-columns: 1fr; }.contact-preview__intro h2 { max-width: none; margin-top: 24px; }
  .contact-options { grid-template-columns: 1fr 1fr; }.contact-options label:nth-child(2) { border-right: 1px solid var(--ink); }.contact-options label:nth-child(n+3) { border-top: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid > :first-child { grid-column: 1/3; }.footer-action { margin-top: 100px; }
  .work-row--constellation { --media-width: min(30vw, 128px); --media-gap: clamp(5px,1.5vw,10px); --aperture: calc(var(--media-width) + var(--media-gap) * 2); min-height: 142px; }
  .work-name { font-size: clamp(18px,4.9vw,22px); }
  .work-row--constellation.is-active .work-name { font-size: clamp(14px,3.9vw,17px); }
  .work-media--reveal { grid-column: 1 / -1; left: var(--media-center,50%); width: var(--media-width); height: 82px; transform: translate(-50%,-50%) scale(.82); }
  .work-row--constellation.is-image-visible .work-media--reveal { transform: translate(-50%,-50%) scale(1); }
  .contact-preview { margin: 0; padding: 80px 18px 92px; gap: 48px; }
  .contact-preview__intro { gap: 18px; }.contact-preview__intro h2 { font-size: clamp(48px,16vw,68px); }.contact-preview__intro p { font-size: 15px; line-height: 1.6; }
  .contact-form { grid-template-columns: 1fr; }.contact-field, .contact-field:nth-child(1), .contact-field:nth-child(2) { --contact-field-pad-top: 24px; --contact-field-gap: 20px; grid-column: 1; padding: var(--contact-field-pad-top) 0 28px; border-left: 0; }.contact-field--type { display: block; padding-top: 0; }.contact-field > span, .contact-field legend { font-size: 11px; }.contact-field input[type="text"] { font-size: 22px; }.contact-field textarea { font-size: 18px; }.contact-options span { font-size: 12px; }
  .contact-options { grid-template-columns: 1fr; }.contact-options label, .contact-options label:nth-child(2) { min-height: 48px; border-right: 1px solid var(--ink); border-top: 0; }.contact-options label:first-child { border-top: 1px solid var(--ink); }
  .contact-form__action { display: grid; gap: 16px; }.contact-form__action button { width: 100%; font-size: 12px; }.contact-form__action p { max-width: 29em; font-size: 11px; }
  .footer { padding-top: 72px; }.footer-grid { grid-template-columns: 1fr; gap: 58px; }.footer-grid > :first-child { grid-column: 1; }.footer-grid span { margin-bottom: 8px; }.footer-grid p, .footer-grid a { font-size: 13px; }.footer-action { margin-top: 82px; }.footer-action > a { font-size: clamp(42px,13vw,64px); }.footer-legal { align-items: flex-start; flex-direction: column; margin-top: 58px; }.footer-legal small { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 641px) { html { scroll-behavior: auto; } .site-header, .work-name, .work-media--reveal, .light-label__text, .product-slide, .hero-target-reticle, .hero-focus-note, .collection-group li::after, .collection-group li > span, .collection-copy strong, .collection-copy p { transition: none; } .constellation-layer, .light-label__canvas, .verb-orbit-canvas { display: none; } .phrase-source, .verb-destination { opacity: 1 !important; } }