@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --paper: #eeeae2;
  --ink: #171817;
  --red: #c84b35;
  --blue: #243b45;
  --link-blue: #2388ff;
  --yellow: #d9c99f;
  --green: #263a37;
  --line: rgba(23, 23, 20, 0.22);
  --gutter: clamp(20px, 5vw, 84px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  cursor: none;
}
a, button, [tabindex] { cursor: none; }
button { font: inherit; }
a { color: inherit; }

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11000;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: #f2c94c;
  box-shadow: 2px 3px 0 rgba(23,24,23,.2);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .18s ease, height .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
  font: 500 8px/1 "DM Mono", monospace;
  letter-spacing: .08em;
  line-height: 1;
}
.custom-cursor.is-scissors { width: 46px; height: 46px; background: var(--red); color: white; box-shadow: 3px 4px 0 rgba(23,24,23,.22); }
.custom-cursor.is-lens { width: 52px; height: 52px; background: var(--blue); color: white; box-shadow: 3px 4px 0 rgba(23,24,23,.22); }
.custom-cursor.is-open { width: 52px; height: 52px; background: var(--link-blue); color: white; box-shadow: 3px 4px 0 rgba(23,24,23,.22); }
.custom-cursor.is-grab { width: 52px; height: 52px; background: var(--red); color: white; box-shadow: 3px 4px 0 rgba(23,24,23,.22); }
.custom-cursor.is-hidden { opacity: 0; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  height: 82px;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.brand { justify-self: start; font-size: 14px; letter-spacing: .12em; font-weight: 800; text-decoration: none; }
.brand span { color: var(--red); }
.brand-logo {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-header nav { display: flex; gap: 34px; }
.site-header nav a { text-decoration: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.hero {
  position: relative;
  min-height: min(860px, 100svh);
  padding: 130px var(--gutter) 90px;
  display: grid;
  grid-template-columns: minmax(300px, .88fr) minmax(420px, 1.12fr);
  align-items: center;
  gap: clamp(20px, 4vw, 70px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 10; }
.difference-note {
  position: relative;
  width: min(430px, 100%);
  margin: 42px 0 0;
  padding: 17px 0 0 42px;
  border-top: 1px solid var(--ink);
  overflow: hidden;
  font: 500 12px/1.6 "DM Mono", monospace;
  text-transform: uppercase;
  animation: differenceReveal .85s .5s cubic-bezier(.2,.8,.2,1) both;
}
.difference-note::before {
  content: "/";
  position: absolute;
  top: 15px;
  left: 2px;
  color: var(--red);
  font-size: 18px;
  font-weight: 700;
}
.difference-note span, .difference-note strong { display: block; }
.difference-note span { color: rgba(23,24,23,.62); }
.difference-note strong { color: var(--red); font-weight: 700; }
.watching-figures {
  --figure-x: 0px;
  --figure-y: 0px;
  position: absolute;
  z-index: 2;
  top: 78px;
  right: clamp(-18px, 1vw, 18px);
  width: clamp(390px, 39vw, 610px);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  filter: drop-shadow(12px 18px 15px rgba(23, 24, 23, .18));
  transform-origin: 72% 100%;
  transform: translate3d(var(--figure-x), var(--figure-y), 0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.watching-figures img { display: block; width: 100%; height: 100%; object-fit: contain; }
.watch-eye {
  position: absolute;
  width: 2.35%;
  aspect-ratio: 1.55;
  overflow: hidden;
  border: 1px solid rgba(23, 24, 23, .72);
  border-radius: 50%;
  background: #f7f2e8;
  box-shadow: 0 1px 0 rgba(255,255,255,.5), inset 0 1px 3px rgba(23,24,23,.14);
  transform: translate(-50%, -50%) rotate(var(--eye-rotation, 0deg));
}
.watch-eye i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(calc(-50% + var(--pupil-x, 0px)), calc(-50% + var(--pupil-y, 0px)));
  will-change: transform;
}
.eye-left-one { top: 25.54%; left: 14.03%; width: 2.75%; --eye-rotation: -8deg; }
.eye-left-two { top: 25.86%; left: 17.75%; width: 2.95%; --eye-rotation: -8deg; }
.eye-middle-one { top: 25.64%; left: 43.30%; width: 3.15%; --eye-rotation: 3deg; }
.eye-middle-two { top: 25.96%; left: 47.16%; width: 3.15%; --eye-rotation: 3deg; }
.eye-right-one { top: 26.07%; left: 71.91%; width: 2.95%; --eye-rotation: 4deg; }
.eye-right-two { top: 26.17%; left: 75.11%; width: 2.95%; --eye-rotation: 4deg; }
.eyebrow { margin: 0 0 20px; font: 500 11px/1.5 "DM Mono", monospace; color: var(--red); text-transform: uppercase; letter-spacing: .08em; }
h1, h2, h3 { letter-spacing: 0; }
h1 {
  margin: 0;
  font-size: clamp(58px, 7.6vw, 116px);
  line-height: 1.13;
  font-weight: 900;
}
.scribble { position: relative; color: var(--paper); isolation: isolate; white-space: nowrap; }
.scribble::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% -4% 0;
  background: var(--red);
  clip-path: polygon(1% 10%, 97% 0, 100% 86%, 5% 100%);
  transform: rotate(-1.5deg);
}
.hero-intro { max-width: 510px; margin: 30px 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.75; color: rgba(23,24,23,.78); }
.availability { display: flex; align-items: flex-start; gap: 9px; max-width: 520px; margin: -12px 0 27px; font: 500 11px/1.55 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .04em; }
.availability span { width: 9px; height: 9px; border-radius: 50%; background: #2b9b66; box-shadow: 0 0 0 4px rgba(43,155,102,.13); }
.tear-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--red);
  color: var(--paper);
  font-weight: 800;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tear-cta:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }

.ink-link { position: relative; display: inline-block; }
.ink-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.32em;
  width: 100%;
  height: 13px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M2 10 C24 8 43 12 66 9 C88 6 109 11 132 8 C154 6 176 12 198 8 C222 5 243 11 265 7 C278 5 289 7 298 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M4 12 C37 9 57 13 91 10 C124 8 145 12 178 9 C211 7 236 12 267 9 C281 8 291 8 297 7' fill='none' stroke='black' stroke-width='.7' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M2 10 C24 8 43 12 66 9 C88 6 109 11 132 8 C154 6 176 12 198 8 C222 5 243 11 265 7 C278 5 289 7 298 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M4 12 C37 9 57 13 91 10 C124 8 145 12 178 9 C211 7 236 12 267 9 C281 8 291 8 297 7' fill='none' stroke='black' stroke-width='.7' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .42s cubic-bezier(.2,.8,.2,1);
}
.ink-link:hover::after, .ink-link:focus-visible::after { clip-path: inset(0 0 0 0); }

.collage { position: relative; min-height: 610px; direction: ltr; }
.collage-piece, .side-scrap {
  --px: 0px;
  --py: 0px;
  --dx: 0px;
  --dy: 0px;
  position: absolute;
  z-index: 1;
  touch-action: none;
  user-select: none;
  transform: translate(calc(var(--px) + var(--dx)), calc(var(--py) + var(--dy))) rotate(var(--rot, 0deg));
  will-change: transform;
}
.collage-piece.is-dragging, .side-scrap.is-dragging { z-index: 30; }
.piece-surface {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 10px 12px 22px rgba(23, 23, 20, .18);
  transition: transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s ease;
  animation: stopShift 3.7s steps(2, end) infinite;
}
.collage-piece:hover .piece-surface, .collage-piece:focus-visible .piece-surface {
  transform: rotate(calc(var(--rot, 0deg) * -1)) scale(1.035);
  box-shadow: 13px 17px 28px rgba(23, 23, 20, .24);
}
.piece-blue { top: 24%; left: 8%; width: 36%; height: 200px; --rot: -5deg; }
.piece-blue .piece-surface { padding: 25px; background: var(--blue); color: var(--paper); border: 7px solid var(--paper); }
.piece-blue span { display: block; font: 500 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.piece-blue strong { display: block; margin-top: 14px; font-size: clamp(26px, 2.9vw, 44px); line-height: .95; letter-spacing: 0; }
.piece-blue small { display: block; margin-top: 10px; font: 500 11px/1 "DM Mono", monospace; letter-spacing: .08em; }
.piece-note { top: 66%; left: 10%; width: 39%; height: 170px; --rot: 5deg; }
.piece-note .piece-surface { padding: 24px; background: #f8f5ee; border: 1px solid #d8d1c5; }
.piece-note small { color: var(--red); font: 500 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.piece-note p { margin: 18px 0 0; font-size: 18px; line-height: 1.45; font-weight: 700; }
.tape { position: absolute; z-index: 1; width: 115px; height: 32px; background: rgba(217,201,159,.72); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.tape-two { top: 63%; left: 21%; transform: rotate(8deg); background: rgba(214,207,191,.82); }
.cut-mark { position: absolute; top: 89%; right: 6%; font: 500 10px "DM Mono", monospace; letter-spacing: .08em; transform: rotate(13deg); }

.scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 11px;
  transform: translateX(-50%);
}
.scroll-cue span { display: block; width: 40px; height: 1px; background: var(--ink); }

.work-section {
  position: relative;
  min-height: 1250px;
  padding: 110px clamp(20px, 6vw, 100px) 150px;
  background: #d8d5cc;
  overflow: hidden;
}
.section-heading { position: relative; z-index: 3; max-width: 500px; margin-left: auto; text-align: left; }
.section-heading h2, .about-section h2 { margin: 0; font-size: clamp(48px, 6vw, 88px); line-height: 1.16; font-weight: 900; }
.section-heading h2 span { color: var(--red); }
.section-heading > p:last-child { max-width: 400px; margin-top: 22px; line-height: 1.9; }
.project-sheet {
  --dx: 0px;
  --dy: 0px;
  position: relative;
  z-index: 6;
  width: min(700px, 64vw);
  margin: -85px 4vw 0 auto;
  padding: 0;
  background: transparent;
  transform: translate(var(--dx), var(--dy)) rotate(-2deg);
  transform-origin: top center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: transform .9s cubic-bezier(.2,.8,.2,1), clip-path .9s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  touch-action: none;
}
.project-sheet:not(.is-unfolded) {
  opacity: .72;
  transform: translate(var(--dx), var(--dy)) rotate(-2deg) scaleY(.28);
  clip-path: polygon(0 0, 100% 0, 94% 45%, 100% 100%, 0 100%, 6% 55%);
}
.paper-object { position: relative; aspect-ratio: 16 / 9; outline: none; }
.paper-object video { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }
.paper-object-hint { position: absolute; top: 7%; left: 50%; padding: 6px 9px; border-bottom: 1px solid var(--ink); font: 500 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; transform: translateX(-50%); transition: opacity .2s ease; }
.paper-object.is-playing .paper-object-hint { opacity: 0; }

.work-teaser {
  min-height: 520px;
  padding: 110px clamp(20px, 7vw, 120px);
  display: grid;
  align-content: center;
  border-bottom: 1px solid var(--line);
  background: #d8d5cc;
}
.work-teaser h2 { margin: 0; font-size: clamp(72px, 12vw, 180px); line-height: .95; }
.work-teaser-link { justify-self: start; margin-top: 36px; font-size: 18px; font-weight: 700; text-decoration: none; }

.work-page-body { min-height: 100svh; background: #d8d5cc; }
.work-header { position: fixed; background: rgba(238,234,226,.92); backdrop-filter: blur(10px); }
.back-link { justify-self: end; font: 500 11px "DM Mono", monospace; text-transform: uppercase; text-decoration: none; }
.gallery-page { max-width: 1540px; min-height: 100svh; margin: 0 auto; padding: 132px clamp(20px, 5vw, 84px) 80px; }
.gallery-intro { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; padding-bottom: clamp(28px, 4vw, 58px); border-bottom: 1px solid rgba(23,24,23,.28); }
.gallery-intro .eyebrow { margin-bottom: 12px; }
.gallery-intro h1 { font-size: clamp(64px, 10vw, 150px); line-height: .82; }
.gallery-count { display: flex; align-items: flex-end; gap: 12px; margin: 0; font: 500 10px/1.35 "DM Mono", monospace; text-transform: uppercase; }
.gallery-count strong { color: var(--red); font-size: clamp(38px, 4.5vw, 68px); line-height: .75; }
.project-gallery { width: min(1120px, 100%); margin: clamp(38px, 6vw, 84px) auto 0; }
.gallery-project { display: block; color: inherit; text-decoration: none; }
.gallery-project-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; }
.gallery-project-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-project-number, .gallery-project-action { position: absolute; z-index: 2; top: 18px; padding: 8px 10px; background: rgba(238,234,226,.9); font: 500 10px/1 "DM Mono", monospace; text-transform: uppercase; }
.gallery-project-number { left: 18px; }
.gallery-project-action { right: 18px; }
.gallery-project-action i { color: var(--red); font-style: normal; }
.gallery-project-info { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: clamp(18px, 4vw, 60px); padding: 18px 0 25px; }
.gallery-project-info::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 11px;
  border-bottom: 1.5px solid rgba(23,24,23,.42);
  border-radius: 0 0 48% 52%;
  transform: rotate(-.18deg) scaleX(.998);
}
.gallery-project-info h2 { min-width: 0; margin: 0; font-size: clamp(30px, 4.5vw, 64px); line-height: 1; }
.gallery-project-info h2 { transition: color .25s ease; }
.gallery-project-info h2:hover { color: var(--link-blue); }
.gallery-project-info p, .gallery-project-info time { margin: 0; font: 500 10px/1.4 "DM Mono", monospace; text-transform: uppercase; }
.work-page { min-height: 100svh; padding: 132px clamp(20px, 5vw, 84px) 60px; }
.flowmorph-project { max-width: 1540px; margin: 0 auto; }
.flowmorph-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; }
.flowmorph-heading .eyebrow { grid-column: 1 / 3; margin-bottom: 0; }
.flowmorph-heading h1 { font-size: clamp(72px, 11vw, 170px); line-height: .85; }
.live-link { margin-bottom: 8px; font: 500 12px "DM Mono", monospace; text-transform: uppercase; text-decoration: none; }
.flowmorph-sheet {
  width: min(1120px, 88vw);
  margin: clamp(35px, 5vw, 74px) auto 0;
  transform: none;
  clip-path: none;
  opacity: 1;
}
.flowmorph-sheet:not(.is-unfolded) { opacity: 1; transform: none; clip-path: none; }
.flowmorph-sheet .paper-object { aspect-ratio: 16 / 9; }
.flowmorph-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-top: 16px; padding-top: 18px; border-top: 1px solid rgba(23,24,23,.32); }
.flowmorph-project-name { color: inherit; font-size: clamp(28px, 3.4vw, 52px); line-height: 1; font-weight: 800; text-decoration: none; }
.flowmorph-project-name span { display: inline-block; color: var(--red); font-size: .55em; transform: translateY(-.35em); }
.flowmorph-project-meta { display: flex; gap: clamp(22px, 4vw, 64px); font: 500 10px "DM Mono", monospace; text-transform: uppercase; }
.side-scrap { z-index: 9; padding: 22px; box-shadow: 8px 12px 20px rgba(0,0,0,.18); font-weight: 900; }
.scrap-yellow { top: 47%; right: 5%; width: 190px; height: 130px; background: var(--yellow); font-size: 26px; --rot: 8deg; }
.scrap-type { left: 6%; bottom: 7%; width: 210px; background: var(--blue); color: white; font-size: 24px; line-height: 1.05; --rot: -5deg; direction: ltr; }
.scrap-type i { color: var(--yellow); }

.case-study {
  position: relative;
  z-index: 5;
  max-width: 1080px;
  margin: 85px auto 0;
  padding-top: 45px;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: clamp(28px, 5vw, 75px);
  border-top: 1px solid rgba(23,23,20,.35);
}
.case-label { display: block; margin-bottom: 14px; color: var(--red); font: 500 10px/1.4 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.case-study p { margin: 0; font-size: 14px; line-height: 2; }
.project-facts { margin: 0; }
.project-facts div { display: grid; grid-template-columns: 82px 1fr; gap: 15px; padding: 12px 0; border-bottom: 1px solid rgba(23,23,20,.18); }
.project-facts div:first-child { padding-top: 0; }
.project-facts dt { font: 500 10px "DM Mono", monospace; text-transform: uppercase; color: rgba(23,23,20,.62); }
.project-facts dd { margin: 0; font-size: 12px; line-height: 1.7; }

.services-section {
  padding: 110px var(--gutter);
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  align-items: start;
  gap: clamp(50px, 9vw, 150px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.services-section, .discipline-showcase {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}
.services-heading h2 { margin: 0; font-size: clamp(46px, 5.5vw, 78px); line-height: 1.18; }
.services-list { margin: 0; padding: 0; list-style: none; }
.services-list li { display: grid; grid-template-columns: 50px 1fr; gap: 22px; padding: 27px 0; border-top: 1px solid var(--line); }
.services-list li:last-child { border-bottom: 1px solid var(--line); }
.services-list > li > span { color: var(--red); font: 500 11px "DM Mono", monospace; }
.services-list h3 { margin: 0 0 7px; font-size: clamp(22px, 2.4vw, 35px); }
.services-list p { max-width: 570px; margin: 0; line-height: 1.8; color: rgba(23,23,20,.7); }
.guide-section .services-list li { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.guide-section .services-list h3 { transition: color .25s ease; }
.guide-section .services-list li:hover { transform: translateX(10px); }
.guide-section .services-list li:hover h3 { color: var(--red); }

.coming-soon-section {
  padding: 110px var(--gutter) 125px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgba(238,234,226,.18);
}
.coming-soon-heading {
  position: relative;
  min-height: clamp(280px, 31vw, 465px);
}
.coming-soon-heading .eyebrow { margin-bottom: 20px; }
.coming-soon-heading h2 {
  grid-column: 1 / 3;
  max-width: 1100px;
  margin: 0;
  font-size: clamp(48px, 7.5vw, 112px);
  line-height: .95;
  font-weight: 900;
}
.coming-soon-heading h1 {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(48px, 7.5vw, 112px);
  line-height: .95;
  font-weight: 900;
}
.coming-soon-badge {
  position: absolute;
  top: 50%;
  right: clamp(12px, 9vw, 150px);
  z-index: 2;
  display: grid;
  width: clamp(112px, 10vw, 154px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--yellow), 8px 10px 0 rgba(0,0,0,.28);
  font: 500 clamp(12px, 1vw, 15px)/1.15 "DM Mono", monospace;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(-50%) rotate(9deg);
}
.coming-soon-badge::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(23,24,23,.55);
  border-radius: inherit;
}
.coming-soon-list { position: relative; margin-top: clamp(55px, 7vw, 100px); padding-top: 5px; }
.coming-soon-list::before,
.coming-soon-list > div::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 12px;
  border-bottom: 1.5px solid rgba(238,234,226,.38);
  border-radius: 0 0 51% 49%;
}
.coming-soon-list::before { top: -7px; transform: rotate(-.16deg) scaleX(.998); }
.coming-soon-list > div {
  position: relative;
  padding: 30px 0 33px;
}
.coming-soon-list > div::after { bottom: -2px; transform: rotate(.13deg) scaleX(.996); }
.coming-soon-list span { color: var(--link-blue); font: 500 10px/1.4 "DM Mono", monospace; }
.coming-soon-list h2, .coming-soon-list h3 { margin: 0; font-size: clamp(24px, 3vw, 42px); line-height: 1; }
.coming-soon-list p { max-width: 570px; margin: 0; color: rgba(238,234,226,.68); font-size: 14px; line-height: 1.8; }

.motion-page-body { min-height: 100svh; background: var(--ink); color: var(--paper); }
.motion-header {
  position: fixed;
  background: rgba(23,24,23,.92);
  border-color: rgba(238,234,226,.2);
  backdrop-filter: blur(10px);
}
.motion-page { min-height: 100svh; }
.motion-page .coming-soon-section { min-height: 100svh; padding-top: 150px; }

.discipline-showcase {
  min-height: 640px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.discipline-panel {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: clamp(34px, 4.5vw, 76px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: inherit;
  text-decoration: none;
}
.discipline-panel > *:not(.discipline-shape) { position: relative; z-index: 2; }
.discipline-web { background: #d8d5cc; border-right: 1px solid rgba(23,24,23,.28); }
.discipline-web::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .3;
  background-image:
    linear-gradient(rgba(23,24,23,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,24,23,.15) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent 4%, black 40%, black 100%);
}
.discipline-motion { background: var(--ink); color: var(--paper); }
.discipline-motion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 82% 28%, rgba(238,234,226,.08) 0 1px, transparent 2px 100%);
  background-size: 17px 17px;
  mask-image: linear-gradient(135deg, transparent 12%, black 80%);
}
.discipline-topline {
  display: flex;
  align-items: center;
  font: 500 10px/1.3 "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.discipline-topline b { font-weight: 500; }
.discipline-web .discipline-topline b, .discipline-web .discipline-copy small { color: var(--red); }
.discipline-motion .discipline-topline b, .discipline-motion .discipline-copy small { color: #f2c94c; }
.discipline-copy { display: block; margin: auto 0 clamp(40px, 6vw, 86px); }
.discipline-copy small {
  display: block;
  margin-bottom: 18px;
  font: 500 11px/1.3 "DM Mono", monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.discipline-copy strong {
  display: block;
  font-size: clamp(76px, 10vw, 168px);
  line-height: .78;
  letter-spacing: -.065em;
  font-weight: 800;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.discipline-copy > span {
  display: block;
  max-width: 390px;
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.7;
  opacity: .72;
}
.discipline-action {
  align-self: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  font: 500 12px/1 "DM Mono", monospace;
  text-transform: uppercase;
}
.discipline-action i { margin-left: 12px; font-size: 17px; font-style: normal; }
.discipline-shape { position: absolute; z-index: 1; pointer-events: none; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.discipline-web-shape {
  top: 18%;
  right: -7%;
  width: clamp(150px, 22vw, 345px);
  aspect-ratio: 4 / 3;
  border: 8px solid var(--paper);
  background: var(--blue);
  box-shadow: 14px 18px 0 rgba(23,24,23,.18);
  transform: rotate(8deg);
}
.discipline-motion-shape {
  top: 16%;
  right: 9%;
  width: clamp(120px, 15vw, 235px);
  aspect-ratio: 1;
  border: 2px solid #f2c94c;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 15px var(--ink), 0 0 0 17px rgba(242,201,76,.65);
}
.discipline-motion-shape::after {
  content: "";
  position: absolute;
  inset: 27%;
  border: 1px dashed var(--paper);
  border-radius: inherit;
}
.discipline-panel:hover .discipline-copy strong, .discipline-panel:focus-visible .discipline-copy strong { transform: translateX(10px); }
.discipline-panel:hover .discipline-web-shape, .discipline-panel:focus-visible .discipline-web-shape { transform: rotate(2deg) scale(1.06); }
.discipline-panel:hover .discipline-motion-shape, .discipline-panel:focus-visible .discipline-motion-shape { transform: rotate(14deg) scale(1.06); }
footer { min-height: 100px; padding: 0 clamp(20px, 5vw, 84px); display: flex; align-items: center; justify-content: space-between; background: var(--ink); color: white; font-size: 12px; }

.click-circle { position: fixed; z-index: 10500; pointer-events: none; width: 20px; height: 20px; border: 1px solid var(--red); border-radius: 50%; transform: translate(-50%, -50%) scale(.25); animation: circleDraw .55s cubic-bezier(.1,.8,.2,1) forwards; }
@keyframes circleDraw { 60% { opacity: 1; } 100% { width: 84px; height: 64px; opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(-8deg); } }
@keyframes stopShift { 0%, 46% { translate: 0 0; } 47%, 73% { translate: 1px -1px; } 74%, 100% { translate: -1px 1px; } }
@keyframes differenceReveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(16px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto;
    height: 72px;
    padding-inline: 18px;
  }
  .site-header nav {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .site-header nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 3px;
    font-size: 10px;
  }
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 112px;
  }
  .hero-copy { max-width: 650px; min-width: 0; }
  .watching-figures { top: 74px; right: -55px; width: min(64vw, 530px); opacity: .92; }
  .collage { min-height: 600px; }
  .work-section { min-height: 1200px; }
  .section-heading { margin: 0 0 60px auto; }
  .project-sheet { width: min(90vw, 700px); margin: 0 auto; }
  .case-study { grid-template-columns: 1fr 1fr; }
  .project-facts { grid-row: span 2; }
  .services-section { grid-template-columns: 1fr; gap: 45px; }
}

@media (max-width: 600px) {
  body, a, button, [tabindex] { cursor: auto; }
  .custom-cursor { display: none; }
  .brand-logo { width: 50px; height: 50px; }
  .site-header { padding-inline: 14px; }
  .site-header nav { gap: 8px; }
  .site-header nav a { font-size: 9px; letter-spacing: .04em; }
  .hero { padding-inline: 18px; }
  .watching-figures { top: 78px; right: -28px; width: 64vw; opacity: .42; }
  .watch-eye { border-width: 1px; }
  h1 { font-size: clamp(45px, 15vw, 66px); line-height: 1.06; }
  .hero h1 { max-width: 100%; }
  .scribble { white-space: normal; }
  .availability span { flex: 0 0 auto; margin-top: 4px; }
  .hero-intro { margin: 22px 0; }
  .collage { min-height: 500px; margin-inline: -8px; }
  .piece-blue { top: 6%; left: 2%; width: 48%; height: 140px; }
  .piece-blue .piece-surface { padding: 16px; }
  .piece-blue strong { margin-top: 8px; }
  .piece-blue small { margin-top: 7px; font-size: 9px; }
  .piece-note { top: 52%; left: 8%; width: 54%; height: 145px; }
  .piece-note p { font-size: 16px; }
  .tape-two { top: 49%; left: 18%; }
  .work-section { min-height: auto; padding-inline: 14px; }
  .project-sheet { width: 100%; }
  .scrap-yellow { top: 35%; right: -35px; width: 125px; height: 90px; padding: 14px; font-size: 18px; }
  .scrap-type { width: 150px; font-size: 17px; }
  .case-study { grid-template-columns: 1fr; margin-top: 130px; padding-inline: 8px; }
  .project-facts { grid-row: auto; }
  .services-section { padding-block: 80px; gap: 45px; }
  .difference-note { width: min(360px, 100%); margin-top: 30px; font-size: 11px; }
  .coming-soon-section { padding: 80px 18px; }
  .coming-soon-heading { min-height: 300px; padding-top: 22px; }
  .coming-soon-heading h2 { grid-column: 1; }
  .coming-soon-heading h1 { grid-column: 1; }
  .coming-soon-badge {
    top: auto;
    right: 4px;
    bottom: 0;
    width: 88px;
    box-shadow: 0 0 0 2px var(--yellow), 5px 7px 0 rgba(0,0,0,.3);
    font-size: 10px;
    transform: rotate(8deg);
  }
  .coming-soon-badge::after { inset: 7px; }
  .coming-soon-list { margin-top: 55px; }
  .discipline-showcase { grid-template-columns: 1fr; }
  .discipline-panel { min-height: 520px; padding: 32px 20px; }
  .discipline-web { border-right: 0; border-bottom: 1px solid rgba(23,24,23,.28); }
  .discipline-copy { margin-bottom: 50px; }
  .discipline-copy strong { font-size: clamp(76px, 27vw, 112px); }
  .discipline-copy > span { max-width: 270px; margin-top: 22px; font-size: 13px; }
  .discipline-web-shape { top: 23%; right: -15%; width: 230px; }
  .discipline-motion-shape { top: 22%; right: 8%; width: 130px; box-shadow: 0 0 0 10px var(--ink), 0 0 0 12px rgba(242,201,76,.65); }
  footer { min-height: 82px; }
  .work-teaser { min-height: 400px; padding-block: 80px; }
  .work-teaser h2 { font-size: clamp(52px, 18vw, 90px); }
  .work-page { padding: 115px 14px 35px; }
  .gallery-page { padding: 104px 14px 48px; }
  .gallery-intro { grid-template-columns: 1fr; gap: 24px; }
  .gallery-intro h1 { font-size: clamp(58px, 20vw, 92px); }
  .gallery-count { justify-self: start; }
  .project-gallery { margin-top: 34px; }
  .gallery-project-number, .gallery-project-action { top: 10px; padding: 6px 7px; font-size: 8px; }
  .gallery-project-number { left: 10px; }
  .gallery-project-action { right: 10px; }
  .gallery-project-info { grid-template-columns: 1fr; gap: 10px; }
  .gallery-project-info h2 { grid-column: 1; }
  .flowmorph-heading { grid-template-columns: 1fr; }
  .flowmorph-heading .eyebrow { grid-column: 1; }
  .flowmorph-heading h1 { font-size: clamp(58px, 20vw, 90px); }
  .live-link { margin: 0; }
  .flowmorph-sheet { width: 100%; margin: 42px 0 0; }
  .flowmorph-footer { align-items: flex-start; flex-direction: column; }
  .flowmorph-project-meta { width: 100%; justify-content: space-between; }
}

@media (max-width: 360px) {
  .site-header nav { gap: 3px; }
  .site-header nav a { font-size: 8px; }
  h1 { font-size: 43px; }
  .piece-blue strong { font-size: 25px; }
}

@media (hover: none), (pointer: coarse) {
  .collage-piece, .project-sheet, .side-scrap { cursor: grab; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .custom-cursor { display: none; }
  .watching-figures { transition: none; }
  body, a, button, [tabindex] { cursor: auto; }
}