/* ==========================================================================
   MAX BROENINK — ALLROUND CREATIVE
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --ink:        #0A0A0A;
  --ink-soft:   #111213;
  --paper:      #F2F0EC;
  --muted:      #85817A;
  --muted-dim:  #4A4844;
  --line:       rgba(242, 240, 236, 0.13);
  --line-soft:  rgba(242, 240, 236, 0.07);

  --pad:        clamp(18px, 4vw, 56px);
  --header-h:   clamp(58px, 6vw, 76px);

  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:    cubic-bezier(0.65, 0, 0.35, 1);
  /* Slight overshoot, for the language pill. */
  --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: "Inter Tight", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv05";
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--paper); color: var(--ink); }

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */

/* Oversized display caps — the site's primary voice. */
.display {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.88;
  font-size: clamp(2.6rem, 9vw, 9.5rem);
}
.display--md { font-size: clamp(2.1rem, 6vw, 5.4rem); }
.display--sm { font-size: clamp(1.7rem, 4vw, 3.2rem); letter-spacing: -0.03em; line-height: 0.95; }

/* Wide-tracked small caps — every label, tag and piece of metadata. */
.label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  line-height: 1.2;
}
.label--paper { color: var(--paper); }

/* Long-form reading text. */
.prose {
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.62;
  letter-spacing: -0.011em;
  color: rgba(242, 240, 236, 0.78);
}
.prose p + p { margin-top: 1.2em; }

.lede {
  font-size: clamp(1.25rem, 2.4vw, 2.05rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { padding-inline: var(--pad); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-block: clamp(2rem, 4vw, 3.25rem) 1.1rem;
}

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--pad);
  transition: transform 0.5s var(--ease);
}
.header.is-hidden { transform: translateY(-105%); }

/* The header floats over video on the home and project pages, and that video
   can be bright. This keeps the type readable without a solid bar. */
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--header-h) * 2.2);
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0));
  pointer-events: none;
  z-index: -1;
}

.wordmark {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.wordmark span { color: var(--muted); font-weight: 400; }

.nav { display: flex; gap: clamp(1.1rem, 2.6vw, 2.4rem); align-items: center; }
.nav a {
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  position: relative;
  padding-block: 0.35rem;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.1rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { opacity: 1; }

/* --------------------------------------------------------------------------
   6. SHOWREEL HERO
   -------------------------------------------------------------------------- */
.reel {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.reel__media { position: absolute; inset: 0; }
.reel__media video,
.reel__media img { width: 100%; height: 100%; object-fit: cover; }
/* Tuned to hold white type over bright footage as well as dark: heavy at the
   bottom where the headline sits, moderate at the top behind the header, and
   close to clear through the middle so the image still reads. */
.reel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.95) 0%,
    rgba(10, 10, 10, 0.78) 20%,
    rgba(10, 10, 10, 0.32) 46%,
    rgba(10, 10, 10, 0.14) 68%,
    rgba(10, 10, 10, 0.58) 100%
  );
}

.reel__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: var(--pad);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.reel__title { max-width: 15ch; }
.reel__title em {
  font-style: normal;
  display: block;
  color: var(--muted);
}
.reel__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.reel__foot p { max-width: 34ch; }

.reel__sound {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.55rem 1rem;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.reel__sound:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.reel__sound i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: block;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.reel__sound.is-on i { opacity: 1; }

.scroll-cue {
  position: absolute;
  right: var(--pad);
  top: 50%;
  z-index: 2;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
}
.scroll-cue span { display: inline-block; animation: cue 2.6s var(--ease-io) infinite; }
@keyframes cue {
  0%, 100% { transform: translateX(0); opacity: 0.45; }
  50%      { transform: translateX(10px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   7. PROJECT INDEX — asymmetric grid, video plays inside its own tile
   -------------------------------------------------------------------------- */
.index { padding-inline: var(--pad); position: relative; z-index: 2; }

.index__list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 1.8vw, 1.75rem);
  row-gap: clamp(2rem, 3.6vw, 3.75rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
}

/* Three up, every tile the same size. For two up, use `span 6`;
   for four, `span 3` — the grid is 12 columns. */
.card { grid-column: span 4; display: block; }

.card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-soft);
}
.card__poster,
.card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.5s var(--ease);
}
.card__video { opacity: 0; }

