/* Hallmark · shape: Settled hero, Grid, Split, Showcase, Rows, Form (hire anatomy, content kept) · genre: modern-minimal · theme: brand · redesign: restyle
 * paper: oklch(98.6% 0.004 262) · accent: oklch(52.4% 0.265 265) · display: Poppins · body: Mulish · hero: Settled · nav: slab · footer: mast · signature: the three services drifting apart as you scroll, and the North cabin shown full width
 * axes: cool paper/geometric sans/signal blue · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · restyle: premium · the layout stays; the system gets a navy hero, lighter display weight (600), sharper corners (6px/4px), more air between sections and a slower reveal */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R4 V3 · weakest: P, a service studio has no argument beyond its work; led with the project showcase at full width and cut the glow, marks and stats counters */
/* Hallmark · waive 1 · --font-display is "Poppins", the brand face named in CLAUDE.md · Poppins is the Beeld & Merk house face for every heading on the site */
/* Hallmark · waive 38iii · the accent words Beeld and merk appear once, in the hero slogan · the brand slogan sets these two words apart on every Beeld & Merk page */
/* Hallmark · answered F1 · the apostrophes stay straight so the page text equals the live site and its JSON-LD word for word */
/* Hallmark · dropped assets/v2.js · the homepage no longer loads v2.js (its reveal, counters and parallax are replaced by hm.js); the subpages keep it */
/* Hallmark · answered F8 · the reveal is the page's one choreography; the services drift is scroll-linked and was asked for by the owner */
@import url("./tokens.css");
@import url("./base.css");

body { font-weight: 400; background: var(--color-paper); }
h1, h2, h3 { color: var(--color-ink); }
h2 { max-width: 24ch; }
.container { padding-block: 0; }
.skip-link { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-on-navy); font-weight: 700; text-decoration: none; }
.skip-link:focus-visible { top: var(--space-md); }
.accent { color: var(--color-accent); }
.band-navy :focus-visible, .site-header :focus-visible { outline-color: var(--color-accent-on-navy); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-xl); border: 1px solid var(--color-accent); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-md)/1 var(--font-body); letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); touch-action: manipulation; }
.btn:hover { background: color-mix(in oklch, var(--color-accent) 84%, var(--color-ink)); border-color: color-mix(in oklch, var(--color-accent) 84%, var(--color-ink)); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-muted); }
.btn--quiet:hover { background: var(--color-paper-3); border-color: var(--color-muted); }
.band-navy .btn--quiet, .site-header .btn--quiet { color: var(--color-on-navy); border-color: var(--color-on-navy-edge); }
.band-navy .btn--quiet:hover, .site-header .btn--quiet:hover { background: var(--color-navy-3); border-color: var(--color-on-navy-2); }
.btn--block { width: 100%; }
.wa-icon { width: 20px; height: 20px; flex: none; }
.link { font-weight: 700; color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-color: var(--color-accent); }
.link:hover { color: var(--color-accent); }
.band-navy .link { color: var(--color-on-navy); text-decoration-color: var(--color-accent-on-navy); }
.band-navy .link:hover { color: var(--color-accent-on-navy); }
.textlink { color: var(--color-accent); font-weight: 700; text-decoration-thickness: 2px; }
.textlink:hover { color: var(--color-ink); }

