:root {
  --ink: #21151d;
  --ink-soft: #39232d;
  --night: #160d13;
  --paper: #faf2ec;
  --paper-deep: #e4d1c8;
  --muted: #b59ca6;
  --red: #c76d84;
  --red-deep: #7d3144;
  --blue: #84957f;
  --line-dark: rgba(250, 242, 236, .18);
  --line-light: rgba(33, 21, 29, .16);
  --display: "Times New Roman", "Iowan Old Style", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --content: min(1320px, calc(100vw - 80px));
}

* { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-160%);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.skip-link:focus { transform: translateY(0); }

.site-grain,
.site-glow {
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

.site-grain {
  inset: 0;
  opacity: .22;
  mix-blend-mode: soft-light;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(94deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 5px);
  background-size: 5px 6px, 7px 9px;
}

.site-glow { border-radius: 50%; filter: blur(70px); opacity: .2; }
.site-glow--red { top: 30vh; right: 0; width: 55vw; height: 45vw; background: var(--red); }
.site-glow--blue { top: 65vh; left: -25vw; width: 44vw; height: 50vw; background: var(--blue); }

.site-header,
.section-shell,
.ticker,
.site-footer { position: relative; z-index: 1; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 86px;
  padding: 18px 40px;
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(237, 243, 250, .1);
  background: rgba(22, 13, 19, .82);
  backdrop-filter: blur(16px);
}

.brand { display: inline-flex; align-items: flex-start; gap: 10px; width: fit-content; }

.brand-mark {
  color: var(--paper);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .85;
}

.brand-submark {
  margin-top: -1px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.site-nav { display: flex; gap: 28px; align-items: center; }

.site-nav a,
.header-link,
.text-link,
.footer-top {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.site-nav a { color: #ddc9d0; transition: color .2s ease; }
.site-nav a:hover { color: var(--paper); }

.header-link {
  display: inline-flex;
  justify-self: end;
  gap: 10px;
  align-items: center;
  color: var(--paper);
}

.menu-toggle { display: none; }

.section-shell { width: var(--content); margin-inline: auto; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr);
  grid-template-rows: minmax(620px, 100svh) auto;
  column-gap: clamp(35px, 7vw, 140px);
  align-items: center;
  padding-top: 74px;
}

.hero-copy { max-width: 660px; padding-block: 100px 66px; }

.section-index {
  display: flex;
  gap: 13px;
  align-items: center;
  margin: 0 0 22px;
  color: #c4abb5;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-index span {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(206, 216, 230, .42);
  border-radius: 50%;
  color: var(--paper);
  font-size: 9px;
}

.section-index--dark { color: #765a64; }
.section-index--dark span { border-color: rgba(7, 16, 29, .3); color: var(--ink); }

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2,
h3 { font-weight: 400; }

h1 {
  max-width: 750px;
  margin-bottom: 29px;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(52px, 7.2vw, 116px);
  font-kerning: normal;
  letter-spacing: -.07em;
  line-height: .88;
}

h1 em,
h2 em { color: var(--red); font-style: italic; }

.hero-lede {
  max-width: 530px;
  margin-bottom: 33px;
  color: #cbb4bd;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.58;
}

.hero-actions,
.closing-actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

.button {
  display: inline-flex;
  gap: 0;
  align-items: center;
  justify-content: center;
  min-width: 196px;
  padding: 15px 17px 15px 20px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.button:hover { transform: translateY(-3px); }
.button--primary { background: var(--red); color: #fff8f3; }
.button--primary:hover { background: #da8498; }
.button--light { background: var(--paper); color: var(--ink); }
.button--light:hover { background: #fff; }

.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--paper);
  transition: color .2s ease;
}

.text-link:hover { color: var(--red); }

.hero-stamp {
  margin: 74px 0 0;
  color: #ad8e99;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero-visual {
  position: relative;
  align-self: end;
  justify-self: end;
  width: min(100%, 570px);
  padding-top: 112px;
}

.hero-visual::before {
  position: absolute;
  top: 8%;
  right: -17%;
  z-index: -1;
  width: 75%;
  height: 74%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 61, 53, .6), rgba(236, 61, 53, 0) 67%);
  content: "";
  filter: blur(17px);
}

.hero-visual__frame {
  position: relative;
  overflow: hidden;
  max-height: min(74svh, 780px);
  border: 1px solid rgba(224, 235, 246, .2);
  background: #170e14;
}

.hero-visual__frame::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(70, 36, 47, .26), rgba(25, 17, 21, .03) 52%, rgba(36, 17, 25, .54));
  content: "";
}

.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 63% center; filter: saturate(.73) sepia(.1) hue-rotate(326deg); }

.hero-visual__code {
  position: absolute;
  top: 84px;
  right: -19px;
  padding: 5px 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.hero-visual__edge { position: absolute; left: -35px; width: 76px; height: 1px; background: rgba(236, 61, 53, .8); }
.hero-visual__edge--top { top: 130px; }
.hero-visual__edge--bottom { bottom: 70px; }

.hero-visual__caption {
  position: absolute;
  right: -63px;
  bottom: 19px;
  width: 150px;
  margin: 0;
  color: #cdb6be;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hero-notes {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 28px;
  border-top: 1px solid var(--line-dark);
}

.hero-notes p {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 72px;
  margin: 0;
  padding: 13px 16px 0 0;
  border-right: 1px solid var(--line-dark);
  color: #d5c0c6;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -.035em;
}

.hero-notes p:not(:first-child) { padding-left: 20px; }
.hero-notes p:last-child { border-right: 0; }
.hero-notes span { color: #b08e9a; font-family: var(--sans); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.ticker {
  overflow: hidden;
  border-block: 1px solid rgba(236, 61, 53, .8);
  background: var(--red);
  color: #fff8f3;
}

.ticker-track {
  display: flex;
  gap: 25px;
  align-items: center;
  width: max-content;
  padding: 12px 0 13px;
  white-space: nowrap;
  animation: ticker 25s linear infinite;
}

.ticker span { font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.ticker i { font-style: normal; font-size: 11px; }

.approach {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(52px, 9vw, 156px);
  padding-block: clamp(110px, 14vw, 220px);
  color: var(--ink);
}

.approach::before,
.method::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 100vw;
  background: var(--paper);
  content: "";
}

.approach::before { left: 50%; transform: translateX(-50%); }

.approach-heading { max-width: 430px; }

h2 {
  margin-bottom: 26px;
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 80px);
  letter-spacing: -.075em;
  line-height: .89;
}

.approach-heading > p:last-child,
.works-intro > p:last-child,
.method-copy > p:last-of-type,
.closing-content > p:not(.section-index) {
  color: #6d5660;
  font-size: 16px;
  line-height: 1.63;
}

.frame-study { border-top: 1px solid var(--line-light); }

.frame-study__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line-light);
}

