/* ==========================================================================
   alfred. — Home 2 (2026 second draft)
   One Off White box inside the black frame. Everything happens in the box:
   mostly sideways, at the end up. Then the page scrolls on to the footer.
   --bw / --bh (box width/height in px) are set by home2.js.
   ========================================================================== */

.page-home2 {
  --frame: var(--red);                 /* frame + nav: red, turning black past the promise (home2.js) */
  --blue: #004cc0;
  --gap: calc(22 * var(--u));          /* one spacing everywhere in the box: edges, lanes, cards */
  --pad: calc(16 * var(--u));          /* black frame around the box: the same above (under the nav), left, right and below */
  --navh: calc(52 * var(--u));   /* compact (user, 2026-11-06) */
  --radius: calc(24 * var(--u));
  /* news: one step = a right-hand tile + gap; the box shows 1.5 steps */
  --step: calc((var(--bh) - var(--gap)) / 1.5);
  --col: calc(var(--step) * .6);
  background: var(--frame);
}
html:has(.page-home2) { background: var(--frame); }

/* The whole site sits in one rounded black rectangle with light grey around it:
   a fixed mask whose huge grey shadow covers everything outside the rounded shape */
.page-home2 { --edge: calc(12 * var(--u)); --edge-radius: calc(28 * var(--u)); }
.site-mask {
  position: fixed;
  inset: var(--edge);
  z-index: 60;
  border-radius: var(--edge-radius);
  box-shadow: 0 0 0 100vmax var(--cream);   /* outside the frame: Off White, like the site */
  pointer-events: none;
}
.page-home2 .nav { top: var(--edge); }
/* the nav reaches down to the box, so its logo and links sit centred in the black above the box */
.page-home2 .nav { height: calc(var(--navh) + var(--pad)); }

.page-home2 .nav { background: var(--frame); color: var(--cream); }
.page-home2 .nav__lang-menu { background: var(--frame); }

/* ---------- Stage + box ---------- */
.stage {
  position: relative;
  height: 100vh;
  /* --top starts as a thin frame, becomes the nav's height when the nav drops */

  background: var(--frame);
}
.box {
  /* placed with insets, not stage padding: pinning freezes the pinned element's padding,
     which kept the box under the nav. --top grows from a thin frame to nav height + gap. */
  position: absolute;
  top: calc(var(--edge) + var(--top, var(--pad)));
  left: calc(var(--edge) + var(--pad));
  right: calc(var(--edge) + var(--pad));
  bottom: calc(var(--edge) + var(--pad));
  border-radius: var(--radius);
  /* no fill of its own: the image area, growth panel and news are separate rounded blocks */
  overflow: hidden;
  isolation: isolate;
}

.htrack { position: absolute; z-index: 1; inset: 0 auto 0 0; display: flex; width: max-content; will-change: transform; }
/* nothing in the box shows until the script has measured and placed it */
.is-loading .htrack, .is-loading .h2-contact { visibility: hidden; }
.hp { position: relative; flex: none; height: 100%; }
/* block 1 (title, promise, work lanes): one cream area, also reaching left past the title */
.hp--hero, .hp--promise, .hp--work { background: var(--cream); }
.htrack::before { content: ""; position: absolute; right: calc(100% - 2px); top: 0; bottom: 0; width: 100vw; background: var(--cream); }
/* panels overlap by a pixel, so no hairline of black shows where they meet mid-scroll */
.hp--hero, .hp--promise { margin-right: -1px; }
.hp--work { border-radius: 0 var(--radius) var(--radius) 0; }
/* only as wide as their text, so the two never sit a screen apart */
/* gaps scale with the box width, so wide screens get wide gaps too */
.hp--hero, .hp--promise { display: grid; place-items: center; padding: 0 calc(var(--bw) * .16); }

/* ---------- We're about HAPPY BUSINESS ---------- */
.h2-hero {
  position: relative;
  text-align: left;   /* left-aligned (user, 2026-11-03) */
  /* sized from the box itself: as wide as the screen allows, as tall as it allows */
  /* the whole block 20% smaller (user, 2026-11-03) */
  --hfs: calc(min(calc(var(--bw) * .1), calc(var(--bh) * .3)) * .8);
}
.h2-hero__kicker { font-size: calc(var(--hfs) * .4); line-height: calc(var(--hfs) * 75 / 160); margin-bottom: calc(var(--hfs) * -10 / 160); color: var(--black); }
.h2-hero__title {
  font-family: var(--font-wide);
  font-weight: 900;
  /* HAPPY BUSINESS another 10% smaller than the line above it (user) */
  font-size: calc(var(--hfs) * .9);
  line-height: calc(var(--hfs) * .9 * 148 / 160);
  text-transform: uppercase;
  color: var(--red);
}