/* The poster only steps aside once the video is actually painting frames,
   so a slow connection never shows a black rectangle. */
.card.is-playing .card__video { opacity: 1; }
.card.is-playing .card__poster { opacity: 0; }

.card:hover .card__poster,
.card:hover .card__video { transform: scale(1.035); }

.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0) 45%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.card:hover .card__media::after { opacity: 1; }

/* -------------------------------------------------------- tile metadata */
.card__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.15rem 1rem;
  padding-top: clamp(0.85rem, 1.4vw, 1.15rem);
}

.card__num,
.card__year {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.45s var(--ease);
}
.card__year { text-align: right; }

.card__title {
  grid-column: 1 / -1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: clamp(1.15rem, 1.75vw, 1.9rem);
  margin-block: 0.3rem 0.35rem;
}

.card__client,
.card__cat {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.45s var(--ease);
}
.card__cat { text-align: right; }

.card:hover .card__num,
.card:hover .card__year,
.card:hover .card__client,
.card:hover .card__cat { color: var(--paper); }

/* --------------------------------------------------------------------------
   8. CLIENT LOGOS OVER VIDEO
   -------------------------------------------------------------------------- */

/* Shared treatments. Dark logos on transparent grounds go "mono"; logos that
   are already light go "plain"; anything with an opaque coloured background
   (or brand rules against recolouring) gets a "plate". */
.logo[data-treatment="mono"] img { filter: brightness(0) invert(1); }
.logo[data-treatment="plate"] {
  background: var(--paper);
  padding: 0.5rem 0.7rem;
  border-radius: 2px;
}

.card__logo {
  position: absolute;
  left: clamp(0.9rem, 1.4vw, 1.4rem);
  bottom: clamp(0.9rem, 1.4vw, 1.4rem);
  z-index: 3;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease) 0.08s, transform 0.5s var(--ease) 0.08s;
}
.card:hover .card__logo { opacity: 1; transform: translateY(0); }

/* A tile still waiting on its poster and preview keeps the logo showing,
   centred, so the panel reads as the client rather than as a blank. */
.card--bare .card__logo {
  opacity: 1;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
}
.card--bare:hover .card__logo { transform: translate(-50%, 50%); }
.card--bare .card__logo img {
  max-height: clamp(48px, 5.5vw, 90px);
  max-width: clamp(140px, 17vw, 260px);
}
/* --logo-scale nudges an individual mark: compact, squarer logos read small
   next to wide wordmarks when both are capped the same way. Set per project
   via logoScale; defaults to 1. */
.card__logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: calc(clamp(32px, 3.2vw, 50px) * var(--logo-scale, 1));
  max-width: calc(clamp(96px, 10vw, 150px) * var(--logo-scale, 1));
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  padding-inline: var(--pad);
  padding-block: clamp(3.5rem, 8vw, 8rem) clamp(1.25rem, 2vw, 2rem);
  border-top: 1px solid var(--line);
  margin-top: clamp(4rem, 10vw, 10rem);
}
/* Without the call to action the links start right under the rule. */
.footer[data-footer-cta="off"] { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.footer__cta { display: block; padding-bottom: clamp(2rem, 5vw, 4rem); }
.footer__cta .display--md { transition: opacity 0.4s var(--ease); }
.footer__cta:hover .display--md { opacity: 0.55; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.footer__col h4 { margin-bottom: 0.9rem; }
.footer__col li + li { margin-top: 0.45rem; }
.footer__col a {
  font-size: 0.875rem;
  color: rgba(242, 240, 236, 0.7);
  transition: color 0.3s var(--ease);
}
.footer__col a:hover { color: var(--paper); }

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------------------
   11. INTERIOR PAGES — shared
   -------------------------------------------------------------------------- */
.page-head {
  padding-inline: var(--pad);
  padding-top: calc(var(--header-h) + clamp(3.5rem, 11vw, 9rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.page-head__meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* Two-column editorial block: label rail on the left, content on the right. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-inline: var(--pad);
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line);
}
.split__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }

.deflist { border-top: 1px solid var(--line); }
.deflist div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line-soft);
}
.deflist dd { margin: 0; font-size: 0.875rem; letter-spacing: -0.005em; }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-list li {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.45rem 0.9rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(242, 240, 236, 0.75);
}

