@font-face{font-family:"Inter";font-style:normal;font-weight:200;font-display:swap;src:url(fonts/inter-3-latin-200.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-3-latin-300.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-3-latin-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-3-latin-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-3-latin-600.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-400.woff2) format("woff2")}
/* Studio Premys
   Built from the Figma page "End of bodyStart" (frame 68:928, 1920 wide).
   Desktop sizes are the Figma values on a 1920 frame and scale with the
   viewport through --u (one design pixel). Tablet (810 to 1199) keeps the
   desktop layout at a floor size; phone (under 810) stacks. */

:root {
  --ink: #070707;
  --violet: #a875fe;
  --white: #ffffff;
  --text-2: #a0a0a6;
  --text-3: #8a8a90;
  --mono-grey: #797979;      /* design #757575, nudged to pass AA at 19px */
  --rest: #606066;           /* resting service word, 3.2:1 (design #3f3f3f is 1.9:1) */
  --rule: rgba(255, 255, 255, 0.12);
  --rail: rgba(255, 255, 255, 0.14);
  --border: #6e6e74;
  --ink-rule: rgba(7, 7, 7, 0.18);
  --ink-soft: rgba(7, 7, 7, 0.74);

  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* one pixel of the 1920 design frame */
  --u: calc(min(100vw, 1920px) / 1920);
  --gutter: max(20px, calc(63 * var(--u)));
  --col-w: calc(1560 * var(--u));
  --split: 55.23%;               /* the right-hand column line, x 1035 at 1920 */

  --hpt: max(14px, calc(47 * var(--u)));   /* header padding at the top of the page */
  --hpc: 16px;                             /* header padding once scrolled */
  --hc: 58px;                              /* header content height */

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ink); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; }

[id] { scroll-margin-top: 110px; }
[tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  padding: 12px 20px; border-radius: 999px;
  background: var(--violet); color: var(--ink);
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 16px); }

.col {
  width: min(100%, var(--col-w));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  font-family: var(--mono); font-weight: 400;
  font-size: max(12px, calc(18.98 * var(--u)));
  line-height: 1.4; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--mono-grey);
}

/* ---------------------------------------------------------------- buttons */
/* One button in the whole site: the square glass button from the header. On
   the light footer panel it keeps the same geometry and flips to ink. */

.btn, .btn-glass {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--hc); padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--white);
  font-family: var(--font); font-size: 16px; font-weight: 500;
  line-height: 1; letter-spacing: -0.02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, scale 0.16s var(--ease-out);
}
.btn:active, .btn-glass:active { scale: 0.97; }

.site-footer .btn {
  border-color: rgba(7, 7, 7, 0.26);
  background: rgba(255, 255, 255, 0.3);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover, .btn-glass:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.36); }
  .site-footer .btn:hover { background: rgba(255, 255, 255, 0.62); border-color: rgba(7, 7, 7, 0.5); }
}

/* ----------------------------------------------------------------- header */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform 0.28s var(--ease-out);
}
/* The band only shows once the page has moved, so at the top the header sits
   on the hero exactly as drawn. */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--hpt) - var(--hpc));
  height: calc(env(safe-area-inset-top, 0px) + var(--hc) + 2 * var(--hpc));
  background: rgba(7, 7, 7, 0.74);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.site-header.is-scrolled { transform: translateY(calc(var(--hpc) - var(--hpt))); }
.site-header.is-scrolled::before { opacity: 1; }

.header-inner {
  position: relative;
  height: calc(var(--hc) + 2 * var(--hpt));
  display: flex; align-items: center;
  padding-inline: var(--gutter);
}

.mark-link { display: block; flex: none; }
.mark { width: auto; height: max(38px, calc(53.48 * var(--u))); aspect-ratio: 600 / 795; }

.site-nav {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: max(24px, calc(52 * var(--u)));
}
.site-nav a {
  font-family: var(--mono);
  font-size: max(13px, calc(18.98 * var(--u)));
  line-height: 1.4; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--mono-grey); text-decoration: none;
  transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--white); }
}

