:root {
  --bg: #080807;
  --text: #f4f2ee;
  --white: #ffffff;
  --muted: #c9c5bd;
  --gold: #cba135;
  --hairline: rgba(255, 255, 255, .08);
  --display: 'Bebas Neue', sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --faint: #8d8981; /* small print: readable on the dark background */
  --side-w: 260px;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable; /* no page jump when the video overlay hides the scrollbar */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
}

/* Content column: sits next to the sidebar, and is centered on very wide screens */
main {
  max-width: 1800px;
  margin: 0 0 0 max(var(--side-w), calc((100% - 1800px) / 2));
}

/* Keyboard focus is always visible */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tile:focus-visible, .reel-panel:focus-visible { outline-offset: -5px; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Text for screen readers only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Left sidebar: logo, identity, nav, contact */
.side {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 10;
  width: var(--side-w);
  padding: 40px 32px 32px;
  display: flex; flex-direction: column;
  gap: 34px;
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
}
.side__logo { display: block; align-self: flex-start; }
.side__logo img {
  display: block;
  height: 64px; /* the PNG has empty margins; the mark itself is ~40px tall */
  width: auto;
  margin-left: -4px;
}
.side__name {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
}
.side__role {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
}
.side__links {
  display: flex; flex-direction: column;
  gap: 18px;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
}
.side__links a {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  transition: color .2s, padding-left .35s cubic-bezier(.2, .7, .2, 1);
}
.side__links a::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .35s cubic-bezier(.2, .7, .2, 1);
}
.side__links a:hover, .side__links a.is-active { color: var(--white); }
.side__links a.is-active { padding-left: 24px; }
.side__links a.is-active::before { width: 16px; }

.side__contact {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  gap: 10px;
}
.side__cta {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--white);
}
.copy {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
.copy.is-copied { color: var(--white); }
.copy.is-failed { color: var(--muted); }
.side__mail {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--gold);
  overflow-wrap: anywhere;
  transition: color .2s;
}
.side__mail:hover { color: var(--white); }
.side__copy {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--faint);
}