/* --------------------------------------------------------------------------
   12. PROJECT PAGE
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------- opener */
/* The film, 16:9, inset to the page margins and starting below the header,
   with the title block set inside its frame at the top-left. A scrim
   darkens that corner so white type holds over any footage. */
.opener {
  --ar-w: 16;
  --ar-h: 9;
  position: relative;
  aspect-ratio: var(--ar-w) / var(--ar-h);
  /* Whichever is smaller: the page width, or the width implied by capping
     the height at 82vh. A 4:3 film would otherwise run taller than the
     screen at full page width. */
  width: min(calc(100% - var(--pad) * 2), calc(82vh * var(--ar-w) / var(--ar-h)));
  margin-inline: auto;
  margin-top: calc(var(--header-h) + clamp(0.75rem, 2vw, 1.5rem));
}
.opener::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0) 52%),
    linear-gradient(to right,  rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0) 60%);
}
.opener__text {
  position: absolute;
  top: clamp(1.25rem, 3vw, 2.75rem);
  left: clamp(1.25rem, 3vw, 2.75rem);
  right: clamp(1.25rem, 3vw, 2.75rem);
  z-index: 3;
  pointer-events: none;   /* clicks reach the player underneath */
}
.opener__title {
  font-size: clamp(2rem, 5.2vw, 5.2rem);
  margin-block: 0.9rem 1rem;
  max-width: 14ch;
}
.opener__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  max-width: 34ch;
}

.hero {
  position: absolute;
  inset: 0;
  background: var(--ink-soft);
  overflow: hidden;
}
.hero video, .hero img, .hero iframe {
  width: 100%; height: 100%; object-fit: cover; border: 0;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.75), rgba(10,10,10,0) 55%);
  pointer-events: none;
}
.hero__logo {
  position: absolute;
  right: var(--pad); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 2;
}
/* Over a player the bottom edge belongs to the controls, so the logo moves
   up out of the way. An embedded player carries its own branding and UI —
   overlaying a second logo on it reads as clutter, so there it goes entirely. */
.hero.has-video .hero__logo { bottom: auto; top: clamp(1rem, 2.5vw, 2rem); }
.hero.has-embed .hero__logo { display: none; }
.hero__logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: calc(clamp(40px, 4.5vw, 72px) * var(--logo-scale, 1));
  max-width: calc(clamp(140px, 16vw, 240px) * var(--logo-scale, 1));
}
.hero__logo[data-treatment="plate"] { padding: 0.6rem 0.85rem; }