.header-cta { margin-left: auto; }
/* "Brief Builder" makes the nav wider: on small tablets it tightens so it
   clears the button */
@media (min-width: 810px) and (max-width: 959px) {
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 12px; letter-spacing: 0.07em; }
}
.menu-btn { display: none; margin-left: auto; }

.menu-panel {
  position: absolute; left: 0; right: 0;
  top: calc(var(--hpt) + var(--hc) + var(--hpc));
  padding: 8px var(--gutter) 28px;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.menu-panel a:not(.btn) {
  display: block; padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 18px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
}
.menu-panel .btn { margin-top: 24px; width: 100%; }

/* ------------------------------------------------------------------- hero */

.hero {
  container-type: inline-size;
  position: relative;
  touch-action: pan-y;
}
.hero-frame {
  --hp: calc(min(100cqw, 1920px) / 1920);
  position: relative;
  max-width: 1920px; margin-inline: auto;
  height: calc(1064 * var(--hp));
}
.cubes {
  /* box of the assembled mark on the 1920 frame (from cubes.py) */
  --cx: 702.57; --cy: 215.08; --cw: 513.85; --ch: 736.92;
  position: absolute;
  left: calc(var(--cx) * var(--hp)); top: calc(var(--cy) * var(--hp));
  width: calc(var(--cw) * var(--hp)); height: calc(var(--ch) * var(--hp));
  overflow: visible;
}
.js .cubes { opacity: 0; animation: cubes-fallback 0.4s ease-out 1.5s both; }
.js .cubes.is-live { opacity: 1; animation: none; }
@keyframes cubes-fallback { from { opacity: 0; } to { opacity: 1; } }
.cubes path { stroke: #ffffff; stroke-opacity: 0.16; stroke-width: 0.82; stroke-linejoin: round; }
/* grab the cubes themselves, not the empty box around them; sideways swipes
   spin the mark on touch, vertical ones still scroll the page */
.js .cubes { pointer-events: none; touch-action: pan-y; }
.js .cubes.is-live path { pointer-events: visiblePainted; cursor: grab; }
.js .cubes.is-dragging path { cursor: grabbing; }
.hero:has(.cubes.is-dragging) { user-select: none; -webkit-user-select: none; }

/* a quiet note beside the mark that it can be spun, gone after the first spin */
.cube-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .js .cube-hint {
    display: block; position: absolute;
    left: calc(1262 * var(--hp)); top: calc(470 * var(--hp));
    font-size: max(11px, calc(15 * var(--hp)));
    opacity: 0; animation: hint-in 0.6s ease-out 1.8s forwards;
    pointer-events: none;
  }
  .js .hero.is-spun .cube-hint { animation: hint-out 0.4s ease-out forwards; }
}
@keyframes hint-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes hint-out { from { opacity: 1; } to { opacity: 0; } }

.hero-label {
  position: absolute;
  left: calc(1302 * var(--hp)); top: calc(708 * var(--hp));
  width: 15.2em;
  font-size: max(11px, calc(18.98 * var(--hp)));
}

/* The wordmark is live text: Inter 3 at 275px on the 1920 frame, sized so the
   letters land on the Figma outlines. Studio is ExtraLight, Premys Regular. */
.wordmark {
  position: absolute;
  left: calc(45.95 * var(--hp));
  top: calc(var(--wm-top, 767.3) * var(--hp));
  /* 275 in the design with the registration mark after it; without the mark
     it is set 3.35% larger so the s still ends on the header's right edge */
  font-size: calc(284.2 * var(--hp));
  font-weight: 400; line-height: 1; letter-spacing: -0.02em;
  white-space: nowrap;
  word-spacing: -0.1133em;
}
.wm-studio { font-weight: 200; }
.wm-premys { font-weight: 400; }

/* ------------------------------------------------------------------ about */

.about { padding-top: max(96px, calc(404 * var(--u))); }
.about-grid {
  max-width: 1920px; margin-inline: auto;
  display: grid;
  grid-template-columns: calc(447 * var(--u)) minmax(0, 1fr);
  column-gap: calc(206 * var(--u));
  align-items: start;
  padding-left: calc(302 * var(--u));
  padding-right: calc(110 * var(--u));
}
.about-media { margin-top: calc(9 * var(--u)); }
.about-media img { width: 100%; height: auto; }
.about-title {
  max-width: 10.7em;
  font-size: max(34px, calc(80 * var(--u)));
  font-weight: 300; line-height: 1.2; letter-spacing: -0.0436em;
  color: var(--white);
}
.tone-dim { color: var(--rest); }
.about-text {
  max-width: 29.2em;
  margin-top: max(32px, calc(166 * var(--u)));
  font-size: max(18px, calc(24 * var(--u)));
  font-weight: 300; line-height: 1.25; letter-spacing: -0.0133em;
  color: var(--text-2);
}

/* --------------------------------------------------------------- services */

.services {
  padding-top: max(96px, calc(428 * var(--u)));
  padding-inline: var(--gutter);
  text-align: center;
}
.pillars {
  --F: max(46px, calc(140 * var(--u)));      /* the size of the words */
  --desc-size: max(14px, calc(20 * var(--u)));
  --desc-lh: calc(var(--desc-size) * 1.3);
  --extra: max(24px, calc(34 * var(--u)));   /* room under each word for the description */
  list-style: none; padding: 0;
  width: fit-content; max-width: 100%;
  margin: max(48px, calc(166 * var(--u))) auto 0;
}
.pillar {
  position: relative;
  font-size: var(--F);
  padding-bottom: calc(0.707em + var(--extra));
}
.pillar:focus { outline: none; }
.pillar:focus-visible { outline: 2px solid var(--violet); outline-offset: 10px; }
.pillar-word { position: relative; width: fit-content; margin-inline: auto; }
.pillar-name {
  font-size: 1em; font-weight: 300; line-height: 0.686; letter-spacing: -0.0249em;
  white-space: nowrap;
  color: var(--rest);
  transition: color 0.2s ease;
}
.pillar-desc {
  font-size: var(--desc-size); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
}
/* Out of the box: every word ends on a pixel, like a full stop. Hover a word
   and three pixels jump out of it down the staircase of the mark, then grow
   into the services as solid tiles in the word's colour. Sizes are fractions
   of the word size (--F), from the 1440 board: dot 18, tile 30, steps 32/36. */
.pillar-dot {
  display: inline-block; width: 0.1714em; height: 0.1714em; margin-left: 0.076em;
  background: var(--rest); transition: background-color 0.2s ease;
}
.pillar-tabs { list-style: none; padding: 0; }
.pillar-tabs li {
  display: inline-flex; align-items: center;
  height: max(24px, calc(0.2857 * var(--F))); padding-inline: max(8px, calc(0.1143 * var(--F)));
  background: var(--accent); color: var(--ink);
  font-size: max(11px, calc(0.1333 * var(--F))); font-weight: 500; line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap;
}
.tab-top { --x: 0.2857; --y: -0.419; }
.tab-bl { --x: 0.5905; --y: -0.0762; }
.tab-br { --x: 0.8952; --y: 0.2667; }

/* Mouse: the words are a list you run the cursor down. The tiles stand to the
   right of the word and the line sits in the gap under it, so nothing moves
   when they appear. With the cursor away, all three words rest in grey. */
@media (hover: hover) and (pointer: fine) {
  .pillar:last-child { padding-bottom: 0; }
  .pillar-tabs li {
    position: absolute; z-index: 1;
    left: calc(100% - 0.1714 * var(--F)); top: calc(0.5356 * var(--F));
    opacity: 0; transform: translate(0, 0);
    clip-path: inset(0 calc(100% - 0.1714 * var(--F)) calc(100% - 0.1714 * var(--F)) 0);
    transition: opacity 0.12s ease-out, transform 0.18s ease-in, clip-path 0.14s ease-in;
  }
  .pillar-desc {
    position: absolute; left: 0; right: 0; text-align: center;
    top: calc(0.7066 * var(--F) + (0.664 * var(--F) + var(--extra) - var(--desc-lh)) / 2);
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
  }
  .pillar:hover .pillar-name,
  .pillars:not(:hover) .pillar:focus .pillar-name { color: var(--white); }
  .pillar:hover .pillar-dot,
  .pillars:not(:hover) .pillar:focus .pillar-dot { background: var(--accent); }
  .pillar:hover .pillar-tabs li,
  .pillars:not(:hover) .pillar:focus .pillar-tabs li {
    --d: calc(var(--i, 0) * 70ms);
    opacity: 1;
    transform: translate(calc(var(--x) * var(--F)), calc(var(--y) * var(--F)));
    clip-path: inset(0 0 0 0);
    transition:
      opacity 0.08s linear var(--d),
      transform 0.4s cubic-bezier(0.34, 1.45, 0.64, 1) var(--d),
      clip-path 0.36s cubic-bezier(0.77, 0, 0.175, 1) calc(var(--d) + 230ms);
  }
  .pillar:hover .pillar-desc,
  .pillars:not(:hover) .pillar:focus .pillar-desc {
    opacity: 1; transform: none;
    transition: opacity 0.2s var(--ease-out) 0.2s, transform 0.22s var(--ease-out) 0.2s;
  }
}
/* Touch: no hover to discover it with, so everything shows: the word in
   white with its coloured pixel, the line, and the tiles in a row under it. */
@media (hover: none), (pointer: coarse), (pointer: none) {
  .pillar {
    padding-bottom: 0; margin-bottom: 48px;
    display: flex; flex-direction: column; align-items: center;
  }
  .pillar:last-child { margin-bottom: 0; }
  .pillar-word { display: contents; }
  .pillar-name { order: 1; color: var(--white); line-height: 0.9; }
  .pillar-dot { background: var(--accent); }
  .pillar-desc { order: 2; margin-top: 14px; padding-inline: 8px; }
  .pillar-tabs {
    order: 3;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-top: 12px;
  }
  .pillar-tabs li { height: 34px; padding-inline: 12px; font-size: 14px; }
}

/* One link under the three words to the full services page. */
.all-services { margin-top: max(72px, calc(190 * var(--u))); }
.all-toggle {
  gap: 14px;
  font-family: var(--mono); font-size: max(12px, calc(15 * var(--u))); font-weight: 400;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.all-arrow { position: relative; width: 12px; height: 11px; flex: none; transition: transform 0.24s var(--ease-out); }
.all-arrow::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 1px; background: var(--violet);
}
.all-arrow::after {
  content: ""; position: absolute; right: 0; top: 2px; width: 6px; height: 6px;
  border-top: 1px solid var(--violet); border-right: 1px solid var(--violet);
  transform: rotate(45deg);
}
@media (hover: hover) { .all-toggle:hover .all-arrow { transform: translateX(4px); } }

/* ---------------------------------------------------------------- process */
/* The horizontal timeline from the design: the three steps in a row with the
   rail under them, the marker filling as each step arrives. The panel is only
   as tall as the timeline; it pins in the middle of the screen for a little
   over one screen of scrolling, which walks the rail from step to step, then
   lets go with the studio section right behind it. Without JS (and with
   reduced motion) the panel is a plain row with every step lit. */

.process { position: relative; }
.process { --pin-pad: max(96px, calc(220 * var(--u))); --pin-run: 120vh; }
.process-sticky { padding-top: var(--pin-pad); }
.tl-label { display: block; text-align: center; }
.timeline { margin-top: max(36px, calc(150 * var(--u))); min-width: 0; }
/* the track can be wider than the screen, so it must not size the page */
.tl-viewport { overflow: hidden; min-width: 0; padding-bottom: max(28px, calc(60 * var(--u))); }
.process-sticky > .col { min-width: 0; }
.tl-track { position: relative; will-change: transform; }
.tl-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rail); }
/* the lit rail carries the three step colours, so the head is the colour of
   the step it is arriving at */