/* ---------- at alfred. we GROW … ---------- */
.promise {
  font-size: calc(64 * var(--u));
  line-height: calc(75 * var(--u));
  text-align: center;
  white-space: nowrap;
  color: var(--black);
}
/* Key words start in the same font as the rest; JS widens each one while its
   bold red copy fades in on top, so the line reflows smoothly */
.kw { position: relative; display: inline-block; vertical-align: top; }
.kw__bold {
  position: absolute;
  left: 50%; top: 0;   /* centred by the script (xPercent -50), so it stays centred at any size */
  font-family: var(--font-wide);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--red);
  opacity: 0;
}

/* ---------- Work: two lanes of 21:9 cards, equal spacing all round (user, 2026-11-05) ---------- */
.hp--work {
  --lane: calc((var(--bh) - 3 * var(--gap)) / 2);
  padding: var(--gap) var(--gap) var(--gap) 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* the promise's own side room is the gap to the first cars (the pointing hand is gone) */
  padding-left: 0;
}
.lane { display: flex; gap: var(--gap); height: var(--lane); }
/* the top row starts further right, the bottom row further left: MORE WORK sits in the room after the bottom row, under the top row's end */
.lane:first-child { padding-left: calc(var(--lane) * 1.1); }

.wcard {
  position: relative;
  flex: none;
  height: 100%;
  width: calc(var(--lane) * var(--r));
  border: 0;
  padding: 0;
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  background: var(--black);
  cursor: pointer;
  font: inherit;
  will-change: transform;
  container-type: inline-size;
}
.wcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.wcard:hover img { transform: scale(1.06); }
.wcard span, .wpop__media span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-wide);
  font-weight: 900;
  /* the same size on every card (squares too); capped only on cards narrower than a square */
  font-size: min(calc(var(--lane) * .16), 16cqi);
  line-height: .9;
  color: var(--cream);
  text-shadow: 0 0 calc(18 * var(--u)) rgba(35, 35, 35, .35);
  pointer-events: none;
}

/* ---------- Alfred Growth System (as the reference: everything sized from the panel's width;
   never wider than what the news leaves, so both sit fully in the box at the end) ---------- */
/* block 2: the red panel, full height, with black gaps either side */
.hp--growth { width: min(calc(var(--bh) * .95 + 2 * var(--gap)), calc(var(--bw) - 2 * var(--col) - 3 * var(--gap))); padding: 0 var(--gap); }
.growth {
  height: 100%;
  border-radius: var(--radius);
  background: var(--red);
  color: var(--black);
  container-type: inline-size;
  display: flex;
  align-items: center;
  /* % of the panel's own width (cqi here would measure the page, not the panel) */
  padding: 16% 13% 0 13%;   /* the text a little lower, well clear of the curve (user) */   /* room on the right too, so a longer line (in English) never touches the edge */
}
.growth__inner { display: flex; flex-direction: column; width: max-content; }
/* stands on the kicker, its right edge past the end of the title */
.growth__kicker { font-family: var(--font); font-weight: 400; text-transform: none; font-size: 2.15cqi; margin-bottom: 1.3cqi; }   /* the thin, small-letter version (user) */
.growth__title {
  font-family: var(--font-wide);
  font-weight: 800;
  font-size: 4.65cqi;
  line-height: 1.12;
  color: var(--cream);
  white-space: nowrap;
}
.growth__body { margin-top: 4.1cqi; font-size: 2.15cqi; line-height: 1.22; }
.growth__link { align-self: flex-start; margin-top: 3.5cqi; font-family: var(--font-wide); font-weight: 800; font-size: 2.2cqi; text-decoration: underline; text-underline-offset: .2em; transition: color .4s var(--ease-out); }
.growth__link:hover { color: var(--cream); }

