:root {
  color-scheme: light;
  --ink: #141414;
  --red: #ed2024;
  --paper: #f7f7f6;
  --paper-warm: #f4f2ed;
  --muted: #666666;
  --hairline: rgba(20, 20, 20, .12);
  --hairline-soft: rgba(20, 20, 20, .1);
  --row-hover: rgba(20, 20, 20, .025);
  --card: #ffffff;
  --card-shadow: rgba(20, 20, 20, .12);
  --header-bg: rgba(255, 255, 255, .7);
  --header-border: rgba(255, 255, 255, .65);
  --badge-border: rgba(20, 20, 20, .62);
  --on-ink: #ffffff;
  --ink-strong: #050505;
  --line: rgba(255, 255, 255, .45);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

/* Dark theme. The already-dark sections (How We Work, Projects, the contact card)
   keep their own colours; only the light surfaces flip. */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f1ef;
  --paper: #0f1011;
  --paper-warm: #141415;
  --muted: #9d9da4;
  --hairline: rgba(255, 255, 255, .14);
  --hairline-soft: rgba(255, 255, 255, .1);
  --row-hover: rgba(255, 255, 255, .05);
  --card: #17171a;
  --card-shadow: rgba(0, 0, 0, .55);
  --header-bg: rgba(22, 22, 24, .72);
  --header-border: rgba(255, 255, 255, .12);
  --badge-border: rgba(255, 255, 255, .42);
  --on-ink: #101012;
  --ink-strong: #ffffff;
}
/* Display face for the big uppercase headings and numbers. The weight range keeps browsers
   from faux-bolding Anton, which ships a single (already heavy) weight. */