.tl-rail-lit {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #D9FDA6 0%, var(--violet) 46%, #FF8549 88%);
}
.tl-list { display: grid; margin: 0; padding: 0 0 max(20px, calc(46 * var(--u))); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(24px, calc(72 * var(--u))); list-style: none; }
.tl-step { position: relative; padding-left: max(24px, calc(41 * var(--u))); }
.tl-node {
  position: absolute; left: 0; top: calc(0.28 * max(20px, calc(30.4 * var(--u))));
  width: 13px; height: 13px;
  border: 1px solid var(--accent); background: transparent;
}
.tl-step h3 {
  font-size: max(20px, calc(30.4 * var(--u)));
  font-weight: 600; line-height: 1.12; letter-spacing: -0.025em;
}
.tl-step p {
  margin-top: max(14px, calc(30 * var(--u)));
  max-width: 24em;
  font-size: max(14px, calc(16 * var(--u))); line-height: 1.45; letter-spacing: -0.01em;
  color: var(--text-2);
}

@media (prefers-reduced-motion: no-preference) {
  /* the run is set in JS from the panel's real height (--ph, --pt) */
  .js .process { padding-top: var(--pin-pad); min-height: calc(var(--pin-pad) + var(--ph, 100svh) + var(--pin-run)); }
  .js .process-sticky { position: sticky; top: var(--pt, 0px); display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .js .tl-rail-lit { clip-path: inset(0 100% 0 0); }
  .js .tl-step { opacity: 0.32; }
}

/* Below 1024 three columns squeeze the copy, so the timeline becomes one card
   at a time: the track is as wide as its cards and slides, the viewport clips. */
@media (max-width: 1023px) {
  .tl-track { width: max-content; }
  .tl-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: max(18px, 4vw); }
  .tl-step p { max-width: none; }
}

