/* ═══════════════════════════════════════════════════════════════
   v2 — the calmer layout
   Loaded after style.css, which still owns the parts that stay:
   the nav and its frosted chips, the hero, the menu,
   the showreel lightbox, the grain and the zero-in band.

   Everything below replaces the old editorial furniture. The old
   design drew a four-column rule grid under every section and a
   registration mark at each corner; this one is built on white and
   air instead, so both are switched off rather than restyled.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bone:      #FFFFFF;   /* the ground is white here */
  --bone-2:    #F4F4F3;   /* the one recessed band: the stat cards */
  --sand:      #ECECEB;   /* media placeholder, before an image paints */
  --sand-warm: #FFFFFF;

  /* One corner for the whole site. There used to be a second, larger
     radius for the bigger plates; two of them read as a mistake rather
     than a hierarchy, so everything rounded now takes this one. The acid
     button keeps its 999px — that is a capsule, not a corner — and the
     zero-in band stays square by request. */
  --r:      14px;
  --gap-v:  clamp(4.5rem, 9vw, 9rem);      /* the rhythm between sections */

  /* ── type scale ────────────────────────────────────────
     The sizes as specified, reached exactly at a 1440px design width
     and scaled fluidly below it — a flat 128px display line would be
     four times the width of a phone. Above 1440 each one sits on its
     stated value; the ratios are the spec's, the floors are mine.
     Line heights are the spec's throughout (the Subheader 120.0 read
     as 120%, so 1.2). */
  --t-display:72px;  /* 128px style — unused so far, defined for parity */
  --t-h1:  clamp(34px, 5vw,    72px);   --lh-h1:1;
  --t-h2:  clamp(31px, 4.45vw, 64px);   --lh-h2:1.2;
  --t-h3:  clamp(26px, 3.34vw, 48px);   --lh-h3:1.1;
  --t-h4:  clamp(23px, 2.23vw, 32px);   --lh-h4:1.2;
  --t-h5:  clamp(20px, 1.67vw, 24px);   --lh-h5:1.4;
  --t-h6:  16px;                        --lh-h6:1.4;

  --t-sub1:clamp(26px, 2.78vw, 40px);
  --t-sub2:clamp(23px, 2.23vw, 32px);
  --t-sub3:clamp(20px, 1.67vw, 24px);
  --t-sub4:clamp(18px, 1.39vw, 20px);
  --lh-sub:1.2;

  --t-b20: 20px;
  --t-b16: 16px;
  --t-b14: 14px;
  --lh-body:1.4;
}

/* No column rules and no registration marks anywhere — the hero's own
   over-video grid included. The mark's selector carries a :not(.hero), so
   it has to be matched here rather than undercut: a plainer
   `main > section::after` loses the cascade to it. */
main > section::before,
main > section::after,
main > section:not(.hero)::after,
.hero::after,
.foot::before,
.foot::after{ content:none }

/* The footage runs at its own brightness: the full-frame scrim goes, and
   the panel that ran the whole left 64% becomes a wash in the bottom-left
   corner the headline occupies.

   No backdrop-filter and no mask. A filtered backdrop is clipped to the
   element's own box, and the mask feathers what the element paints but
   not the region it filters — so the blur ended on a hard rectangle no
   matter how softly the gradient faded. Instead the element covers the
   whole frame and a radial gradient anchored at the corner does all the
   shaping: it reaches zero well inside the picture, so there is no box
   edge anywhere to clip. */
.hero__scrim{ display:none }

.hero__frost{
  inset:0; width:auto; height:auto;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  -webkit-mask-image:none; mask-image:none;
  background:radial-gradient(118% 92% at 0% 100%,
    rgba(10,10,10,.82)  0%,
    rgba(10,10,10,.50) 26%,
    rgba(10,10,10,.18) 50%,
    transparent        74%);
}

body{ background:var(--bone) }

/* ── the header stands still ─────────────────────────────
   The hero is pinned to the top of its own box and the page travels over
   it: everything after it rides a layer above on an opaque ground, so
   the statement slides up and covers the video rather than pushing it.
   Sticky rather than fixed, so the hero still occupies its own height
   and releases naturally at the end of the section. */
.hero{ position:sticky; top:0; z-index:0 }
main > section:not(.hero),
.foot{ position:relative; z-index:1 }
/* Every section that scrolls over the hero needs a ground of its own —
   listing them by name meant forgetting one (.doing showed the video
   straight through). Blanket rule, with the two dark rooms opting out. */
main > section:not(.hero){ background:var(--bone) }
.band{ background:var(--dark) }

/* The white sheet meets the hero with the same rounded top the footer
   has. It is the first section over the film, so it is the only one
   whose corners are ever seen — and what shows through them is the
   footage, which is the point. */
.say{ border-radius:var(--r) var(--r) 0 0 }

/* ── hover preview on the work cards ─────────────────────
   hoverPreview() mounts a .tile__vid; its rules in style.css are already
   generic (absolute, cover, fade in on .is-playing), so the card only has
   to lend it the same transform the still gets. */
.card:hover .card__media .tile__vid{ transform:scale(1.045) }
.card__media .tile__vid{ transition:transform .8s var(--e-out), opacity .45s var(--e-out) }

/* stood down, kept whole — one attribute brings the journal back */
.journal[hidden]{ display:none }

/* ── the scale, applied to what style.css still owns ──────
   The hero keeps its layout and its video; only its type moves onto the
   scale — and barely, since its headline already topped out at 71.68px
   against the spec's 72. --body is the token the base stylesheet hands
   to every paragraph it styles, so pointing it at Body-16 carries the
   scale into the parts of the page this file does not restyle.

   Deliberately left alone: the nav's Showreel chip and the fullscreen
   menu. They run on --label (about 10px), which is below the
   bottom of this scale, and they are the header furniture that was to
   stay as it is. */
:root{ --body:var(--t-b16) }

/* ── the bar's menu ──────────────────────────────────────
   Four words stacked at the top right, set against the wordmark's own
   stacked block on the left. No chip, no frosted panel: the type sits
   straight on whatever is behind it: navInk() in app.js reads what is
   under each word every frame and sets .is-ink (black) or leaves it
   white — which is why it stays legible over the video and over white. */
.nav__menu{
  display:flex; flex-direction:column; align-items:flex-end;
  text-align:right;
}
.nav__menu a{
  font-size:var(--t-sub4); line-height:var(--lh-sub);
  font-weight:500; letter-spacing:-.01em;
  color:var(--paper);
  transition:color .1s linear, opacity .35s var(--e-out);
}
.nav__menu a.is-ink{ color:var(--ink) }
.nav__menu a:hover{ opacity:.55 }