/* Nothing but the logo yet: centre it, as the bare index tile does. */
.hero.is-bare .hero__logo {
  right: auto; bottom: auto;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.hero.is-bare .hero__logo img {
  max-height: clamp(70px, 9vw, 150px);
  max-width: clamp(200px, 26vw, 420px);
}

.stills { padding-inline: var(--pad); display: grid; gap: clamp(0.5rem, 1.2vw, 1rem); }
.stills img { width: 100%; height: auto; display: block; }
.stills figure { margin: 0; }
.stills figcaption { margin-top: 0.85rem; max-width: 46ch; }
.stills--pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
/* Captioned stills sit in one row. Every frame is given the same HEIGHT and
   takes whatever width its own aspect needs — so nothing is cropped and the
   tops and bottoms still line up. A portrait frame simply reads narrower
   than a landscape one. No JS, so orientation costs no layout shift. */
.stills--flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.stills--flow figure { width: auto; }
.stills--flow img {
  height: clamp(200px, 25vw, 380px);
  width: auto;
  max-width: 100%;
}
.stills--flow figcaption { max-width: 34ch; }

/* Landscape films: two across, any further ones wrap onto the next row. A
   lone film is held at the large single width instead. */
.stills--reels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.stills--reels.is-single { grid-template-columns: minmax(0, 1fr); max-width: 1240px; }
@media (max-width: 700px) { .stills--reels { grid-template-columns: minmax(0, 1fr); } }
/* --------------------------------------------------------------- social */
/* Vertical cuts get their own titled section, set off by a rule. They are
   sized by HEIGHT rather than by dividing up a row, so a pair and a trio come
   out the same size and are properly large — centred, widely spaced, and
   aligned on one line. */
.social {
  padding-inline: var(--pad);
  margin-top: clamp(2.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line);
}
.social__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.25rem, 3.5vw, 3.5rem);
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
}
.social__row figure { margin: 0; width: auto; }
/* Width comes from a target height and the clip's own ratio, then is held
   under a cap. A 9:16 reel reaches its full height; a 4:3 cut would be 880px
   wide at that height and dwarf it, so the cap pulls it back. */
.social__row .still__video {
  height: auto;
  /* No percentage term here: the figure sizes to its content, so a 100%
     would be circular and collapse both to zero. */
  width: min(500px, calc(clamp(520px, 76vh, 900px) * var(--ar-w, 9) / var(--ar-h, 16)));
}
.social__row figcaption { margin-top: 0.85rem; max-width: 30ch; }
/* Holds one row per orientation. */
.stills--groups { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4rem); }
.still__video { position: relative; width: 100%; background: var(--ink-soft); }
.still__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.next {
  display: block;
  padding: clamp(3rem, 8vw, 7rem) var(--pad);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.next__inner { position: relative; z-index: 2; }
.next .display--md { transition: transform 0.7s var(--ease); display: block; }
.next:hover .display--md { transform: translateX(clamp(8px, 1.5vw, 26px)); }
.next__bg {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  z-index: 1;
}
.next__bg img { width: 100%; height: 100%; object-fit: cover; }
.next__bg::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,0.72); }
.next:hover .next__bg { opacity: 1; }

/* --------------------------------------------------------------------------
   13. ABOUT PAGE
   -------------------------------------------------------------------------- */
.portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-soft);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }

.clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.clients li {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
/* Same bounding-box idea as the tiles: square marks get the height,
   wide wordmarks get the width, nothing turns into a speck. */
.clients img {
  width: auto;
  height: auto;
  max-height: 48px;
  max-width: 62%;
  opacity: 0.45;
  transition: opacity 0.4s var(--ease);
}
.clients li:hover img { opacity: 1; }
.clients li[data-treatment="mono"] img { filter: brightness(0) invert(1); }
.clients li[data-treatment="plate"] img {
  background: var(--paper);
  padding: 0.5rem 0.65rem;
  border-radius: 2px;
  max-height: 56px;
}

/* --------------------------------------------------------------------------
   14. CONTACT PAGE
   -------------------------------------------------------------------------- */
.mailto {
  display: block;
  padding-inline: var(--pad);
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 8vw, 6rem);
  word-break: break-word;
}
.mailto .display {
  text-transform: none;
  letter-spacing: -0.045em;
  font-size: clamp(1.9rem, 7.4vw, 7.2rem);
  transition: opacity 0.4s var(--ease);
}
.mailto:hover .display { opacity: 0.55; }
/* The phone number sits directly under the email, smaller; the pair shares
   the spacing below. */