/* ---------- the slab: contact line + navigation ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-ink); color: var(--color-on-navy); }
.topbar { background: var(--color-navy-2); font-size: var(--text-sm); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 40px; }
.topbar__info { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.topbar__info li { display: flex; align-items: center; gap: var(--space-xs); }
.topbar__info svg { width: 16px; height: 16px; flex: none; color: var(--color-accent-on-navy); }
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.logo img { height: 36px; width: auto; }
.nav__links { display: flex; align-items: center; gap: var(--space-xl); }
.nav__links > a:not(.btn), .nav__item > a { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) 0; border-bottom: 2px solid transparent; font-weight: 700; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.nav__links > a:not(.btn):hover, .nav__item > a:hover, .nav__item:focus-within > a { border-bottom-color: var(--color-accent-on-navy); }
.nav__caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.nav__item { position: relative; }
.nav__sub { position: absolute; top: 100%; left: calc(-1 * var(--space-md)); z-index: var(--z-dropdown); min-width: 230px; margin: 0; padding: var(--space-xs); list-style: none; border-radius: var(--radius-card); background: var(--color-navy-2); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short); }
.js .nav__sub { opacity: 0; visibility: hidden; transform: translateY(6px); }
.nav__sub::before { content: ""; position: absolute; inset: calc(-1 * var(--space-sm)) 0 auto; height: var(--space-sm); }
.js .nav__item:hover .nav__sub, .js .nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); text-decoration: none; font-weight: 700; }
.nav__sub a:hover { background: var(--color-navy-3); }
.nav__toggle { display: none; width: 48px; height: 48px; padding: 0; border: 1px solid var(--color-on-navy-edge); border-radius: var(--radius-input); background: transparent; color: var(--color-on-navy); cursor: pointer; }
.nav__toggle span { display: block; width: 20px; height: 2px; margin: var(--space-2xs) auto; background: currentColor; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero: settled ---------- */
.hero { position: relative; isolation: isolate; padding-block: var(--space-3xl); }
.hero__bg { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: var(--color-ink); color: var(--color-on-navy); }
.hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__pause { position: absolute; right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: var(--space-lg); z-index: var(--z-raised); display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; }
.hero__pause svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.hero__pause[data-state="playing"] .icon-play, .hero__pause[data-state="paused"] .icon-pause { display: none; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in oklch, var(--color-ink) 92%, transparent) 0%, color-mix(in oklch, var(--color-ink) 66%, transparent) 50%, color-mix(in oklch, var(--color-ink) 24%, transparent) 100%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-2xl) var(--gap-columns); min-height: calc(100svh - 7rem - 2 * var(--space-3xl)); }
.hero__text { display: flex; flex-direction: column; gap: var(--space-xl); min-width: 0; }
.hero__slogan { order: 1; max-width: none; font: 600 var(--text-display)/1.08 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; overflow-wrap: break-word; }
.hero__slogan .line { display: block; white-space: nowrap; }
.band-navy .hero__slogan { color: var(--color-on-navy); }
.band-navy .accent { color: var(--color-accent-on-navy); }
.hero__lead { order: 2; max-width: none; white-space: nowrap; font: 400 calc(var(--text-display) * 0.3448)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-ink-2); }
.band-navy .hero__lead { color: var(--color-on-navy-2); }
.hero__cta { order: 3; display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xs); }