/* the wordmark: the colour version over the header, grey and black everywhere else */
.brand.is-ink .brand__logo--light{ opacity:0 }
.brand.is-ink .brand__logo--dark { opacity:1 }

/* The headline carried text-shadow:0 1px 40px to hold itself against the
   footage. The line splitter wraps every word in a box with
   overflow:hidden — that is what masks the reveal — so a 40px blur was
   being painted inside a ~153×88 box and cut square at its edge: one
   visible rectangle per word. Legibility is the frosted corner's job
   below, which is a real backdrop and has no box to be clipped to. */
/* The headline holds the desktop's 72px for as long as its longest line
   ("Bringing every", 6.26x the font size wide) fits between the gutters,
   and only then shrinks with the screen — so on a phone it still fills
   the width instead of dropping to the H1 floor of 34px. The 6.45 leaves
   a few per cent of air. */
.hero__h{
  font-size:min(72px, calc((100vw - 2 * var(--pad)) / 6.45));
  line-height:var(--lh-h1);
  text-shadow:none;
}
/* phones and tablets: a fifth smaller than that */
@media (max-width:860px){
  .hero__h{ font-size:calc(min(72px, (100vw - 2 * var(--pad)) / 6.45) * .8) }
}
.hero__tag,
.hero__sub{ font-size:var(--t-b16); line-height:var(--lh-body) }

/* ── the acid pill ───────────────────────────────────────
   The one button shape on the page. Small, fully round, acid —
   it is the only place the accent appears outside the band. */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.62rem 1.15rem;
  border-radius:999px;
  background:var(--accent); color:var(--ink);
  font-size:var(--t-b14); line-height:1;
  white-space:nowrap;
  transition:transform .4s var(--e-out), filter .4s var(--e-out);
}
.pill:hover{ transform:translateY(-2px); filter:brightness(1.06) }
/* a trailing arrow: it takes a little of the right padding back so the
   pill still looks centred, and steps forward on hover */
.pill:has(> svg){ padding-right:.95rem }
.pill svg{ width:1.15em; height:1.15em; flex:none; transition:transform .4s var(--e-out) }
.pill:hover svg{ transform:translateX(4px) }

/* ── statement ───────────────────────────────────────────
   The first thing under the hero: one paragraph set large enough
   to be read as a headline. Indented on its first line the way the
   reference does, so it starts inside the measure rather than on
   the margin. */
.say{ padding:var(--gap-v) var(--pad) }
/* The showreel moved down beside "Wij zijn Zero In." It came off the
   nav bar originally, where it ran on --label (about 10px) with the rest
   of the chrome; here it sits at the same Subheader 4 as "Featured
   Works" and the other section headings. */
/* the studio line carries the same weight as every other section
   heading — "Featured Works", "Wat wij doen", "Why choose" */
.intro__since{
  font-size:var(--t-sub4); line-height:var(--lh-sub);
  font-weight:600; letter-spacing:-.01em; color:var(--ink);
}

/* The showreel sits midway between flush under the label and flush on
   the page's centre rule: centred in its own column is exactly that
   halfway point, and the drop is half the one it had. It keeps the size
   up, so it still reads as the invitation rather than a second caption. */
.intro__who .act{
  margin-top:clamp(2.35rem, 5.3vw, 4.5rem);
  margin-inline:auto;
  max-width:22ch;
  font-size:var(--t-sub3); line-height:var(--lh-sub);
  letter-spacing:normal;
}
.say__body{ flex:1 1 auto; min-width:0 }

/* the disciplines, over the statement */
.say__kicker{
  font-size:var(--t-b16); line-height:var(--lh-body);
  color:var(--ink);
  margin-bottom:clamp(2.2rem, 5vw, 4.5rem);
}

.say__p{
  font-size:var(--t-sub1); line-height:var(--lh-sub);
  letter-spacing:-.02em; font-weight:500;
  color:var(--ink);
  /* The statement runs as one flowing line rather than authored breaks:
     at this size a hard break set for one width re-wraps at the next and
     the sentence arrives in ragged pairs. */
  max-width:50ch;   /* about the measure the authored breaks used to hold */
  /* First-line indent. text-indent is the right mechanism but it
     inherits, and the line splitter wraps every word in an inline-block —
     each would take the indent on its own first line and the sentence
     would fly apart. Hence the reset on the word boxes. */
  text-indent:clamp(2.5rem, 7vw, 7rem);
}
.say__p .w{ text-indent:0 }

/* ── intro ───────────────────────────────────────────────
   A hairline, then the two columns under it: the since-line on the
   left margin, the copy on the page's centre line. */
.intro{
  padding:0 var(--pad) var(--gap-v);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem);
  border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  padding-top:clamp(2rem, 4vw, 3.4rem);
}
.intro__col p{
  max-width:40ch; font-size:var(--t-b16); line-height:var(--lh-body); color:var(--ink-2);
  margin-bottom:1.1rem;
}
.intro__col .pill{ margin-top:.6rem }

/* ── section heading ─────────────────────────────────────
   Small, dark, sentence case. No index number, no count, no slash:
   the old shead furniture does not belong on this page. */
.works__h, .why__h, .doing__h{
  font-size:var(--t-sub4); line-height:var(--lh-sub);
  font-weight:600; letter-spacing:-.01em; color:var(--ink);
  margin-bottom:clamp(1.1rem, 2.4vw, 1.8rem);
}

/* ── work / journal cards ────────────────────────────────
   Two up, rounded, the meta line and title sitting under the frame
   rather than over it. The image is the only thing that moves on
   hover — the card itself stays put. */
.works, .journal{ padding:0 var(--pad) var(--gap-v) }

.works__grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.1rem, 2.4vw, 2rem) clamp(1rem, 2.2vw, 1.75rem);
}
.card{ display:block; color:var(--ink) }
.card__media{
  position:relative; overflow:hidden;
  border-radius:var(--r);
  aspect-ratio:16/10; background:var(--sand);
}
.card__media img{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; object-fit:cover;
  transition:transform .8s var(--e-out);
}
.card:hover .card__media img{ transform:scale(1.045) }
.card__meta{
  margin-top:.85rem;
  font-size:var(--t-b14); line-height:var(--lh-body); color:var(--ink-3);
}
.card__meta i{ font-style:normal; margin:0 .45em; opacity:.5 }
.card__t{
  margin-top:.28rem;
  /* the same Subheader 4 the section heading above them uses */
  font-size:var(--t-sub4); line-height:var(--lh-sub); font-weight:500;
  letter-spacing:-.01em;
}