/* ---------- In het nieuws: two columns, half a tile apart ---------- */
/* block 3: the news, its own cream rounded block */
.hp--news { display: flex; gap: var(--gap); padding: 0 var(--gap); overflow: hidden; background: var(--cream); border-radius: var(--radius); }
.ncol { align-self: flex-start; width: var(--col); display: flex; flex-direction: column; gap: var(--gap); will-change: transform; }
.ncol--right { padding-top: var(--gap); }
/* starts half a step higher, so you see the bottom half of IN HET NIEUWS */
.ncol--left { margin-top: calc(var(--gap) - var(--step) / 2); }
.ncol > * { flex: none; height: calc(var(--step) - var(--gap)); border-radius: var(--radius); }
/* the left column has three articles to the right's four: each a third of a step taller */
.ncol--left .ncard--tall { height: calc(var(--step) * 4 / 3 - var(--gap)); }

.nbanner { background: var(--red); display: grid; place-items: center; overflow: hidden; }
.nbanner span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-wide);
  font-weight: 900;
  text-transform: uppercase;
  font-size: calc(var(--col) * .16);
  line-height: .95;
  text-align: center;
  color: var(--black);
}

.ncard {
  display: flex;
  flex-direction: column;
  padding: calc(12 * var(--u));
  background: var(--black);
  color: var(--cream);
  overflow: hidden;
}
/* the image zooms inside its own rounded frame, so the black border stays even */
.nimg { flex: 1; min-height: 0; border-radius: calc(8 * var(--u)); overflow: hidden; }
.nimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.ncard:hover .nimg img { transform: scale(1.05); }
.ncard p { margin-top: calc(14 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(19 * var(--u)); }
.ncard small { display: flex; justify-content: space-between; margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); }
.ncard small b { font-size: calc(12 * var(--u)); color: var(--red); transition: color .4s var(--ease-out); }
.ncard:hover small b { color: var(--cream); }

/* ---------- Opening burst (under the track, so the title can come in over it) ---------- */
.burst { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--cream); }
/* during the opening the title's panel is see-through, so the shots underneath show */
.is-intro .hp--hero, .is-intro .htrack::before { background: transparent; }
/* on wide screens the next panels already start inside the box: during the intro they stay out of sight, so the shots fill it */
.is-intro .hp:not(.hp--hero) { visibility: hidden; }
.burst img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.burst__logo { position: absolute; left: 50%; top: 50%; width: min(calc(var(--bw) * .42), calc(var(--bh) * 1.05)); translate: -50% -50%; color: var(--cream); opacity: 0; z-index: 2; filter: drop-shadow(0 0 calc(30 * var(--u)) rgba(35, 35, 35, .25)); }

/* ---------- Work pop-up ---------- */
.wpop {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
}
.wpop.is-open { pointer-events: auto; visibility: visible; }
/* the grey veil over the box */
.wpop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(200, 200, 194, .72);
  backdrop-filter: grayscale(1);
  opacity: var(--veil, 0);
}
.wpop__box {
  position: relative;
  z-index: 1;
  padding: calc(14 * var(--u)) calc(14 * var(--u)) 0;
  border-radius: calc(18 * var(--u));
  background: var(--red);
  will-change: transform;
}
.wpop__media { position: relative; border-radius: calc(10 * var(--u)); overflow: hidden; }
.wpop__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wpop__more {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .3em;
  padding: calc(14 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u));
  font-family: var(--font-wide);
  font-weight: 800;
  font-size: calc(18 * var(--u));
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.wpop__more span { display: inline-block; transition: transform .5s var(--ease-pop); }
.wpop__more:hover span { transform: translate(.15em, -.15em); }

/* ---------- Footer: centred, blue button ---------- */
.h2-contact {
  position: relative;
  height: max(100vh, calc(1024 * var(--u)));
  background: var(--black);
  color: var(--red);
  overflow: hidden;
}
.h2-contact .footer__info { left: 50%; top: calc(170 * var(--u)); transform: translateX(-50%); }
.h2-contact__cta { position: absolute; left: 0; right: 0; top: calc(450 * var(--u)); display: flex; justify-content: center; }
.h2-contact .footer__info, .h2-contact__cta { z-index: 2; }
.btn--blue { background: var(--blue); color: var(--cream); border-color: var(--cream); }
.h2-contact__big {
  position: absolute;
  left: 50%;
  bottom: calc(70 * var(--u));
  transform: translateX(-50%);
  font-family: var(--font-wide);
  font-weight: 900;
  font-size: calc(190 * var(--u));
  line-height: calc(170 * var(--u));
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  color: var(--cream);
}