.mailto:has(+ .mailto--phone) { padding-bottom: 0; }
.mailto--phone { padding-block-start: clamp(1.25rem, 3vw, 2.5rem); }
.mailto--phone .display { font-size: clamp(1.5rem, 4.4vw, 4.2rem); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: var(--pad);
  padding-block: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.contact-grid h4 { margin-bottom: 1rem; }
.contact-grid a, .contact-grid p {
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  letter-spacing: -0.015em;
  color: rgba(242, 240, 236, 0.82);
}
.contact-grid a { display: inline-block; transition: color 0.3s var(--ease); }
.contact-grid a:hover { color: var(--paper); }
.contact-grid li + li { margin-top: 0.35rem; }

.clock { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   15. MOTION — reveals + page transitions
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(clamp(14px, 2vw, 28px));
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

body { opacity: 1; transition: opacity 0.35s var(--ease-io); }
body.is-leaving { opacity: 0; }

.veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  pointer-events: none;
  /* Driven by CSS, not JS: if the scripts fail the page is still readable. */
  animation: veil-lift 0.75s var(--ease-io) forwards;
}
@keyframes veil-lift {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
/* Three tiles stop being readable around here — drop to two. */
@media (max-width: 1100px) {
  .card { grid-column: span 6; }
}

@media (max-width: 860px) {
  .opener { aspect-ratio: auto; width: 100%; margin-top: var(--header-h); }
  .opener::after { display: none; }
  .hero { position: relative; inset: auto; aspect-ratio: var(--ar-w) / var(--ar-h); }
  .opener__text {
    position: static;
    pointer-events: auto;
    padding: clamp(1.5rem, 5vw, 2.5rem) var(--pad) 0;
  }
  .opener__title { max-width: none; }
  .opener__lede { max-width: 60ch; }

  /* One per row on a phone, filling the column, no step. */
  .social__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 3rem); }
  .social__row figure { width: 100%; }
  .social__row .still__video { width: 100%; }

  .stills--flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 3rem); }
  .stills--flow figure { width: 100%; }
  .stills--flow img { height: auto; width: 100%; max-height: 70vh; object-fit: contain; }

  .split { grid-template-columns: 1fr; }
  .split__aside { position: static; }
  .deflist div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

/* Touch / narrow: one tile per row, video plays as each scrolls into view. */
@media (max-width: 720px) {
  .index__list { row-gap: clamp(2rem, 8vw, 3rem); }
  .card { grid-column: 1 / -1; }
  .card__title { font-size: clamp(1.7rem, 7.5vw, 2.6rem); }
  .card__logo { opacity: 1; transform: none; }

  .wordmark span { display: none; }
  .nav { gap: 1rem; }

  .reel__foot { flex-direction: column; align-items: flex-start; }
  .scroll-cue { display: none; }

}

/* --------------------------------------------------------------------------
   17. ACCESSIBILITY
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 200;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1.1rem;
  transition: top 0.3s var(--ease);
}
.skip:focus { top: 1rem; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .veil { display: none; }
}

/* --------------------------------------------------------------------------
   18. UTILITIES
   -------------------------------------------------------------------------- */
