/* Retype — homepage. Tokens live in css/tokens/*.css (source of truth). */

/* Window inset for the menu — shared by the white sheet and the hover imagery */
:root { --win-t: 14vh; --win-r: 34.5vw; --win-b: 6vh; --win-l: 34.5vw; }

html { scroll-behavior: smooth; scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
html.locked { overflow: hidden; }
body {
  margin: 0; background: var(--surface-page); color: var(--text-primary);
  font-family: var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--link-hover); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
em { font-style: italic; }
.plate-blue { color: var(--rt-blue-plate); }
.muted { color: var(--text-muted); }

.ico { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Primitives (ported from the Retype design system) ---------- */
.eyebrow { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-meta); }
.eyebrow.sm { font: var(--type-label-sm); }
.eyebrow.tone-accent { color: var(--accent-on-dark); }
.eyebrow.tone-light { color: var(--text-meta-light); }
.eyebrow-plain { display: block; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.body-lg { margin: 0; font: var(--type-body-lg); text-wrap: pretty; }
.lede { font: var(--type-lede); }

.glass-pill {
  position: relative; display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box;
  height: var(--h-pill); padding: 0 20px;
  border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  background: var(--glass-fill); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  color: var(--rt-white); font: var(--type-pill); letter-spacing: var(--tracking-pill);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-hover) var(--ease-out);
}
.glass-pill:hover { background: rgba(255,255,255,.2); color: var(--rt-white); }
.glass-pill.light { border: 0; background: var(--glass-fill-ink); color: var(--rt-ink); }
.glass-pill.light:hover { background: rgba(17,17,19,.16); color: var(--rt-ink); }
.glass-pill.sm { height: var(--h-pill-sm); padding: 0 15px; border: 0; font: var(--type-pill-sm); letter-spacing: 0; }

.contact-pill {
  display: inline-flex; align-items: center; gap: .7em; padding: .55rem 1.05rem;
  border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  background: var(--glass-fill); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  color: var(--rt-white); font: var(--type-button); letter-spacing: var(--tracking-button); white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease-out);
}
.contact-pill:hover { background: rgba(255,255,255,.2); color: var(--rt-white); }
.contact-pill .reveal {
  display: block; overflow: hidden; max-width: 0; opacity: 0; margin-left: -.7em;
  transition: max-width .42s var(--ease-out), opacity .3s var(--ease-out), margin-left .42s var(--ease-out);
}
.contact-pill:hover .reveal, .contact-pill:focus-visible .reveal { max-width: 7.5em; opacity: 1; margin-left: 0; }

.logo { display: block; }
.logo img { display: block; height: 30px; width: auto; }
.logo.plate > span { display: block; background: #fff; padding: 10px 14px 9px; }
.logo.plate.dark > span { background: #000; } /* homepage header: white wordmark on black */
/* Blinking cursor: the wordmark's end block (x 1416-1585, y 12-324 of 1590x415)
   is covered by a patch in the background colour (white plate and menu sheet) that
   toggles like a text cursor. */
.wordmark { position: relative; display: block; --cover: #fff; }
.logo.plate.dark .wordmark { --cover: #000; }
.wordmark::after {
  content: ""; position: absolute; background: var(--cover);
  left: 88.4%; top: 0; right: 0; height: 80%;
  animation: rt-blink 1.06s steps(1, end) infinite;
}
@keyframes rt-blink { 0%, 50% { opacity: 0; } 50.01%, 100% { opacity: 1; } }

.close-btn {
  display: inline-flex; align-items: center; gap: 8px; height: var(--h-pill); padding: 0 18px;
  border: 0; border-radius: var(--radius-pill); background: var(--glass-fill-strong);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  color: var(--rt-white); font: var(--type-pill); cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out);
}
.close-btn:hover { background: rgba(255,255,255,.24); }

.mask { overflow: hidden; padding: .16em 0 .24em; margin: -.16em 0 -.18em; }
.section-title { margin: 0; font: var(--type-section); letter-spacing: var(--tracking-display); }
.reveal-up { transform: translate3d(0,110%,0); transition: transform var(--dur-mask) var(--ease-reveal); }
.reveal-up.shown { transform: none; }
.mega { margin: 0; font: var(--type-mega); letter-spacing: var(--tracking-display); }
.mega .line { display: block; }
.mega .indent { padding-left: clamp(24px,14vw,280px); }

/* ---------- Intro video ---------- */
.intro-video {
  position: fixed; inset: 0; z-index: 500; background: #dfe7ee;
  transition: opacity .8s var(--ease-out), visibility 0s linear .8s;
}
.intro-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* Film grain: a generated noise tile (set as --grain in main.js) jittered over the video */
.intro-grain {
  position: absolute; inset: -60px; pointer-events: none;
  background-image: var(--grain); background-size: 160px 160px;
  mix-blend-mode: overlay; opacity: .45;
  animation: rt-grain .66s steps(8) infinite;
}
@keyframes rt-grain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-23px, 17px); }
  25%  { transform: translate(31px, -9px); }
  37%  { transform: translate(-11px, -29px); }
  50%  { transform: translate(19px, 25px); }
  62%  { transform: translate(-33px, 4px); }
  75%  { transform: translate(7px, -21px); }
  87%  { transform: translate(27px, 13px); }
  100% { transform: translate(0, 0); }
}
.intro-skip { position: absolute; right: var(--gutter); bottom: 28px; z-index: 1; }
html.no-intro .intro-video { display: none; }
html.intro-on { overflow: hidden; }
.intro-video.done { opacity: 0; visibility: hidden; pointer-events: none; }
/* Reveal: the video layer has a rectangular window cut through it (evenodd polygon:
   outer screen edge, then an inner rectangle). The window starts as a point at the
   centre and grows to the screen edges, so the homepage underneath emerges from the
   middle of the video and expands out. Only this one screen-sized layer animates. */