/* hover labels on the traffic cards: a one-word tag drops in at the top, a short line rises at the bottom.
   Nav font (regular, uppercase), small; the card's own overflow clips them, so they slide in from the edges */
.wcard small {
  position: absolute;
  left: calc(14 * var(--u));
  right: calc(14 * var(--u));
  z-index: 1;
  font-family: var(--font);
  font-size: calc(13 * var(--u));
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--cream);
  pointer-events: none;
  opacity: 0;
  transition: transform .6s var(--ease-out), opacity .45s var(--ease-out);
}
.wcard .wcard__tag { top: calc(12 * var(--u)); transform: translateY(-160%); }
.wcard .wcard__txt {
  bottom: calc(12 * var(--u));
  transform: translateY(110%);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.wcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(35,35,35,.4), transparent 28%, transparent 66%, rgba(35,35,35,.5));
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.wcard:hover small { transform: none; opacity: 1; }
.wcard:hover .wcard__txt { transition-delay: .06s; }
.wcard:hover::after { opacity: 1; }
/* a real logo in place of the typed name */
.wcard span .wcard__logo, .wpop__media span .wcard__logo { width: min(calc(var(--lane) * var(--w)), 80%); height: auto; transform: none; filter: drop-shadow(0 0 calc(18 * var(--u)) rgba(35, 35, 35, .35)); }
.wpop__media span .wcard__logo { width: min(calc(var(--w) * 45%), 70%); }
.wcard .wcard__txt { text-transform: none; }

.growth { position: relative; }
/* narrow screens: the news columns leave no room, so the panel takes the box's width instead of collapsing */
.hp--growth { width: max(min(calc(var(--bh) * .95 + 2 * var(--gap)), calc(var(--bw) - 2 * var(--col) - 3 * var(--gap))), min(calc(var(--bw) - 2 * var(--gap)), calc(var(--bh) * .95 + 2 * var(--gap)))); }


/* ---------- Portrait (phones, upright tablets) ----------
   Same proportions as desktop, measured from the width, but using it: the title and the promise
   fill the box's width instead of sitting small in the middle. */
@media (orientation: portrait) {
  .hp--hero, .hp--promise { padding: 0 calc(var(--bw) * .06); }
  .h2-hero { --hfs: calc(var(--bw) * .113 * .8); }
  .hp--promise { --pfs: calc(var(--bw) * .067); }
  .promise { font-size: var(--pfs); line-height: calc(var(--pfs) * 75 / 64); }
}

/* ---------- The design viewport ----------
   The box is laid out once, at the window's size when the page loads (--dvw/--dvh, --u from that size,
   all set by home2.js). Resizing only scales it (--vs) as a whole, centred (--vx), so everything keeps
   its proportions and every animation stays in step; leftover space shows the frame colour. */
.vp { position: absolute; left: var(--vx, 0px); top: var(--vy, 0px); width: var(--dvw, 100vw); height: var(--dvh, 100vh); transform-origin: 0 0; scale: var(--vs, 1); }
/* the nav scales with it: same width as the design viewport, over it */
.page-home2 .nav { left: var(--vx, 0px); right: auto; width: var(--dvw, 100vw); transform-origin: 0 0; scale: var(--vs, 1); top: calc(var(--vy, 0px) + var(--edge) * var(--vs, 1)); }
/* switching between landscape and portrait rebuilds the layout behind a blur */
.vp { transition: filter .35s var(--ease-out), opacity .35s var(--ease-out); }
.page-home2 .nav { transition: background-color .6s var(--ease-out), color .6s var(--ease-out), transform .8s var(--ease-out), filter .35s var(--ease-out), opacity .35s var(--ease-out); }
.is-relayout .vp, .is-relayout .nav { filter: blur(14px); opacity: 0; }

/* ---------- Letter case (user, 2026-11-03): every thin, regular text in small letters,
   every fat (Wide / bold) text in capitals ---------- */
.page-home2 .box, .page-home2 .h2-contact { text-transform: none; }
.page-home2 .wcard small { text-transform: none; }
.page-home2 :is(b, strong, .wide, .h2-hero__title, .kw__bold, .growth__title, .growth__link, .nbanner span, .wpop__more, .h2-contact__big, .btn) { text-transform: uppercase; }