/* ── what we do ──────────────────────────────────────────
   The small brief on the left, the disciplines stacked large on
   the right — the list is the display type in this section. */
.doing{
  padding:0 var(--pad) var(--gap-v);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
.doing__lead p{
  max-width:32ch; font-size:var(--t-b16); line-height:var(--lh-body); color:var(--ink-2);
}
.doing__list ul{ list-style:none }
.doing__list li{
  font-size:var(--t-h3); line-height:var(--lh-h3);
  font-weight:600; letter-spacing:-.025em;
  color:var(--ink);
}
.doing__list .pill{ margin-top:clamp(1.1rem, 2.4vw, 1.8rem) }

/* ── clients ─────────────────────────────────────────────
   The strip stays, on white, with the section furniture removed. */
.clients{ padding:0 0 var(--gap-v); background:var(--bone); border:0 }

/* ── why ─────────────────────────────────────────────────
   Four cards in a row that alternate: a plain recessed card with
   the figure at the top, then a photograph with the same block
   laid over its foot. Same box, two fills. */
.why{ padding:0 var(--pad) var(--gap-v) }
.why__grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(.8rem, 1.6vw, 1.25rem);
}
.why__c{
  position:relative; overflow:hidden;
  border-radius:var(--r);
  min-height:clamp(230px, 26vw, 330px);
  padding:clamp(1rem, 1.7vw, 1.5rem);
  background:var(--bone-2);
  display:flex; flex-direction:column;
}
.why__n{
  font-size:var(--t-sub1); line-height:var(--lh-sub);
  font-weight:600; letter-spacing:-.03em;
  color:var(--ink);
}
.why__c h3{
  margin-top:auto;                 /* the title falls to the foot of the card */
  font-size:var(--t-h6); line-height:var(--lh-h6); font-weight:500;
  letter-spacing:-.01em;
}
.why__p{
  margin-top:.5rem;
  font-size:var(--t-b14); line-height:var(--lh-body); color:var(--ink-2);
}

/* the photo variant: the image fills the card, the same block sits
   over its lower half on a scrim so the type keeps its contrast */
.why__c--img{ padding:0; background:var(--dark) }
.why__c--img img{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; object-fit:cover;
}
.why__over{
  position:relative; z-index:1; margin-top:auto;
  padding:clamp(1rem, 1.7vw, 1.5rem);
  color:var(--paper);
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.34) 62%, rgba(0,0,0,0));
}
.why__c--img .why__n{ color:var(--paper); font-size:var(--t-sub2) }
.why__c--img h3{ margin-top:.35rem; color:var(--paper) }
.why__c--img .why__p{ color:color-mix(in srgb, var(--paper) 78%, transparent) }

/* ── the band keeps its full-bleed slot ─────────────────── */
.band{ margin-bottom:var(--gap-v) }

/* ── get in touch ────────────────────────────────────────
   Centred: the ask, a single plate under it, the address as the
   one thing left to click. */
.touch{
  padding:0 var(--pad) var(--gap-v);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.touch__h{
  font-size:var(--t-h3); line-height:var(--lh-h3);
  font-weight:600; letter-spacing:-.025em;
  color:var(--ink);
}
.touch__media{
  width:min(100%, 420px);
  margin:clamp(1.6rem, 3.4vw, 2.8rem) 0 clamp(1.4rem, 3vw, 2.4rem);
  border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/3; background:var(--sand);
}
.touch__media img{ width:100%; height:100%; object-fit:cover; max-width:none }

/* ── footer ──────────────────────────────────────────────
   The one dark room left on the page. The ask on the left, two
   short link columns on the right, the wordmark on the bottom rule. */
.foot{
  background:var(--dark); color:var(--paper);
  padding:clamp(3.2rem,7vw,5.5rem) var(--pad) clamp(1.2rem,2vw,1.8rem);
  border-radius:var(--r) var(--r) 0 0;
}
.foot__top{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,6vw,5rem);
  padding-bottom:clamp(3rem,7vw,5rem);
}
.foot__h{
  font-size:var(--t-h3); line-height:var(--lh-h3);
  font-weight:600; letter-spacing:-.025em;
}
.foot__ask .pill{ margin-top:clamp(1.4rem, 2.8vw, 2.2rem) }
.foot__h i{ font-style:normal; color:var(--accent) }
.foot__links{ display:flex; gap:clamp(2.5rem, 6vw, 5rem) }
.foot__col h4{
  font-size:var(--t-b14); line-height:var(--lh-body); font-weight:500; letter-spacing:.06em;
  color:color-mix(in srgb, var(--paper) 55%, transparent);
  margin-bottom:.8rem;
}
.foot__col p{ font-size:var(--t-b16); line-height:2 }
.foot__col a{ color:var(--paper) }
.foot__col a:hover{ color:var(--accent) }

/* ══════════  narrow  ══════════ */
@media (max-width:860px){
  .intro,
  .doing{ grid-template-columns:1fr }
  .works__grid{ grid-template-columns:1fr }
  .why__grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .foot__top{ grid-template-columns:1fr }
  .say__p{ max-width:none; text-indent:2rem }
}
@media (max-width:560px){
  .why__grid{ grid-template-columns:1fr }
  .foot__links{ gap:3rem }
}


/* ═══════════════════════════════════════════════════════════════
   project + article pages
   They run the same nav, footer, ground and scale as the index; what
   is left here is the pj-* layout those pages own.
   ═══════════════════════════════════════════════════════════════ */

.pj-hero{ background:var(--bone) }
.pj-next{ background:var(--bone) }

/* titles on the scale: the page title takes H1, the band headings
   between the shot grids take the same Subheader 4 the index uses for
   "Featured Works" */
.pj-title{
  font-size:var(--t-h1); line-height:var(--lh-h1);
  letter-spacing:-.025em; font-weight:600;
  max-width:16ch;
}
.pj-section{
  font-size:var(--t-sub4); line-height:var(--lh-sub);
  font-weight:600; letter-spacing:-.01em;
  text-align:left; max-width:none; margin-inline:0;
  padding:clamp(3rem,7vw,5.5rem) var(--pad) clamp(1.1rem,2.4vw,1.8rem);
}
.pj-next__head h2{
  font-size:var(--t-sub4); line-height:var(--lh-sub);
  font-weight:600; letter-spacing:-.01em;
}
.pj-lead{ font-size:var(--t-b16); line-height:var(--lh-body) }
.pj-crumb{
  font-family:var(--sans); font-size:var(--t-b14);
  line-height:var(--lh-body); letter-spacing:normal;
}