/* Section headings */
.section-head {
  padding: 40px 48px 16px;
}
.section-head h1, .section-head h2 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Gallery: six equal tiles, three per row. */
.gallery {
  scroll-margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 0 48px; /* same side margin as the headings and the In Motion clips */
}
.tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a18;
  color: inherit;
  text-decoration: none;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(1);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .45s ease;
}
/* Hover: picture zooms and drifts with the cursor, a gold frame draws in, the others step back */
.tile:hover img, .tile:focus-visible img { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(1.14); }
.gallery:hover .tile:not(:hover) img { filter: brightness(.5) saturate(.55); }
.tile::before {
  content: "";
  position: absolute; inset: 10px;
  z-index: 2;
  border: 1px solid var(--gold);
  opacity: 0;
  transform: scale(1.07);
  transition: opacity .35s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.tile:hover::before, .tile:focus-visible::before { opacity: .85; transform: scale(1); }
/* Play icon on hover, only for tiles that have a video link */
.tile[data-video]:not([data-video=""])::after {
  content: "\25B6";
  position: absolute; top: 50%; left: 50%;
  z-index: 3;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  display: flex; align-items: center; justify-content: center;
  padding-left: 4px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(8, 8, 7, .55);
  color: var(--gold);
  font-size: 18px;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.tile[data-video]:not([data-video=""]):hover::after,
.tile[data-video]:not([data-video=""]):focus-visible::after { opacity: 1; }

/* In Motion: three looping clips, zigzag. Clip left/right, big word on the other side. */
.motion { margin-top: 110px; }
.motion__list {
  display: flex; flex-direction: column;
  gap: 90px;
  padding-top: 24px;
}
.motion__row {
  display: flex; align-items: center;
  padding: 0 48px;
}
.motion__row--flip { flex-direction: row-reverse; }
.motion__media {
  position: relative;
  flex: 0 0 42%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a18;
}
.motion__media img, .motion__media video, .motion__media iframe {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
/* looping video/embed sits on top of the still image */
.motion__media video, .motion__media iframe { position: absolute; inset: 0; pointer-events: none; }
.motion__text {
  flex: 1;
  padding: 0 72px;
  display: flex; flex-direction: column; gap: 12px;
}
.motion__row--flip .motion__text { align-items: flex-end; text-align: right; }
.motion__num {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--gold);
}
.motion__label {
  font-family: var(--display);
  font-size: clamp(56px, 6vw, 100px);
  line-height: .9;
  color: var(--white);
}
.motion__sub {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Closing */
.closing {
  margin-top: 96px;
  padding: 90px 48px;
  display: flex; flex-direction: column; align-items: center;
  gap: 30px;
  text-align: center;
  background: #060605;
  border-top: 1px solid var(--hairline);
}
.closing p {
  font-family: var(--display);
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--white);
}

/* Contact line at the bottom, shown only where the sidebar is not */
.closing__contact { display: none; }

/* Video lightbox */
.lightbox {
  --lb-pad: 48px;
  position: fixed; inset: 0;
  z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: var(--lb-pad);
  background: rgba(8, 8, 7, .94);
}
.lightbox[hidden] { display: none; }
.lightbox__frame {
  /* as wide as possible, but never taller than the screen */
  width: min(1100px, 100%, calc((100vh - 2 * var(--lb-pad)) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
}
.lightbox__frame iframe, .lightbox__frame video { width: 100%; height: 100%; border: 0; display: block; }
.lightbox__close {
  position: absolute; top: 18px; right: 28px;
  background: none; border: 0; cursor: pointer;
  font-size: 40px; line-height: 1;
  color: var(--gold);
  transition: color .2s;
}
.lightbox__close:hover { color: var(--white); }

/* Reel page */
/* Reel page: three reels in a strip, the hovered one opens up.
   The page fills the screen and the strip sits centered below the heading. */
.page-reel main { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.page-reel .section-head { padding-top: 0; }
.reel-strip {
  display: flex;
  gap: 3px;
  height: clamp(420px, 62vh, 620px);
  margin: 0 3px;
}
.reel-panel {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: #1a1a18;
  color: inherit;
  text-decoration: none;
  transition: flex-grow .6s cubic-bezier(.2, .7, .2, 1);
}
.reel-panel:hover, .reel-panel:focus-visible { flex-grow: 2.6; }
.reel-panel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.72);
  transition: filter .5s, transform .8s ease;
}
.reel-panel:hover img, .reel-panel:focus-visible img { filter: brightness(1); transform: scale(1.03); }
.reel-panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 7, .85), transparent 60%);
  pointer-events: none;
}
/* Play icon, always centered on the panel, shown on hover */
.reel-panel::before {
  content: "\25B6";
  position: absolute; top: 50%; left: 50%;
  z-index: 2;
  width: 88px; height: 88px;
  margin: -44px 0 0 -44px;
  display: flex; align-items: center; justify-content: center;
  padding-left: 6px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(8, 8, 7, .55);
  color: var(--gold);
  font-size: 24px;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.reel-panel:hover::before, .reel-panel:focus-visible::before { opacity: 1; }
.reel-panel__text {
  position: absolute; left: 32px; bottom: 28px; right: 20px;
  z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
  white-space: nowrap;
}
.reel-panel__num {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--gold);
}
.reel-panel__title {
  font-family: var(--display);
  /* sized so the longest title still fits in a panel that has been squeezed by a hovered neighbour */
  font-size: clamp(22px, calc(((100vw - var(--side-w) - 40px) / 4.6 - 46px) / 6), 48px);
  line-height: .9;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
}
.reel-panel__tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity .3s ease;
}
/* while one panel is open, the squeezed ones show only their title (the tag would be cut off) */
.reel-strip:hover .reel-panel:not(:hover) .reel-panel__tag { opacity: 0; }
/* Button: gold fill slides in from the left, the arrow nudges forward */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-block;
  overflow: hidden;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 11px 26px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: color .3s;
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.btn::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: scaleX(1); }
.btn:hover::after { transform: translateX(6px); }

/* ---------- Motion: intro, reveals, parallax ---------- */
/* Intro: sidebar pieces slide in one after another */
.js .side > * {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.is-ready .side > * { opacity: 1; transform: none; }
.is-ready .side > :nth-child(1) { transition-delay: .05s; }
.is-ready .side > :nth-child(2) { transition-delay: .2s; }
.is-ready .side > :nth-child(3) { transition-delay: .35s; }
.is-ready .side > :nth-child(4) { transition-delay: .5s; }

/* Intro: the tiles start stacked in the middle of the grid and are dealt out to their places */
.js .tile {
  opacity: 0;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r, 0deg)) scale(.5);
}
.is-ready .tile {
  opacity: 1;
  transform: none;
  transition: transform 1.6s cubic-bezier(.16, .84, .3, 1), opacity 1s ease;
  transition-delay: calc(var(--i, 0) * 110ms + .1s);
}