/* the bold names in the footer details: Wide Black 800, as on the contact page (user) */
.footer__col strong { font-weight: 800; }

/* the growth curve's dot: Off White, centred on the tip of the curve (home2.js) */
.hp--growth { position: relative; }
.growth__dot { position: absolute; z-index: 3; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: calc(-9 * var(--u)) 0 0 calc(-9 * var(--u)); border-radius: 50%; background: var(--cream); pointer-events: none; opacity: 0; }   /* no glow (user) */

/* HAPPY BUSINESS. : the salmon full stop that bounces in (home2.js) */
.h2-stop { position: absolute; z-index: 2; left: 0; top: 0; border-radius: 50%; background: var(--red); opacity: 0; pointer-events: none; }

/* MORE WORK: the site's own button (.btn: red, black outline, Wide Black capitals, same hover),
   at 80% of its size; home2.js pops it in as a ball that stretches into the pill */
.wmore { flex: none; align-self: center; display: flex; align-items: center; }
.wmore .btn {
  height: calc(82 * .8 * var(--u)); padding: 0 calc(48 * .8 * var(--u)) .25em;
  border-radius: calc(72 * .8 * var(--u)); border-width: calc(3 * .8 * var(--u));
  font-size: calc(40 * .8 * var(--u)); overflow: hidden;
}
.wmore__txt { display: block; }

/* the footer is the contact page's contact block at the same size (user): its unit is 70% of the
   homepage's, the details, button and EVEN BELLEN? stacked and centred as there */
.h2-contact { --hu: var(--u); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(120 * var(--hu)) 0; }
.h2-contact > * { --u: calc(var(--hu) * .7); }
.h2-contact .footer__info { position: static; transform: none; gap: calc(51 * var(--u)); }
.h2-contact .footer__col { width: auto; white-space: nowrap; }
.h2-contact .footer__col:nth-child(1) { width: calc(243 * var(--u)); }
.h2-contact .footer__col strong { font-family: var(--font-wide); color: var(--cream); }   /* Eddy, Generaal Vetter: Off White (user) */
.h2-contact__cta { position: static; margin-top: calc(70 * var(--u)); }
.h2-contact__big { position: static; transform: none; width: calc(1280 * var(--u)); margin-top: calc(70 * var(--u)); font-size: calc(160 * var(--u)); line-height: calc(148 * var(--u)); }
.h2-contact .btn { height: calc(82 * .8 * var(--hu)); padding: 0 calc(48 * .8 * var(--hu)) .25em; border-radius: calc(72 * .8 * var(--hu)); border-width: calc(3 * .8 * var(--hu)); font-size: calc(40 * .8 * var(--hu)); }   /* the same size as MORE WORK (user) */