/* ---------- services: grid, drifting apart on scroll ---------- */
.services { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper-2); }
.services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.service { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; text-decoration: none; translate: 0 var(--dy, 0px); }
.service__img { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3); }
.service__img img { width: 100%; height: 100%; object-fit: cover; }
.service__img--cutout picture { display: block; width: 100%; height: 100%; }
.service__img--cutout img { object-fit: contain; padding: var(--space-md); }
.service h2 { max-width: 16ch; font-size: var(--text-title); line-height: 1.2; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.service:hover h2 { text-decoration-color: var(--color-accent); }
.service p { max-width: 45ch; color: var(--color-ink-2); }
.service__more { margin-top: auto; font-weight: 700; color: var(--color-accent); }

/* ---------- about: split ---------- */
.about { padding-block: var(--section-gap); }
.about__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: var(--space-2xl) var(--gap-columns); }
.about__photo { grid-column: 1 / span 5; margin: 0; aspect-ratio: 4 / 5; min-height: 440px; border-radius: var(--radius-card); overflow: hidden; background: var(--color-ink); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__photo img.is-fallback { object-fit: contain; padding: 22%; }
.about__body { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.about__text { display: flex; flex-direction: column; gap: var(--space-md); }
.about__text p:first-child { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); }
.about__cta { margin-top: var(--space-xs); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-lg); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.stat { display: flex; flex-direction: column; gap: var(--space-2xs); padding-inline: var(--space-lg); }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: var(--rule-hair) solid var(--color-rule); }
.stat b { font: 600 var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.stat span { color: var(--color-ink-2); }

/* ---------- projects: showcase ---------- */
.projects { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper-2); }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: var(--space-md) var(--gap-columns); margin-bottom: var(--space-2xl); }
.section-head h2 { grid-column: 1 / span 6; }
.section-head p { grid-column: 8 / span 5; color: var(--color-ink-2); font-size: var(--text-lead); }
.work { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.project { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; text-decoration: none; }
.project:nth-child(1) { grid-column: 1 / -1; }
.project:nth-child(2) { grid-column: 1 / span 7; }
.project:nth-child(3) { grid-column: 8 / span 5; }
.project__img { margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3); }
.project:nth-child(1) .project__img { aspect-ratio: 21 / 9; }
.project:nth-child(2) .project__img { aspect-ratio: 16 / 9; }
.project:nth-child(3) .project__img { aspect-ratio: 5 / 4; }
.project__img img { width: 100%; height: 100%; object-fit: cover; }
.project__body { display: grid; gap: var(--space-xs); }
.project h3 { max-width: 28ch; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.project:hover h3 { text-decoration-color: var(--color-accent); }
.project p { color: var(--color-ink-2); }
.project small { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- reviews: rows on navy ---------- */
.band-navy { background: var(--color-ink); color: var(--color-on-navy-2); }
.band-navy h2, .band-navy h3 { color: var(--color-on-navy); }
.reviews { padding-block: var(--section-gap-s); }
.reviews h2 { margin-bottom: var(--space-2xl); }
.review { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: var(--space-lg) var(--gap-columns); padding-block: var(--space-xl); }
.review__quote { grid-column: 1 / span 8; display: grid; gap: var(--space-md); }
.q { margin: 0; max-width: 44ch; font: 600 var(--text-2xl)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--color-on-navy); text-wrap: pretty; }
.q-accent { color: var(--color-accent-on-navy); }
.pquote__nl { color: var(--color-on-navy-2); font-size: var(--text-sm); }
.review__by { grid-column: 10 / span 3; display: grid; gap: var(--space-md); }
.pquote__by { display: flex; align-items: center; gap: var(--space-md); }
.pquote__avatar { width: 56px; height: 56px; flex: none; border-radius: var(--radius-input); overflow: hidden; background: var(--color-navy-3); }
.pquote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pquote__name { font-weight: 700; color: var(--color-on-navy); }
.pquote__role { font-size: var(--text-sm); color: var(--color-on-navy-2); }

/* ---------- why: split text ---------- */
.why { padding-block: var(--section-gap); }
.why__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.why__grid h2 { grid-column: 1 / span 5; position: sticky; top: calc(7rem + var(--space-lg)); }
.why__body { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--space-lg); }
.why__body p:first-child { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); }
.why__body p:not(:first-child) { color: var(--color-ink-2); }