/* ----------------------------------------------------------------- studio */

/* rail to heading is 386 in the design (Figma 78:2), less the 60 under the rail */
.studio { padding-top: max(96px, calc(326 * var(--u))); }
.split {
  display: grid;
  grid-template-columns: var(--split) minmax(0, 1fr);
  align-items: start;
}
.studio-intro { padding-right: 48px; }
.studio-title {
  font-size: max(40px, calc(72 * var(--u)));
  font-weight: 300; line-height: 1.228; letter-spacing: -0.04em;
}
.studio-copy p {
  font-size: 16px; line-height: 25.6px; letter-spacing: -0.02em;
  color: var(--text-2);
}
.studio-copy { max-width: 36em; display: flex; flex-direction: column; gap: 31px; }
.studio-copy .reveal {
  font-size: max(28px, calc(36 * var(--u)));
  font-weight: 300; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--white);
}
.reveal.is-split { display: flex; flex-wrap: wrap; column-gap: 0.26em; row-gap: 0.1em; }
.reveal.is-split span { display: inline-block; }

/* ---------------------------------------------------- contact and footer */
/* The footer from the design: the line, the button and the links up top, and
   the mark's cubes lying on the floor below, one letter each. */

.site-footer {
  position: relative; isolation: isolate;
  margin-top: max(120px, calc(420 * var(--u)));
  min-height: max(560px, calc(1370 * var(--u)));
  padding: max(64px, calc(107 * var(--u))) var(--f-pad) max(56px, calc(64 * var(--u)));
  --f-pad: max(20px, calc(135 * var(--u)));
  background: linear-gradient(to top, var(--violet) 10.874%, #ffffff 118.85%);
  color: var(--ink);
  overflow: hidden;
}
.site-footer :focus-visible { outline-color: var(--ink); }
.footer-top {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: max(32px, calc(80 * var(--u))); row-gap: 48px;
}
.contact-title {
  max-width: max(320px, calc(646 * var(--u)));
  font-size: max(32px, calc(65 * var(--u)));
  font-weight: 300; line-height: 1.145; letter-spacing: -0.044em;
}
.contact-accent { color: #6a2fcd; }
.footer-btn { margin-top: max(28px, calc(42 * var(--u))); }

.footer-side {
  display: grid; grid-template-columns: repeat(2, max(104px, calc(207 * var(--u))));
  column-gap: max(20px, calc(40 * var(--u))); row-gap: max(32px, calc(150 * var(--u)));
  align-content: start;
}
.footer-links {
  display: flex; flex-direction: column; align-items: flex-start; gap: max(10px, calc(16 * var(--u)));
  list-style: none; padding: 0;
  font-size: max(13px, calc(16 * var(--u))); line-height: 1.4; letter-spacing: -0.01em;
  color: var(--ink-soft);
}
.footer-links a, .legal a {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size 0.24s var(--ease-out), color 0.2s ease;
}
.footer-links a:hover, .legal a:hover { background-size: 100% 1px; color: var(--ink); }
.contact-email {
  grid-column: 1 / -1;
  font-size: max(13px, calc(16 * var(--u))); line-height: 1.4; letter-spacing: -0.01em;
  color: var(--ink-soft); text-decoration: none;
  overflow-wrap: anywhere;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size 0.3s var(--ease-out), color 0.2s ease;
}
.contact-email:hover { background-size: 100% 1px; color: var(--ink); }

/* the floor: the letter cubes, drawn in JS and sitting behind the copy */
.footer-floor {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 0;
  aspect-ratio: 1920 / 900;
  pointer-events: none;
}
.letters { display: block; width: 100%; height: 100%; overflow: visible; }
.js .letters { opacity: 0; transition: opacity 0.5s ease-out; }
.js .letters.is-live { opacity: 1; }

/* kept quiet, under the email, so it never fights the cubes */
.legal {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 16px;
  margin-top: max(16px, calc(28 * var(--u)));
}
.legal small, .legal a {
  font-size: 11px; font-weight: 500; line-height: 15.4px;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(7, 7, 7, 0.5);
}

/* ------------------------------------------------------ privacy and 404 */

.page .col {
  padding-top: calc(var(--hc) + 2 * var(--hpt) + 72px);
}
.page h1 {
  font-size: max(40px, calc(72 * var(--u)));
  font-weight: 300; line-height: 1.1; letter-spacing: -0.04em;
  margin-bottom: 32px;
}
.page--404 h1 { margin: 48px 0; text-wrap: balance; }
.page-copy { max-width: 680px; }
.page-copy h3 {
  margin: 32px 0 8px;
  font-size: 13px; font-weight: 500; line-height: 18.2px; letter-spacing: -0.02em;
}
.page-copy p, .page-lead {
  font-size: 16px; line-height: 25.6px; letter-spacing: -0.02em;
  color: var(--text-2);
}
.page-copy a { color: var(--white); }
.page-lead { max-width: 525px; margin-bottom: 48px; }

/* ------------------------------------------------ services and contact pages */

.page--head .page-lead { max-width: 640px; }
.page--head h1 { max-width: 19ch; text-wrap: balance; }
.page--cta { padding-bottom: 0; }
.page--cta .col { padding-top: max(96px, calc(240 * var(--u))); }
.page--cta h2 {
  font-size: max(32px, calc(60 * var(--u)));
  font-weight: 300; line-height: 1.1; letter-spacing: -0.04em;
  margin-bottom: 24px;
}

.svc { padding-top: max(72px, calc(180 * var(--u))); }

/* studio page: the name, what we believe, then the process */
.st-about { padding-top: max(56px, calc(150 * var(--u))); }
.st-joke {
  max-width: 22em; margin-top: max(28px, calc(48 * var(--u)));
  font-size: max(22px, calc(32 * var(--u))); font-weight: 300; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--white);
}
.studio-more { align-self: flex-start; }
.svc-grid {
  display: grid; grid-template-columns: var(--split) minmax(0, 1fr);
  column-gap: max(24px, calc(60 * var(--u))); row-gap: 40px;
  align-items: start;
  padding-top: max(36px, calc(56 * var(--u)));
  box-shadow: inset 0 1px 0 var(--rule);
}
.svc-name {
  display: flex; align-items: center; gap: max(12px, calc(20 * var(--u)));
  font-size: max(36px, calc(88 * var(--u)));
  font-weight: 300; line-height: 1; letter-spacing: -0.035em;
}
.svc-name::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--accent); }
.svc-desc {
  margin-top: max(14px, calc(22 * var(--u)));
  font-size: max(16px, calc(22 * var(--u))); font-weight: 300; line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}