@font-face {
  font-family: "Future Display";
  src: url("assets/anton.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Body face: Inter variable, 400-900 */
@font-face {
  font-family: "Inter";
  src: url("assets/inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.site-shell {
  width: calc(100% - 10.0vw);
  margin-left: 5.45vw;
  margin-right: 0;
  overflow: visible;
}
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 10px 14px; background: var(--ink); color: var(--on-ink); transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Word wrappers for the heading mask reveal (JS-built; see splitHeadingWords) */
.line-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.line-word > span { display: inline-block; will-change: transform; }

.site-header {
  position: fixed;
  top: 16px;
  left: 24px;
  right: 24px;
  width: auto;
  height: 64px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 10;
  margin: 0;
  border: 1px solid var(--header-border);
  border-radius: 999px;
  background: var(--header-bg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.brand { grid-column: 1; display: inline-flex; align-items: center; justify-self: start; }
.brand-logo { display: block; width: 94px; height: 50px; object-fit: contain; }
.main-nav { grid-column: 2; display: flex; align-items: center; gap: clamp(24px, 3vw, 52px); margin: 0; }
.main-nav a {
  position: relative;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  transition: color 180ms ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms var(--ease-out);
}
.main-nav a.is-current { color: var(--red); }
.main-nav a.is-current::after { transform: scaleX(1); }
.theme-toggle {
  grid-column: 3;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  justify-self: end;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, transform 120ms var(--ease-out);
}
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: block; }
.theme-toggle:focus-visible { outline: 3px solid rgba(237, 32, 36, .38); outline-offset: 3px; }
.menu-toggle, .mobile-menu { display: none; }
.site-header::after { display: none; }

main { padding-top: 78px; }

.hero {
  min-height: calc(100vh - 78px);
  height: auto;
  display: flex;
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; flex: 0 0 40.35%; padding: 0 0 0 2.87%; }
h1 { position: relative; width: 100%; margin: 0 0 29px 19px; font-family: "Future Display", sans-serif; font-size: clamp(124px, 10.1vw, 150px); font-weight: 700; line-height: 1.02; letter-spacing: normal; text-transform: uppercase; }
.title-line { display: inline-flex; align-items: center; gap: 22px; }
.title-asterisk { display: inline-block; color: var(--red); font-family: "Inter", Arial, Helvetica, sans-serif; font-size: 46px; font-weight: 400; line-height: 1; transform: rotate(7deg); }
.hero-subtitle { margin: 0 0 21px 4px; font-size: clamp(20px, 1.85vw, 27px); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; text-transform: uppercase; }
.hero-subtitle span { color: var(--red); }
.hero-description { margin: 0 0 19px 4px; font-size: clamp(15px, 1.15vw, 17px); font-weight: 400; line-height: 1.52; letter-spacing: -.015em; }
.work-link { display: inline-flex; align-items: center; gap: 14px; margin-left: 4px; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.work-arrow { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--red); color: white; font-family: "Inter", Arial, Helvetica, sans-serif; font-size: 29px; font-weight: 400; line-height: 1; }
.work-arrow svg { width: 22px; height: 22px; }
.title-asterisk svg { display: block; width: 1em; height: 1em; }
.work-link:hover .work-arrow, .work-link:focus-visible .work-arrow { background: #cf161b; }
.work-link .work-arrow { transition: background-color 180ms ease, transform 120ms var(--ease-out); }
.work-link:active .work-arrow { transform: scale(.94); }
.magnetic { will-change: translate; }

.hero-visual { position: relative; flex: 0 0 59.65%; width: 100%; height: clamp(620px, calc(100vh - 112px), 820px); margin-top: 0; isolation: isolate; overflow: visible; }
.hero-art { position: absolute; inset: 0; transform: translate3d(0, 0, 0) scale(1); }
.hero-art.is-parallax-ready { will-change: transform; }
.reference-art, .hero-hand-front { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; object-position: left top; }
/* Layer order: background (0) < tiles behind the hand (1-9) < hand cutout + badge (10) < tiles in front (11-19).
   The tiles are composited (3D transform + will-change), so on WebKit they are painted in a
   different pass from plain siblings and a tile with z-index 19 could still end up under the
   cutout - which is why iOS sliced the front tiles while Chrome and Android were fine. Giving
   every hero layer its own compositing layer puts them all in the same pass, where z-index holds. */
.reference-art { z-index: 0; transform: translateZ(0); }
.hero-hand-front { z-index: 10; pointer-events: none; transform: translateZ(0); }
/* .hero-orbit must stay z-index: auto so the tiles' own z-index competes with the cutout. */
.hero-orbit { position: absolute; inset: 0; pointer-events: none; }
/* Orbit tiles are sprites cut from the original artwork; JS sets width, transform, z-index
   and brightness. `translate` centres each sprite on its orbit point. */
.orbit-tile {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  max-width: none;
  height: auto;
  translate: -50% -50%;
  user-select: none;
  will-change: transform;
}
.hero-badge {
  position: absolute;
  z-index: 10;
  transform: translateZ(0);
  top: 82.2%;
  left: 22.3%;
  display: flex;
  width: 19%;
  aspect-ratio: 1;
  margin: -9.5% 0 0 -9.5%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.2px solid var(--badge-border);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-family: "Future Display", sans-serif;
  font-size: clamp(12px, 1.25vw, 26px);
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
}
.hero-badge span { display: block; transform: scaleX(.86); white-space: nowrap; }
.hero-badge em { color: #d31215; font-style: normal; }

.how-we-work { position: relative; z-index: 0; isolation: isolate; width: 100vw; min-height: 100vh; margin-top: 0; margin-left: -5.45vw; padding: clamp(96px, 8vw, 132px) clamp(24px, 4.5vw, 72px) clamp(104px, 8.5vw, 140px); overflow: hidden; background: #0a0a0a; color: white; }
.how-we-work::before { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(ellipse 900px 580px at 15% 0%, rgba(255, 255, 255, .22), transparent 65%), radial-gradient(ellipse 900px 580px at 85% 0%, rgba(255, 255, 255, .18), transparent 65%); pointer-events: none; }
.how-we-work > * { position: relative; z-index: 1; }
.how-we-work__intro { max-width: 760px; margin: 0 auto clamp(48px, 4.5vw, 68px); text-align: center; }
.how-we-work__title { margin: 0 0 18px; font-family: "Future Display", sans-serif; font-size: clamp(52px, 5vw, 70px); font-weight: 700; line-height: .95; letter-spacing: normal; text-transform: uppercase; }
.how-we-work__subtext { max-width: 660px; margin: 0 auto; color: #cccccc; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; }
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(18px, 2vw, 30px); max-width: 1180px; margin: 0 auto; }
.process-card { display: flex; min-height: 340px; flex-direction: column; align-items: flex-start; padding: clamp(34px, 2.8vw, 40px); border: 1px solid rgba(255, 255, 255, .15); border-radius: 34px; background: #151515; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); transition: transform 240ms var(--ease-out), background-color 220ms ease, border-color 220ms ease, box-shadow 240ms ease; }
.process-number { display: block; margin: 0 0 18px; color: var(--red); font-family: "Future Display", sans-serif; font-size: clamp(48px, 4vw, 56px); font-weight: 700; line-height: .9; letter-spacing: .02em; }
.process-card h3 { margin: 0 0 18px; color: #f5f5f5; font-size: clamp(22px, 1.7vw, 24px); font-weight: 700; line-height: 1.2; }
.process-card p { margin: 0; color: #bdbdbd; font-size: 16px; line-height: 1.62; }
@media (hover: hover) and (pointer: fine) {
  .process-card:hover, .js .how-we-work .process-card.reveal.is-visible:hover { transform: translateY(-4px) scale(1.02); border-color: #ef4444; background-color: #181818; box-shadow: 0 24px 48px rgba(0, 0, 0, .58), 0 0 25px rgba(239, 68, 68, .4); }
}

.services {
  width: 100vw;
  margin-left: -5.45vw;
  padding: clamp(36px, 3.2vw, 56px) clamp(24px, 2vw, 36px) clamp(104px, 8vw, 138px);
  scroll-margin-top: 94px;
  background: var(--paper);
  color: var(--ink);
}
.services__title {
  margin: 0;
  font-family: "Future Display", sans-serif;
  font-size: clamp(112px, 10.8vw, 166px);
  font-weight: 900;
  line-height: .82;
  letter-spacing: normal;
  text-transform: uppercase;
  -webkit-text-stroke: .2px currentColor;
  paint-order: stroke fill;
}
.services__list {
  width: min(980px, calc(100% - 48px));
  margin: clamp(48px, 4vw, 64px) auto 0;
}
.service-row {
  display: grid;
  grid-template-columns: clamp(112px, 9vw, 148px) minmax(0, 1fr);
  align-items: center;
  min-height: 162px;
  padding: clamp(34px, 3vw, 46px) 18px;
  border-top: 1px solid var(--hairline);
  transform-origin: left center;
  transition: transform 240ms var(--ease-out), opacity 180ms ease, background-color 180ms ease;
}
.service-row:last-child { border-bottom: 1px solid var(--hairline); }
.service-row__number {
  font-family: "Future Display", sans-serif;
  font-size: clamp(68px, 6vw, 84px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.045em;
  -webkit-text-stroke: .2px currentColor;
  paint-order: stroke fill;
}
.service-row__copy { min-width: 0; }
.service-row h3 {
  margin: 0 0 8px;
  font-size: clamp(25px, 2vw, 31px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-transform: uppercase;
  -webkit-text-stroke: .2px currentColor;
  paint-order: stroke fill;
}
.service-row p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.48;
}
@media (hover: hover) and (pointer: fine) {
  .services__list:hover .service-row { opacity: .55; }
  .services__list .service-row:hover { opacity: 1; transform: scale(1.01); background: var(--row-hover); }
  .js .services.is-visible .services__list:hover .service-row { opacity: .55; }
  .js .services.is-visible .services__list .service-row:hover { opacity: 1; transform: scale(1.01); }
}

.projects {
  width: 100vw;
  min-height: 100vh;
  margin-left: -5.45vw;
  padding: clamp(76px, 7vw, 112px) clamp(18px, 4vw, 64px);
  scroll-margin-top: 94px;
  overflow: hidden;
  background: #141414;
  color: var(--ink);
}
.projects__shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(62px, 6vw, 88px) clamp(24px, 3.8vw, 56px) clamp(54px, 5vw, 76px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.projects__intro { text-align: center; }
.projects__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: white;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.projects__badge > span { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.projects__title {
  margin: 26px 0 clamp(28px, 3vw, 40px);
  color: white;
  font-family: "Future Display", sans-serif;
  font-size: clamp(46px, 5.1vw, 70px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: normal;
  text-transform: uppercase;
  -webkit-text-stroke: .25px currentColor;
  paint-order: stroke fill;
}
.projects__title .accent { color: var(--red); }
.projects-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(26px, 3vw, 40px);
}
.projects-tabs__tab {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.projects-tabs__tab.is-active { border-color: var(--red); background: var(--red); color: white; }
.projects-tabs__tab:active { transform: scale(.97); }
.projects-tabs__tab:focus-visible { outline: 3px solid rgba(237, 32, 36, .45); outline-offset: 3px; }
.projects-carousel { position: relative; }
.projects-carousel.is-empty .projects-carousel__viewport { display: none; }
.projects-carousel.is-single .projects-carousel__arrow { display: none; }
.projects-carousel.is-single .projects-carousel__dots { visibility: hidden; }
.projects-carousel__empty {
  display: grid;
  min-height: clamp(260px, 30vw, 380px);
  margin: 20px auto 34px;
  max-width: 780px;
  padding: 32px;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, .2);
  border-radius: clamp(28px, 2.6vw, 38px);
  color: rgba(255, 255, 255, .7);
  font-size: clamp(16px, 1.3vw, 19px);
  text-align: center;
}
.projects-carousel__empty[hidden] { display: none; }
.projects-carousel__viewport { overflow: hidden; padding: 20px 0 34px; touch-action: pan-y; }
.projects-carousel__track {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2vw, 28px);
  will-change: transform;
}
.projects-carousel.is-ready .projects-carousel__track { transition: transform 440ms cubic-bezier(.77, 0, .175, 1); }
.projects-carousel.is-dragging .projects-carousel__track, .projects-carousel.is-dragging .project-slide { transition: none; }
.project-slide {
  position: relative;
  z-index: 0;
  display: grid;
  flex: 0 0 min(66%, 780px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  border-radius: clamp(28px, 2.6vw, 38px);
  background: var(--card);
  box-shadow: 0 18px 42px var(--card-shadow);
  opacity: 0;
  pointer-events: none;
  transform: scale(.9);
  transition: transform 440ms cubic-bezier(.77, 0, .175, 1), opacity 440ms cubic-bezier(.77, 0, .175, 1);
}
.project-slide.is-previous, .project-slide.is-next { z-index: 1; opacity: .46; }
.project-slide.is-previous { transform: translateX(82%) scale(.94); }
.project-slide.is-next { transform: translateX(-82%) scale(.94); }
.project-slide.is-active { z-index: 3; opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.project-slide__visual {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(237, 32, 36, .72);
  border-radius: inherit;
  background: var(--project-color, #260f11);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .2);
}
.project-slide__visual--image { background: #111111; }
/* Demo recordings are 16:9 screen captures, so they are contained (never cropped) on the
   dark panel, with their own play / full-screen controls. */
.project-slide--video { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
.project-slide__visual--video { background: #060606; }
.project-slide__video { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: contain; background: #060606; }
.project-slide__videobtn {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(10, 10, 10, .72);
  color: white;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 180ms ease, transform 120ms var(--ease-out), border-color 180ms ease;
}
.project-slide__videobtn svg { width: 18px; height: 18px; }
.project-slide__videobtn--full { left: 14px; }
/* Paused: one big play button over the poster. Playing: it shrinks into the corner. */
.project-slide__videobtn--play {
  top: 50%;
  bottom: auto;
  left: 50%;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border-color: rgba(255, 255, 255, .38);
  background: rgba(10, 10, 10, .62);
  transition: background-color 180ms ease, transform 120ms var(--ease-out), border-color 180ms ease;
}
.project-slide__videobtn--play svg { width: 30px; height: 30px; }
.is-playing .project-slide__videobtn--play {
  top: auto;
  bottom: 14px;
  left: 60px;
  width: 38px;
  height: 38px;
  margin: 0;
  background: rgba(10, 10, 10, .72);
}
.is-playing .project-slide__videobtn--play svg { width: 18px; height: 18px; }
.project-slide__videobtn:focus-visible { outline: 3px solid rgba(237, 32, 36, .45); outline-offset: 3px; }
.project-slide__visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}
.project-slide__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(28px, 3vw, 42px);
}
.project-slide__content h3 {
  max-width: 500px;
  margin: 0 0 18px;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.project-slide__content p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.55;
}
.project-slide__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 32px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 14px;
  font-weight: 700;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease;
}
.project-slide__link span { color: var(--red); font-size: 20px; line-height: 1; }
.projects-carousel__arrow {
  position: absolute;
  z-index: 4;
  top: calc(50% - 28px);
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--red);
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 180ms var(--ease-out), background-color 180ms ease, box-shadow 180ms ease;
}
.projects-carousel__arrow svg { display: block; width: 20px; height: 20px; color: var(--red); }
.projects-carousel__arrow--previous { left: 4px; }
.projects-carousel__arrow--next { right: 4px; }
.projects-carousel__dots { display: flex; min-height: 32px; align-items: center; justify-content: center; gap: 1px; }
.projects-carousel__dot {
  display: grid;
  width: 28px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.projects-carousel__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #cfcfcd;
  transition: width 220ms var(--ease-out), background-color 180ms ease;
}
.projects-carousel__dot.is-active::before { width: 28px; background: var(--red); }
.projects-carousel__arrow:focus-visible, .projects-carousel__dot:focus-visible, .project-slide__link:focus-visible { outline: 3px solid rgba(237, 32, 36, .45); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .projects-tabs__tab:not(.is-active):hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: white; }
  .projects-carousel__viewport { cursor: grab; }
  .projects-carousel.is-dragging .projects-carousel__viewport { cursor: grabbing; }
  .theme-toggle:hover { border-color: var(--red); color: var(--red); transform: scale(1.06); }
  .projects-carousel__arrow:hover { transform: translateY(-50%) scale(1.06); background: var(--ink-strong); box-shadow: 0 12px 30px rgba(237, 32, 36, .2); }
  .projects-carousel__arrow:active { transform: translateY(-50%) scale(.96); }
  .project-slide__link:hover { transform: translateY(-2px); background: var(--ink-strong); border-color: var(--red); }
  .project-slide__link:active { transform: scale(.97); }
  .project-slide__videobtn:hover { background: var(--red); border-color: var(--red); transform: scale(1.06); }
  .project-slide__videobtn:active { transform: scale(.94); }
}

.contact {
  width: 100vw;
  margin-left: -5.45vw;
  padding: clamp(96px, 8vw, 132px) clamp(22px, 5vw, 80px) clamp(90px, 7vw, 120px);
  scroll-margin-top: 94px;
  background: var(--paper-warm);
  color: var(--ink);
}
.contact__inner { width: min(100%, 1120px); margin: 0 auto; }
.contact__title {
  max-width: 930px;
  margin: 0 auto clamp(50px, 5vw, 72px);
  font-family: "Future Display", sans-serif;
  font-size: clamp(58px, 7vw, 96px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: normal;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: .25px currentColor;
  paint-order: stroke fill;
}
.contact__title .accent { color: var(--red); }
.contact-form-wrap {
  width: min(100%, 700px);
  margin: 0 auto;
  padding: clamp(26px, 3.4vw, 42px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background: #111111;
  color: white;
  box-shadow: 0 24px 70px rgba(20, 20, 20, .2);
}
.contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.form-field { min-width: 0; }
.form-field--wide, .contact-form__actions { grid-column: 1 / -1; }
.form-field label {
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: white;
}
.form-field label > span:not(.form-field__optional) { color: var(--red); }
.form-field__optional { color: #9b9b9b; font-size: 11px; font-weight: 500; text-transform: uppercase; }
.form-field input, .form-field select, .form-field textarea {
  display: block;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  background: #1b1b1b;
  color: white;
  color-scheme: dark;
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.form-field input, .form-field select { height: 52px; padding: 0 15px; }
.form-field textarea { min-height: 142px; padding: 14px 15px; resize: vertical; line-height: 1.5; }
.form-field select { cursor: pointer; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--red);
  background: #202020;
  box-shadow: 0 0 0 3px rgba(237, 32, 36, .16);
}
.form-field input.is-invalid, .form-field select.is-invalid { border-color: var(--red); }
.contact-service-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
}
.custom-select { position: relative; z-index: 6; }
.custom-select.is-open { z-index: 20; }
.custom-select__trigger {
  position: relative;
  display: flex;
  width: 100%;
  height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  background: #1b1b1b;
  color: white;
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.custom-select__trigger:focus-visible, .custom-select.is-open .custom-select__trigger {
  border-color: var(--red);
  background: #202020;
  box-shadow: 0 0 0 3px rgba(237, 32, 36, .16);
  outline: none;
}
.custom-select__trigger.is-invalid { border-color: var(--red); }
.custom-select__value { min-width: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.custom-select__value.is-placeholder { color: #a6a6a6; }
.custom-select__chevron {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms var(--ease-out);
}
.custom-select.is-open .custom-select__chevron { transform: translateY(2px) rotate(225deg); }
.custom-select__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 9px);
  left: 0;
  right: 0;
  display: grid;
  max-height: 290px;
  gap: 3px;
  padding: 7px;
  overflow-y: auto;
  visibility: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(22, 22, 22, .76);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.985);
  transform-origin: top center;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  transition: opacity 160ms ease, transform 180ms var(--ease-out), visibility 180ms;
}
.custom-select.is-open .custom-select__menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.custom-select__option {
  width: 100%;
  min-height: 43px;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ededed;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.custom-select__option:hover, .custom-select__option:focus-visible { background: rgba(237, 32, 36, .17); color: white; outline: none; }
.custom-select__option[aria-selected="true"] { background: var(--red); color: white; }
.form-field__error {
  display: block;
  min-height: 17px;
  padding: 5px 3px 0;
  color: #ff7477;
  font-size: 12px;
  line-height: 1;
}
.contact-form__actions { display: flex; justify-content: center; padding-top: 4px; }
.contact-form__submit {
  display: inline-flex;
  min-width: 180px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: #050505;
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, opacity 180ms ease;
}
.contact-form__submit:disabled { cursor: wait; opacity: .72; }
.contact-form__submit:active { transform: scale(.97); }
.contact-form__spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: white;
  border-radius: 50%;
  animation: contact-spinner .65s linear infinite;
}
.contact-form__submit.is-loading .contact-form__spinner { display: block; }
.contact-form__status {
  min-height: 220px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 220ms var(--ease-out);
}
.contact-form__status:not([hidden]) { display: flex; }
.contact-form__status.is-visible { opacity: 1; transform: translateY(0); }
.contact-form__status-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: white;
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
}
.contact-form__status[data-state="success"] .contact-form__status-icon::before { content: "\2713"; }
.contact-form__status[data-state="error"] { min-height: 0; flex-direction: row; padding: 26px 4px 0; }
.contact-form__status[data-state="error"] .contact-form__status-icon { background: var(--red); }
.contact-form__status[data-state="error"] .contact-form__status-icon::before { content: "!"; }
.contact-form__status[data-state="error"] .contact-form__status-icon { width: 38px; height: 38px; flex: 0 0 38px; font-size: 18px; }
.contact-form__status[data-state="error"] p { max-width: 470px; font-size: 14px; text-align: left; }
.contact-form__status p { max-width: 510px; margin: 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; line-height: 1.5; }
.contact-details { margin: clamp(48px, 5vw, 70px) auto 0; text-align: center; }
.contact-details__items { display: flex; align-items: flex-start; justify-content: center; gap: clamp(36px, 7vw, 90px); }
.contact-details__items div { display: flex; flex-direction: column; gap: 8px; }
.contact-details__items span { color: #77736e; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-details__items a { font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; }
.contact-socials { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; }
.contact-socials a {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.contact-socials svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.contact-socials a:first-child svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-socials a:nth-child(3) svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.contact-socials a:nth-child(3) .social-dot { fill: currentColor; stroke: none; }
.contact-socials a:focus-visible, .contact-form__submit:focus-visible { outline: 3px solid rgba(237, 32, 36, .38); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .contact-form__submit:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
  .contact-socials a:hover { background: var(--red); color: #ffffff; transform: scale(1.08); }
}

@keyframes contact-spinner { to { transform: rotate(360deg); } }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes image-rise-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal { opacity: 1; }
.reveal-delay { animation-delay: .1s; }
.reveal-delay-1 { animation-delay: .18s; }
.reveal-delay-2 { animation-delay: .26s; }
.reveal-delay-3 { animation-delay: .34s; }
.js .hero-copy.reveal > * { opacity: 0; transform: translateY(20px); }
.js .hero-copy.reveal.is-visible > h1 { animation: rise-in .72s cubic-bezier(.22, 1, .36, 1) .05s both; }
.js .hero-copy.reveal.is-visible > .hero-subtitle { animation: rise-in .68s cubic-bezier(.22, 1, .36, 1) .2s both; }
.js .hero-copy.reveal.is-visible > .hero-description { animation: rise-in .68s cubic-bezier(.22, 1, .36, 1) .34s both; }
.js .hero-copy.reveal.is-visible > .work-link { animation: rise-in .68s cubic-bezier(.22, 1, .36, 1) .48s both; }
.js .hero-visual.reveal { opacity: 0; transform: translateY(40px); }
.js .hero-visual.reveal.is-visible { animation: image-rise-in .78s cubic-bezier(.22, 1, .36, 1) .24s both; }
.js .how-we-work .reveal { opacity: 0; transform: translateY(20px); animation: none; }
.js .how-we-work .reveal.is-visible { opacity: 1; transform: translateY(0); animation: none; }
.js .services__title, .js .service-row { opacity: 0; transform: translateY(16px); }
.js .services.is-visible .services__title, .js .services.is-visible .service-row { opacity: 1; transform: translateY(0); }
.js .projects__shell { opacity: 0; transform: translateY(20px); }
.js .projects.is-visible .projects__shell { opacity: 1; transform: translateY(0); }
.js .contact__reveal { opacity: 0; transform: translateY(18px); }
.js .contact.is-visible .contact__reveal { opacity: 1; transform: translateY(0); }

@media (max-width: 1250px) and (min-width: 721px) {
  .site-shell { width: calc(100% - 48px); margin-left: 24px; }
  .how-we-work { margin-left: -24px; }
  .services { margin-left: -24px; }
  .projects { margin-left: -24px; }
  .contact { margin-left: -24px; }
  .site-header { left: 16px; right: 16px; }
  .main-nav { gap: 24px; margin: 0; }
  .main-nav a { font-size: 12px; }
  .hero { min-height: calc(100vh - 78px); height: auto; }
  .hero-visual { height: clamp(580px, calc(100vh - 112px), 720px); }
  .hero-copy { padding-left: 20px; }
  h1 { font-size: clamp(112px, 10vw, 138px); }
  .title-line { gap: 18px; }
}

@media (max-width: 720px) {
  .site-shell { width: calc(100% - 32px); margin-left: 16px; }
  .site-header { top: 16px; left: 16px; right: auto; width: calc(100vw - 32px); max-width: calc(100vw - 32px); height: 58px; padding: 0 17px; grid-template-columns: 1fr auto auto; column-gap: 10px; overflow: visible; }
  /* Content scrolls under the pill and the panel, so both need to stay readable */
  .site-header, .mobile-menu { background: color-mix(in srgb, var(--paper) 94%, transparent); }
  [data-theme="dark"] .site-header, [data-theme="dark"] .mobile-menu { background: color-mix(in srgb, #191a1c 94%, transparent); }
  .brand-logo { width: 80px; height: 42px; }
  .main-nav { display: none; }
  .site-header::after { display: none; }
  /* Theme switch and hamburger are ordinary grid items inside the pill; the old fixed
     positioning drifted on real phones (browser chrome, safe areas, visual viewport). */
  .theme-toggle, .menu-toggle {
    position: static;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .theme-toggle { grid-column: 2; border: 1px solid var(--hairline); }
  .theme-toggle svg { width: 17px; height: 17px; }
  .menu-toggle { grid-column: 3; border: 0; }
  .menu-bars, .menu-bars::before, .menu-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 220ms var(--ease-out), opacity 160ms ease;
  }
  .menu-bars { position: relative; }
  .menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
  .menu-bars::before { top: -7px; }
  .menu-bars::after { top: 7px; }
  /* Open state turns the bars into a cross */
  .menu-toggle[aria-expanded="true"] .menu-bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-bars::before { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-bars::after { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu { display: flex; position: fixed; top: 86px; left: 16px; right: 16px; z-index: 9; max-height: 0; overflow: hidden; visibility: hidden; flex-direction: column; border: 1px solid transparent; border-radius: 24px; background: color-mix(in srgb, var(--paper) 96%, transparent); box-shadow: 0 4px 24px rgba(0, 0, 0, .08); opacity: 0; pointer-events: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: max-height .35s ease, opacity .2s ease, visibility .35s ease, padding .35s ease, border-color .35s ease; }
  .mobile-menu.is-open { max-height: 360px; visibility: visible; padding: 14px 22px 18px; border-color: var(--header-border); opacity: 1; pointer-events: auto; }
  .mobile-menu a { padding: 10px 0; font-size: 17px; font-weight: 600; text-transform: none; }
  .mobile-menu a { transition: color 180ms ease, transform 180ms var(--ease-out); }
  .mobile-menu a.is-current { color: var(--red); transform: translateX(5px); }
  .hero { display: flex; height: auto; min-height: 0; flex-direction: column; align-items: stretch; }
  .hero-copy, .hero-visual { flex: none; }
  .hero-copy { width: 100%; padding: 62px 0 38px; }
  h1 { margin: 0 0 30px; font-size: clamp(72px, 20vw, 112px); line-height: 1; }
  .title-line { gap: 8px; }
  .title-asterisk { font-size: 32px; transform: rotate(7deg); }
  .hero-subtitle { margin: 0 0 20px; font-size: 20px; }
  .hero-description { width: calc(100% - 20px); max-width: 360px; margin: 0 0 22px; font-size: 14px; overflow-wrap: anywhere; }
  .work-link { margin-left: 0; }
  .hero-visual { width: calc(100% + 32px); height: auto; aspect-ratio: 1223 / 1286; margin-left: -16px; }
  .how-we-work { width: 100vw; margin: 0 0 0 -16px; padding: 78px 20px 86px; overflow: hidden; }
  .how-we-work__intro { margin-bottom: 42px; }
  .how-we-work__title { font-size: clamp(48px, 14vw, 60px); }
  .how-we-work__subtext { font-size: 17px; }
  .process-grid { grid-template-columns: 1fr; gap: 18px; }
  .process-card { min-height: 0; padding: 30px 28px 32px; }
  .process-card h3 { font-size: 22px; }
  .services { width: 100vw; margin-left: -16px; padding: 68px 20px 88px; }
  .services__title { font-size: clamp(70px, 20vw, 90px); line-height: .86; }
  .services__list { width: 100%; margin: 54px 0 0; }
  .service-row { grid-template-columns: 76px minmax(0, 1fr); min-height: 0; padding: 29px 4px 31px; }
  .service-row__number { align-self: start; padding-top: 3px; font-size: 62px; }
  .service-row h3 { margin-bottom: 9px; font-size: clamp(21px, 6.4vw, 25px); line-height: 1.12; overflow-wrap: anywhere; }
  .service-row p { font-size: 15px; line-height: 1.5; }
  .projects { width: 100vw; margin-left: -16px; padding: 58px 12px; }
  .projects__shell { padding: 48px 10px 44px; border-radius: 0; }
  .projects__badge { min-height: 36px; padding: 0 14px; font-size: 11px; }
  .projects__title { margin: 22px 12px 22px; font-size: clamp(39px, 11.5vw, 50px); line-height: 1.04; }
  .projects-tabs { gap: 8px; margin: 0 6px 18px; }
  .projects-tabs__tab { min-height: 40px; padding: 0 16px; font-size: 13px; }
  .projects-carousel__empty { min-height: 220px; margin: 12px 10px 26px; padding: 24px; border-radius: 22px; font-size: 15px; }
  .projects-carousel__viewport { padding: 12px 0 26px; }
  .projects-carousel__track { gap: 12px; }
  .project-slide { flex-basis: calc(100% - 40px); grid-template-columns: 1fr; min-height: 0; border-radius: 22px; }
  .project-slide__visual { min-height: clamp(210px, 64vw, 270px); }
  .project-slide--video { grid-template-columns: 1fr; }
  .project-slide__visual--video { min-height: 0; aspect-ratio: 16 / 9; }
  .project-slide__content { min-height: 0; padding: 22px 20px 24px; justify-content: flex-start; }
  .project-slide__content h3 { margin-bottom: 10px; font-size: clamp(21px, 6vw, 26px); overflow-wrap: anywhere; }
  .project-slide__content p { font-size: 14.5px; line-height: 1.5; }
  .project-slide__link { min-height: 42px; margin-top: 18px; font-size: 13px; }
  /* On a phone the slide fills the width, so the arrows move under it, either side of the
     dots, instead of sitting on top of the card. */
  .projects-carousel__arrow { top: auto; bottom: 0; width: 44px; height: 44px; transform: none; }
  .projects-carousel__arrow--previous { left: 6px; }
  .projects-carousel__arrow--next { right: 6px; }
  .projects-carousel__arrow svg { width: 18px; height: 18px; }
  .projects-carousel__arrow:active { transform: scale(.94); }
  /* The neighbouring slides would otherwise peek out from behind the active card */
  .project-slide.is-previous, .project-slide.is-next { opacity: 0; }
  .projects-carousel__dots { min-height: 44px; gap: 2px; }
  .projects-carousel__dot { width: 30px; height: 44px; }
  .contact { width: 100vw; margin-left: -16px; padding: 76px 18px 82px; }
  .contact__title { margin-bottom: 42px; font-size: clamp(49px, 14vw, 64px); line-height: .96; }
  .contact-form-wrap { padding: 25px 18px 28px; border-radius: 24px; }
  .contact-form__grid { grid-template-columns: 1fr; gap: 16px; }
  .form-field--wide, .contact-form__actions { grid-column: auto; }
  .form-field input, .form-field select { height: 50px; }
  .contact-form__actions { padding-top: 6px; }
  .contact-form__submit { width: 100%; }
  .contact-details__items { flex-direction: column; align-items: center; gap: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero-copy.reveal > *, .js .reveal, .js .hero-visual.reveal { opacity: 1; transform: none; animation: none !important; transition: none !important; }
  .process-card { transform: none !important; animation: none !important; transition: none !important; }
  .js .services__title, .js .service-row, .js .services.is-visible .services__title, .js .services.is-visible .service-row { opacity: 1; transform: none; animation: none !important; transition: none !important; }
  .services__list:hover .service-row { opacity: 1; }
  .js .projects__shell, .js .projects.is-visible .projects__shell { opacity: 1; transform: none; animation: none !important; transition: none !important; }
  .projects-carousel__track, .project-slide, .projects-carousel__arrow, .projects-carousel__dot::before, .project-slide__link, .projects-tabs__tab { transition: none !important; }
  .projects-tabs__tab:active { transform: none; }
  .js .contact__reveal, .js .contact.is-visible .contact__reveal { opacity: 1; transform: none; animation: none !important; transition: none !important; }
  .contact-form__spinner { animation: none; }
  .contact-form__status { transform: none; transition: none; }
  .contact-form__submit, .contact-socials a { transform: none !important; transition: background-color 0s; }
  .custom-select__menu, .custom-select__chevron { transition: none; }
  .main-nav a::after { transition: none; }
  .mobile-menu a.is-current { transform: none; }
  /* Word masks stay open and the magnetic / press transforms are dropped */
  .line-word > span { transform: none !important; animation: none !important; }
  .work-link .work-arrow, .magnetic { transition: background-color 180ms ease; translate: none !important; }
  .work-link:active .work-arrow { transform: none; }
}