/* MUCH MUCH — Direction B. Mobile first, native scrolling. */
:root {
  --paper:#eee;
  --ink:#111;
  --muted:#999;
  --line:#ffffff38;
  --gutter:6vw;
  color-scheme:dark
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:80px
}
body {
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:16px/1.65 Arial,'Microsoft YaHei','PingFang SC',sans-serif
}
h1,h2,h3,h4,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.1
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit;
  color:inherit
}
button {
  cursor:pointer;
  background:none;
  border:0;
  min-height:48px
}
button,a,summary {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}
button:disabled {
  opacity:.3;
  cursor:default
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px
}
img {
  display:block;
  max-width:100%
}
button,summary {
  font-size:14px
}
em {
  font-style:normal;
  color:#8a8a8a
}
summary {
  cursor:pointer;
  list-style:none;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
summary::-webkit-details-marker {
  display:none
}
details[open]>summary>span:last-child,details[open]>summary>b {
  transform:rotate(45deg)
}
[hidden] {
  display:none!important
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.skip {
  position:fixed;
  top:0;
  left:20px;
  z-index:100;
  background:#fff;
  color:#111;
  padding:12px;
  transform:translateY(-110%)
}
.skip:focus {
  transform:none
}
.micro {
  font-size:12px;
  letter-spacing:.06em;
  line-height:1.6
}
.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:74px;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  background:#111f;
  color:#eee;
  z-index:30;
  border-bottom:1px solid #ffffff26
}
.wordmark {
  font-size:17px;
  font-weight:900;
  line-height:.92;
  letter-spacing:-.07em;
  display:flex;
  min-height:48px;
  flex-direction:column;
  justify-content:center
}
.wordmark span {
  display:block
}
.header-note {
  display:none;
  font-size:12px;
  letter-spacing:.04em
}
.header-actions {
  display:flex;
  align-items:center;
  gap:20px
}
.header-actions a {
  font-size:12px;
  min-height:48px;
  display:flex;
  align-items:center
}
.motion-toggle {
  font-size:12px;
  padding:0
}
.reading-progress {
  position:fixed;
  top:73px;
  left:0;
  right:0;
  height:2px;
  background:#eee;
  transform:scaleX(0);
  transform-origin:left;
  z-index:31
}
.section {
  padding:80px var(--gutter);
  position:relative
}
.section-label {
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:12px;
  letter-spacing:.025em;
  line-height:1.6;
  margin-bottom:45px
}
.section-label span:last-child {
  text-align:right
}
.light {
  background:var(--paper);
  color:var(--ink);
  --line:#1113;
  color-scheme:light
}
.hero {
  min-height:820px;
  min-height:100svh;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:104px var(--gutter) 36px;
  overflow:hidden;
  transition:background .45s,color .45s
}
.hero .section-label {
  font-size:10px;
  margin:0
}
.hero-copy {
  margin:auto 0;
  padding:25px 0 110px;
  transition:transform .5s
}
.hero-cn {
  font-size:clamp(35px,10vw,100px);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:1.2;
  margin-bottom:24px
}
.hero h1 {
  font-family:Impact,'Arial Narrow',Arial,sans-serif;
  font-size:clamp(60px,24vw,220px);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:.89;
  max-width:100%
}
.hero-line {
  display:block;
  width:fit-content;
  white-space:nowrap
}
.outline {
  color:transparent;
  -webkit-text-stroke:1px currentColor;
  --stroke:#eee;
  -webkit-text-stroke-color:var(--stroke)
}
.hero-caption {
  font-size:14px;
  margin-top:25px
}
.remix {
  position:absolute;
  right:var(--gutter);
  bottom:138px;
  width:106px;
  height:106px;
  border:1px solid currentColor;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1.3;
  transition:transform .5s
}
.remix-arrow {
  font-size:47px;
  line-height:1.05;
  margin-bottom:8px
}
.hero-bottom {
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-size:12px
}
.hero-bottom>a {
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.hero-bottom>a span {
  font-size:28px
}
.hero-bottom>p {
  font-size:10px;
  letter-spacing:.08em
}
.remixed .hero {
  background:#eee;
  color:#111
}
.remixed .hero-copy {
  transform:skewY(-7deg)
}
.remixed .hero .outline {
  --stroke:#111;
  color:#111
}
.remixed .remix {
  transform:rotate(-20deg)
}
.large-title {
  font-size:clamp(36px,10vw,95px);
  font-weight:700;
  letter-spacing:-.06em;
  line-height:1.25
}
.about {
  min-height:90svh;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.about-bottom {
  display:flex;
  align-items:end;
  gap:24px;
  justify-content:space-between;
  padding-top:58px
}
.about-bottom>div {
  max-width:540px;
  flex:1
}
.about-bottom p+p {
  margin-top:20px;
  color:#b2b2b2
}
.about-bottom .micro {
  display:block;
  margin-top:25px
}
.asterisk {
  font-size:68px;
  line-height:1;
  animation:spin 20s linear infinite
}
.display {
  font-family:Impact,'Arial Narrow',Arial,sans-serif;
  font-weight:400;
  font-size:clamp(50px,17vw,130px);
  letter-spacing:-.015em;
  line-height:.97
}
.services .display {
  margin-bottom:45px
}
.service-list details {
  border-top:1px solid #1115
}
.service-list details:last-of-type {
  border-bottom:1px solid #1115
}
.service-list summary {
  min-height:78px;
  justify-content:start
}
.service-list summary>span:nth-child(2) {
  display:flex;
  align-items:baseline;
  gap:15px;
  font-size:27px;
  font-weight:bold
}
.service-list summary small {
  font-size:13px;
  font-weight:400;
  letter-spacing:.06em
}
.service-list summary b {
  font-size:26px;
  font-weight:400;
  margin-left:auto
}
.service-list details p {
  padding:0 0 22px 30px;
  font-size:16px
}
.service-footnote {
  font-size:14px;
  margin-top:25px;
  color:#555
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:45px;
  flex-wrap:wrap
}
.section-heading>p {
  font-size:16px;
  color:#999
}
.light .section-heading>p {
  color:#555
}
.selected-grid {
  display:grid;
  gap:40px
}
.project-card {
  display:block;
  min-width:0
}
.project-picture {
  position:relative;
  overflow:hidden;
  background:#222;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center
}
.project-picture img {
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .6s
}
.media-badge {
  position:absolute;
  bottom:12px;
  right:12px;
  background:#111d;
  color:#fff;
  padding:6px 10px;
  font-size:12px;
  backdrop-filter:blur(8px)
}
.project-meta {
  display:flex;
  gap:14px;
  align-items:start;
  padding:20px 0;
  border-bottom:1px solid var(--line)
}
.project-meta>div {
  flex:1;
  min-width:0
}
.project-no {
  font-size:12px;
  padding-top:3px;
  color:#999
}
.project-meta .micro {
  font-size:10px;
  color:#999;
  margin-bottom:9px
}
.project-meta h3 {
  font-size:22px;
  font-weight:500;
  line-height:1.4;
  overflow-wrap:anywhere
}
.card-arrow {
  font-size:27px;
  line-height:1
}
.selected .project-card:first-child .project-picture {
  background:#bdeef5
}
.selected .project-card:nth-child(2) .project-picture {
  background:#49d6df
}
.selected .project-card:nth-child(3) .project-picture {
  background:#111
}
.selected .project-picture {
  transition:transform .5s
}
.selected .featured-card:nth-child(2) .project-picture {
  transform:rotate(1.5deg);
  width:97%;
  margin:auto
}
.selected .text-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  min-height:62px;
  margin-top:38px;
  font-size:14px
}
.filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:6px 0 24px;
  border-bottom:1px solid #1116
}
.filters button {
  border:1px solid #1116;
  padding:8px 13px;
  min-height:48px;
  font-size:14px
}
.filters button[aria-pressed=true] {
  background:#111;
  color:#fff;
  border-color:#111
}
.filters sup {
  font-size:10px;
  padding-left:5px
}
.archive-status {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:22px 0;
  font-size:12px
}
.archive-status>.micro {
  font-size:10px
}
.project-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px
}
.archive .project-picture {
  background:#d8d8d8
}
.archive .project-meta h3 {
  font-size:18px
}
.archive .project-no,.archive .project-meta .micro {
  color:#555
}
.load-more {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
  border-top:1px solid #111;
  border-bottom:1px solid #111;
  margin-top:40px;
  font-size:16px
}
.load-more span {
  font-size:24px
}
.friends .large-title {
  margin-bottom:50px
}
.client-spotlight {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  margin:25px 0 70px
}
.client-spotlight>span {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100px;
  padding:10px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-weight:700;
  font-size:clamp(15px,4.2vw,32px);
  text-align:center
}
.subheading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:25px
}
.subheading h3 {
  font-size:22px;
  font-weight:500
}
.subheading p {
  font-size:12px;
  color:#aaa
}
.client-detail {
  border-top:1px solid var(--line)
}
.client-detail summary {
  font-size:18px;
  min-height:70px
}
.client-detail summary>span {
  font-size:25px;
  font-weight:300
}
.client-detail dl {
  margin:0;
  padding-bottom:22px
}
.client-detail dl>div {
  display:grid;
  grid-template-columns:80px 1fr;
  gap:10px;
  margin:8px 0
}
.client-detail dt {
  color:#999;
  font-size:14px
}
.client-detail dd {
  margin:0;
  font-size:16px
}
.past-clients {
  border-top:1px solid var(--line);
  margin-top:25px
}
.past-clients summary {
  font-size:16px;
  min-height:70px
}
.past-clients>div {
  padding:24px 0
}
.past-clients h4 {
  font-size:16px;
  margin-bottom:15px
}
.past-clients p {
  line-height:2.1;
  color:#aaa;
  font-size:16px
}
.team .display {
  font-size:clamp(42px,13.5vw,120px)
}
.founder-grid {
  display:grid;
  gap:50px
}
.portrait {
  height:330px;
  overflow:hidden;
  background:#ddd
}
.portrait img {
  height:100%;
  width:100%;
  object-fit:cover;
  filter:grayscale(1)
}
.portrait.landscape img {
  object-position:46% center
}
.portrait.vertical img {
  object-fit:contain;
  background:#d8d6d2
}
.founder-heading {
  padding:24px 0 18px
}
.founder-heading h3 {
  font-size:28px;
  font-weight:500;
  margin-bottom:12px
}
.founder-heading h3 small {
  font-size:12px;
  font-weight:400;
  margin-left:14px
}
.founder-heading p {
  font-size:14px
}
.founder-grid details {
  border-top:1px solid #1116;
  border-bottom:1px solid #1116
}
.bio {
  font-size:16px;
  padding:10px 0 24px
}
.bio p+p {
  margin-top:8px
}
.contact {
  min-height:90svh;
  display:flex;
  flex-direction:column
}
.contact .display {
  font-size:clamp(40px,12.5vw,140px);
  margin:30px 0
}
.contact-line {
  margin:20px 0 36px;
  font-size:20px;
  line-height:1.6
}
.email {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #aaa;
  min-height:65px;
  font-size:clamp(15px,4.1vw,32px);
  overflow-wrap:anywhere
}
.email span {
  font-size:30px
}
.copy-email {
  align-self:start;
  padding:0;
  border-bottom:1px solid #777;
  margin-top:15px
}
.copy-status {
  min-height:30px;
  font-size:14px;
  color:#aaa
}
.contact footer {
  display:flex;
  align-items:center;
  gap:18px;
  border-top:1px solid #ffffff38;
  margin-top:80px;
  padding-top:28px;
  font-size:12px
}
.contact footer>img {
  filter:invert(1);
  object-fit:contain
}
.contact footer>a {
  margin-left:auto;
  min-height:48px;
  display:flex;
  align-items:center
}
.reveal {
  transition:opacity .7s,transform .7s
}
.js .reveal:not(.visible) {
  opacity:.12;
  transform:translateY(24px)
}
dialog {
  position:fixed;
  inset:0;
  padding:0;
  border:1px solid #444;
  width:min(1120px,100%);
  height:min(94dvh,1100px);
  max-height:94dvh;
  max-width:100%;
  background:#181818;
  color:#eee;
  overflow:hidden
}
dialog::backdrop {
  background:#000c;
  backdrop-filter:blur(8px)
}
.viewer-header {
  height:64px;
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #555;
  gap:12px
}
.close-case {
  white-space:nowrap;
  min-width:70px
}
.viewer-header .micro {
  font-size:11px
}
.viewer-body {
  height:calc(100% - 64px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:25px 5% max(25px,env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch
}
#case-title {
  font-size:clamp(25px,5vw,48px);
  font-weight:500;
  line-height:1.3;
  margin:15px 0;
  overflow-wrap:anywhere
}
#case-title-en {
  font-size:12px;
  color:#aaa
}
#case-description {
  margin-top:12px;
  font-size:16px
}
#case-stage {
  position:relative;
  margin:28px 0 0;
  min-height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0a0a0a
}
#case-stage img {
  width:100%;
  max-height:65svh;
  object-fit:contain
}
#case-stage video {
  display:block;
  width:100%;
  max-height:65svh;
  min-height:200px;
  background:#080808
}
.media-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid #444
}
.media-controls button {
  font-size:24px;
  width:56px
}
.media-controls span {
  font-size:12px
}
#media-thumbs {
  display:flex;
  overflow-x:auto;
  gap:8px;
  padding:15px 2px;
  scrollbar-width:thin
}
#media-thumbs button {
  flex:0 0 72px;
  padding:3px;
  border:1px solid #444;
  height:60px
}
#media-thumbs button[aria-current=true] {
  border:2px solid white
}
#media-thumbs img {
  height:100%;
  width:100%;
  object-fit:contain
}
.case-navigation {
  display:flex;
  justify-content:space-between;
  margin-top:20px;
  border-top:1px solid #555
}
.case-navigation button {
  font-size:14px;
  min-height:60px
}
.stage-error {
  padding:24px;
  font-size:16px
}
.stage-error a {
  text-decoration:underline
}
.motion-off,.motion-off * {
  scroll-behavior:auto!important
}
.motion-off *,.motion-off *:before,.motion-off *:after {
  animation:none!important;
  transition:none!important
}
.motion-off .reveal {
  opacity:1!important;
  transform:none!important
}
@keyframes spin {
  to {
  transform:rotate(360deg)
}
}
@media(min-width:700px) {
  :root {
  --gutter:7vw
}
.header-note {
  display:block
}
.hero {
  padding-top:110px;
  min-height:900px;
  min-height:100svh
}
.hero .section-label {
  font-size:12px
}
.hero-copy {
  padding:36px 0 45px
}
.hero-cn {
  font-size:6vw;
  margin-bottom:20px
}
.hero h1 {
  font-size:16vw
}
.hero-caption {
  margin-top:24px;
  font-size:16px
}
.remix {
  width:145px;
  height:145px;
  right:12vw;
  bottom:160px
}
.remix-arrow {
  font-size:60px
}
.hero-bottom {
  flex-direction:row;
  align-items:end;
  justify-content:space-between
}
.hero-bottom>a {
  width:35%
}
.hero-bottom>p {
  font-size:12px;
  padding-bottom:12px
}
.section {
  padding-top:110px;
  padding-bottom:110px
}
.section-label {
  margin-bottom:65px
}
.about-bottom {
  margin-top:50px
}
.about-bottom>div {
  max-width:50%
}
.asterisk {
  font-size:140px
}
.mobile-break {
  display:none
}
.large-title {
  font-size:7vw
}
.services-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:7vw
}
.services .display {
  font-size:9vw
}
.section-heading>p {
  font-size:18px
}
.selected-grid {
  grid-template-columns:1fr 1fr;
  gap:60px 35px
}
.featured-card:first-child {
  grid-column:1/-1
}
.featured-card:first-child .project-picture {
  aspect-ratio:16/9;
  max-height:75svh
}
.featured-card:first-child .project-picture img {
  object-fit:contain
}
.project-meta h3 {
  font-size:27px
}
.project-grid {
  grid-template-columns:1fr 1fr;
  gap:40px 28px
}
.client-spotlight {
  grid-template-columns:repeat(3,1fr)
}
.client-spotlight>span {
  min-height:145px
}
.collaborations {
  max-width:850px;
  margin-left:auto
}
.founder-grid {
  grid-template-columns:1fr 1fr;
  gap:50px
}
.portrait {
  height:440px
}
.team .display {
  font-size:8vw
}
.contact .display {
  font-size:9vw
}
.contact .email {
  max-width:900px
}
.contact footer {
  margin-top:100px
}
.header-actions a {
  font-size:14px
}
}
@media(min-width:1200px) {
  .project-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.project-meta h3 {
  font-size:24px
}
.archive .project-meta h3 {
  font-size:18px
}
.hero h1 {
  font-size:15vw;
  line-height:.84
}
.hero-cn {
  font-size:5.5vw
}
.hero-copy {
  padding-top:30px;
  padding-bottom:15px
}
.hero {
  min-height:950px;
  min-height:max(850px,100svh)
}
.hero .remix {
  bottom:180px;
  right:15vw;
  width:170px;
  height:170px
}
}
@media(hover:hover) {
  .project-card:hover .project-picture img {
  transform:scale(1.035)
}
.project-card:hover .card-arrow {
  transform:translate(3px,-3px)
}
.remix:hover {
  background:#ffffff16
}
.remixed .remix:hover {
  background:#0000000a
}
.filters button:hover:not([aria-pressed=true]) {
  background:#ddd
}
.email:hover {
  color:#aaa
}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*:before,*:after {
  animation:none!important;
  transition:none!important
}
.js .reveal {
  opacity:1!important;
  transform:none!important
}
}