/* ==========================================================================
   Phones and upright tablets (user, 2026-11-04): its own layout, not the desktop squeezed.
   Everything stacked in one column that scrolls down (no sideways scroll), centred, short blocks.
   The unit (--u) is a 420th of the width here (home2.js).
   ========================================================================== */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .page-home2 { --edge: 6px; --pad: 8px; --navh: 50px; --radius: 22px; --gap: 14px; --edge-radius: 30px; }
  html:has(.page-home2), body.page-home2 { overflow-x: clip; }
  /* the inner window: a fixed rounded opening in the frame, everything scrolls inside it */
  body.page-home2::after {
    content: ""; position: fixed; z-index: 40; pointer-events: none;
    top: calc(var(--edge) + 58px); left: calc(var(--edge) + var(--pad)); right: calc(var(--edge) + var(--pad)); bottom: calc(var(--edge) + var(--pad));
    border-radius: var(--radius); box-shadow: 0 0 0 100vmax var(--frame);
  }
  .page-home2 .nav.nav { left: 0; width: 100%; scale: none; top: var(--edge); height: 58px; }
  .stage { height: auto; }
  .vp { position: static; width: auto; height: auto; scale: none; }
  .box { position: relative; inset: auto; margin: calc(var(--edge) + 58px) calc(var(--edge) + var(--pad)) 0; overflow: visible; border-radius: var(--radius); }
  .htrack { position: relative; z-index: 1; display: flex; flex-direction: column; width: auto; gap: var(--gap); will-change: auto; transform: none !important; }
  .htrack::before { display: none; }
  .hp { height: auto; margin: 0 !important; border-radius: var(--radius); }

  /* HAPPY BUSINESS: a full screen, the title as wide as the screen (fitHero) */
  .hp--hero { min-height: calc(100svh - 2 * var(--edge) - 58px - var(--pad)); padding: 0 6%; display: grid; place-items: center; }
  .h2-hero { --hfs: 40px; }
  .hp--hero, .hp--promise, .hp--work { border-radius: var(--radius); }
  /* the promise: big and centred, a screen of its own to change its words in */
  .hp--promise { padding: clamp(64px, 18vw, 160px) 5%; display: grid; place-items: center; }   /* just the text with healthy room, growing with the screen (user) */
  .promise { font-size: min(5.5vw, 44px); line-height: 1.25; white-space: nowrap; }

  /* the work: two columns of cards, every one the same calm shape; MORE WORK centred under them */
  .hp--work { --lane: 75.5vw; /* logo size: 75.5 x .27 = the approved 20vw */ padding: 18px; display: grid; grid-template-columns: 1fr; gap: 18px; }   /* stacked one by one, like the Work page (user) */
  .lane { display: contents; }
  .wcard { width: auto; height: auto; aspect-ratio: 16 / 9; transform: none !important; border-radius: 12px; }
  .wcard span { font-size: 5vw; }
  .wcard small { display: none; }
  .wmore { grid-column: 1 / -1; justify-self: center; margin: 14px 0 10px !important; }
  .wmore .btn, .h2-contact .btn.btn {
    height: 46px; padding: 0 24px .25em; border-radius: 46px; border-width: 2px; font-size: min(4.2vw, 18px);
  }

  /* the growth panel: the curve only in a low band on top, the text right under it */
  .hp--growth { width: auto; padding: 0; background: none; }
  .growth { height: auto; display: block; padding: calc((100vw - 2 * var(--edge) - 2 * var(--pad)) * .3 + 26px) 8% 44px; }
  .growth__inner { width: auto; }
  .growth__kicker { font-size: 4cqi; margin-bottom: 2cqi; }
  .growth__title { font-size: min(6.2cqi, 36px); white-space: nowrap; }
  .growth__body { margin-top: 5cqi; font-size: 4.1cqi; line-height: 1.3; }
  .growth__link { margin-top: 6cqi; font-size: 4.2cqi; }
  .growth__dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; }

  /* the news: one banner, then a list of short cards (picture left, words right) */
  .hp--news { display: flex; flex-direction: column; gap: var(--gap); padding: 18px; overflow: visible; }
  .ncol { display: contents; }
  .ncol > * { height: auto !important; }
  .nbanner { display: none; }
  .ncol--left .nbanner:first-child { display: grid; padding: 22px 0; border-radius: var(--radius); }
  .ncol--left .nbanner:first-child span { writing-mode: horizontal-tb; transform: none; font-size: min(10vw, 60px); line-height: .95; }
  /* a portrait picture on the left, the words on the right, everything inside its black card,
     the date and LEES MEER on their own lines at the foot */
  .ncard { display: grid; grid-template-columns: 36% minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 16px; padding: 12px; border-radius: 18px; }
  .nimg { grid-row: 1 / 3; flex: none; aspect-ratio: 3 / 4; height: auto; border-radius: 10px; }
  .ncard p { margin: 4px 0 0; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
  .ncard small { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 12px 0 2px; font-size: 12px; white-space: nowrap; }
  .ncard small b { font-size: 12px; }

  /* the opening: the shots fill the window, not the whole (tall) page */
  .burst { position: fixed; top: calc(var(--edge) + 58px); left: calc(var(--edge) + var(--pad)); right: calc(var(--edge) + var(--pad)); bottom: calc(var(--edge) + var(--pad)); border-radius: var(--radius); overflow: hidden; z-index: 0; }
  .burst__logo { width: 70%; }
  .wpop { position: fixed; z-index: 45; }

  /* the footer: the contact page's block, at the contact page's phone size, centred */
  .h2-contact { height: auto; min-height: 0; padding: 48px 32px calc(var(--edge) + var(--pad) + 70px); margin-top: var(--gap); }
  .h2-contact > * { --u: calc(100vw / 600); }
  .h2-contact .footer__info { flex-direction: column; align-items: center; text-align: center; gap: calc(40 * var(--u)); }
  .h2-contact .footer__col { align-items: center; width: auto !important; }
  .h2-contact__cta { margin-top: calc(56 * var(--u)); }
  .h2-contact__big { width: calc((100vw - 80px) * .9); text-align: center; margin-top: calc(60 * var(--u)); }
}
/* upright tablets: more room, so the work in three columns and the news in two */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1100px) {
  .hp--work { grid-template-columns: 1fr; }
  .hp--news { display: grid; grid-template-columns: 1fr 1fr; }
  .ncol--left .nbanner:first-child { grid-column: 1 / -1; }
  .ncard p { font-size: 18px; }
  .growth { padding-left: 10%; padding-right: 10%; }
}