.frame-study__tabs button {
  position: relative;
  min-height: 76px;
  padding: 14px 12px;
  border: 0;
  border-right: 1px solid var(--line-light);
  background: transparent;
  color: #725863;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .075em;
  text-align: left;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}

.frame-study__tabs button:last-child { border-right: 0; }
.frame-study__tabs button span { display: block; margin-bottom: 12px; color: #9e7f8a; font-size: 9px; }
.frame-study__tabs button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: var(--red); content: ""; transform: scaleX(0); transition: transform .2s ease; }
.frame-study__tabs button[aria-selected="true"] { background: #eeded8; color: var(--ink); }
.frame-study__tabs button[aria-selected="true"]::after { transform: scaleX(1); }

.frame-study__stage {
  display: grid;
  grid-template-columns: minmax(270px, .9fr) minmax(260px, 1.1fr);
  min-height: 390px;
  background: #e4d4ce;
}

.stage-object { position: relative; overflow: hidden; min-height: 100%; background: #2f1d27; isolation: isolate; }
.stage-object::before { position: absolute; inset: 0; z-index: -2; background: linear-gradient(130deg, #21151d 4%, #694251 49%, #24161c 100%); content: ""; }
.stage-object::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(33, 21, 29, .36), transparent 45%, rgba(199, 109, 132, .34)); content: ""; }

.stage-orb { position: absolute; display: block; border-radius: 50%; filter: blur(3px); transition: all .55s cubic-bezier(.2, .75, .25, 1); }
.stage-orb--one { top: 13%; right: -10%; width: 58%; aspect-ratio: 1; background: radial-gradient(circle at 40% 45%, #e5a2ad 0 5%, #9c4b61 26%, rgba(229, 162, 173, .1) 54%, transparent 70%); }
.stage-orb--two { bottom: -8%; left: -10%; width: 64%; aspect-ratio: 1; background: radial-gradient(circle, #b7c5ab 0 4%, #536a58 39%, transparent 71%); }
.stage-line { position: absolute; display: block; background: rgba(239, 243, 239, .65); box-shadow: 0 0 16px rgba(255, 255, 255, .6); transition: all .55s cubic-bezier(.2, .75, .25, 1); }
.stage-line--one { top: 12%; left: 28%; width: 1px; height: 75%; transform: rotate(18deg); }
.stage-line--two { top: 43%; left: -12%; width: 106%; height: 1px; transform: rotate(-17deg); }
.stage-grate { position: absolute; inset: 8% 11%; border: 1px solid rgba(237, 239, 242, .23); background: repeating-linear-gradient(90deg, transparent 0 27px, rgba(237, 239, 242, .14) 28px 29px); transform: skewY(-9deg); transition: opacity .55s ease, transform .55s ease; }
.stage-number { position: absolute; right: 14px; bottom: 10px; color: rgba(240, 242, 241, .75); font-family: var(--display); font-size: clamp(75px, 9vw, 140px); letter-spacing: -.1em; line-height: .75; transition: color .4s ease; }

.frame-panel { align-self: end; padding: clamp(35px, 4.5vw, 73px); }
.frame-panel__eyebrow { margin-bottom: 22px; color: var(--red-deep); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.frame-panel h3 { margin-bottom: 20px; font-family: var(--display); font-size: clamp(38px, 4.1vw, 64px); letter-spacing: -.07em; line-height: .88; }
.frame-panel > p:last-child { max-width: 380px; margin-bottom: 0; color: #684e59; font-size: 15px; line-height: 1.58; }

[data-active-frame="motion"] .stage-orb--one { top: -18%; right: 15%; width: 80%; background: radial-gradient(circle at 35% 58%, #e9a4b1 0 8%, #874055 27%, rgba(233, 164, 177, .1) 58%, transparent 72%); }
[data-active-frame="motion"] .stage-orb--two { bottom: 8%; left: 48%; width: 42%; }
[data-active-frame="motion"] .stage-line--one { top: -8%; left: 55%; height: 118%; transform: rotate(-41deg); }
[data-active-frame="motion"] .stage-line--two { top: 70%; left: -17%; transform: rotate(-4deg); }
[data-active-frame="motion"] .stage-grate { transform: skewY(11deg) translateX(17%); }
[data-active-frame="motion"] .stage-number { color: #edb7c0; }

[data-active-frame="grain"] .stage-orb--one { top: 19%; right: 9%; width: 44%; background: radial-gradient(circle, #fff0df 0 3%, #bb7774 25%, rgba(199, 109, 132, .05) 61%, transparent 71%); }
[data-active-frame="grain"] .stage-orb--two { bottom: -10%; left: -11%; background: radial-gradient(circle, #c0c8a9 0 2%, #526653 34%, transparent 72%); }
[data-active-frame="grain"] .stage-line { opacity: .25; }
[data-active-frame="grain"] .stage-grate { opacity: .73; transform: skewY(0); background-size: 11px 11px; }
[data-active-frame="grain"] .stage-number { color: #f3dfc7; }

[data-active-frame="post"] .stage-orb--one { top: 0; right: -21%; width: 75%; background: radial-gradient(circle at 34% 55%, #f0b2bd 0 3%, #ae5067 28%, rgba(174, 80, 103, .1) 61%, transparent 74%); }
[data-active-frame="post"] .stage-orb--two { bottom: -14%; left: 21%; width: 74%; background: radial-gradient(circle, #aab99a 0 3%, #495b4d 36%, transparent 72%); }
[data-active-frame="post"] .stage-line--one { left: 7%; transform: rotate(0); }
[data-active-frame="post"] .stage-line--two { top: 28%; left: -25%; transform: rotate(28deg); }
[data-active-frame="post"] .stage-grate { opacity: .5; transform: skewY(-15deg) scale(1.24); }
[data-active-frame="post"] .stage-number { color: #e4d3c8; }

.works { position: relative; z-index: 1; padding-block: clamp(115px, 14vw, 220px); background: #1b0f16; }

.works-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(45px, 9vw, 155px); margin-bottom: 66px; }
.works-intro h2 { margin-bottom: 0; color: var(--paper); }
.works-intro > p:last-child { align-self: end; max-width: 486px; color: #c0aab2; }

.works-grid { display: grid; grid-template-columns: 1.03fr .82fr .82fr; min-height: 420px; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }

.work-card {
  position: relative;
  display: flex;
  min-height: 420px;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: #2b1923;
  transition: background-color .35s ease, transform .35s ease;
}

.work-card:hover { z-index: 2; background: #49313a; transform: translateY(-8px); }
.work-card--showreel { background: linear-gradient(145deg, #2b111d 0%, #7d3549 46%, #48564a 100%); }
.work-card--showreel:hover { background: linear-gradient(145deg, #47202d 0%, #a74e67 54%, #69735e 100%); }
.work-card--inside { background: #34232b; }
.work-card--studio { background: #253126; }

.work-card__number,
.work-card__type { position: relative; z-index: 2; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.work-card__number { color: #f2d9dc; }
.work-card__type { margin-top: auto; color: #c9b2b9; }
.work-card strong { position: relative; z-index: 2; margin-top: 11px; color: var(--paper); font-family: var(--display); font-size: clamp(34px, 3.25vw, 57px); font-weight: 400; letter-spacing: -.075em; line-height: .86; }
.work-card__description { position: relative; z-index: 2; max-width: 205px; margin-top: 20px; color: #dac5ca; font-size: 13px; line-height: 1.48; }
.work-card__orb { position: absolute; right: -18%; bottom: -20%; width: 76%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 236, 225, .36); box-shadow: inset 0 0 50px rgba(239, 74, 51, .42); }
.work-card__orb::before,
.work-card__orb::after { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 236, 225, .27); content: ""; }
.work-card__orb::before { inset: 15%; }
.work-card__orb::after { inset: 30%; }
.work-card__grid { position: absolute; inset: 17px; border: 1px solid rgba(190, 212, 239, .13); background: repeating-linear-gradient(90deg, transparent 0 33px, rgba(190, 212, 239, .12) 34px 35px), repeating-linear-gradient(0deg, transparent 0 33px, rgba(190, 212, 239, .12) 34px 35px); transform: rotate(-9deg) scale(1.3); transition: transform .45s ease; }
.work-card:hover .work-card__grid { transform: rotate(0) scale(1.16); }

.method {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(52px, 9vw, 170px);
  align-items: center;
  min-height: 690px;
  padding-block: clamp(105px, 13vw, 195px);
  color: var(--ink);
}

.method::before { left: 50%; transform: translateX(-50%); }

.method-visual {
  position: relative;
  display: grid;
  min-height: 430px;
  overflow: hidden;
  place-items: center;
  background: #34232e;
}

.method-visual::before { position: absolute; inset: 17px; border: 1px solid rgba(225, 235, 246, .27); content: ""; }
.method-visual::after { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: rgba(225, 235, 246, .22); content: ""; }
.method-visual__label { position: absolute; top: 28px; left: 31px; color: #d5bec5; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.method-visual__circle { width: min(57%, 270px); aspect-ratio: 1; border: 1px solid rgba(239, 242, 244, .65); border-radius: 50%; box-shadow: 0 0 45px rgba(57, 107, 228, .38), inset 0 0 70px rgba(236, 61, 53, .24); }
.method-visual__beam { position: absolute; width: 140%; height: 30px; background: linear-gradient(90deg, transparent, rgba(236, 61, 53, .8) 36%, rgba(245, 239, 215, .95) 50%, rgba(54, 111, 230, .8) 64%, transparent); transform: rotate(-33deg); filter: blur(6px); }
.method-visual__caption { position: absolute; right: 28px; bottom: 24px; margin: 0; color: #f2e1dc; font-family: var(--display); font-size: 31px; letter-spacing: -.08em; line-height: .75; text-align: right; }

.method-copy { max-width: 570px; }
.method-copy h2 { margin-bottom: 27px; }
.method-list { margin: 39px 0 0; border-top: 1px solid var(--line-light); }
.method-list div { display: grid; grid-template-columns: 130px 1fr; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--line-light); }
.method-list dt { color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.method-list dd { margin: 0; color: #715763; font-family: var(--display); font-size: 21px; letter-spacing: -.045em; }

.closing {
  min-height: min(780px, 85svh);
  overflow: hidden;
  padding-block: 132px;
}

.closing::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  background: linear-gradient(118deg, #5a2539 0%, #c76d84 48%, #61715b 100%);
  content: "";
  transform: translateX(-50%);
}

.closing::after { position: absolute; z-index: -1; top: -50%; right: -5%; width: 58%; aspect-ratio: 1; border: 1px solid rgba(255, 245, 236, .36); border-radius: 50%; box-shadow: inset 0 0 80px rgba(17, 28, 65, .55); content: ""; }
.closing-word { position: absolute; top: 50%; left: 50%; margin: 0; color: rgba(248, 242, 235, .13); font-family: var(--display); font-size: clamp(120px, 26vw, 400px); letter-spacing: -.13em; line-height: .65; transform: translate(-50%, -50%); white-space: nowrap; }
.closing-content { position: relative; max-width: 620px; }
.closing-content .section-index { color: rgba(255, 247, 240, .7); }
.closing-content .section-index span { border-color: rgba(255, 247, 240, .5); color: #fff; }
.closing-content h2 { margin-bottom: 26px; color: #fffaf5; }
.closing-content h2 em { color: var(--ink); }
.closing-content > p:not(.section-index) { max-width: 480px; margin-bottom: 32px; color: #fff1ec; }
.text-link--light { color: #fffaf5; }
.text-link--light span { color: var(--ink); }

.site-footer {
  display: grid;
  grid-template-columns: minmax(140px, .46fr) minmax(300px, 1fr) auto;
  gap: 35px;
  align-items: start;
  width: var(--content);
  margin-inline: auto;
  padding: 27px 0 31px;
}

.brand--footer { margin-top: 4px; }
.site-footer > p { max-width: 620px; margin: 0; color: #b99ea8; font-size: 11px; line-height: 1.55; }
.footer-top { color: #ecdde0; white-space: nowrap; }

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .75, .25, 1); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-width: 1000px) {
  :root { --content: min(100% - 48px, 1320px); }
  .site-header { min-height: 74px; padding: 16px 24px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(310px, .74fr); column-gap: 38px; }
  .hero-visual__caption { right: -38px; width: 120px; }
  .approach { grid-template-columns: .67fr 1.33fr; gap: 52px; }
  .works-intro { gap: 60px; }
  .works-grid { grid-template-columns: 1fr 1fr; }
  .work-card--showreel { grid-column: span 2; min-height: 340px; }
  .method { gap: 62px; }
}

@media (max-width: 760px) {
  :root { --content: min(100% - 34px, 1320px); }
  .site-header { grid-template-columns: 1fr auto; padding: 15px 17px; }
  .site-header.is-scrolled { background: rgba(22, 13, 19, .94); }
  .menu-toggle { display: flex; z-index: 2; flex-direction: column; gap: 5px; align-items: flex-end; padding: 4px 0 3px 12px; border: 0; background: transparent; cursor: pointer; }
  .menu-toggle__label { margin-bottom: 2px; color: #f0dee3; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .menu-toggle__line { display: block; width: 23px; height: 1px; background: var(--paper); transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__line:first-of-type { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__line:last-of-type { transform: translateY(-3px) rotate(-45deg); }
  .site-nav { position: absolute; top: 0; right: 0; left: 0; display: grid; gap: 25px; padding: 95px 18px 30px; border-bottom: 1px solid var(--line-dark); background: #21131b; opacity: 0; pointer-events: none; transform: translateY(-20px); transition: opacity .2s ease, transform .2s ease; }
  .site-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-nav a { font-family: var(--display); font-size: 31px; font-weight: 400; letter-spacing: -.06em; text-transform: none; }
  .header-link { display: none; }
  .hero { display: flex; min-height: auto; flex-direction: column; align-items: stretch; padding-top: 74px; }
  .hero-copy { padding-block: 70px 42px; }
  h1 { max-width: 650px; font-size: clamp(52px, 14vw, 94px); }
  .hero-stamp { margin-top: 45px; }
  .hero-visual { align-self: auto; width: min(100%, 510px); margin-left: auto; padding-top: 8px; }
  .hero-visual__frame { max-height: min(110vw, 665px); }
  .hero-visual__code { top: -13px; right: 14px; }
  .hero-visual__caption { right: 16px; bottom: 15px; width: 155px; }
  .hero-visual__edge { left: -17px; }
  .hero-notes { grid-template-columns: 1fr; margin-top: 50px; margin-bottom: 0; }
  .hero-notes p { min-height: 63px; padding: 11px 0; border-right: 0; border-bottom: 1px solid var(--line-dark); font-size: 19px; }
  .hero-notes p:not(:first-child) { padding-left: 0; }
  .ticker-track { animation-duration: 17s; }
  .approach { display: block; padding-block: 100px; }
  .approach-heading { max-width: 530px; margin-bottom: 51px; }
  h2 { font-size: clamp(48px, 13vw, 70px); }
  .frame-study__tabs { grid-template-columns: 1fr 1fr; }
  .frame-study__tabs button:nth-child(2) { border-right: 0; }
  .frame-study__tabs button:nth-child(-n+2) { border-bottom: 1px solid var(--line-light); }
  .frame-study__stage { grid-template-columns: 1fr; }
  .stage-object { min-height: 315px; }
  .frame-panel { min-height: 295px; padding: 37px 27px 46px; }
  .works { padding-block: 104px; }
  .works-intro { display: block; margin-bottom: 43px; }
  .works-intro h2 { margin-bottom: 25px; }
  .works-grid { grid-template-columns: 1fr; }
  .work-card,
  .work-card--showreel { grid-column: auto; min-height: 330px; }
  .method { display: flex; min-height: auto; flex-direction: column-reverse; align-items: stretch; padding-block: 104px; }
  .method-copy { max-width: 570px; }
  .method-visual { min-height: 345px; }
  .closing { min-height: 650px; padding-block: 112px; }
  .closing::after { top: auto; right: -30%; bottom: -15%; width: 90%; }
  .closing-content { max-width: 480px; }
  .site-footer { grid-template-columns: 1fr auto; gap: 27px 18px; padding-block: 27px; }
  .site-footer > p { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 480px) {
  :root { --content: min(100% - 28px, 1320px); }
  h1 { font-size: clamp(48px, 15.5vw, 68px); }
  .hero-lede { font-size: 15px; }
  .hero-actions,
  .closing-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .button { min-width: 210px; }
  .hero-visual__frame { max-height: 500px; }
  .hero-visual__caption { font-size: 8px; }
  .section-index { margin-bottom: 17px; }
  h2 { font-size: clamp(44px, 14vw, 59px); }
  .frame-study__tabs button { min-height: 68px; padding: 12px 9px; }
  .frame-panel h3 { font-size: 46px; }
  .works-intro > p:last-child,
  .approach-heading > p:last-child,
  .method-copy > p:last-of-type,
  .closing-content > p:not(.section-index) { font-size: 15px; }
  .method-list div { grid-template-columns: 91px 1fr; gap: 12px; }
  .method-list dd { font-size: 19px; }
  .closing { min-height: 605px; }
  .closing-word { font-size: 43vw; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-top { grid-row: 1; grid-column: 1; justify-self: end; }
  .site-footer > p { grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}