/* 35 · The studio, set in Fraunces and Jost
   The showreel big beside the name; then the clients and press, the work (one of each kind),
   the proof, the trailer ("In a world…"), the Dor Awards and its judges, and the brief.
   Lots of black between. No word is left alone on a line: headings balance, sentences wrap pretty.
   Black, warm white, one gold. Type: Jost (labels and every sentence), Fraunces (display). */

:root {
  --black: #040404;
  --ink: #f5f0e6;
  --soft: rgba(245, 240, 230, .9);
  --dim: rgba(245, 240, 230, .74);
  --line: rgba(245, 240, 230, .18);
  --gold: #C9A24B;

  --m: clamp(16px, 3.75vw, 96px);        /* page margin */
  --g: clamp(12px, 1.25vw, 32px);        /* gutter */
  --nav-h: clamp(64px, 4.4vw, 112px);
  --gap: clamp(84px, 6.4vw, 164px);      /* between sections */
  --step: clamp(30px, 2.6vw, 66px);      /* inside one section */

  --text: clamp(17px, calc(10px + .52vw), 24px);   /* every sentence: 23px at 2560 */
  --lead: clamp(19px, calc(9px + .74vw), 29px);    /* the larger sentences: 28px at 2560 */
  --label: clamp(15px, calc(10px + .26vw), 17px);  /* small capitals: 16.6px at 2560 */

  --sans: 'Jost', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --serif: 'Fraunces', 'Cooper Black', Georgia, serif;

  /* halation: the warm bloom white type leaves on film */
  --halo: 0 0 1px rgba(255, 244, 225, .4), 0 0 .55em rgba(255, 230, 196, .16);
  --halo-big: 0 0 2px rgba(255, 244, 225, .55), 0 0 .14em rgba(255, 232, 200, .3), 0 0 .46em rgba(255, 218, 176, .15);
  --radius: clamp(3px, .3vw, 8px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); overflow-x: clip; -webkit-text-size-adjust: 100%; }