/* every plate on these pages carries the site's one corner */
.pj-film,
.pj-shot,
.pj-next .card__media,
.pj-next__item,
.art__plate,
.art__plate img{ border-radius:var(--r); overflow:hidden }

/* …except one that cannot: a full-bleed row runs to the viewport edge,
   where a rounded corner would be cut off by the window rather than
   sitting on the ground. Those rows get the padding back instead, so
   they are inset like every other plate and can be rounded too. */
.pj-shots--bleed{ padding-left:var(--pad); padding-right:var(--pad) }


/* ═══════════════════════════════════════════════════════════════
   about
   Label, statement, plate — repeated down the page. The plates reuse
   .pj-shot so shotParallax() picks them up without a second mechanism;
   all this adds is a wider crop than the project pages' 16:9.
   ═══════════════════════════════════════════════════════════════ */

/* The opening starts at the headline. The top padding only has to clear
   the fixed bar, and the margin under it went with the label that used to
   sit above — so the whole page rides up. */
.ab-open{
  /* clears the wordmark, which grew a fifth, with room to spare */
  padding:calc(var(--pad) + 8.5rem) var(--pad) clamp(2.5rem,6vw,4.5rem);
}
.ab-h{
  font-size:var(--t-h1); line-height:var(--lh-h1);
  font-weight:600; letter-spacing:-.03em;
}
.ab-h i{ font-style:normal }
.ab-lead{
  margin-top:clamp(1.6rem, 3.4vw, 2.6rem);
  max-width:46ch;
  font-size:var(--t-sub4); line-height:var(--lh-sub);
  color:var(--ink-2);
}

/* The plate keeps .pj-shot's corner and parallax, but shows the picture
   rather than a slice of it: the frame takes the image's own 16:9 instead
   of a letterboxed crop, and the overscan drops from 8% a side to 3%.
   Three per cent is all the headroom the 2% travel needs, so what is cut
   off is a sliver rather than a border. */
.plate{
  margin:0 var(--pad) 0;
  aspect-ratio:16/9;
}
.plate .pj-shot__media{ inset:-3%; width:106%; height:106% }
/* three quarters of the content width, alternating sides down the page */
.plate--left,
.plate--right{ width:calc((100% - 2 * var(--pad)) * .75) }
.plate--right{ margin-left:auto }
@media (max-width:860px){
  .plate--left,
  .plate--right{ width:auto; margin-left:var(--pad) }
}
.plate__cap{
  padding:clamp(.8rem,1.6vw,1.1rem) var(--pad) 0;
  font-size:var(--t-b14); line-height:var(--lh-body);
  color:var(--ink-3);
}

/* Label left, statement and copy to the right of it — on the same three
   tracks and the same gap as .ab-list and .ab-steps below, so the
   statement starts exactly where "Productuitleg" does. It sat on a
   two-track grid before, which put it at the halfway mark while the lists
   under it broke at a third, and nothing lined up. */
.ab-band{
  padding:var(--gap-v) var(--pad) clamp(1.5rem,3.5vw,2.6rem);
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem);
  align-items:start;
}
.ab-band__label{ grid-column:1 }
.ab-band__body { grid-column:2 / -1 }
.ab-band__label{
  font-size:var(--t-b14); line-height:var(--lh-body); color:var(--ink-3);
}
.ab-band__h{
  font-size:var(--t-h3); line-height:var(--lh-h3);
  font-weight:600; letter-spacing:-.025em;
}
.ab-band__body p{
  margin-top:clamp(1.1rem,2.4vw,1.7rem);
  max-width:46ch;
  font-size:var(--t-b16); line-height:var(--lh-body); color:var(--ink-2);
}

/* the three things we make, and the three steps — same three-up rhythm */
.ab-list,
.ab-steps{
  padding:0 var(--pad) var(--gap-v);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem);
  list-style:none;
}
.ab-item h3,
.ab-step h3{
  font-size:var(--t-sub4); line-height:var(--lh-sub);
  font-weight:600; letter-spacing:-.01em;
  margin-bottom:.7rem;
}
.ab-item p,
.ab-step p{
  font-size:var(--t-b16); line-height:var(--lh-body); color:var(--ink-2);
}
.ab-item__tags{
  margin-top:.9rem;
  font-size:var(--t-b14) !important; color:var(--ink-3) !important;
}
.ab-step{ border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); padding-top:1.1rem }
.ab-step__n{
  display:block; margin-bottom:.8rem;
  font-size:var(--t-b14); line-height:var(--lh-body); color:var(--ink-3);
}

/* questions, always open: question and answer side by side on the same tracks as the band above it, so the
   questions start where the statement does */
.ab-faq{
  padding:0 var(--pad) var(--gap-v);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem);
}
.ab-faq__list{ grid-column:2 / -1; border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent) }
.ab-faq__item{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem);
  padding:clamp(1.2rem,2.4vw,1.8rem) 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.ab-faq__item h3{
  font-size:var(--t-sub4); line-height:var(--lh-sub);
  font-weight:600; letter-spacing:-.01em;
}
.ab-faq__item p{
  max-width:60ch;
  font-size:var(--t-b16); line-height:var(--lh-body); color:var(--ink-2);
}
@media (max-width:860px){
  .ab-faq{ grid-template-columns:1fr }
  .ab-faq__list{ grid-column:auto }
  .ab-faq__item{ grid-template-columns:1fr; gap:.6rem }
}

/* the sign-off */
.ab-sign{
  padding:0 var(--pad) var(--gap-v);
  border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  padding-top:clamp(2.5rem,6vw,4.5rem);
}
.ab-sign__label{
  font-size:var(--t-b14); line-height:var(--lh-body); color:var(--ink-3);
  margin-bottom:clamp(1rem,2.2vw,1.6rem);
}
.ab-sign__h{
  font-size:var(--t-h3); line-height:var(--lh-h3);
  font-weight:600; letter-spacing:-.025em;
}
.ab-sign__h i{ font-style:normal; color:var(--accent-deep) }
.ab-sign .act{
  margin-top:clamp(1.6rem,3.4vw,2.6rem);
  font-size:var(--t-b14); line-height:var(--lh-body); letter-spacing:normal;
}

@media (max-width:860px){
  .ab-band{ grid-template-columns:1fr }
  .ab-band__label,
  .ab-band__body{ grid-column:auto }
  .ab-list,
  .ab-steps{ grid-template-columns:1fr }
  .plate{ aspect-ratio:16/9 }
}


