@font-face { font-family:'Much Geometric'; src:url('fonts/montserrat-headings.ttf') format('truetype'); font-style:normal; font-weight:600; font-display:block; }
/* 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:none
}
.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(16px,4.1vw,19px); 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(2,minmax(0,1fr)); align-items:start; gap:3vw; }
 .capability-group { padding-top:22px; }
 .capability-group li { font-size:clamp(17px,1.25vw,21px); }
 .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(68px,22vw,190px); line-height:.9; }

/* 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; }

/* Five independent portfolio rows, with fine position indicators. */
.work-category { margin-top:44px; min-width:0; }
.work-category+.work-category { margin-top:52px; }
.work-category-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-top:1px solid var(--rule); padding-top:20px; margin-bottom:16px; }
.work-category-heading h3 { font-size:20px; font-weight:400; letter-spacing:-.02em; }
.work-category-heading>span,.loop-label { font-size:9px; letter-spacing:.1em; color:var(--sub); }
.work-category .carousel-position { margin-top:0; gap:16px; }
.work-category .carousel-position input::-webkit-slider-runnable-track { height:1px; }
.work-category .carousel-position input::-webkit-slider-thumb { width:32px; height:3px; margin-top:-1px; }
.work-category .carousel-position input::-moz-range-track { height:1px; }
.work-category .carousel-position input::-moz-range-thumb { width:32px; height:3px; }
@media(min-width:700px) { .work-category-heading h3 { font-size:26px; } .work-category+.work-category { margin-top:70px; } }
@media(max-width:699px) {
 .hero { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto auto auto; align-content:space-between; row-gap:24px; }
 .hero>.section-label,.hero-copy,.hero-bottom { grid-column:1/-1; }
 .hero-copy { margin:0; padding:24px 0 0; }
 .hero .founding { position:static; align-self:center; }
 .hero .remix { position:static; align-self:center; }
 .hero-bottom { margin-top:8px; }
 .remixed .hero-copy { transform:none; }
 .hero h1,.hero-cn { transition:transform .5s; }
 .remixed .hero h1,.remixed .hero-cn { transform:skewY(-7deg); }
 .hero-caption { margin-top:32px; }
}