/* Brand mark and native, cyclic work strip. */
.wordmark { width:48px; height:62px; flex-shrink:0; }
.wordmark img { width:44px; height:54px; object-fit:contain; filter:invert(1); }
.work-carousel { position:relative; min-width:0; }
.archive .project-grid { display:flex; gap:20px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; padding:8px 0 12px; }
.archive .project-grid::-webkit-scrollbar { display:none; }
.archive-item { flex:0 0 88%; min-width:0; scroll-snap-align:start; }
.project-grid.rebasing { scroll-snap-type:none; scroll-behavior:auto; }
.carousel-arrow { position:absolute; z-index:2; top:calc((88vw - 12vw) * .375); transform:translateY(-50%); width:48px; height:60px; font:44px/1 Arial,sans-serif; color:#fff; background:#111e; border:1px solid #ffffff5c; display:grid; place-items:center; box-shadow:0 3px 14px #0002; }
.carousel-prev { left:-14px; }.carousel-next { right:-14px; }
.carousel-position { display:flex; align-items:center; gap:16px; margin-top:15px; }
.carousel-position label { font-size:12px; white-space:nowrap; }
.carousel-position label span { margin-left:6px; }
.carousel-position input { flex:1; min-width:40px; width:100%; height:48px; margin:0; cursor:ew-resize; appearance:none; -webkit-appearance:none; background:transparent; color:#111; }
.carousel-position input::-webkit-slider-runnable-track { height:3px; background:#1113; }
.carousel-position input::-webkit-slider-thumb { -webkit-appearance:none; width:36px; height:14px; margin-top:-5.5px; border-radius:0; background:#111; }
.carousel-position input::-moz-range-track { height:3px; background:#1113; }
.carousel-position input::-moz-range-thumb { width:36px; height:14px; border:0; border-radius:0; background:#111; }
.carousel-position input:focus-visible { outline:2px solid #111; outline-offset:3px; }
.carousel-position output { white-space:nowrap; font-size:12px; font-variant-numeric:tabular-nums; min-width:48px; text-align:right; }
.collaborations { max-width:none; margin:50px 0 0; }
.past-clients { margin-top:70px; padding-top:30px; }
.past-clients>.subheading { padding:0; }
.past-clients>.past-grid { padding:10px 0 0; display:grid; gap:35px; }
.past-group h4 { font-weight:500; color:#fff; font-size:16px; margin:0 0 18px; }
.past-group ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.past-group li { font-size:14px; line-height:1.8; color:#bbb; border-top:1px solid #ffffff20; padding:12px 0; overflow-wrap:anywhere; }
@media(min-width:700px) {
  .archive-item { flex-basis:calc((100% - 28px)/2.25); }
  .archive .project-grid { gap:28px; }
  .carousel-arrow { top:calc((86vw - 28px) / 2.25 * .375); width:52px; height:68px; }
  .carousel-prev { left:-26px; }.carousel-next { right:-26px; }
  .past-clients>.past-grid { grid-template-columns:1fr 1.7fr 1fr; gap:32px; }
  .past-group ul { grid-template-columns:1fr; }
  .past-group:nth-child(2) ul { grid-template-columns:1fr 1fr; }
}
@media(min-width:1200px) {
  .archive-item { flex-basis:calc((100% - 56px)/3); }
  .carousel-arrow { top:calc((86vw - 56px) / 3 * .375); }
}

/* Studio statement and always-visible services. */
.studio-services { border-top:1px solid #ffffff28; background:#111; color:#eee; }
.studio-intro .display { font-size:clamp(72px,23vw,160px); }
.studio-intro>p { max-width:480px; margin:36px 0 22px; color:#bdbdbd; font-size:16px; line-height:1.9; }
.studio-intro>.micro { color:#929292; }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px 22px; margin-top:55px; }
.service-item { border-top:1px solid #ffffff45; padding-top:20px; }
.service-item>.micro { font-size:11px; color:#aaa; }
.service-item h3 { font-size:32px; font-weight:500; margin:18px 0; }
.service-item p { font-size:15px; color:#bbb; line-height:1.85; }
.service-grid .service-footnote { color:#aaa; grid-column:1/-1; margin-top:4px; }
.hero-caption>p { font-size:20px; font-weight:500; letter-spacing:.08em; }
.hero-caption>span { display:block; margin-top:8px; font-size:10px; letter-spacing:.09em; }
.founding { position:absolute; bottom:147px; left:var(--gutter); display:flex; flex-direction:column; line-height:1; }
.founding>span { font-size:12px; letter-spacing:.13em; }
.founding>strong { font-family:Impact,'Arial Narrow',Arial,sans-serif; font-weight:400; font-size:47px; margin-top:9px; letter-spacing:-.025em; }
.hero-copy { padding-bottom:145px; }
.contact footer { justify-content:center; }
.contact footer>img { width:70px; height:85px; }

/* A continuous editorial wall: large anchors, paired frames, staggered edges. */
.archive .work-carousel { margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); }
.archive .project-grid { gap:18px; padding:20px 0; scroll-snap-type:none; align-items:stretch; }
.work-column { flex:0 0 260px; width:260px; height:500px; display:flex; flex-direction:column; gap:18px; min-width:0; }
.work-column.column-large { flex-basis:290px; width:290px; padding-top:24px; padding-bottom:18px; }
.work-column.column-pair { padding-top:0; padding-bottom:40px; }
.work-column.column-offset { flex-basis:230px; width:230px; padding-top:42px; padding-bottom:0; }
.work-column .archive-item { flex:1 1 0; min-height:0; min-width:0; }
.work-column.column-pair .archive-item:first-child { flex:1.3; }
.work-column.column-offset .archive-item:last-child { flex:1.35; }
.work-column .project-card { height:100%; position:relative; background:#222; }
.work-column .project-picture { height:100%; aspect-ratio:auto; background:#222; }
.work-column .project-picture img { width:100%; height:100%; object-fit:contain; }
.work-column .project-meta { position:absolute; inset:auto 0 0; padding:34px 12px 14px; border:0; gap:8px; background:linear-gradient(transparent,#000e); color:white; pointer-events:none; }
.work-column .project-no,.work-column .project-meta .micro { display:none; }
.archive .work-column .project-meta h3 { font-size:15px; line-height:1.4; text-shadow:0 1px 6px #000; }
.work-column .card-arrow { font-size:20px; }
.work-column .media-badge { top:10px; bottom:auto; right:10px; font-size:10px; }
.archive .carousel-arrow { top:50%; width:44px; height:60px; }
.archive .carousel-prev { left:8px; }.archive .carousel-next { right:8px; }
@media(min-width:700px) {
  .studio-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:9vw; align-items:start; }
  .studio-intro .display { font-size:11vw; }
  .service-grid { margin-top:10px; gap:40px 35px; }
  .service-item h3 { font-size:40px; }
  .hero-copy { padding-bottom:25px; }
  .hero-caption>p { font-size:27px; }
  .hero-caption>span { font-size:12px; }
  .founding { left:auto; right:15vw; bottom:390px; }
  .founding>strong { font-size:90px; }
  .founding>span { font-size:14px; }
  .work-column { height:600px; flex-basis:380px; width:380px; gap:28px; }
  .work-column.column-large { flex-basis:500px; width:500px; padding-top:35px; padding-bottom:22px; }
  .work-column.column-offset { flex-basis:300px; width:300px; padding-top:65px; }
  .work-column.column-pair { padding-bottom:55px; }
  .archive .project-grid { gap:28px; }
  .archive .work-column .project-meta h3 { font-size:20px; }
  .work-column .project-meta { padding:50px 20px 20px; }
  .archive .carousel-prev { left:25px; }.archive .carousel-next { right:25px; }
}
.work-column .project-picture img { object-fit:cover; }

/* Alternating surfaces; REMIX reverses the entire page. */
body { --bg:#111; --fg:#eee; --sub:#aaa; --rule:#ffffff38; --logo:invert(1); background:var(--bg); color:var(--fg); }
body.remixed { --bg:#eee; --fg:#111; --sub:#555; --rule:#1113; --logo:invert(0); }
main>section:nth-of-type(odd),body.remixed main>section:nth-of-type(even) { --bg:#111; --fg:#eee; --sub:#aaa; --rule:#ffffff38; --logo:invert(1); color-scheme:dark; }
main>section:nth-of-type(even),body.remixed main>section:nth-of-type(odd) { --bg:#eee; --fg:#111; --sub:#555; --rule:#1113; --logo:invert(0); color-scheme:light; }
body main>section[id] { background:var(--bg); color:var(--fg); --line:var(--rule); transition:background-color .45s,color .45s; }
.site-header { background:var(--bg); color:var(--fg); border-color:var(--rule); transition:background-color .45s,color .45s; }
.wordmark img,.contact footer>img { filter:var(--logo); }
.reading-progress { background:var(--fg); }
main .outline { --stroke:var(--fg); -webkit-text-stroke-color:var(--fg); }
body.remixed .hero .outline { --stroke:var(--fg); -webkit-text-stroke-color:var(--fg); color:var(--fg); }
.section-heading>p,.light .section-heading>p,.subheading p,.client-detail dt,.past-clients p,.past-group li,.copy-status { color:var(--sub); }
.past-group h4 { color:var(--fg); }
.client-detail,.past-clients,.past-group li,.founder-grid details,.contact footer,.copy-email,.email { border-color:var(--rule); }
.filters { border-color:var(--rule); }
.filters button { border-color:var(--rule); color:var(--fg); }
.filters button[aria-pressed=true] { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.carousel-position input { color:var(--fg); }
.carousel-position input::-webkit-slider-runnable-track { background:var(--rule); }
.carousel-position input::-webkit-slider-thumb { background:var(--fg); }
.carousel-position input::-moz-range-track { background:var(--rule); }
.carousel-position input::-moz-range-thumb { background:var(--fg); }
.carousel-position input:focus-visible { outline-color:var(--fg); }
.hero-bottom { min-height:24px; }
.hero-bottom>p { margin-left:auto; }
.hero .founding { bottom:115px; }
.hero .remix { bottom:110px; }
.hero-copy { padding-bottom:130px; }

/* Consistent typography and compact two-column lists across all three groups. */
.capability-layout { display:grid; gap:42px; }
.capability-layout>.display { font-size:clamp(76px,23vw,190px); line-height:.86; }
.capability-groups { display:grid; gap:0; }
.capability-group { min-width:0; border-top:1px solid var(--fg); padding:18px 0 22px; }
.group-label { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.group-label>span,.group-label>small { font-size:10px; letter-spacing:.08em; }
.group-label>span { color:var(--sub); }
.group-label h3 { font-size:15px; font-weight:500; margin:0; }
.group-label>small { margin-left:auto; }
.capability-group ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,max-content); gap:8px 24px; }
.capability-group li { font-size:clamp(17px,4.6vw,21px); letter-spacing:-.025em; line-height:1.45; font-weight:400; }
@media(min-width:1000px) {
 .capability-layout { gap:60px; }
 .capability-layout>.display { font-size:clamp(120px,13vw,210px); }
 .capability-layout>.display br { display:none; }
 .capability-groups { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:3vw; }
 .capability-group { padding-top:22px; }
 .capability-group li { font-size:clamp(18px,1.4vw,24px); }
 .capability-group ul { column-gap:22px; }
 .group-label { margin-bottom:22px; }
}
.friends>.display { font-size:clamp(50px,12.5vw,135px); }
.team .display { font-size:clamp(48px,14.4vw,125px); }
.contact footer { justify-content:space-between; }
.contact footer>.back-to-top { display:grid; place-items:center; border:1px solid var(--rule); width:58px; height:58px; min-height:58px; font-size:30px; border-radius:50%; }
.portrait.vertical img { object-fit:cover; object-position:50% 53%; background:none; }
.portrait { height:330px; }

/* One row with consistent frames and captions outside the images. */
.archive .project-grid { gap:16px; padding:10px 0 18px; }
.work-column.column-filmstrip { flex:0 0 78vw; width:78vw; height:290px; padding:0; gap:0; }
.work-column .archive-item { flex:1 1 0; height:100%; }
.work-column .project-card { background:none; display:flex; flex-direction:column; }
.work-column .project-picture { flex:1; min-height:0; height:auto; background:#242424; }
.work-column .project-picture img { object-fit:contain; }
.work-column .project-meta { position:static; padding:12px 0 0; background:none; color:var(--fg); align-items:start; min-height:48px; }
.archive .work-column .project-meta h3 { font-size:15px; line-height:1.5; text-shadow:none; }
.work-column .project-no { display:block; font-size:10px; color:var(--sub); }
.work-column .card-arrow { font-size:18px; }
.work-column .media-badge { top:10px; right:10px; }
.gallery-end { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:12px; font-family:Impact,Arial,sans-serif; font-size:44px; letter-spacing:-.03em; line-height:1; border:1px solid var(--rule); }
.gallery-end span { font-family:Arial,sans-serif; }
.archive .carousel-arrow { top:46%; }
@media(min-width:700px) {
  .hero-copy { padding-bottom:40px; }
  .hero .founding { bottom:380px; }
  .hero .remix { bottom:160px; }
  .work-column.column-filmstrip { flex-basis:42vw; width:42vw; height:360px; gap:0; }
  .archive .project-grid { gap:26px; }
  .archive .work-column .project-meta h3 { font-size:18px; }
  .portrait { height:440px; }
}
@media(min-width:1200px) {
  .work-column.column-filmstrip { flex-basis:31vw; width:31vw; height:390px; }
  .hero .remix { bottom:150px; }
}
@media(hover:hover) {
  .filters button:hover:not([aria-pressed=true]) { background:var(--rule); }
  .contact footer>.back-to-top:hover { background:var(--fg); color:var(--bg); }
}


.archive .display { font-size:clamp(44px,14vw,130px); }

/* Vector arrows avoid iOS emoji substitution and inherit the active palette. */
.icon-arrow-ne { display:inline-block; width:1em; height:1em; vertical-align:-.12em; flex-shrink:0; pointer-events:none; }

/* Transparent hit areas; outlined vector arrows stay legible over imagery. */
.archive .carousel-arrow { background:transparent; border:0; box-shadow:none; width:48px; height:60px; padding:8px; color:#fff; }
.carousel-arrow svg { width:32px; height:44px; overflow:visible; pointer-events:none; }
.carousel-arrow .arrow-outline { stroke:#111; stroke-width:2.7; stroke-opacity:.55; }
.carousel-arrow .arrow-line { stroke:#fff; stroke-width:1.4; }