/* ═══════════════════════════════════════════════════════════════
   bar, titles, lightbox
   ═══════════════════════════════════════════════════════════════ */

/* The wordmark, a fifth larger. --mark is one cap height and the stacked
   lockup is 3.409 of them, so scaling the cap scales the lockup. */
.brand{ --mark:calc(var(--chip) * .48) }

/* The bar reads as one line across the top: the wordmark, the language
   switch and the first menu word all start on it. (They used to be
   centred on a common axis, which dropped the wordmark 12px.) */
.nav{
  align-items:flex-start;
  /* The wordmark's artwork is trimmed to its ink, type is not: a line of
     Manrope leaves .269em above the caps. The mark is pushed down by that
     much, so the top pixels of STUDIO, NL / EN and home sit on one line. */

  /* nav() tweens the bar's y off the scroll velocity now, so the fixed
     CSS transition would only fight it for control of the same property */
  transition:none;
}

/* No acid block behind a project title — the name sets as written. */
.pj-title i,
.feature__h i{
  background:none; padding:0; margin-left:0; color:inherit;
}

/* ── the lightbox background ─────────────────────────────
   The scrim carried a backdrop-filter, so every frame of whatever was
   still playing behind it — the hero loop, a card preview — had to be
   re-blurred, and the grain overlay kept nudging its transform twice a
   second on top of that. Over a fullscreen player that showed as a
   stuttering, tearing background. The scrim is 86% opaque on its own;
   the blur bought almost nothing and cost a recomposite per frame. */
.reel__bg{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:#0A0A0A;            /* opaque: nothing behind can show, so
                                    nothing behind can shimmer either */
}
/* the grain is already invisible here — stop it moving as well */
body.reel-open .grain{ animation:none }
/* opacity:0 does not take a backdrop-filter out of the compositing path;
   the foot glass was still blurring the page under the player every
   frame. visibility does stop it being painted at all. */
body.reel-open .footglass{ visibility:hidden }


/* ── the foot glass ──────────────────────────────────────
   A progressive blur, not one flat pane. A single backdrop-filter blurs
   every pixel under it by the same amount, which reads as a bar stuck on
   the page. Real glass falls off: barely there at the lip, deep at the
   base.

   So the strip is five layers on top of each other, each doubling the
   blur of the one before and each masked to a band a fifth further down,
   with the bands overlapping. Where two overlap you get the sum, so the
   blur ramps smoothly from almost nothing at the top edge to heavy at the
   bottom — no step between the layers. The lightest layer also carries
   the pane's own tint and the hairline along its lip. */
.footglass{
  height:clamp(86px, 12vh, 150px);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:none;
  -webkit-mask-image:none; mask-image:none;
}

/* The hero's own pane. It sits at z-index 2 — over the footage, under the
   headline — so the type stays crisp while the film behind it goes soft.
   The page-level strip stands down while the hero is what is behind it,
   or the two would blur the same pixels twice. */