.page-head--tight { padding-top: clamp(2rem, 5vw, 3.5rem); }
.stack > * + * { margin-top: var(--gap, 1rem); }
.muted { color: var(--muted); }
.max-60 { max-width: 60ch; }
.max-40 { max-width: 42ch; }
.pt-0 { padding-top: 0; }
.mt-lg { margin-top: clamp(2rem, 5vw, 4rem); }
.border-t { border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   19. BRIEF FORM

   Two blocks, deliberately unalike. The checklist is quiet reference, so it
   carries no rules at all. The form is the thing you act on, so it gets the
   hairlines and the room. Ruling both turned the page into one long striped
   table and that is what made it feel crowded.
   -------------------------------------------------------------------------- */
.brief-points {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.brief-points li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: baseline;
}
.brief-points p {
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: rgba(242, 240, 236, 0.74);
}

/* No rule between the checklist and the form. A full-width hairline sitting
   under the last checklist line reads as that line's input, which is exactly
   the wrong invitation. Space separates the two blocks instead. */
.brief {
  display: grid;
  gap: clamp(1.9rem, 3.6vw, 2.9rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

/* Label above the field, full width underneath. No left rail here: the one
   in the margin already says what this block is, and a second column of
   caps beside every input was most of the visual noise. */
.brief__field { display: grid; gap: 0.7rem; }

.brief input,
.brief textarea {
  font: inherit;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  width: 100%;
  color: var(--paper);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 0 0.7rem;
  letter-spacing: -0.012em;
  transition: border-color 0.3s var(--ease);
}
.brief textarea { resize: vertical; min-height: 9em; line-height: 1.6; }

.brief :is(input, textarea):hover { border-color: rgba(242, 240, 236, 0.28); }
.brief :is(input, textarea):focus { outline: none; border-color: var(--paper); }
.brief ::placeholder { color: var(--muted-dim); }

.brief__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-top: clamp(0.25rem, 1vw, 0.75rem);
}
.brief__send {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.9rem 1.9rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.brief__send:hover,
.brief__send:focus-visible {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.brief__send[disabled] { opacity: 0.4; cursor: default; }
.brief__send[disabled]:hover { background: none; color: inherit; border-color: var(--line); }

/* Sentence case, not the site's tracked-out caps: these run long enough
   that uppercase turns them into a wall. */
.brief__status {
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--muted);
  max-width: 34ch;
}
.brief__status:empty { display: none; }
.brief__status.is-done { color: var(--paper); }

@media (max-width: 560px) {
  .brief-points li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
}

/* --------------------------------------------------------------------------
   20. LANGUAGE SWITCH

   A two-up pill with a thumb that slides under the active label. The labels
   sit above the thumb and flip to the ink colour as it arrives, so the pill
   reads as one object rather than a button that redraws.
   -------------------------------------------------------------------------- */
.lang {
  --i: 0;
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 2px;
  margin-left: clamp(0.75rem, 2vw, 1.75rem);
  isolation: isolate;
}

/* The travelling pill. Width is half the track, so it lands exactly on a
   label at --i 0 or 1. */
.lang__thumb {
  position: absolute;
  z-index: -1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / 2);
  border-radius: 100px;
  background: var(--paper);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 0.52s var(--ease-back);
}
/* A hair of squash in the direction of travel. It is the whole reason the
   thing feels like it has weight. */
.lang.is-moving .lang__thumb { transform: translateX(calc(var(--i) * 100%)) scaleX(1.14); }

.lang__opt {
  position: relative;
  padding: 0.5rem 0.85rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 100px;
  transition: color 0.3s var(--ease) 0.08s;
}
.lang__opt:hover { color: var(--paper); }
.lang__opt[aria-pressed="true"] { color: var(--ink); transition-delay: 0.16s; }
.lang__opt[aria-pressed="true"]:hover { color: var(--ink); }
.lang__opt:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }

/* The whole page gets a brief, barely-there settle when the copy swaps, so
   the change reads as one deliberate act instead of text popping around. */
@keyframes lang-settle {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}
main.is-swapping,
footer.is-swapping { animation: lang-settle 0.44s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .lang__thumb { transition: none; }
  .lang.is-moving .lang__thumb { transform: translateX(calc(var(--i) * 100%)); }
  main.is-swapping, footer.is-swapping { animation: none; }
}

/* The Dutch nav is wider than the English one ("Over mij" against "About"),
   and the pill has to fit beside it, so the header tightens up twice on the
   way down to phone width. */
@media (max-width: 720px) {
  .lang { margin-left: 0.6rem; padding: 1px; }
  .lang__thumb { top: 1px; bottom: 1px; left: 1px; width: calc((100% - 2px) / 2); }
  .lang__opt { padding: 0.45rem 0.6rem; letter-spacing: 0.1em; }
}
@media (max-width: 430px) {
  /* Buy back the width the pill costs, so the wordmark and the nav are not
     touching each other. */
  .header { gap: 0.9rem; }
  .wordmark { font-size: 0.6875rem; }
  .nav { gap: 0.8rem; }
  .nav a { font-size: 0.625rem; letter-spacing: 0.12em; }
  .lang { margin-left: 0.4rem; }
  .lang__opt { padding: 0.4rem 0.5rem; font-size: 0.5625rem; letter-spacing: 0.08em; }
}