.intro-video {
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
.intro-video.revealing {
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    0 0, 0 100%, 100% 100%, 100% 0, 0 0);
  transition: clip-path 1.1s var(--ease-wipe);
}
.intro-video.revealing .intro-skip { display: none; }


/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px; min-height: 72px; box-sizing: border-box;
  padding: 22px var(--gutter); transition: opacity .4s var(--ease-out);
}
html.menu-open .header, html.studio-open .header { opacity: 0; pointer-events: none; }

/* ---------- Menu ---------- */
.menu { position: fixed; inset: 0; z-index: 150; pointer-events: none; visibility: hidden; transition: visibility 0s linear .95s; }
.menu.open { pointer-events: auto; visibility: visible; transition: visibility 0s linear 0s; }
.menu-window {
  position: absolute; top: -40px; right: -40px; bottom: -40px; left: -40px;
  border-radius: var(--radius-window); box-shadow: 0 0 0 200vmax #fff; cursor: pointer;
  transition: all .95s var(--ease-wipe);
}
.menu.open .menu-window { top: var(--win-t); right: var(--win-r); bottom: var(--win-b); left: var(--win-l); }
.win-img {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0;
  clip-path: inset(var(--win-t) var(--win-r) var(--win-b) var(--win-l) round 14px);
  transition: opacity .5s var(--ease-out);
}
.win-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.08); transition: transform .9s var(--ease-out); }
.menu.open .win-img.on { opacity: 1; }
.win-img.on img { transform: scale(1); }