.hero__glass{
  position:absolute; z-index:2; inset:auto 0 0 0;
  height:clamp(86px, 12vh, 150px);
  pointer-events:none;
}
body.over-hero .footglass{ opacity:0 }
.pglass span{
  position:absolute; inset:0;
  display:block; pointer-events:none;
}
.pglass span:nth-child(1){
  -webkit-backdrop-filter:blur(1px);  backdrop-filter:blur(1px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 40%, transparent 60%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 40%, transparent 60%);
}
.pglass span:nth-child(2){
  -webkit-backdrop-filter:blur(2px);  backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(180deg, transparent 20%, #000 40%, #000 60%, transparent 80%);
          mask-image:linear-gradient(180deg, transparent 20%, #000 40%, #000 60%, transparent 80%);
}
.pglass span:nth-child(3){
  -webkit-backdrop-filter:blur(4px);  backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(180deg, transparent 40%, #000 60%, #000 80%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 40%, #000 60%, #000 80%, transparent 100%);
}
.pglass span:nth-child(4){
  -webkit-backdrop-filter:blur(8px);  backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(180deg, transparent 60%, #000 80%, #000 100%, transparent 120%);
          mask-image:linear-gradient(180deg, transparent 60%, #000 80%, #000 100%, transparent 120%);
}
/* the deepest layer carries the tint and the lip */
.pglass span:nth-child(5){
  -webkit-backdrop-filter:blur(16px) saturate(1.06); backdrop-filter:blur(16px) saturate(1.06);
  -webkit-mask-image:linear-gradient(180deg, transparent 75%, #000 100%, #000 125%);
          mask-image:linear-gradient(180deg, transparent 75%, #000 100%, #000 125%);
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, #fff 10%, transparent) 70%,
    color-mix(in srgb, #fff 20%, transparent) 100%);
}

/* ── showreel plate ──────────────────────────────────────
   One block the full width of the work grid below it, and exactly as tall
   as a card in that grid: a card is half the width minus the gutter, at
   16/10 — so the plate's height is that same number, taken as a
   percentage of its own width. Padding resolves percentages against
   width, which is the one property that can do this; aspect-ratio cannot
   reach the gutter. Both read --works-gap, so they cannot drift. */
.reelplate{
  --works-gap:clamp(1rem, 2.2vw, 1.75rem);
  padding:0 var(--pad) clamp(1.1rem, 2.4vw, 2rem);
}
.reelplate__box{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r);
  height:0; padding-top:calc((100% - var(--works-gap)) / 2 * 10 / 16);
  background:var(--sand);
}
.reelplate__media{ position:absolute; inset:0 }
.reelplate__media img,
.reelplate__media video{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; object-fit:cover;
  transition:transform .8s var(--e-out);
}
.reelplate__media video{
  opacity:0; transition:opacity .5s var(--e-out), transform .8s var(--e-out);
  pointer-events:none;
}
.reelplate__media video.is-playing{ opacity:1 }
.reelplate__box:hover .reelplate__media img,
.reelplate__box:hover .reelplate__media video{ transform:scale(1.03) }


/* ── project pages: a local film and running text ─────────
   Most films are Vimeo embeds; PVH ships its own master, with voice-over,
   so the frame holds a <video> the same way it holds an iframe. The copy
   between the shot grids sits on the section heading's left edge, at the
   same body size as the lead. */
.pj-film video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#000;
}
.pj-text{
  padding:0 var(--pad) clamp(1.4rem, 3vw, 2.4rem);
  max-width:calc(60ch + 2 * var(--pad));
  font-size:var(--t-b16); line-height:var(--lh-body);
  color:var(--ink-2);
}


/* ── project shots open large ────────────────────────────
   shotBox() in app.js. A dark room over everything, the plate as large as
   the window allows at its own ratio, a counter and the alt text as the
   caption, arrows either side. */
main .pj-shot[role="button"]{ cursor:zoom-in }
main .pj-shot[role="button"]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

.shotbox{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  padding:clamp(3.5rem,7vw,5.5rem) clamp(3.5rem,7vw,6rem);
  opacity:0; transition:opacity .35s var(--e-out);
}
.shotbox[hidden]{ display:none }
.shotbox.is-open{ opacity:1 }
.shotbox__bg{ position:absolute; inset:0; background:rgba(10,10,10,.94); cursor:zoom-out }
.shotbox__stage{
  position:relative; margin:0;
  width:100%; height:100%;
  display:grid; place-items:center;
  pointer-events:none;
}
.shotbox__stage img,
.shotbox__stage video{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  border-radius:var(--r);
  transform:scale(.97); transition:transform .45s var(--e-out);
  pointer-events:auto;
}
.shotbox.is-open .shotbox__stage img,
.shotbox.is-open .shotbox__stage video{ transform:scale(1) }

.shotbox__cap{
  position:absolute; left:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem);
  bottom:clamp(.9rem,2.2vw,1.6rem);
  display:flex; gap:1rem; align-items:baseline;
  font-size:var(--t-b14); line-height:var(--lh-body);
  color:color-mix(in srgb, var(--paper) 78%, transparent);
}
.shotbox__n{ flex:none; color:var(--paper) }
.shotbox__t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.shotbox__btn{
  position:absolute; z-index:2;
  width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:#fff;
  transition:background-color .3s var(--e-out), color .3s var(--e-out);
}
.shotbox__btn:hover{ background:var(--accent); color:var(--ink) }
.shotbox__btn svg{ width:18px; height:18px }
.shotbox__close{ top:clamp(.8rem,2vw,1.4rem); right:clamp(.8rem,2vw,1.4rem) }
.shotbox__prev{ left:clamp(.6rem,1.6vw,1.2rem); top:50%; translate:0 -50% }
.shotbox__next{ right:clamp(.6rem,1.6vw,1.2rem); top:50%; translate:0 -50% }
body.shot-open .grain{ animation:none; opacity:0 }

@media (max-width:860px){
  .shotbox{ padding:3.5rem .75rem 3.5rem }
  .shotbox__prev, .shotbox__next{ top:auto; bottom:3.2rem; translate:none }
}

/* A row of stills with mixed orientations: every plate shares one height,
   and each takes width in proportion to its own ratio (--fr = w/h). */
.pj-shots--fit{ display:flex }
.pj-shots--fit > .pj-shot{ flex:var(--fr) 1 0; min-width:0 }
@media (max-width:860px){
  .pj-shots--fit{ flex-direction:column }
  .pj-shots--fit > .pj-shot{ flex:none; width:100% }
}

/* previous / next project under every case study */
.pj-next{ padding:clamp(4rem,9vw,7rem) var(--pad) clamp(3rem,6vw,5rem) }
.pj-next__grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1rem, 2.2vw, 1.75rem);
}
.pj-next__label{
  display:flex; align-items:center; gap:.4em;
  margin-bottom:.85rem;
  font-size:var(--t-b14); line-height:var(--lh-body); color:var(--ink-3);
  transition:color .3s var(--e-out);
}
.pj-next__label svg{ width:1.05em; height:1.05em; transition:transform .45s var(--e-out) }
.pj-next__card--next .pj-next__label{ justify-content:flex-end }
.pj-next__card:hover .pj-next__label{ color:var(--ink) }
.pj-next__card--prev:hover .pj-next__label svg{ transform:translateX(-.25em) }
.pj-next__card--next:hover .pj-next__label svg{ transform:translateX(.25em) }
@media (max-width:860px){
  .pj-next__grid{ grid-template-columns:1fr }
  .pj-next__card--next .pj-next__label{ justify-content:flex-start }
}

.pj-next__head{ padding:0 0 clamp(1.4rem,3vw,2rem); align-items:baseline }
.pj-next__head h2{
  font-size:var(--t-sub4); line-height:var(--lh-sub);
  font-weight:600; letter-spacing:-.01em;
}
.pj-next__all{
  font-size:var(--t-b14); line-height:var(--lh-body); color:var(--ink);
  font-weight:600; text-underline-offset:.25em;
}
.pj-next__all:hover{ text-decoration:underline }

/* Fullscreen shows the whole frame. The inline rules crop to fill their
   16:9 plate; left in place they would crop the film on a 16:10 screen. */
.pj-film video:fullscreen,
.reel__player video:fullscreen{ object-fit:contain; background:#000 }
.pj-film video:-webkit-full-screen,
.reel__player video:-webkit-full-screen{ object-fit:contain; background:#000 }

/* ═══════════════════════════════════════════════════════════════
   film player
   Our own controls over a project film: a play pill in the middle
   until it starts, then a glass bar in the site's type and acid.
   ═══════════════════════════════════════════════════════════════ */
.fp{ border-radius:var(--r); isolation:isolate; cursor:default }
.fp video{ cursor:pointer }
.fp.is-playing:not(.is-awake) video{ cursor:none }
.fp__ui{ position:absolute; inset:0; pointer-events:none; z-index:2 }
.fp__ui > *{ pointer-events:auto }

/* a soft floor so the bar reads on bright frames */
.fp::after{
  content:""; position:absolute; inset:auto 0 0 0; height:32%; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.45), transparent);
  pointer-events:none; opacity:0; transition:opacity .5s var(--e-out);
}
.fp.is-awake::after,
.fp:not(.is-playing)::after{ opacity:1 }

.fp__big{
  /* the same glass pill as the control bar it hands over to */
  position:absolute; left:50%; top:50%;
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 1.8rem 1.05rem 1.45rem;
  transform:translate(-50%,-50%);
  border:0; border-radius:999px;
  background:rgba(14,14,16,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  color:#fff; font:500 var(--t-b16)/1 var(--sans); white-space:nowrap;
  cursor:pointer;
  transition:transform .5s var(--e-out), opacity .4s var(--e-out), color .3s var(--e-out);
}
.fp__big::after{ content:"Bekijk video" }
[lang="en"] .fp__big::after{ content:"Watch video" }
.fp__big svg{ width:1.35rem; height:1.35rem; transition:color .3s var(--e-out) }
.fp__big:hover{ transform:translate(-50%,-50%) scale(1.05) }
.fp__big:hover svg{ color:var(--accent) }
.fp.is-playing .fp__big,
.fp:not(.is-idle) .fp__big{ opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.9) }

.fp__bar{
  position:absolute; left:50%; bottom:clamp(.7rem,1.8vw,1.2rem);
  width:min(calc(100% - 2 * clamp(.7rem,1.8vw,1.2rem)), 56rem);
  display:flex; align-items:center; gap:clamp(.55rem,1.2vw,.95rem);
  padding:.3rem 1rem .3rem .45rem;
  border-radius:999px;
  background:rgba(14,14,16,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  color:#fff; font:500 13px/1 var(--sans);
  opacity:0; transform:translate(-50%, .5rem);
  transition:opacity .45s var(--e-out), transform .6s var(--e-out);
}
.fp.is-awake .fp__bar,
.fp:not(.is-playing):not(.is-idle) .fp__bar,
.fp.is-scrubbing .fp__bar{ opacity:1; transform:translate(-50%, 0) }

.fp__btn{
  display:grid; place-items:center; flex:none;
  width:2.2rem; height:2.2rem; border:0; border-radius:999px;
  background:transparent; color:#fff; cursor:pointer;
  transition:background .3s var(--e-out), color .3s var(--e-out);
}
.fp__btn svg{ width:1.1rem; height:1.1rem }
.fp__btn:hover{ background:rgba(255,255,255,.1); color:var(--accent) }

.fp__time{ flex:none; font-variant-numeric:tabular-nums; letter-spacing:.02em; color:rgba(255,255,255,.55) }

.fp__track{
  position:relative; flex:1; height:2.2rem; cursor:pointer; touch-action:none;
  outline:none;
}
.fp__track::before,
.fp__buf,
.fp__fill{
  position:absolute; left:0; top:50%; height:4px; border-radius:4px;
  transform:translateY(-50%);
}
.fp__track::before{ content:""; right:0; background:rgba(255,255,255,.16) }
.fp__buf{ width:0; background:rgba(255,255,255,.12) }
.fp__fill{ width:0; background:var(--accent) }
.fp__knob{
  position:absolute; top:50%; left:0; width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--e-out);
}
.fp__track:hover .fp__knob,
.fp.is-scrubbing .fp__knob,
.fp__track:focus-visible .fp__knob{ transform:translate(-50%,-50%) scale(1.2) }
.fp__tip{
  position:absolute; bottom:100%; left:0; transform:translate(-50%, .2rem);
  padding:.3rem .45rem; border-radius:6px;
  background:#fff; color:var(--ink); font-size:12px; font-variant-numeric:tabular-nums;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .3s var(--e-out);
}
.fp__track:hover .fp__tip{ opacity:1; transform:translate(-50%, -.1rem) }

/* in fullscreen the frame fills the screen and the film is shown whole */
.fp:fullscreen{ border-radius:0; margin:0; width:100%; height:100%; aspect-ratio:auto }
.fp:fullscreen video{ object-fit:contain }
.fp:-webkit-full-screen{ border-radius:0; margin:0; width:100%; height:100%; aspect-ratio:auto }
.fp:-webkit-full-screen video{ object-fit:contain }

@media (max-width:600px){
  .fp__dur{ display:none }

}
.fp__teaser{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
  object-fit:cover; background:#000; cursor:pointer;
  transition:opacity .5s var(--e-out);
}
.fp:not(.is-idle) .fp__teaser{ opacity:0; pointer-events:none }
.fp::after{ z-index:1 }
.reel__player.fp{ border-radius:0 }
/* before the film has started there is only the play button */
.fp.is-idle .fp__bar{ opacity:0; transform:translate(-50%, .5rem); pointer-events:none }
.fp.is-idle::after{ opacity:0 }

/* the glass bar is baked into the loop; this pill sits just under it so
   the plate reads as something to press. The whole plate is the link. */
.reelplate__cta{
  position:absolute; left:50%; top:calc(50% + clamp(2rem, 4vw, 3.9rem)); z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.62rem 1.15rem .62rem .95rem;
  transform:translateX(-50%);
  border-radius:999px;
  background:var(--accent); color:var(--ink);
  font-size:var(--t-b14); line-height:1; white-space:nowrap;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
/* left:50% leaves an absolute box only half the plate to shrink into, so
   a larger pill would squeeze its own icon away: it takes its content's
   width instead, and the icon never shrinks */
.reelplate__cta{ width:max-content }
.reelplate__cta svg{ width:.9rem; height:.9rem; flex:none }
.reelplate__box:hover .reelplate__cta{ transform:translateX(-50%) scale(1.05) }
/* Phones and tablets: the plate takes a project card's 16:10 and loads the
   cut without the glass bar, so the pill stands on its own in the middle. */
@media (max-width:860px){
  .reelplate__box{ padding-top:62.5% }
  .reelplate__cta{
    top:50%; transform:translate(-50%,-50%);
    /* the same size as "Bekijk alle projecten"; the icon leads here, so
       the wider side of the padding is the right one */
    font-size:var(--t-b16); font-weight:500;
    padding:1.05rem 1.8rem 1.05rem 1.5rem; gap:.75rem;
  }
  .reelplate__cta svg{ width:1.15em; height:1.15em }
  .reelplate__box:hover .reelplate__cta{ transform:translate(-50%,-50%) scale(1.05) }
  /* over the clean cut the pill is glass, the same as the film player's
     "Bekijk video": smoke, a hairline, the footage blurred behind it, and
     the icon lighting up in acid on hover */
  .reelplate__cta{
    background:rgba(14,14,16,.28);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    color:var(--paper);
  }
  .reelplate__cta svg{ transition:color .3s var(--e-out) }
  .reelplate__box:hover .reelplate__cta svg{ color:var(--accent) }
}
.foot__tel{
  display:table; margin-top:.9rem;
  font-size:var(--t-b16); line-height:var(--lh-body);
  color:var(--paper); transition:color .3s var(--e-out);
}
.foot__tel:hover{ color:var(--accent) }
/* the studio's address, under the phone number and in the same voice */
.foot__addr{
  margin-top:.9rem;
  font-size:var(--t-b16); line-height:var(--lh-body);
  color:var(--paper);
}
.pj-lead--more{ margin-top:1em }
/* the cards carry a title and a line of copy now, no figure */
.why__c h3{ font-size:var(--t-sub4); line-height:var(--lh-sub); font-weight:600 }
.why__c--img h3{ margin-top:0 }

/* photo cards: the whole card is frosted glass over its photo, the same
   glass as the film player, with the copy at the foot */
.why__over{
  position:absolute; inset:0; z-index:1; margin:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1rem, 1.7vw, 1.5rem);
  border-radius:inherit;
  background:rgba(14,14,16,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}

/* hero: one glass pill under the headline, the same glass as the film player */
.hero__cta{
  grid-column:1; grid-row:3; justify-self:start;
  margin-top:clamp(1.1rem, 2.2vw, 1.8rem);
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 1.8rem 1.05rem 1.45rem;
  border-radius:999px;
  background:rgba(14,14,16,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  color:var(--paper); font-size:var(--t-b16); line-height:1; white-space:nowrap;
  transition:transform .5s var(--e-out), background .4s var(--e-out);
}
.hero__cta svg{ width:1.35rem; height:1.35rem; transition:color .3s var(--e-out) }
.hero__cta:hover{ transform:translateY(-2px); background:rgba(14,14,16,.42) }
.hero__cta:hover svg{ color:var(--accent) }
@media (max-width:860px){
  .hero__cta{ grid-row:3 }
  .hero__tag{ grid-row:4 }
  .hero__foot{ grid-row:5 }
}
/* the hero carries a line of copy again: headline, sub, button */
.hero__inner{ grid-template-rows:1fr auto auto auto }
.hero__tag{ grid-row:3; max-width:40ch }
.hero__cta{ grid-row:4 }

/* ═══════════════════════════════════════════════════════════════
   pixel reveal
   A letter does not fade in: it is drawn as a coarse mosaic of its own
   shape. Half the cells arrive as ink, the other half as acid pixels, and
   once the pixels drop away the glyph stands whole. Ahead of the edge
   nothing is drawn. Without JS the heading is plain text.
   ═══════════════════════════════════════════════════════════════ */
/* a heading that ships its own line breaks keeps them: [data-lines] gave
   .l a block of its own, and data-pixel has to do the same */
[data-pixel] .l{ display:block }
.pxw{ display:inline-block; white-space:nowrap; text-indent:0 }
.pxc{
  position:relative; display:inline-block;
  --px-o:0; --px-grid:.3em; --px-x:0px; --px-y:0px;
}
/* the checkerboard that cuts both layers into cells */
.pxc b,
.pxc::before{
  -webkit-mask-image:conic-gradient(#000 0 25%, transparent 0 50%, #000 0 75%, transparent 0);
  mask-image:conic-gradient(#000 0 25%, transparent 0 50%, #000 0 75%, transparent 0);
  -webkit-mask-size:var(--px-grid) var(--px-grid);
  mask-size:var(--px-grid) var(--px-grid);
}
.pxc b{
  font-weight:inherit; display:inline-block;
  -webkit-mask-position:var(--px-x) var(--px-y);
  mask-position:var(--px-x) var(--px-y);
}
/* the acid half: the same glyph, filled flat, offset by one cell so it
   lands exactly where the ink is missing */
.pxc::before{
  content:attr(data-c);
  position:absolute; left:0; top:0; z-index:1;
  opacity:var(--px-o); pointer-events:none;
  color:var(--accent);
  -webkit-mask-position:calc(var(--px-x) + var(--px-grid)) var(--px-y);
  mask-position:calc(var(--px-x) + var(--px-grid)) var(--px-y);
}
/* resolved: no mask, no pixels */
.pxc.is-done b{ -webkit-mask-image:none; mask-image:none }
.is-lit .pxc{ --px-o:0 }
.is-lit .pxc b{ -webkit-mask-image:none; mask-image:none }

/* ── all-projects button ─────────────────────────────────
   The homepage shows a selection; this pill leads to work.html, which
   carries every project. Centred under the grid. */
.works__more{
  display:flex; justify-content:center;
  margin-top:clamp(2.4rem, 5vw, 4rem);
}
/* larger than the other pills: this one closes the grid, so it has to
   read as the next step rather than a footnote */
.works__more .pill:not(.pill--glass){
  font-size:var(--t-b16); font-weight:500;
  padding:1.05rem 1.5rem 1.05rem 1.8rem; gap:.75rem;
}


@property --smoke{ syntax:'<number>'; inherits:false; initial-value:.4 }
/* ── glass pill ──────────────────────────────────────────
   The header's "Bekijk ons werk", for a pill that sits on the light page:
   the same hairline, type, icon size, padding and hover. Only the smoke is
   deeper: 40% against the header's 28%, which reads dark only because the
   footage behind it is dark. */
.pill.pill--glass{            /* two classes: outranks .pill:has(> svg) */
  --smoke:.4;
  gap:.7rem;
  padding:1.05rem 1.45rem 1.05rem 1.8rem;     /* the header's, mirrored: the icon trails */
  background:rgba(14,14,16,var(--smoke));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  color:var(--paper); font-size:var(--t-b16); font-weight:400;
  transition:transform .5s var(--e-out), --smoke .4s var(--e-out);
}
.pill--glass:hover{ filter:none; --smoke:.52 }
.pill--glass svg{ width:1.35rem; height:1.35rem; transition:transform .4s var(--e-out), color .3s var(--e-out) }
.pill--glass:hover svg{ color:var(--accent) }

/* ── language switch ─────────────────────────────────────
   Centred in the bar, between the wordmark and the menu, and on the same
   ink as the menu words: navInk() measures it like any other. */
.nav__lang{
  /* its line sits on the bar's first line, level with "home": the bar's
     own padding, less the button's, so the type lines up rather than the box */
  position:absolute; left:50%; top:calc(var(--pad) - .2rem); transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.3em;
  padding:.2rem .45rem; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:var(--t-sub4); line-height:var(--lh-sub);
  font-weight:500; letter-spacing:-.01em;
  color:var(--paper); transition:color .1s linear;
}
.nav__lang.is-ink{ color:var(--ink) }
.nav__lang span{ opacity:.4; transition:opacity .3s var(--e-out) }
.nav__lang span.is-on{ opacity:1 }
.nav__lang i{ font-style:normal; opacity:.3 }
.nav__lang:hover span{ opacity:.7 }
.nav__lang:hover span.is-on{ opacity:1 }

.brand{ margin-top:calc(var(--t-sub4) * .269) }

/* ── the sign-off mark ───────────────────────────────────
   The footer's wordmark is type now rather than artwork, so it carries
   the name as it is written: studio zero in, no slash. It sets in the
   page's own face, like the line it sits on. */
.foot__mark{ color:var(--paper) }   /* type, size and tracking come from the bar */

/* the lightbox shows the count, never the image's description: those are
   alt texts, written for screen readers rather than to be read on screen */
.shotbox__t{ display:none }