/* the client logos: 60% smaller, in the card's top right corner (user, 2026-11-05) */
.wcard span { place-items: start end; padding: calc(16 * var(--u)) calc(18 * var(--u)); }
.wcard span .wcard__logo { width: min(calc(var(--lane) * var(--w) * .27), 22%); }   /* lanes are 1.5x taller now: same logo size as before */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .wcard span { padding: 12px 14px; }
}

/* the client logos: every one in the same box, the same distance from the card's top and right edge
   (user, 2026-11-05). The logo fills its box as far as its shape allows, sitting in the top-right corner. */
.wcard span { place-items: start end; padding: 4cqi; }
.wcard span .wcard__logo { width: 22cqi; height: 8cqi; object-fit: contain; object-position: 100% 0; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .wcard span { padding: 4cqi; }
}

/* the small text at the foot of each work card: Obviously Black (800) (user, 2026-11-05) */
.wcard .wcard__txt { font-family: var(--font); font-weight: 800; }
/* ...and sized as a headline: big, tight, the same distance from the edges as the logo */
.wcard .wcard__txt { left: 4cqi; right: 30cqi; bottom: 4cqi; font-size: 4.6cqi; line-height: 1.05; letter-spacing: 0; }

/* the copyright line at the very bottom (user, 2026-11-05) */
.legal { width: 100%; margin: 0; padding: 0 0 calc(10 * var(--u)); text-align: center; font-family: var(--font); font-weight: 400; font-size: max(12px, calc(16 * var(--u))); line-height: 1.4; text-transform: none; letter-spacing: 0; opacity: .7; }
.h2-contact .legal { position: relative; margin-top: calc(48 * var(--u)); color: var(--cream); opacity: .6; }
.legal { font-size: max(10px, calc(12 * var(--u))); }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) { .legal { font-size: 10px; } }
/* the headline is never cut off: no line limit; long ones simply take more lines, a little smaller (user, 2026-11-06) */
.wcard .wcard__txt { display: block; -webkit-line-clamp: unset; overflow: visible; right: 4cqi; font-size: 4cqi; }
.wcard::after { background: linear-gradient(rgba(35,35,35,.4), transparent 28%, transparent 45%, rgba(35,35,35,.65)); }

/* ---------- the work cards = Figma "Work - Calve - Default" and "Work - Calve - Hover -2" (user, 2026-11-09) ----------
   sizes as a share of the card's width (1cqi = 1% of 951). Default: the photo fills the card, the white logo
   bottom right. Hover: the card turns salmon, the photo shrinks into a 12-wide salmon frame (389 high), the
   headline appears under it in white, Obviously Bold 36/41 lowercase; the logo stays. Cursor: the white round
   arrow. Phones: always the hover look. */