.menu-content {
  position: absolute; inset: 0; pointer-events: none; color: var(--rt-ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.menu.open .menu-content { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) .5s, transform .7s var(--ease-out) .5s; }
.menu-top {
  position: absolute; left: 0; right: 0; top: 0; min-height: 72px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 22px var(--gutter); pointer-events: auto;
}
.blue-pills {
  display: flex; align-items: center; gap: 2px; padding: 0 4px; height: var(--h-pill);
  border-radius: var(--radius-pill); background: var(--rt-blue-plate); box-shadow: var(--ring-ink);
}
.blue-pills a {
  display: flex; align-items: center; justify-content: center; width: 32px; height: var(--h-chip);
  border-radius: var(--radius-pill); color: var(--rt-white); transition: background var(--dur-hover) var(--ease-out);
}
.blue-pills a.wide { width: auto; min-width: 32px; padding: 0 8px; }
.blue-pills a:hover { background: rgba(255,255,255,.18); color: var(--rt-white); }
.menu-left {
  position: absolute; left: var(--gutter); top: clamp(110px,17vh,180px); bottom: 24px;
  width: min(28vw,360px); min-width: 220px; display: flex; flex-direction: column; gap: clamp(32px,6vh,72px);
  pointer-events: auto;
}
.menu-left nav { display: flex; flex-direction: column; gap: 4px; }
.menu-link {
  align-self: flex-start; font: var(--type-nav); letter-spacing: var(--tracking-title);
  color: var(--text-nav-idle); border-bottom: 1.5px solid transparent;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.menu-link:hover, .menu-link:focus-visible { color: var(--rt-ink); border-color: var(--rt-ink); }
.cases { display: flex; flex-direction: column; gap: 14px; }
.case-list { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.menu-right {
  position: absolute; right: var(--gutter); top: clamp(110px,17vh,180px); bottom: 24px;
  width: min(24vw,340px); min-width: 200px; display: flex; flex-direction: column; gap: 10px;
  overflow: hidden; pointer-events: auto;
}
.tagline { margin-top: auto; margin-bottom: clamp(32px,7vh,96px); font: var(--type-tagline); letter-spacing: -.01em; text-wrap: balance; }

.jcard.compact {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius-card);
  background: var(--surface-card-light); color: var(--rt-ink); transition: background var(--dur-hover) var(--ease-out);
}
.jcard.compact:hover { background: #e9e9e6; color: var(--rt-ink); }
.jcard.compact .meta { display: flex; justify-content: space-between; gap: 12px; font: var(--type-label-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-meta-light); }
.jcard.compact .cat { color: var(--accent); }
.jcard.compact .title { font: var(--type-card-title); letter-spacing: var(--tracking-title); text-wrap: pretty; }
.jcard.compact .read { font: var(--type-label-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-meta-light); }

/* ---------- Studio page ---------- */
.studio {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain;
  background: var(--rt-black); color: var(--text-primary);
  opacity: 0; transform: translateY(40px); visibility: hidden;
  transition: opacity .6s var(--ease-out) 0s, transform .8s var(--ease-out) 0s, visibility 0s linear .6s;
}
.studio.open { opacity: 1; transform: none; visibility: visible; transition: opacity .6s var(--ease-out) .35s, transform .8s var(--ease-out) .35s, visibility 0s linear 0s; }
.studio-close { position: fixed; top: 22px; right: var(--gutter); z-index: 2; }
.studio-logo { position: fixed; top: 22px; left: var(--gutter); z-index: 2; }
.studio-head { padding: var(--section-pad-top) var(--gutter) clamp(56px,7vw,104px); }
.studio-lede { margin: clamp(40px,5vw,72px) 0 0 auto; max-width: 520px; color: var(--text-muted); text-wrap: pretty; }
.studio-img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.studio-rows { padding: clamp(48px,6vw,96px) var(--gutter) var(--section-pad-top); display: flex; flex-direction: column; gap: var(--stack-section); }
.detail-row { display: flex; flex-wrap: wrap; gap: 16px clamp(32px,6vw,120px); }
.detail-row .label { flex: 0 0 var(--label-col); font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-on-dark); }
.detail-row .body { flex: 1 1 420px; max-width: 900px; }
.numbered { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); column-gap: 40px; }
.numbered > div { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--border-hairline); font: 400 16px/1.4 var(--f-body); }
.numbered span { font: var(--type-label-xs); color: var(--text-meta); }
.next-cta {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: var(--surface-footer-cta); color: #fff; padding: clamp(40px,6vw,88px) var(--gutter);
}
.next-cta .eyebrow-plain { margin-bottom: 16px; }
.next-title { display: block; font: var(--type-next); letter-spacing: var(--tracking-display); transition: color var(--dur-hover) var(--ease-out); }
.next-cta:hover .next-title { color: var(--link-hover); }