.svc-note {
  margin-top: max(14px, calc(20 * var(--u))); max-width: 30em; padding-right: 40px;
  font-size: 16px; line-height: 1.6; color: var(--text-2);
}
.svc-lists {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  column-gap: max(20px, calc(40 * var(--u))); row-gap: 40px;
}
.svc-group h3 { padding-bottom: 12px; box-shadow: inset 0 -1px 0 var(--rule); }
.svc-group ul { list-style: none; padding: 0; margin-top: 14px; }
.svc-group li {
  font-size: 15px; line-height: 1.5; letter-spacing: -0.01em;
  color: var(--text-2); padding: 5px 0;
}

.contact-big {
  display: inline-block; margin-top: 8px;
  font-size: max(24px, calc(60 * var(--u)));
  font-weight: 300; line-height: 1.1; letter-spacing: -0.04em;
  color: var(--white); text-decoration: none; overflow-wrap: anywhere;
  background-image: linear-gradient(var(--violet), var(--violet));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
  padding-bottom: 6px;
  transition: background-size 0.3s var(--ease-out), color 0.2s ease;
}
.contact-big:hover { background-size: 100% 2px; }

.ct { padding-top: max(56px, calc(150 * var(--u))); padding-bottom: max(72px, calc(180 * var(--u))); }
.ct-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: max(24px, calc(80 * var(--u))); row-gap: max(40px, calc(90 * var(--u)));
}
.ct-block h2 { padding-bottom: 14px; box-shadow: inset 0 -1px 0 var(--rule); }
.ct-list, .ct-steps { list-style: none; padding: 0; margin-top: 18px; }
.ct-list li, .ct-steps li, .ct-copy {
  font-size: 16px; line-height: 1.6; letter-spacing: -0.01em; color: var(--text-2);
}
.ct-list li { padding: 6px 0; }
.ct-steps li { position: relative; padding: 0 0 20px 26px; }
.ct-dot {
  position: absolute; left: 0; top: 8px;
  width: 9px; height: 9px; background: var(--violet);
}
.ct-copy { margin-top: 18px; max-width: 34em; }
.ct-social li { color: var(--rest); }