html.is-player { overflow: hidden; }
body {
  margin: 0; background: var(--black); color: var(--ink);
  font: 400 var(--text)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, dt, figure, blockquote, fieldset, legend { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; border: 0; }
ul, ol { list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: #000; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

.nb { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--m); top: -100px; z-index: 90; padding: 12px 18px; background: var(--ink); color: #000; font: 500 15px/1 var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }

/* fine grain over everything */
.grain {
  position: fixed; left: -20%; top: -20%; width: 140%; height: 140%;
  z-index: 70; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.5 0 0 0 -.38'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.motion .grain { animation: grain 1.2s steps(1) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-4%, 3%); } 33% { transform: translate(3%, -5%); }
  50% { transform: translate(-6%, -2%); } 67% { transform: translate(5%, 4%); } 83% { transform: translate(-2%, 6%); }
}

/* ---------- shared pieces ---------- */
.label { font: 500 var(--label)/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); text-wrap: balance; }
.label--gold { color: var(--gold); }
.sub { margin-top: .7em; font-size: var(--text); line-height: 1.5; color: var(--dim); text-wrap: balance; }
.lead { font-size: var(--lead); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.body { font-size: var(--text); line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.keys { margin-top: var(--step); display: flex; flex-wrap: wrap; gap: .8em; }
.link {
  display: inline-flex; align-items: center; gap: .6em; min-height: 44px;
  font: 500 var(--label)/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.link:hover { color: #fff; text-shadow: var(--halo); }

.key {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: clamp(46px, 2.1vw, 56px); padding: .2em 1.4em;
  border: 1px solid rgba(245, 240, 230, .6); background: transparent; color: var(--ink);
  font: 500 var(--label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.key:hover, .key[aria-pressed="true"] { background: var(--ink); color: #000; border-color: var(--ink); }
.key--solid { border-color: var(--ink); }
.key--gold { border-color: var(--gold); }
.key--gold:hover { background: var(--gold); border-color: var(--gold); color: #000; }

.card-title {
  font: italic 600 clamp(40px, 3.5vw, 90px)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -.012em; text-wrap: balance; text-shadow: var(--halo-big);
}
.label + .card-title { margin-top: .22em; }

/* ---------- navigation: "Try Another Door", the logo and five links ---------- */
.nav {
  --nav-gap: clamp(16px, 2vw, 52px);
  position: fixed; left: 0; right: 0; top: 0; z-index: 40; height: var(--nav-h);
  padding: 0 var(--m); display: flex; align-items: center; gap: var(--nav-gap);
  background: linear-gradient(to bottom, #040404 0%, #040404 70%, rgba(4, 4, 4, 0) 100%);
}
/* the way back to the four doors: its own small control, a hairline away from the logo */
.nav__door {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: .9em; min-height: 44px;
  font: 500 var(--label)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; color: var(--dim); transition: color .2s;
}
.nav__door::after { content: ''; position: absolute; top: 50%; right: calc(var(--nav-gap) / -2); width: 1px; height: clamp(28px, 1.6vw, 42px); transform: translateY(-50%); background: var(--line); }
.nav__door img { flex: none; width: auto; height: clamp(28px, 1.35vw, 34px); transform-origin: 22% 50%; transition: transform .45s cubic-bezier(.3, .7, .2, 1), filter .3s; }
.nav__door-txt { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .55em; transition: text-decoration-color .2s; }
.nav__door-txt--short { display: none; }
.nav__door:hover, .nav__door:focus-visible { color: #fff; text-shadow: var(--halo); }
.nav__door:hover .nav__door-txt, .nav__door:focus-visible .nav__door-txt { text-decoration-color: var(--gold); }
.nav__door:hover img, .nav__door:focus-visible img { filter: drop-shadow(0 0 5px rgba(201, 162, 75, .65)); }
@media (prefers-reduced-motion: no-preference) {
  /* the little door swings open on its hinge */
  .nav__door:hover img, .nav__door:focus-visible img { transform: perspective(70px) rotateY(-28deg); }
}
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; flex: none; }
.nav__logo img { height: clamp(40px, 2.6vw, 66px); width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 46px); }
.nav__links a:not(.key) {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  font: 500 var(--label)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--dim);
}
.nav__links a:not(.key):hover { color: #fff; text-shadow: var(--halo); }
.nav__cta { margin-left: clamp(0px, .6vw, 16px); }
/* the page you are on: full white, with a gold hairline under it (Contact: a faint gold fill) */
.nav__links a[aria-current="page"]:not(.key) {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 1px; text-underline-offset: .75em;
}
.nav__cta[aria-current="page"] { background: rgba(201, 162, 75, .18); }
.nav__cta[aria-current="page"]:hover { background: var(--gold); }

/* ---------- the opening: the showreel, and the name beside it ---------- */
.open {
  --film-w: min(63vw, calc((min(100svh, 1400px) - var(--nav-h) - clamp(170px, 8.6vw, 230px)) * 16 / 9));
  min-height: clamp(560px, 100svh, 1400px);
  padding: calc(var(--nav-h) + clamp(4px, .6vw, 16px)) var(--m) clamp(64px, 5.2vw, 96px);
  display: grid; grid-template-columns: var(--film-w) minmax(0, 1fr); column-gap: clamp(28px, 3.2vw, 84px);
  align-items: center;
}
.film { min-width: 0; }
.slate { display: flex; align-items: baseline; gap: 1.1em; margin-bottom: clamp(10px, .7vw, 18px); font: 500 var(--label)/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.slate b { font-weight: 500; color: var(--ink); }
.slate::before { content: ''; width: .62em; aspect-ratio: 1 / 1.16; border-radius: 50%; background: var(--gold); box-shadow: 0 0 .8em rgba(201, 162, 75, .55); align-self: center; }
.screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(245, 240, 230, .14), 0 0 9vw rgba(255, 224, 186, .08);
}
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__keys { margin-top: clamp(12px, .9vw, 22px); display: flex; gap: .8em; }
.key--reel { min-width: 9.5em; }

.card { min-width: 0; container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; }
/* the name, in the heavy italic, with the optical-printer echo stepping away from it */
.name {
  position: relative; isolation: isolate; width: min-content;
  font: italic 800 23.5cqi/.92 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -.02em; padding: 0 .08em .08em 0; color: var(--ink);
  text-shadow: 0 0 2px rgba(255, 244, 225, .6), 0 0 .07em rgba(255, 232, 200, .32), 0 0 .3em rgba(255, 214, 170, .14);
}
.name::before, .name::after {
  content: attr(data-text); content: attr(data-text) / "";
  position: absolute; inset: 0; padding: inherit;
  color: var(--black); text-shadow: none; pointer-events: none;
  -webkit-text-stroke: clamp(1px, .1vw, 2.5px) rgba(245, 240, 230, .62);
}
.name::before { transform: translate(.02em, .026em); z-index: -1; }
.name::after { transform: translate(.04em, .052em); z-index: -2; -webkit-text-stroke-color: rgba(245, 240, 230, .34); }
.card__claim {
  align-self: stretch; margin-top: clamp(20px, 1.8vw, 46px); padding-top: clamp(16px, 1.4vw, 36px); border-top: 1px solid var(--line);
  font: 700 clamp(26px, 2.2vw, 58px)/1.06 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -.015em; text-wrap: balance; text-shadow: var(--halo-big);
}
.card__line { margin-top: clamp(12px, 1vw, 26px); max-width: 24em; font-size: var(--text); line-height: 1.5; color: var(--dim); text-wrap: pretty; }
.card__keys { margin-top: clamp(18px, 1.6vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1.6em; }
.motion .card { animation: fadeup 2.2s ease .4s backwards; }
@keyframes fadeup { from { opacity: 0; } }

/* ---------- a section: one idea per screen, lots of black ---------- */
.sec { position: relative; padding: var(--gap) var(--m) 0; }
.sec::before { content: ''; position: absolute; left: var(--m); right: var(--m); top: calc(var(--gap) * .45); height: 1px; background: linear-gradient(to right, transparent, var(--line) 25%, var(--line) 75%, transparent); }
.head { text-align: center; margin-bottom: calc(var(--step) * 1.2); }

/* the work: APEX first and largest */
.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; }
.feature__txt { grid-column: 1 / span 5; padding-right: clamp(0px, 2vw, 60px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.feature__name {
  margin: .08em 0 .14em;
  font: 900 clamp(96px, 8.6vw, 224px)/.9 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: .01em; text-shadow: var(--halo-big);
}
.feature__txt .lead { margin-top: .9em; max-width: 21em; text-wrap: balance; }
.feature__txt .keys { justify-content: center; }
/* every work picture is shown whole, 16:9, in full colour: the thumbnails carry their own
   lettering, so no crop and no grey. A gold ring answers the pointer. */
.feature__pic { grid-column: 6 / -1; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s ease; }
.feature__pic img { width: 100%; height: 100%; object-fit: cover; }
.feature__pic:hover, .piece__pic:hover, .piece__pic:focus-visible { box-shadow: 0 0 0 2px var(--gold), 0 0 2.4vw rgba(201, 162, 75, .18); }

/* the other three kinds: each frame is a player. The play key sits low on the left, on the
   player bar, so the lettering in the middle of each thumbnail stays clear. */
.pieces { margin-top: calc(var(--gap) * .7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--step) clamp(20px, 2.4vw, 64px); }
.piece { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.piece__pic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: clamp(14px, 1.1vw, 28px); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s ease; cursor: pointer; }
.piece__pic:focus-visible { outline: 0; }
.piece__pic img { width: 100%; height: 100%; object-fit: cover; transition: filter .35s ease; }
.piece__pic:hover img, .piece__pic:focus-visible img { filter: brightness(1.12) saturate(1.04); }
/* a soft shade under the bar, so it reads on any picture */
.piece__pic::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to top, rgba(4, 4, 4, .66), rgba(4, 4, 4, 0)); pointer-events: none; }
.piece__bar {
  --pad: clamp(10px, .75vw, 20px);
  position: absolute; z-index: 1; left: var(--pad); right: calc(var(--pad) * 1.3); bottom: var(--pad);
  display: flex; align-items: center; gap: clamp(10px, .8vw, 20px);
}
.piece__play {
  flex: none; display: grid; place-items: center; width: clamp(50px, 3.5vw, 90px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(4, 4, 4, .5); box-shadow: inset 0 0 0 1px rgba(245, 240, 230, .9), 0 0 1.4em rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s, box-shadow .2s;
}
.piece__play i { width: 0; height: 0; margin-left: .2em; border-style: solid; border-width: .52em 0 .52em .86em; border-color: transparent transparent transparent var(--ink); font-size: clamp(15px, 1.04vw, 26px); transition: border-color .2s; }
.piece__pic:hover .piece__play, .piece__pic:focus-visible .piece__play { background: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 1.6em rgba(201, 162, 75, .55); }
.piece__pic:hover .piece__play i, .piece__pic:focus-visible .piece__play i { border-left-color: #000; }
/* the track: a hairline with the gold playhead waiting at the start */
.piece__track { position: relative; flex: 1; min-width: 0; height: 2px; background: rgba(245, 240, 230, .42); transition: background .2s; }
.piece__track::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); transform: translate(-30%, -50%); box-shadow: 0 0 8px rgba(201, 162, 75, .7); }
.piece__pic:hover .piece__track, .piece__pic:focus-visible .piece__track { background: rgba(245, 240, 230, .75); }
.piece__tag { flex: none; font: 500 var(--label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-shadow: 0 0 6px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: no-preference) {
  .piece__pic img { transition: filter .35s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .piece__pic:hover img, .piece__pic:focus-visible img { transform: scale(1.025); }
}
.piece__name { margin: .3em 0 0; font: italic 600 clamp(28px, 1.85vw, 48px)/1.08 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; text-wrap: balance; text-shadow: var(--halo); }
.piece__line { margin-top: .5em; font-size: var(--text); line-height: 1.5; color: var(--soft); max-width: 26em; text-wrap: pretty; }
.piece__links { margin-top: auto; padding-top: 1.3em; display: flex; flex-wrap: wrap; align-items: center; gap: .7em; }
.piece__links .key { padding: .2em 1.25em; }
.key .tri { width: 0; height: 0; border-style: solid; border-width: .42em 0 .42em .68em; border-color: transparent transparent transparent var(--gold); transition: border-color .2s; }
.key:hover .tri { border-left-color: #000; }

/* ---------- proof: the numbers, then the quotes ---------- */
.figures { display: grid; grid-template-columns: 1.45fr 1fr 1fr; text-align: center; align-items: end; }
.figure strong { display: block; font: 800 clamp(48px, 4.7vw, 122px)/.95 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.02em; text-shadow: var(--halo-big); }
.figure .label { display: block; margin-top: 1em; }
.pairs { margin: calc(var(--step) * 1.4) auto 0; max-width: 1500px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 1.8vw, 46px); align-items: baseline; padding: .5em 0; }
.pair dt { text-align: right; font: 500 var(--label)/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.pair dd { max-width: 27em; text-align: left; font-size: var(--lead); line-height: 1.35; text-wrap: pretty; text-shadow: var(--halo); }
.pair dd a { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .25em; white-space: nowrap; }
.pair dd a:hover { color: #fff; }

.said { position: relative; margin-top: calc(var(--step) * 1.8); padding-top: calc(var(--step) * 1.8); }
.said::before { content: ''; position: absolute; top: 0; left: 50%; width: clamp(60px, 5vw, 128px); height: 1px; transform: translateX(-50%); background: var(--gold); }
.rogan { text-align: center; }
.rogan blockquote {
  margin: 0 auto; max-width: 14em;
  font: italic 800 clamp(44px, 5vw, 130px)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -.02em; text-wrap: balance; text-shadow: var(--halo-big);
}
.rogan blockquote::before { content: '\201C'; }
.rogan blockquote::after { content: '\201D'; }
.rogan figcaption { margin-top: 1.2em; color: var(--gold); letter-spacing: .36em; }
/* five quotes at a comfortable measure: five across at 2560, three over two below that,
   the shorter row centred; never more than about 26em a line */
.quotes {
  --qgap: clamp(24px, 2.6vw, 68px);
  margin-top: calc(var(--step) * 1.5); padding-top: calc(var(--step) * 1.1); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--step) var(--qgap);
}
.quote { flex: 0 1 calc((100% - 4 * var(--qgap)) / 5); min-width: 0; }
.quote blockquote { max-width: 26em; font-size: var(--text); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.quote blockquote::before { content: '\201C'; }
.quote blockquote::after { content: '\201D'; }
.quote figcaption { margin-top: 1em; display: grid; gap: .3em; }
.quote__name { font: 500 var(--label)/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.quote__role { font: 400 var(--label)/1.4 var(--sans); color: var(--dim); text-wrap: balance; }

/* the logo rows: two slow marquees running opposite ways, edge to edge, fading into the
   black at both ends. Each list is written twice; the track slides one list's width and
   starts again, so the copy carries on without a seam. The logos are sized in em by the
   script, against this row's type size, so they grow with the window. */
.sec--logos { text-align: center; }
.logos__h { margin-top: calc(var(--step) * 1.5); }
.marquee {
  --fade: clamp(40px, 9vw, 240px);
  --space: 5.5em;                                   /* clear black between two logos */
  position: relative; margin: calc(var(--step) * .55) calc(-1 * var(--m)) 0; padding: .5em 0;
  overflow: hidden; overflow: clip;                 /* clip: a focused link never scrolls the row */
  font-size: clamp(13px, 1vw, 24px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.marquee--press { --space: 5em; }
.marquee__track { display: flex; width: max-content; }
.logos { flex: none; display: flex; align-items: center; gap: var(--space); padding-right: var(--space); }
.logos li { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: drift var(--dur, 48s) linear infinite; will-change: transform; }
  .marquee--press .marquee__track { animation-direction: reverse; }
  .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
}
@keyframes drift { to { transform: translateX(-50%); } }

.mark { display: flex; align-items: center; justify-content: center; height: 3.6em; }
.mark img { flex: none; max-width: none; width: auto; height: 2.4em; filter: brightness(0) invert(1); opacity: .92; }
/* the press logos are links: dimmer at rest, and on pointer or keyboard focus the mark lights
   up full white with the warm bloom, the name underlines in gold and the arrow leans out */
.logos--press a { display: flex; flex-direction: column; align-items: center; gap: .35em; padding: 0 .2em 4px; text-decoration: none; cursor: pointer; }
.logos--press .mark img { opacity: .7; transition: opacity .2s, filter .2s; }
.logos--press a:hover .mark img, .logos--press a:focus-visible .mark img { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 .3em rgba(255, 230, 196, .55)); }
.logos--press .cap { display: inline-flex; align-items: center; gap: .35em; min-height: 32px; font: 400 var(--label)/1.3 var(--sans); color: var(--dim); white-space: nowrap; transition: color .2s; }
.cap__name { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .32em; transition: text-decoration-color .2s; }
.cap__go { display: inline-block; transition: transform .2s ease, color .2s; }
.logos--press a:hover .cap, .logos--press a:focus-visible .cap { color: #fff; }
.logos--press a:hover .cap__name, .logos--press a:focus-visible .cap__name { text-decoration-color: var(--gold); }
.logos--press a:hover .cap__go, .logos--press a:focus-visible .cap__go { color: var(--gold); transform: translate(.18em, -.18em); }

/* reduced motion: the logos stand still, centred and wrapping in even rows (the clients
   seven and seven, the press eight or four and four), and the copy is not shown */
@media (prefers-reduced-motion: reduce) {
  .marquee { margin-left: 0; margin-right: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { display: block; width: auto; }
  .logos { flex-wrap: wrap; justify-content: center; gap: 1.4em 0; padding-right: 0; }
  .logos li { display: flex; justify-content: center; flex-basis: calc(100% / 7); }
  .logos--press li { flex-basis: 12.5%; }
  .logos--press .cap { white-space: normal; text-wrap: balance; }
  .logos[aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1500px) {
  .logos--press li { flex-basis: 25%; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1100px) {
  .logos li { flex-basis: 25%; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 560px) {
  .logos li, .logos--press li { flex-basis: 50%; }
}

/* ---------- about: "In a world…", a run of trailer title cards ---------- */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.about__side { grid-column: 1 / span 5; }
.about__main { grid-column: 7 / -1; text-align: center; }
.about__pic { overflow: hidden; aspect-ratio: 1456 / 816; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.about__pic img { width: 100%; height: 100%; object-fit: cover; }
.facts { margin-top: calc(var(--step) * 1.1); }
/* the five services: three on the first line, two on the second, gold points between */
.offer__list { margin-top: .5em; font: italic 500 clamp(24px, 1.6vw, 42px)/1.4 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; text-shadow: var(--halo); }
.offer__list li { display: inline; white-space: nowrap; }
.offer__list li:not(:last-child)::after { content: ''; display: inline-block; width: .2em; height: .2em; margin: 0 .45em 0 .7em; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.offer__list li:nth-child(3)::after { content: '\A'; display: inline; width: auto; height: auto; margin: 0; background: none; white-space: pre; }
.facts .body { margin-top: .8em; max-width: 30em; }
/* each line is its own card: large, centred, black between, like the cards cut into a trailer */
.trailer { --cut: clamp(26px, 2vw, 52px); margin-top: var(--step); display: grid; gap: var(--cut); }
.trailer li {
  position: relative; margin: 0 auto; max-width: 22em;
  font: italic 600 clamp(28px, 2vw, 52px)/1.14 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -.01em; text-wrap: balance; text-shadow: var(--halo-big);
}
/* a short gold cut between cards, in the middle of the black */
.trailer li + li::before { content: ''; position: absolute; left: 50%; top: calc(var(--cut) / -2); width: 1.4em; height: 1px; transform: translateX(-50%); background: rgba(201, 162, 75, .55); }
.trailer__rated span { display: inline-block; padding: .2em .7em .26em; border: 1px solid var(--gold); color: var(--gold); text-shadow: none; }
.about__more { margin-top: var(--step); }

/* ---------- the dor awards: the name beside the judges ---------- */
.awards-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.awards { grid-column: 1 / span 3; padding-right: clamp(0px, 1.4vw, 36px); }
.awards { container-type: inline-size; }
.awards__name { margin: .15em 0 .25em; font: 800 min(clamp(46px, 4.3vw, 112px), 12.6cqi)/.98 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.02em; text-wrap: balance; text-shadow: var(--halo-big); }
.awards__aside { margin-top: calc(var(--step) * .7); }
.awards__aside .keys { flex-direction: column; align-items: stretch; margin-top: calc(var(--step) * .8); }
.awards__aside .key { white-space: normal; text-align: center; line-height: 1.3; padding: .6em 1.2em; }
.judges-wrap { grid-column: 4 / -1; }
.judges__label { color: var(--ink); }
/* ten judges: five over five on a desktop, two by five on a phone */
.judges { margin-top: calc(var(--step) * .6); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--step) * .9) var(--g); }
.judge { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; container-type: inline-size; }
.judge__pic { position: relative; display: block; width: 100%; aspect-ratio: 8 / 7; overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); background: #111; }
.judge__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; filter: grayscale(1) contrast(1.1) brightness(.9); transition: filter .4s ease; }
/* pointing at a judge (picture or name), or focus inside one, brings the colour back */
.judge:hover .judge__pic img, .judge:focus-within .judge__pic img { filter: none; }
.judge__pic::after { content: ''; position: absolute; inset: clamp(4px, .35vw, 9px); border: 1px solid rgba(201, 162, 75, .6); pointer-events: none; }
/* every name on one line: the size steps down only as far as the longest name needs */
.judge__name { margin-top: .5em; font: italic 700 min(clamp(22px, 1.45vw, 38px), 10.4cqi)/1.05 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.01em; white-space: nowrap; text-shadow: var(--halo-big); }
.judge__role { margin-top: .4em; font-size: clamp(15px, calc(8px + .5vw), 21px); line-height: 1.4; color: var(--soft); text-wrap: balance; }
.judges__more { margin-top: calc(var(--step) * 1.1); padding-top: calc(var(--step) * .7); border-top: 1px solid var(--line); font-size: var(--text); line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.judges__more .label { margin-right: 1em; color: var(--gold); }

/* ---------- contact: start a project ---------- */
.contact {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: calc(var(--step) * 1.4); align-items: end;
  margin-top: calc(var(--gap) * .75); padding: calc(var(--gap) * .7) var(--m) calc(var(--gap) * .8); border-top: 1px solid var(--line);
}
.contact__head { grid-column: 1 / span 6; }
.contact__txt { grid-column: 7 / -1; }
.contact__eyebrow { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.contact__eyebrow:hover { color: #fff; }
.contact__title { margin: .1em 0 0; font: italic 800 clamp(min(58px, 12vw), 6.2vw, 160px)/.92 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.025em; text-wrap: balance; text-shadow: var(--halo-big); }
.contact__txt .lead { max-width: 20em; }
.contact__txt .body { margin-top: .7em; color: var(--dim); }
.contact__mail { margin-top: clamp(18px, 1.6vw, 40px); }
.contact__mail a { display: inline-block; padding: .2em 0; font: 400 clamp(22px, 1.55vw, 40px)/1.2 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: var(--gold); text-shadow: var(--halo); overflow-wrap: anywhere; }
.contact__mail a:hover { color: #fff; }

/* the brief: a form in a fine double frame (a hairline, and a gold one just inside it), five
   numbered steps. 1 and 2 run the full width; 3 and 4 stack on the left, beside 5 and 6, with the send key under 6.
   On the widest screens 1 and 2 also sit side by side, their choices in even rows of three. */
.brief {
  grid-column: 1 / -1; align-self: start; position: relative;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "top top" "need need" "budget budget" "subject name" "words email" "words send";
  gap: calc(var(--step) * 1.1) clamp(24px, 3vw, 80px);
  padding: clamp(26px, 2.6vw, 68px) clamp(26px, 2.8vw, 72px) clamp(30px, 2.8vw, 72px);
  background: rgba(245, 240, 230, .022); box-shadow: 0 0 0 1px var(--line); border-radius: var(--radius);
}
.brief::before { content: ''; position: absolute; inset: clamp(5px, .38vw, 10px); border: 1px solid rgba(201, 162, 75, .32); pointer-events: none; }
.brief > * { position: relative; min-width: 0; }
.brief__top { grid-area: top; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1.4em; padding-bottom: calc(var(--step) * .8); border-bottom: 1px solid var(--line); }
.brief__invite { font: italic 500 clamp(24px, 1.7vw, 44px)/1.2 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--ink); text-wrap: balance; text-shadow: var(--halo); }
.step--need { grid-area: need; }
.step--budget { grid-area: budget; }
.step--subject { grid-area: subject; }
.step--words { grid-area: words; display: flex; flex-direction: column; }
.step--name { grid-area: name; }
.step--email { grid-area: email; }
.brief__send { grid-area: send; }
fieldset.step { min-width: 0; }

/* each step: a gold-ringed number, the name, and a short grey hint */
.step__head { float: left; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .35em 1em; margin-bottom: 1em; }
.step__head + * { clear: both; }
.step__label { display: inline-flex; align-items: center; gap: 1em; cursor: pointer; }
.step__n {
  flex: none; display: inline-grid; place-items: center; width: 2.15em; height: 2.15em; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold); font: italic 600 calc(var(--label) * 1.12)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0;
  transition: background .25s, color .25s, box-shadow .25s;
}
.step__t { font: 500 var(--label)/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.step__help { font: 400 clamp(15px, calc(8px + .5vw), 21px)/1.4 var(--sans); color: var(--dim); }
/* an answered step: its number fills gold */
.step--need:has(input:checked) .step__n, .step--budget:has(input:checked) .step__n,
.step--subject:has(input:not(:placeholder-shown)) .step__n,
.step--words:has(textarea:not(:placeholder-shown)) .step__n, .step--name:has(input:not(:placeholder-shown)) .step__n,
.step--email:has(input:not(:placeholder-shown):valid) .step__n {
  background: var(--gold); color: #000; box-shadow: 0 0 1em rgba(201, 162, 75, .35);
}
/* a step that still needs something: a gentle gold note under it, in the italic, with a small
   gold diamond; the boxes take a gold edge. Nothing red, nothing shouted. */
.step__err {
  clear: both; margin-top: .75em; display: flex; align-items: baseline; gap: .6em;
  font: italic 500 clamp(17px, calc(9px + .5vw), 22px)/1.4 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0;
  color: var(--gold); text-wrap: pretty;
}
.step__err::before { content: ''; flex: none; width: .42em; height: .42em; border: 1px solid var(--gold); transform: translateY(-.12em) rotate(45deg); }
.field[aria-invalid="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(201, 162, 75, .5); }
.step.is-wrong .chip span { border-color: rgba(201, 162, 75, .62); }
.step.is-wrong .step__n { box-shadow: 0 0 0 4px rgba(201, 162, 75, .2); }
.brief .step.step--email.is-wrong .step__n { background: transparent; color: var(--gold); }

/* the choices: each with a small box (pick any) or ring (pick one) that fills gold */
.chips { display: flex; flex-wrap: wrap; gap: .65em; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: .65em; min-height: clamp(48px, 2.4vw, 62px); padding: .2em 1.15em .2em .95em;
  border: 1px solid rgba(245, 240, 230, .34); border-radius: var(--radius); background: rgba(245, 240, 230, .03);
  font-size: var(--text); line-height: 1.2; color: var(--soft); text-align: left;
  transition: background .18s, color .18s, border-color .18s;
}
.chip span::before {
  content: ''; flex: none; width: .82em; height: .82em; border: 1px solid rgba(245, 240, 230, .72); border-radius: 2px;
  transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.chip input[type="radio"] + span::before { border-radius: 50%; }
.chip input:hover + span { border-color: rgba(245, 240, 230, .8); color: var(--ink); background: rgba(245, 240, 230, .06); }
.chip input:hover + span::before { border-color: var(--gold); }
.chip input:checked + span { border-color: var(--gold); color: var(--ink); background: rgba(201, 162, 75, .13); }
.chip input:checked + span::before {
  border-color: var(--gold); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 88% no-repeat;
}
.chip input[type="radio"]:checked + span::before { background: var(--gold); box-shadow: inset 0 0 0 .17em #14120e; }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

/* the two written answers: real boxes, a faint fill and a border, gold when you are in them */
.field {
  display: block; width: 100%; min-height: clamp(52px, 2.6vw, 66px); padding: .62em .85em;
  background: rgba(245, 240, 230, .045); border: 1px solid rgba(245, 240, 230, .36); border-radius: var(--radius);
  color: var(--ink); font: 400 var(--text)/1.45 var(--sans);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
textarea.field { flex: 1; min-height: calc(4 * 1.45em + 1.24em + 2px); resize: vertical; }
.field::placeholder { color: rgba(245, 240, 230, .5); }
.field:hover { border-color: rgba(245, 240, 230, .62); }
.field:focus { outline: 0; border-color: var(--gold); background: rgba(245, 240, 230, .065); box-shadow: 0 0 0 1px var(--gold), 0 0 1.4em rgba(201, 162, 75, .14); }

/* send: the one solid gold key on the page, with a plain true line above it */
.brief__send { display: flex; flex-direction: column; align-items: flex-start; gap: .9em; }
.brief__send .brief__how { font-size: var(--text); }
.brief__status:empty { margin-top: -.9em; }
.brief__status { font: italic 500 clamp(17px, calc(9px + .5vw), 22px)/1.4 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--gold); text-wrap: pretty; }
/* sent: the key glows up and says so, the gold frame brightens, and the thank-you page follows */
.brief::before { transition: border-color .4s ease; }
.brief.is-sent::before { border-color: rgba(201, 162, 75, .95); }
.brief.is-sent .key--send { background: #e2c06d; border-color: #e2c06d; box-shadow: 0 0 3.4em rgba(201, 162, 75, .7); }
.key--send {
  min-height: clamp(60px, 3.3vw, 84px); padding: .2em 2.3em; gap: .8em;
  background: var(--gold); border-color: var(--gold); color: #000; font-weight: 600; font-size: clamp(16px, calc(10px + .34vw), 19px);
  box-shadow: 0 0 2em rgba(201, 162, 75, .2);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.key--send:hover, .key--send:focus-visible { background: #dcb862; border-color: #dcb862; color: #000; box-shadow: 0 0 2.6em rgba(201, 162, 75, .42); }
.brief__how { font: 400 var(--label)/1.5 var(--sans); color: var(--dim); max-width: 40em; text-wrap: pretty; }

/* ---------- newsletter and footer ---------- */
.foot {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--step);
  padding: calc(var(--gap) * .6) var(--m) clamp(90px, 6vw, 120px); border-top: 1px solid var(--line);
}
.news { grid-column: 1 / span 5; }
.news__title { margin-bottom: .3em; font: italic 600 clamp(36px, 2.6vw, 66px)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; text-shadow: var(--halo-big); }
.news__form { margin-top: clamp(16px, 1.4vw, 36px); display: flex; gap: .8em; max-width: 34em; }
.news__form input { flex: 1; min-width: 0; min-height: 48px; padding: .5em 0; background: transparent; border: 0; border-bottom: 1px solid rgba(245, 240, 230, .55); border-radius: 0; color: var(--ink); font: 400 var(--text)/1.2 var(--sans); }
.news__form input::placeholder { color: rgba(245, 240, 230, .62); }
.news__form input:focus { outline: 0; border-bottom-color: var(--gold); }
.news__note, .news__thanks { margin-top: 1em; font-size: var(--text); color: var(--dim); }
.news__thanks { color: var(--ink); }
.foot__col { grid-column: span 2; }
.foot__col:nth-of-type(1) { grid-column: 7 / span 2; }
.foot__col ul { margin-top: .8em; }
.foot__col a { display: inline-flex; align-items: center; min-height: clamp(38px, 2vw, 48px); font-size: var(--text); color: var(--soft); text-decoration: none; }
.foot__col a:hover { color: #fff; text-shadow: var(--halo); }
/* the six networks: gold hairline rings that glow when pointed at */
.social { --ring: clamp(46px, 2.5vw, 64px); display: grid; grid-template-columns: repeat(3, var(--ring)); gap: clamp(10px, .6vw, 16px); }
.foot__col .social { margin-top: 1em; }
.foot__col .social a { justify-content: center; width: var(--ring); height: var(--ring); min-height: 0; border: 1px solid rgba(201, 162, 75, .7); border-radius: 50%; transition: border-color .2s, box-shadow .2s, color .2s; }
.foot__col .social a:hover, .foot__col .social a:focus-visible { border-color: var(--gold); color: #fff; box-shadow: 0 0 1.2em rgba(201, 162, 75, .35); }
.social svg { width: 42%; height: 42%; }
.foot__base {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5em 2.4em; flex-wrap: wrap;
  padding-top: clamp(18px, 1.6vw, 40px); border-top: 1px solid var(--line);
  font: 500 var(--label)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
}
.foot__base p { margin-right: auto; line-height: 1.5; text-wrap: balance; }
.foot__base a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; text-decoration: none; color: var(--ink); }
.foot__logo img { height: clamp(44px, 3vw, 76px); width: auto; }

/* ---------- the player: Lost Between Cuts, over the page ---------- */
.player {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: clamp(12px, 3vw, 72px); background: rgba(4, 4, 4, .95);
}
.player__box { width: min(100%, 1880px, calc((100svh - 2 * clamp(12px, 3vw, 72px) - 90px) * 16 / 9)); }
.player__bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: clamp(10px, .8vw, 20px); }
.player__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em 1em; min-width: 0; }
.player__title b { font: italic 600 clamp(24px, 1.8vw, 46px)/1.1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; text-shadow: var(--halo); }
.player__for { font-size: var(--text); color: var(--dim); }
.player__bar .key { flex: none; }
.player__screen { aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 0 9vw rgba(255, 224, 186, .08); }
.player__screen video { width: 100%; height: 100%; }
.motion .player:not([hidden]) { animation: fadeup .45s ease backwards; }

/* ---------- the widest screens: the brief's first two steps side by side ---------- */
@media (min-width: 1701px) {
  .brief { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "top top" "need budget" "subject name" "words email" "words send"; }
  .brief .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brief .chip { display: flex; }
  .brief .chip span { flex: 1; }
}

/* ---------- narrower windows ---------- */
@media (max-width: 1700px) {
  .quotes { --qgap: clamp(36px, 4vw, 72px); }
  .quote { flex-basis: calc((100% - 2 * var(--qgap)) / 3); max-width: 25em; }
  /* the awards: the name in a row above, the judges across the full width */
  .awards { grid-column: 1 / -1; padding-right: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
  .awards__txt { grid-column: 1 / span 6; }
  .awards__aside { grid-column: 8 / -1; margin-top: 0; }
  .awards__aside .keys { flex-direction: row; align-items: center; }
  .awards__aside .key { white-space: nowrap; }
  .judges-wrap { grid-column: 1 / -1; margin-top: calc(var(--step) * 1.3); }
}
@media (max-width: 1100px) {
  .feature__txt { grid-column: 1 / -1; order: 2; padding: var(--step) 0 0; }
  .feature__pic { grid-column: 1 / -1; }
  .pieces { grid-template-columns: minmax(0, 1fr); }
  .piece { display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: 24px; align-content: start; }
  .piece > :not(.piece__pic) { grid-column: 2; }
  .piece__pic { grid-column: 1; grid-row: 1 / span 6; margin: 0; align-self: start; }
  .piece__links { margin-top: 0; }
  .about__side, .about__main { grid-column: 1 / -1; }
  .about__main { order: -1; margin-bottom: var(--step); }
  .awards__txt, .awards__aside { grid-column: 1 / -1; }
  .awards__aside { margin-top: calc(var(--step) * .6); }
  .contact__head, .contact__txt { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav { --nav-gap: 14px; padding-right: 0; }
  .nav__links { min-width: 0; overflow-x: auto; scrollbar-width: none; gap: 20px; padding-right: var(--m); }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a:not(.key) { flex: none; letter-spacing: .14em; }
  .nav__cta { flex: none; margin-left: 0; padding: .2em .9em; letter-spacing: .14em; min-height: 44px; }
  .nav__door { gap: .7em; letter-spacing: .14em; }
  .open { display: block; min-height: 0; padding-top: calc(var(--nav-h) + 8px); }
  .card { margin-top: 30px; }
  .name { font-size: 22cqi; }
  .card__claim { font-size: clamp(28px, 7.4vw, 48px); }
  .film__keys .key { flex: 1; min-width: 0; }
  .figures { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .figure strong { font-size: clamp(42px, 11.5vw, 80px); }
  .pair { grid-template-columns: minmax(0, 1fr); row-gap: .2em; padding: .75em 0; text-align: center; }
  .pair dt, .pair dd { text-align: center; }
  .quote { flex-basis: 100%; max-width: none; }
  /* the brief: one step under another */
  .brief { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "need" "budget" "subject" "words" "name" "email" "send"; }
  /* the six needs: an even grid, two to a row; the budgets: the three ranges full width,
     then the two short ones side by side */
  .chips--need, .chips--budget { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips--budget .chip:nth-child(-n+3) { grid-column: 1 / -1; }
  .chips--need .chip, .chips--budget .chip { display: flex; }
  .chips--need .chip span, .chips--budget .chip span { flex: 1; padding: .2em .7em; gap: .55em; }
  /* Studio and Work side by side under the sign-up, the rings in one row under them */
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .news, .foot__base { grid-column: 1 / -1; }
  .foot__col, .foot__col:nth-of-type(1) { grid-column: auto; }
  .foot__col--social { grid-column: 1 / -1; }
  .social { --ring: 48px; grid-template-columns: repeat(6, var(--ring)); }
  .foot__base { margin-top: 4px; }
  .news__form { flex-direction: column; align-items: stretch; }
  .player__bar { align-items: flex-start; }
}
@media (max-width: 840px) {
  .nav__door-txt--long { display: none; }
  .nav__door-txt--short { display: inline; }
}
@media (max-width: 800px) {
  .judges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* all five links on one row, Contact included, after the little door: the hero carries the name */
  .nav { --nav-gap: 12px; padding: 0 10px; }
  .nav__logo { display: none; }
  .nav__door { gap: .55em; letter-spacing: .06em; }
  .nav__door::after { display: none; }
  .nav__door img { height: 28px; }
  .nav__links { flex: 1; justify-content: space-between; gap: 4px; overflow: visible; padding-right: 0; }
  .nav__links a:not(.key) { letter-spacing: .02em; }
  .nav__cta { padding: .2em .45em; letter-spacing: .02em; }
}
@media (max-width: 460px) {
  /* the door alone; its name stays on the link for screen readers */
  .nav { --nav-gap: 8px; }
  .nav__door-txt--short { display: none; }
  .nav__door img { height: 26px; }
}
@media (max-width: 460px) {
  /* the choices as a plain list, one to a row, so no name breaks */
  .chips--need, .chips--budget { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 400px) {
  .nav { --nav-gap: 6px; }
  .nav__links a:not(.key), .nav__cta { font-size: 14px; letter-spacing: 0; }
}
@media (max-width: 380px) {
  .nav__links a:not(.key), .nav__cta { font-size: 13.5px; }
  .nav__cta { padding: .2em .38em; }
}
@media (max-width: 560px) {
  .piece { display: flex; }
  .piece__pic { margin-bottom: 14px; }
  .piece__links { margin-top: 0; gap: 10px; }
  .piece__links .key { padding: .2em .95em; letter-spacing: .14em; }
  .offer__list li { display: block; }
  .offer__list li:not(:last-child)::after { display: none; }
  .awards__aside .keys { flex-direction: column; align-items: stretch; }
  .awards__aside .key { white-space: normal; }
  .brief { padding: 24px 16px 26px; }
  .brief__send { align-items: stretch; }
  .key--send { padding: .2em 1em; }
  /* Rogan's line in three lines, "fucking incredible!" kept together on the last */
  .rogan blockquote { font-size: clamp(24px, 7.6vw, 44px); }
}