/* ---------- 01 Hero ---------- */
.hero { position: relative; height: 100vh; min-height: 560px; background: #080808; }
.hero-panel { position: relative; height: 100%; overflow: hidden; background: #080808; isolation: isolate; }
.hero-fallback { transition: opacity 1.2s var(--ease-out); }
html.gl-ready .hero-fallback { opacity: 0; }
img.hero-fallback { position: absolute; left: 50%; top: 50%; width: min(80vw,820px); transform: translate(-50%,-50%); }
.hero-title {
  position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 400 clamp(64px,16vw,320px)/.86 var(--f-display); letter-spacing: var(--tracking-display); text-align: center; pointer-events: none;
}
.gl-host { position: absolute; inset: 0; }
.gl-host canvas { display: block; width: 100%; height: 100%; }

/* ---------- 02 Intro ---------- */
.intro {
  padding: var(--section-pad-top) var(--gutter) clamp(120px,14vw,220px);
  display: grid; grid-template-columns: minmax(0,200px) minmax(0,1fr); gap: 32px clamp(24px,4vw,64px);
}
.intro-copy {
  margin: 0; max-width: 22ch; font: 400 clamp(36px,5.4vw,96px)/1.02 var(--f-display); letter-spacing: -.025em;
  display: flex; flex-wrap: wrap; column-gap: .24em;
}
.intro-copy [data-w] { opacity: .16; transition: opacity .45s var(--ease-out); }

/* ---------- 03 Selected work ---------- */
.work { position: relative; height: 460vh; background: #080808; }
.work-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1000px; perspective-origin: 50% 45%; }
.work-space { position: absolute; inset: 0; transform-style: preserve-3d; }
.work-space > [data-z] { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.work-space .deco { width: 46vw; }
.work-heading { width: 90vw; display: flex; justify-content: center; transform: translate3d(-50%,-50%,0); }
.shot { width: min(64vw,960px); background: var(--surface-media); }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.work-hud-top { position: absolute; top: 104px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 16px; }
.work-hud {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px;
  padding-top: 18px; border-top: 1px solid var(--border-hairline);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.work-hud.on { opacity: 1; }
.hud-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hud-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.project-name { font: var(--type-project); letter-spacing: var(--tracking-title); }
.label-link { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.work-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--border-hairline); }
.work-track > div { height: 100%; background: var(--rt-blue); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- 04 Services ---------- */
.services { position: relative; height: 320vh; background: #080808; }
.services-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 32px; align-items: center; padding: 0 var(--gutter);
}
.services-left { display: flex; flex-direction: column; gap: 20px; max-width: 320px; z-index: 2; }
.drum { position: relative; height: 100%; perspective: 1100px; }
.face {
  position: absolute; left: 0; right: 0; top: 50%; height: 0; display: flex; align-items: center;
  backface-visibility: hidden; font: 400 clamp(44px,7.4vw,140px)/1 var(--f-display);
  letter-spacing: var(--tracking-display); white-space: nowrap;
}

/* ---------- 05 Journal ---------- */
.journal { padding: clamp(80px,10vw,160px) var(--gutter) var(--section-pad-top); }
.journal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(40px,6vw,80px); }
.index-label { font: var(--type-label); letter-spacing: var(--tracking-label); color: var(--accent-on-dark); margin-bottom: 12px; }
.journal-note { margin: 0; max-width: 300px; font: 400 12px/1.6 var(--f-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--text-meta); }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: 48px var(--gap-cards); perspective: 1200px; }
.tilt { display: flex; transform-origin: 50% 0%; }
.jcard:not(.compact) {
  flex: 1; display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--border-rule); padding-top: 20px;
  color: var(--text-primary); transition: opacity var(--dur-hover) var(--ease-out);
}
.jcard:not(.compact):hover { opacity: .8; color: var(--text-primary); }
.jcard .meta { display: flex; justify-content: space-between; gap: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; font: var(--type-label-sm); color: var(--text-meta); }
.jcard:not(.compact) .cat { color: var(--accent-on-dark); }
.jcard h3 { margin: 0; font: var(--type-article); letter-spacing: -.015em; text-wrap: pretty; }
.jcard p { margin: 0; font: var(--type-body-sm); color: var(--text-muted); text-wrap: pretty; }
.jcard:not(.compact) .read { margin-top: auto; font: var(--type-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* ---------- 06 Contact ---------- */
.contact { background: var(--rt-blue); color: #fff; padding: clamp(100px,14vw,200px) var(--gutter) 28px; }
.email-row { margin-top: clamp(48px,6vw,96px); display: flex; justify-content: flex-end; }
.email {
  font: var(--type-email); letter-spacing: var(--tracking-email); color: #fff;
  border-bottom: 2px solid #fff; padding-bottom: 8px; max-width: 100%; overflow-wrap: anywhere;
}
.email:hover { color: var(--rt-blue-mist); border-color: var(--rt-blue-mist); }
.contact-cols { display: flex; flex-wrap: wrap; gap: 40px clamp(32px,5vw,96px); margin-top: clamp(80px,10vw,160px); padding-top: 28px; border-top: 1px solid var(--border-on-accent); }
.contact-cols .col { flex: 1 1 200px; display: flex; flex-direction: column; gap: 12px; }
.col-label { font: var(--type-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-meta-on-accent); }
.contact-cols .body { font: var(--type-body); }
.social { display: flex; align-items: center; gap: 12px; }
.social a { display: block; width: 40px; height: 40px; border-radius: 50%; transition: transform var(--dur-hover) var(--ease-out); }
.social a:hover { transform: scale(1.08); }
.social img { display: block; width: 100%; height: 100%; filter: invert(1); }
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: clamp(80px,10vw,140px);
  font: 400 11.5px/1.5 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-meta-on-accent);
}
.footer a { color: #fff; }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  :root { --win-t: 58vh; --win-r: 16px; --win-b: 16px; --win-l: 16px; }
  .menu-right { display: none; }
  .menu-left { top: 104px; bottom: auto; width: auto; right: var(--gutter); gap: 28px; }
  .blue-pills { display: none; }
  .intro { grid-template-columns: 1fr; }
  .services-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: center; padding-top: 120px; }
  .drum { height: 40vh; }
  .shot { width: 84vw; }
  .work-space .deco { width: 70vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wordmark::after { animation: none; opacity: 0; }
  .reveal-up { transform: none; }
}