/* ---------- faq: rows ---------- */
.faq { padding-block: var(--section-gap-s) calc(var(--section-gap) + var(--space-xl)); background: var(--color-paper-2); }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.faq__intro { grid-column: 1 / span 4; position: sticky; top: calc(7rem + var(--space-lg)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.faq__intro p { color: var(--color-ink-2); }
.faq__list { grid-column: 6 / span 7; display: flex; flex-direction: column; min-width: 0; }
.faq__more[hidden] { display: none; }
.faq__item { border-top: var(--rule-hair) solid var(--color-rule); }
.faq__list > .faq__item:first-child { border-top: 0; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; padding-block: var(--space-md); font: 600 var(--text-lg)/1.3 var(--font-display); letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font: 400 var(--text-2xl)/1 var(--font-body); color: var(--color-ink-2); }
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { color: var(--color-accent); }
.faq__item p { max-width: 56ch; padding-bottom: var(--space-lg); color: var(--color-ink-2); }

/* ---------- contact: form band + mast footer ---------- */
.contact { margin-top: calc(-1 * var(--space-xl)); padding-block: var(--section-gap-s) var(--space-xl); border-radius: var(--radius-card) var(--radius-card) 0 0; position: relative; }
.contact__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.contact__intro { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.contact__intro h2 { max-width: 14ch; }
.contact__sub { font-size: var(--text-lead); color: var(--color-on-navy-2); }
#contactForm { grid-column: 8 / span 5; }
.field { margin-bottom: var(--space-md); }
.field label { display: block; margin-bottom: var(--space-xs); font-weight: 700; color: var(--color-on-navy); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-on-navy-edge); border-radius: var(--radius-input); background: var(--color-navy-2); color: var(--color-on-navy); outline: 2px solid transparent; outline-offset: -3px; }
.field textarea { min-height: 144px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-on-navy-2); }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-accent-on-navy); outline-offset: -3px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-privacy { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-on-navy-2); }
.form-privacy a { color: var(--color-on-navy); }
.form-note { min-height: 1lh; margin-top: var(--space-xs); font-weight: 700; }
.footer-mid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin-top: var(--section-gap-s); }
.footer-mid > div:first-child { grid-column: 1 / span 3; }
.footer-mid .footer-col:nth-child(2) { grid-column: 5 / span 4; }
.footer-mid .footer-col:nth-child(3) { grid-column: 9 / span 2; }
.footer-mid .footer-col:nth-child(4) { grid-column: 11 / span 2; }
.footer-logo { width: 200px; height: auto; }
.footer-col__title { margin-bottom: var(--space-md); font-weight: 700; color: var(--color-on-navy); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.footer-col li { display: flex; align-items: center; gap: var(--space-sm); }
.footer-col a, .footer-col span { color: var(--color-on-navy-2); text-decoration: none; }
.footer-col a:hover { color: var(--color-on-navy); text-decoration: underline; }
.fdot { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-input); background: var(--color-navy-2); }
.fdot svg { width: 16px; height: 16px; color: var(--color-on-navy); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--section-gap-s); font-size: var(--text-sm); color: var(--color-on-navy-2); }
.footer-bottom strong { color: var(--color-on-navy); }
.footer-bottom .credit { flex-basis: 100%; }
.footer-bottom .credit a { color: var(--color-on-navy-2); }

/* ---------- the one reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 60rem) {
  .topbar { display: none; }
  .nav__toggle { display: block; }
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: var(--space-2xs); padding: var(--space-md) var(--gutter) var(--space-lg); background: var(--color-ink); }
  .nav__links.open { display: flex; }
  .nav__links > a:not(.btn), .nav__item > a { padding: var(--space-md) 0; }
  .js .nav__sub, .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 0 var(--space-md); background: transparent; }
  .nav__sub::before { display: none; }
  .hero__grid, .services__grid, .stats { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { min-height: 0; }
  .about__photo { min-height: 0; }
  .hero__slogan, .hero__lead { max-width: none; }
  .hero__slogan .line { white-space: normal; }
  .hero__lead { white-space: normal; font-size: var(--text-lead); line-height: 1.45; }
    .about__photo, .about__body, .section-head h2, .section-head p, .review__quote, .review__by, .why__grid h2, .why__body, .faq__intro, .faq__list, .contact__intro, #contactForm { grid-column: 1 / -1; }
  .project:nth-child(n) { grid-column: 1 / -1; }
  .project:nth-child(1) .project__img { aspect-ratio: 16 / 9; }
  .why__grid h2, .faq__intro { position: static; }
  .stat, .stat:first-child { padding-inline: 0; }
  .stat + .stat { margin-top: var(--space-md); padding-top: var(--space-md); border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .footer-mid > div:first-child, .footer-mid .footer-col:nth-child(n) { grid-column: 1 / -1; }
  .service { translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__pause { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .service { translate: none; }
}