/* Two-column portfolio with category navigation scoped to the archive. */
#archive { overflow:visible; }
.case-tabs { position:sticky; top:var(--header-height,74px); z-index:20; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; background:var(--bg); border-bottom:1px solid var(--rule); margin:30px 0 24px; padding:4px 0; }
.case-tabs button { padding:10px 0; min-width:0; font-size:clamp(11px,3.2vw,15px); white-space:nowrap; color:var(--sub); position:relative; }
.case-tabs button[aria-pressed=true] { color:var(--fg); }
.case-tabs::after { content:''; position:absolute; height:1px; width:24px; bottom:6px; left:calc((var(--tab-indicator,0) + .5) * 20%); transform:translateX(-50%); background:var(--fg); pointer-events:none; transition:left .32s cubic-bezier(.22,1,.36,1); }
.case-tabs button { transition:color .2s ease; }
.case-masonry .project-picture::after { content:''; position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.case-masonry .project-card:focus-visible .project-picture::after { opacity:.13; }
@media(hover:hover) and (pointer:fine) {
 .case-masonry .project-card:hover .project-picture::after { opacity:.13; }
 .case-tabs button:hover { color:var(--fg); }
}
@media(prefers-reduced-motion:reduce) { .case-tabs::after,.case-tabs button,.case-masonry .project-picture::after { transition:none; } }
.case-masonry { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.masonry-column { display:flex; flex-direction:column; gap:26px; min-width:0; }
.masonry-column:nth-child(2) { padding-top:28px; }
.case-masonry .archive-item { min-width:0; flex:none; }
.case-masonry .project-picture { height:auto; aspect-ratio:auto; background:transparent; display:block; }
.case-masonry .project-picture img { height:auto; width:100%; object-fit:contain; }
.case-masonry .project-meta { padding:10px 0 0; border:0; gap:5px; }
.archive .case-masonry .project-meta h3 { font-size:13px; font-weight:400; line-height:1.5; }
.case-masonry .project-meta .micro,.case-masonry .project-no { display:none; }
.case-masonry .card-arrow { font-size:14px; }
.case-masonry .media-badge { font-size:9px; padding:3px 5px; bottom:6px; right:6px; }
.case-expand { display:flex; justify-content:center; margin-top:32px; }
.case-expand button { display:flex; flex-direction:column; align-items:center; gap:9px; min-width:120px; min-height:76px; font-size:14px; letter-spacing:.08em; padding:12px 24px; color:var(--fg); text-decoration:none; }
.expand-chevron { display:block; width:36px; height:18px; flex-shrink:0; transition:transform .25s; }
.case-expand button[data-complete=true] .expand-chevron { transform:rotate(180deg); }
@media(prefers-reduced-motion:reduce) { .expand-chevron { transition:none; } }
@media(min-width:700px) {
 .case-tabs { margin-bottom:36px; }
 .case-masonry { gap:28px; }
 .masonry-column { gap:42px; }
 .masonry-column:nth-child(2) { padding-top:52px; }
 .archive .case-masonry .project-meta h3 { font-size:18px; }
 .case-masonry .card-arrow { font-size:20px; }
 .case-masonry .media-badge { font-size:11px; padding:5px 8px; }
}

/* Auto-fit desktop columns; alternating single-column cards on phones. */
.case-masonry { grid-template-columns:repeat(var(--case-columns,1),minmax(0,1fr)); }
.masonry-column:nth-child(2) { padding-top:0; }
@media(min-width:700px) { .masonry-column:nth-child(even) { padding-top:38px; } }
@media(max-width:699px) {
 .case-masonry .masonry-column { gap:36px; }
 .case-masonry .archive-item { width:89%; }
 .case-masonry .archive-item:nth-child(odd) { margin-left:auto; }
 .case-masonry .archive-item:nth-child(even) { margin-right:auto; }
 .archive .case-masonry .project-meta h3 { font-size:14px; }
}

/* Flat toggle: monochrome outline, moving thumb, no physical texture. */
.hero .remix,.hero .remix:hover,body.remixed .hero .remix,body.remixed .hero .remix:hover { width:120px; height:126px; padding:0; border:0; border-radius:0; background:none; transform:none; gap:16px; }
.switch-label { font-size:14px; letter-spacing:.06em; white-space:nowrap; line-height:1.5; }
.switch-plate { display:block; position:relative; width:42px; height:76px; flex-shrink:0; border:1.5px solid currentColor; border-radius:24px; background:transparent; }
.switch-mark,.switch-socket { display:none; }
.switch-lever { position:absolute; left:6px; top:6px; width:27px; height:27px; border-radius:50%; background:currentColor; transform:translateY(34px); transition:transform .32s cubic-bezier(.22,.8,.25,1); }
.switch-tip { position:absolute; width:9px; height:1.5px; left:9px; top:13px; background:var(--bg); }
.remix[aria-pressed=true] .switch-lever { transform:translateY(0); }
.remix[aria-pressed=true] .switch-tip { transform:rotate(90deg); }
@media(prefers-reduced-motion:reduce) { .switch-lever { transition:none; } }
.motion-off .switch-lever { transition:none; }

/* Geometric headline typography, matched to the supplied reference. */
.hero h1,.display,.founding>strong,.gallery-end { font-family:'Much Geometric',Arial,sans-serif; font-weight:600; letter-spacing:.005em; }
.hero h1 { line-height:1.03; }
.display { line-height:1.08; }
.archive .display { font-size:clamp(66px,21vw,180px); line-height:1.05; }
.capability-layout>.display { font-size:clamp(60px,19vw,150px); line-height:1.08; }
.friends>.display { font-size:clamp(28px,8.5vw,125px); }
.team .display { font-size:clamp(28px,9.2vw,125px); }
.contact .display { font-size:clamp(28px,9vw,130px); }
@media(min-width:1000px) { .capability-layout>.display { font-size:clamp(70px,10.4vw,160px); } }

/* One responsive headline scale across all five content sections. */
#archive .display,#about .display,#friends .display,#team .display,#contact .display { font-size:clamp(38px,12vw,170px); line-height:1.08; letter-spacing:.005em; }
#about .display br { display:block; }

/* A quiet colour reveal on entering each founder portrait. */
.portrait img { filter:none; }
.js .portrait img { filter:grayscale(1); transform:scale(1.055); transition:filter 1.35s ease,transform 1.6s cubic-bezier(.2,.65,.25,1); }
.js .portrait.portrait-active img { filter:grayscale(0); transform:scale(1); }
.motion-off .portrait img { filter:none; transform:none; transition:none; }
@media(prefers-reduced-motion:reduce) { .js .portrait img { filter:none; transform:none; transition:none; } }

/* Restrained, centred typography and a calm opening sequence. */
body { font-size:14px; }
#archive .display,#about .display,#friends .display,#team .display,#contact .display { font-size:clamp(28px,8vw,90px); line-height:1.14; text-align:center; width:100%; margin-left:auto; margin-right:auto; }
.section-heading { display:block; text-align:center; margin-bottom:32px; }
.section-heading>p { margin:18px auto 0; font-size:13px; }
.capability-layout { gap:34px; }
body .hero { display:grid; grid-template-columns:1fr auto; grid-template-rows:1fr auto auto; min-height:100svh; padding:110px var(--gutter) 28px; gap:24px; }
.hero .hero-copy { grid-column:1/-1; width:100%; margin:0; padding:18px 0 24px; text-align:center; align-self:center; }
.hero .hero-cn { font-size:clamp(26px,6.8vw,48px); margin-bottom:18px; font-weight:600; }
.hero .hero-line { margin-left:auto; margin-right:auto; }
.hero .hero-caption { margin-top:24px; }
.hero-caption>p { font-size:16px; }
.hero-caption>span { font-size:10px; }
.hero .founding { position:static; align-self:center; }
.hero .founding>strong { font-size:34px; }
.hero .founding>span { font-size:10px; }
.hero .remix { position:static; align-self:center; }
.hero .hero-bottom { grid-column:1/-1; margin-top:0; }
.switch-label { font-size:12px; }
.capability-group li { font-size:15px; }
.group-label h3 { font-size:13px; }
.subheading h3 { font-size:18px; }
.client-detail summary { font-size:15px; min-height:60px; }
.client-detail dt,.client-detail dd,.past-group li,.past-clients p { font-size:13px; }
.past-clients h4 { font-size:14px; }
.founder-heading h3 { font-size:21px; }
.founder-heading small,.founder-heading p { font-size:12px; }
.bio,.founder-grid summary { font-size:13px; }
.contact-line { font-size:15px; text-align:center; margin:18px 0 28px; }
.email { font-size:clamp(13px,3.3vw,22px); }
.archive .case-masonry .project-meta h3 { font-size:14px; }
.case-tabs button,.case-expand button { font-size:12px; }
.js .reveal { transition:opacity .65s ease,transform .65s ease; }
.js .reveal:not(.visible) { opacity:0; transform:translateY(14px); }
.js .reveal.visible { opacity:1; transform:none; }
.motion-off .reveal { opacity:1!important; transform:none!important; transition:none!important; }
@media(max-width:699px) {
 body { font-size:12px; }
 .section { padding-top:66px; padding-bottom:66px; }
 .header-actions a,.motion-toggle { font-size:11px; }
 .hero-caption>p { font-size:14px; }
 .hero-caption>span { font-size:9px; letter-spacing:.06em; }
 .capability-group li { font-size:13px; }
 .group-label h3 { font-size:12px; }
 .subheading h3 { font-size:16px; }
 .subheading p { font-size:10px; }
 .client-detail summary { font-size:13px; }
 .client-detail dt,.client-detail dd,.past-group li,.past-clients p,.bio { font-size:12px; }
 .past-clients h4 { font-size:13px; }
 .founder-heading h3 { font-size:18px; }
 .founder-heading p,.founder-heading small { font-size:11px; }
 .contact-line { font-size:13px; }
 .archive .case-masonry .project-meta h3,.case-tabs button,.case-expand button { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
 .js .reveal { opacity:1!important; transform:none!important; transition:none!important; }
 .intro-playing .intro-screen { display:none; }
 .intro-playing main,.intro-playing .site-header { animation:none; }
 .intro-playing body { overflow:auto; }
}

/* Keep the actual homepage title stationary throughout the opening. */
body .hero { grid-template-columns:1fr; grid-template-rows:minmax(230px,1fr) auto auto auto; justify-items:center; gap:18px; }
.hero .hero-cn { font-size:clamp(20px,5.2vw,32px); margin-bottom:14px; }
.hero .hero-copy { padding:12px 0; }
.hero .founding { text-align:center; align-items:center; justify-self:center; }
.hero .founding>strong { font-size:26px; margin-top:5px; }
.hero .founding>span { font-size:9px; }
.hero .remix,.hero .remix:hover,body.remixed .hero .remix,body.remixed .hero .remix:hover { justify-self:center; width:120px; height:84px; gap:10px; }
.switch-plate { width:68px; height:34px; border-radius:20px; }
.switch-lever { width:22px; height:22px; top:4.5px; left:5px; transform:translateX(0); }
.remix[aria-pressed=true] .switch-lever { transform:translateX(34px); }
.switch-tip { left:7px; top:10px; width:8px; }
.hero .hero-bottom { width:100%; justify-content:center; align-items:center; text-align:center; }
.hero .hero-bottom>p { margin:0 auto; text-align:center; }
.site-header .wordmark { position:absolute; left:50%; transform:translateX(-50%); }
.site-header .header-actions { width:100%; display:flex; justify-content:space-between; align-items:center; }
.site-header .header-note { display:none; }
@media(min-width:700px) { .site-header .header-note { display:block; position:absolute; left:var(--gutter); font-size:11px; }.site-header .motion-toggle { margin-left:90px; } }
.capability-groups { text-align:center; }
.group-label { justify-content:center; gap:10px; }
.group-label>small { margin-left:0; }
.capability-group ul { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; max-width:440px; margin:0 auto; }
.capability-group li { flex:0 0 auto; }
#friends .subheading { display:flex; flex-direction:column; justify-content:center; text-align:center; gap:10px; }
#friends .client-detail summary { justify-content:center; text-align:center; position:relative; padding:12px 32px; }
#friends .client-detail summary>span { position:absolute; right:8px; }
#friends .client-detail dl { max-width:560px; margin:0 auto; }
#friends .client-detail dt { text-align:right; }
#friends .client-detail dd { text-align:left; }
#friends .past-group { text-align:center; }
#friends .past-group ul { list-style:none; padding-left:0; }
#contact .thanks-prefix { display:block; font-size:.48em; letter-spacing:.025em; margin-bottom:16px; }
#contact .thanks-brand { display:block; white-space:nowrap; }
.intro-playing body { overflow:hidden; }
.intro-playing main { opacity:1; animation:none; }
.intro-playing .site-header,.intro-playing .reading-progress,.intro-playing .hero-caption,.intro-playing .founding,.intro-playing .remix,.intro-playing .hero-bottom,.intro-playing main>.section { opacity:0; animation:none; }
.intro-playing.intro-reveal .site-header,.intro-playing.intro-reveal .reading-progress,.intro-playing.intro-reveal .hero-caption,.intro-playing.intro-reveal .founding,.intro-playing.intro-reveal .remix,.intro-playing.intro-reveal .hero-bottom,.intro-playing.intro-reveal main>.section { animation:surroundings-in 2s ease both; }
@keyframes surroundings-in { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .intro-playing body { overflow:auto; } .intro-playing .site-header,.intro-playing .hero-caption,.intro-playing .founding,.intro-playing .remix,.intro-playing .hero-bottom,.intro-playing main>.section { opacity:1; animation:none; } }

/* Keep the clients' main heading centred; align its content and closing title left. */
#contact .display { text-align:left; }
#friends .subheading { align-items:flex-start; text-align:left; }
#friends .client-detail summary { justify-content:flex-start; text-align:left; padding-left:0; }
#friends .client-detail dl { margin-left:0; margin-right:0; }
#friends .client-detail dt,#friends .client-detail dd { text-align:left; }
#friends .past-group { text-align:left; }

.contact-line { text-align:left; }

/* Start the opening clock only after resources are ready. */
.intro-playing .hero-copy { opacity:0; }

/* Move the actual header logo, at its final size, from the centre to its home. */
.intro-playing .site-header { opacity:1; animation:none; background:transparent; border-color:transparent; }
.intro-playing .site-header .wordmark img { opacity:0; }
.intro-playing .header-actions,.intro-playing .header-note { opacity:0; }
.intro-playing.intro-reveal .site-header { opacity:1; animation:header-surface-in 2s ease both; }
.intro-playing.intro-reveal .header-actions,.intro-playing.intro-reveal .header-note { animation:surroundings-in 2s ease both; }
@keyframes header-surface-in { from { background-color:transparent; border-color:transparent; } to { background-color:var(--bg); border-color:var(--rule); } }

/* Keep the viewport anchored while new portfolio cards extend below it. */
html.case-expanding,html.case-expanding body { overflow-anchor:none; }

/* Compact category labels replace full-width dividers. */
#about .capability-group { border:0; padding:0; }
#about .capability-groups { gap:38px; }
#about .group-label { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:18px; }
#about .group-label h3 { display:inline-block; background:var(--fg); color:var(--bg); font-size:12px; font-weight:500; letter-spacing:.12em; padding:5px 13px; border-radius:3px; line-height:1.5; }
#about .group-label small { margin:0; font-size:9px; letter-spacing:.16em; color:var(--sub); }
@media(min-width:1000px) { #about .capability-groups { gap:6vw; } #about .group-label h3 { font-size:13px; } }

/* Aligned case rows, centred phone cards and a branded loading state. */
.case-masonry { align-items:start; row-gap:32px; }
.case-masonry>.archive-item { width:100%; margin:0; }
.case-masonry .project-picture { background:var(--rule); }
.case-masonry .case-preview { opacity:0; transition:opacity .35s ease; }
.case-masonry .preview-ready .case-preview { opacity:1; }
.preview-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; pointer-events:none; transition:opacity .3s ease; }
.preview-logo { width:44px; height:54px; background:url('company-assets/logo-transparent.png') center/contain no-repeat; filter:var(--logo); opacity:.45; }
.preview-spinner { width:19px; height:19px; border:1px solid var(--rule); border-top-color:var(--fg); border-radius:50%; animation:preview-spin 1s linear infinite; }
.preview-note { display:none; font-size:10px; color:var(--sub); }
.preview-ready .preview-placeholder { opacity:0; visibility:hidden; }
.preview-ready .preview-spinner,.preview-error .preview-spinner { animation:none; display:none; }
.preview-error .preview-note { display:block; }
.case-masonry .media-badge { z-index:2; }
@keyframes preview-spin { to { transform:rotate(360deg); } }
@media(min-width:700px) {
 .case-masonry .project-picture { aspect-ratio:4/3; }
 .case-masonry .project-picture .case-preview { width:100%; height:100%; object-fit:contain; }
}
@media(max-width:699px) {
 .case-masonry>.archive-item { width:89%; margin-left:auto; margin-right:auto; }
}
.motion-off .preview-spinner { animation:none; }
@media(prefers-reduced-motion:reduce) { .preview-spinner { animation:none; }.case-masonry .case-preview,.preview-placeholder { transition:none; } }

.founder-contact a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }

/* Current partnerships grouped by business category, with locations always visible. */
.current-categories { display:grid; gap:30px; }
.current-category { min-width:0; }
.current-category>h4 { font-size:12px; font-weight:500; letter-spacing:.08em; margin:0 0 14px; color:var(--sub); }
#friends .client-summary-copy { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 14px; min-width:0; }
.client-name { font-size:inherit; font-weight:400; }
.client-location { overflow-wrap:anywhere; font-size:11px; font-weight:400; color:var(--sub); line-height:1.5; }
@media(min-width:1000px) { .current-categories { grid-template-columns:repeat(3,minmax(0,1fr)); gap:3vw; }.current-category>h4 { font-size:13px; }.client-location { font-size:12px; } }

/* The case panel grows from the clicked cover and returns on close. */
#case-dialog { transform-origin:0 0; }
#case-dialog.viewer-opening,#case-dialog.viewer-closing { will-change:transform,opacity; }
#case-dialog.viewer-opening::backdrop { animation:viewer-backdrop-in .52s ease both; }
#case-dialog.viewer-closing::backdrop { animation:viewer-backdrop-out .32s ease both; }
@keyframes viewer-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes viewer-backdrop-out { from { opacity:1; } to { opacity:0; } }
@media(prefers-reduced-motion:reduce) { #case-dialog::backdrop { animation:none!important; } }

/* Native disclosure panels slide in the normal document flow. */
.smooth-details { overflow-anchor:none; }
.smooth-details.details-animating { overflow:hidden; will-change:height; }
.smooth-details>summary>span { display:inline-block; transition:transform .3s ease; }
.smooth-details[data-expanded=true]>summary>span { transform:rotate(45deg); }
@media(prefers-reduced-motion:reduce) { .smooth-details>summary>span { transition:none; } }

/* Touch album: direct manipulation with vertical page scrolling retained. */
#case-stage { overflow:hidden; touch-action:pan-y pinch-zoom; }
#case-stage>img { user-select:none; -webkit-user-drag:none; }
#case-stage .swipe-preview { position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:contain; background:#0a0a0a; pointer-events:none; }
#case-stage.media-dragging>img,#case-stage.media-dragging>video { will-change:transform; }