/* the contact form: square fields like the brief builder, a glass button */
.ct-form-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: max(32px, calc(120 * var(--u))); row-gap: 56px; align-items: start;
}
.cf, .cf-done { grid-column: 1; grid-row: 1; }
.ct-side { grid-column: 2; grid-row: 1; display: grid; row-gap: max(32px, calc(56 * var(--u))); }
.cf-fields { display: grid; gap: 20px; }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cf-field { display: grid; gap: 10px; min-width: 0; }
.cf-opt { color: var(--rest); }
.cf-input {
  width: 100%; height: 54px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0;
  background: rgba(255, 255, 255, 0.035); color: var(--white);
  font: inherit; font-size: 16px; letter-spacing: -0.01em;
  outline: none; transition: border-color 0.2s ease, background-color 0.2s ease;
}
textarea.cf-input { height: auto; min-height: 168px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.cf-input::placeholder { color: var(--rest); }
.cf-input:focus { border-color: var(--violet); background: rgba(255, 255, 255, 0.05); }
.cf-input[aria-invalid="true"] { border-color: #ff9a8f; }
.cf-error { margin-top: 16px; font-size: 15px; line-height: 1.5; color: #ff9a8f; }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.cf-fine { font-size: 13px; line-height: 1.5; color: var(--mono-grey); }
.cf-fine a, .ct-copy a { color: var(--white); text-underline-offset: 3px; }
.cf-done { display: grid; gap: 20px; align-content: start; padding-top: 8px; }
.cf-done[hidden] { display: none; }
.cf-sq { display: grid; grid-template-columns: repeat(3, 14px); grid-template-rows: 14px; }
.cf-sq i:nth-child(1) { background: #D9FDA6; }
.cf-sq i:nth-child(2) { background: var(--violet); }
.cf-sq i:nth-child(3) { background: #FF8549; }
.cf-done-title { font-size: max(32px, calc(52 * var(--u))); font-weight: 300; line-height: 1.08; letter-spacing: -0.044em; }
.cf-done-title:focus { outline: none; }
.cf-done-text { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.ct-mail {
  display: inline-block; margin-top: 18px;
  font-size: max(20px, calc(28 * var(--u))); font-weight: 300; letter-spacing: -0.02em;
  color: var(--white); text-decoration: none; overflow-wrap: anywhere;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size 0.3s var(--ease-out);
}
.ct-mail:hover { background-size: 100% 1px; }

/* ----------------------------------------------------------------- tablet */

@media (max-width: 1199px) {
  :root { --col-w: 100%; --hc: 48px; }
  .btn, .btn-glass { font-size: 15px; padding: 0 16px; }
  .studio-intro { padding-right: 32px; }
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 809px) {
  :root { --hc: 44px; --hpc: 14px; --split: 0%; }
  .site-nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .mark { height: 38px; }

  .pillars { --sub-size: 11px; }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-note { padding-right: 0; }
  .ct-grid { grid-template-columns: minmax(0, 1fr); }
  .ct-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ct-side { grid-column: 1; grid-row: 2; }
  .cf-row { grid-template-columns: minmax(0, 1fr); }
  .about-grid { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); row-gap: 40px; }
  .about-media { max-width: 420px; }


  .split { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .studio-intro { padding-right: 0; }

  /* the floor is as tall as 47% of the width, so the copy clears it */
  .site-footer { padding-bottom: calc(47vw + 32px); min-height: 0; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-side { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .contact-title { max-width: none; }

}

/* The hero stacks only on phones; from 600 up it keeps the one-line wordmark. */
@media (max-width: 599px) {
  .hero-frame {
    height: auto;
    display: flex; flex-direction: column;
    padding: calc(var(--hc) + 2 * var(--hpt) + 20px) var(--gutter) 0;
  }
  .cubes {
    position: relative; left: auto; top: auto;
    width: min(60%, 300px); height: auto; aspect-ratio: var(--cw) / var(--ch);
    margin-inline: auto;
  }
  .wordmark {
    position: relative; left: auto; top: auto;
    order: 1;
    margin-top: -0.62em;
    font-size: calc((100cqw - 2 * var(--gutter)) / 3.52);
    line-height: 0.96;
    white-space: normal; word-spacing: normal;
  }
  .wm-studio, .wm-premys { display: block; }
  .wm-studio { margin-left: -0.062em; }
  .wm-premys { margin-left: -0.078em; }
  .hero-label {
    position: static; order: 2;
    width: auto; margin-top: 20px;
    font-size: 12px;
  }

}

/* ----------------------------------------------------------- pixel cursor */

.pixel-cursor {
  position: fixed; inset: 0; z-index: 99999;
  pointer-events: none;
  visibility: hidden;
}
.pixel-cursor div { position: absolute; top: 0; left: 0; will-change: transform; }
.has-pixel-cursor, .has-pixel-cursor * { cursor: none !important; }
html:has(dialog[open]) .pixel-cursor { display: none; }
html:has(dialog[open]) * { cursor: auto !important; }

/* ----------------------------------------------------------------- dialog */

.privacy-dialog {
  width: min(640px, calc(100% - 32px)); max-height: calc(100% - 64px);
  padding: 40px; border: 1px solid var(--rule); border-radius: 0;
  background: #101012; color: var(--white);
}
.privacy-dialog::backdrop { background: rgba(7, 7, 7, 0.8); }
.privacy-dialog h2 { font-size: 36px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; margin-bottom: 24px; }
.privacy-dialog h3 { font-size: 13px; font-weight: 500; letter-spacing: -0.02em; margin: 24px 0 6px; }
.privacy-dialog p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.privacy-dialog a { color: var(--white); }
.privacy-dialog .btn { margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}