/* Section headings fade up */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* In Motion: clip comes in from its side, the word from the opposite side, letters rise out of a mask */
.motion { overflow-x: hidden; overflow-x: clip; }
.js .motion__media {
  opacity: 0;
  transform: translateX(-90px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}
.js .motion__row--flip .motion__media { transform: translateX(90px); }
.js .motion__text {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity .9s ease .2s, transform 1s cubic-bezier(.2, .7, .2, 1) .2s;
}
.js .motion__row--flip .motion__text { transform: translateX(-70px); }
.js .motion__row.is-in .motion__media,
.js .motion__row.is-in .motion__text { opacity: 1; transform: none; }

.motion__label { position: relative; overflow: hidden; padding: .05em 0; }
.closing p { position: relative; }
.motion__label .ch { display: inline-block; }
.js .motion__label .ch {
  transform: translateY(115%);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(.35s + var(--i, 0) * 55ms);
}
.js .motion__row.is-in .motion__label .ch { transform: none; }

/* Parallax: the picture inside the frame drifts slower than the page */
.motion__media > img, .motion__media > video, .motion__media > iframe {
  transform: translateY(var(--py, 0px)) scale(1.18);
  will-change: transform;
}

/* Closing line: words arrive one by one */
.closing p .w { display: inline-block; }
.js .closing p .w {
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .closing.is-in p .w { opacity: 1; transform: none; }
.js .closing__cta, .js .closing__contact {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s ease .7s, transform .8s cubic-bezier(.2, .7, .2, 1) .7s;
}
.js .closing.is-in .closing__cta, .js .closing.is-in .closing__contact { opacity: 1; transform: none; }

/* Scroll progress: a thin gold line on the right edge that fills as you scroll */
.progress {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 15;
  width: 3px;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}
.js .progress { opacity: 0; transition: opacity .8s ease 1s; }
.is-ready .progress { opacity: 1; }

/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  .js .side > *, .js .tile, .js .reveal, .js .motion__media, .js .motion__text,
  .js .motion__label .ch, .js .closing p .w, .js .closing__cta, .js .closing__contact {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .tile img, .tile::before { transition: none; }
  html { scroll-behavior: auto; }
}

/* Touch screens have no hover, so the play icons are always visible */
@media (hover: none) {
  /* no sticky hover effects after a tap */
  .tile:hover img { transform: none; }
  .gallery:hover .tile:not(:hover) img { filter: none; }
  .tile:hover::before { opacity: 0; }
  .tile[data-video]:not([data-video=""])::after { opacity: .9; }
  .reel-panel::before { opacity: .9; }
  .reel-panel img { filter: brightness(.85); }
  .reel-panel:hover { flex-grow: 1; }
  .reel-strip:hover .reel-panel:not(:hover) .reel-panel__tag { opacity: 1; }
}

/* Narrower screens */
@media (max-width: 1200px) {
  :root { --side-w: 220px; }
  .side { padding: 32px 24px 28px; }
  .side__name { font-size: 26px; }
  .side__role { letter-spacing: 3px; }
  .motion__text { padding: 0 40px; }
}

/* Small laptops and tablets held sideways: open the hovered reel less, so the others keep room for their titles */
@media (max-width: 1100px) {
  .reel-panel__title { font-size: clamp(20px, 2.6vw, 30px); }
}
@media (max-width: 1100px) and (hover: hover) {
  .reel-panel:hover, .reel-panel:focus-visible { flex-grow: 1.5; }
}

@media (max-width: 900px) {
  main { margin-left: 0; }
  .side {
    position: static;
    width: 100%;
    flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 14px 20px;
    padding: 14px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .side__logo img { height: 48px; }
  .side__id { order: 3; width: 100%; text-align: center; }
  .side__name { font-size: 24px; }
  .side__role { margin-top: 6px; }
  .side__links { flex-direction: row; gap: 22px; padding-top: 0; border-top: 0; }
  .side__links a { padding: 10px 0; }
  .side__links a.is-active { padding-left: 22px; }
  .side__contact { display: none; }
  .section-head { padding: 28px 20px 12px; }
  .gallery { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
  .copy { padding: 8px 6px; }
  .lightbox { --lb-pad: 12px; }
  .lightbox__close { top: 6px; right: 12px; }
  .motion { margin-top: 64px; }
  .motion__list { gap: 56px; }
  .motion__row, .motion__row--flip { flex-direction: column; padding: 0 20px; gap: 18px; }
  .motion__media { flex: none; width: 100%; }
  .motion__text, .motion__row--flip .motion__text { padding: 0; align-items: center; text-align: center; }
  .motion__label { font-size: 48px; }
  .closing { padding: 60px 24px; margin-top: 64px; }
  .closing__contact {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 40px 20px 50px;
    font-size: 12px; letter-spacing: .5px; color: var(--gold);
  }
  .closing__contact small { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); }
  .page-reel main { min-height: auto; justify-content: flex-start; }
  .page-reel .section-head { padding-top: 28px; }
  .reel-strip { flex-direction: column; height: auto; margin: 0 20px 30px; }
  .reel-panel { flex: none; height: 240px; }
  .reel-panel:hover { flex-grow: 0; }
  .reel-panel::before { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 18px; }
  .reel-panel__text { left: 20px; }
  .reel-panel__title { font-size: 38px; }
}

/* Phones: one big tile per row (kept last so it wins over the 900px rules) */
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; gap: 6px; }
  .closing p { font-size: 38px; }
}