.wcard { background: var(--red); cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 75 75'%3E%3Ccircle cx='37.5' cy='37.5' r='37.5' fill='%23FFFFFF'/%3E%3Cpath d='M26.71 50.7C25.34 49.34 26.31 47 28.24 47L42.93 47L23 27.05L26.07 24L46 43.92L46 29.22C46 27.29 48.33 26.33 49.69 27.69C50.1 28.1 50.32 28.65 50.32 29.22L50.32 51.33L28.23 51.33C27.66 51.33 27.11 51.1 26.7 50.7Z' fill='%23232323'/%3E%3C/svg%3E") 28 28, pointer; }
.wcard > span, .wcard::after { display: none !important; }
.wcard > img:not(.wcard__blogo) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; transform: none !important; transition: left .5s var(--ease-out), top .5s var(--ease-out), width .5s var(--ease-out), height .5s var(--ease-out), border-radius .5s var(--ease-out); }
.wcard:hover > img:not(.wcard__blogo) { left: 1.26cqi; top: 1.16cqi; width: 97.48cqi; height: 40.9cqi; border-radius: 1.26cqi; }
.wcard > img.wcard__blogo { position: absolute; z-index: 2; left: auto; top: auto; right: 4.8cqi; bottom: 3cqi; width: 17cqi; height: 10cqi; object-fit: contain; object-position: 100% 100%; border-radius: 0; filter: none; transform: none; pointer-events: none; }
.wcard .wcard__txt { position: absolute; z-index: 2; left: 3.9cqi; right: auto; top: auto; bottom: 3.26cqi; width: 71.8cqi; margin: 0; padding: 0; display: block; overflow: visible; -webkit-line-clamp: unset;
  font-family: var(--font); font-weight: 700; font-size: 3.79cqi; line-height: 4.31cqi; letter-spacing: 0; text-transform: none; color: #fff; text-shadow: none;
  opacity: 0; transform: translateY(1.5cqi); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); }
.wcard:hover .wcard__txt { opacity: 1; transform: none; transition-delay: .08s; }
.wcard .wcard__txt:empty { display: none; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .wcard { cursor: pointer; }
  .wcard > img:not(.wcard__blogo) { left: 1.26cqi; top: 1.16cqi; width: 97.48cqi; height: 40.9cqi; border-radius: 1.26cqi; }
  .wcard .wcard__txt { opacity: 1; transform: none; }
}
/* hover band (under the photo, 14.2cqi high): the headline and the logo both sit exactly in its middle,
   equal room above and below; the logo has the same place when not hovered (user, 2026-11-09) */
.wcard .wcard__txt { top: 42.06cqi; bottom: 0; display: flex; align-items: center; }
.wcard > img.wcard__blogo { bottom: 2.6cqi; height: 9cqi; object-position: 100% 50%; }
/* the cursor: smaller, a clean white circle with the arrow, no shadow */
.wcard { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 75 75'%3E%3Ccircle cx='37.5' cy='37.5' r='37.5' fill='%23FFFFFF'/%3E%3Cpath d='M26.71 50.7C25.34 49.34 26.31 47 28.24 47L42.93 47L23 27.05L26.07 24L46 43.92L46 29.22C46 27.29 48.33 26.33 49.69 27.69C50.1 28.1 50.32 28.65 50.32 29.22L50.32 51.33L28.23 51.33C27.66 51.33 27.11 51.1 26.7 50.7Z' fill='%23232323'/%3E%3C/svg%3E") 20 20, pointer; }
.wcard:focus { outline: none; }

/* the card arrow is drawn by the page (a Windows cursor image gets a dark edge): a clean white circle */
@media (hover: hover) and (pointer: fine) {
  .wcard, .wcard * { cursor: none !important; }
}
.wcursor { position: fixed; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 9999; pointer-events: none; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.wcursor.is-on { opacity: 1; transform: none; }
.wcursor svg { display: block; width: 100%; height: 100%; }

/* the logos pure white #FFFFFF, whatever shade the file has (user, 2026-11-10); the box is the logo's
   own width, so the headline can keep clear of it */
.wcard > img.wcard__blogo { filter: brightness(0) invert(1); width: auto; max-width: 26cqi; }
.wcard .wcard__txt { text-wrap: balance; }

/* the opening images on phones: the part chosen in the CMS, at its zoom */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .burst img { object-position: var(--mx, 50%) var(--my, 50%); scale: var(--mz, 1); transform-origin: var(--mx, 50%) var(--my, 50%); }
}

/* the logo comes up with the red bar and the words on hover (user, 2026-11-10) */
.wcard > img.wcard__blogo { opacity: 0; transform: translateY(1.5cqi); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); }
.wcard:hover > img.wcard__blogo { opacity: 1; transform: none; transition-delay: .08s; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) { .wcard > img.wcard__blogo { opacity: 1; transform: none; } }
/* (user, 2026-11-11) the picture inside the red card has exactly the same rounded corners as the card itself */
.wcard:hover > img:not(.wcard__blogo) { border-radius: inherit; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) { .wcard > img:not(.wcard__blogo) { border-radius: inherit; } }