/* ===========================================================
   Studio Jamez: Branding & Websites
   One committed world, "Atelier bij avond": a warm charcoal
   ground, cream type and a single gold accent. No theme switch;
   the palette below is the whole palette.

   De hero komt één keer aan, een sectiekop veegt één keer open
   als hij in beeld komt, en verder beweegt er alleen iets als de
   bezoeker iets doet. Eén uitzondering, bewust: het glazen
   beeldmerk in de hero (hero-3d.js) draait heel traag door als de
   muis stilstaat. Zie het blok "Motion" onderaan.
   =========================================================== */

:root {
  /* "Atelier bij avond": one committed warm-dark palette. Deep warm charcoal
     ground, cream type, a single gold accent (with a lit highlight). */
  --ground:     #171310;
  --surface:    #221a12;
  --text:       #f4e9d8;
  --muted:      #a2937e;
  --line:       rgba(244, 233, 216, 0.14);
  --accent:     #d6a460;                   /* gold */
  --accent-lit: #f0d2a0;                   /* lit highlight */
  --accent-ink: #241f19;                   /* readable text on the gold */
  --badge-bg:   rgba(23, 19, 16, 0.72);

  /* Twee gezichten, self-hosted (zie vendor/fonts/fonts.css). Space Mono is
     vervallen: die zette woordmerk en tags, en dat is geen code of meting.
     Die labelrol draagt General Sans nu op hoofdletters met ruime tracking. */
  --font-display: "Cabinet Grotesk", system-ui, sans-serif;  /* koppen */
  --font-body:    "General Sans", system-ui, sans-serif;     /* tekst, UI, labels */

  /* Rolschaal. De site had negen bijna gelijke waarden tussen 0.72 en 0.98rem
     voor acht verschillende taken; twee knoppen die hetzelfde doen verschilden
     (0.86 vs 0.95rem) terwijl nav en projectindex juist gelijk waren. Nu twee
     maten, waarbij gewicht, kapitaal en kleur het verschil dragen in plaats
     van grootte. Stap 12 -> 16 is 1.33. */
  --t-label: 0.75rem;   /* 12px, hoofdletters, tracking, gewicht 600 */
  --t-ui:    1rem;      /* 16px, nav / knoppen / metadata, gewicht 500 */
  --t-body:  1rem;      /* 16px vloer voor lopende tekst, gewicht 400 */
  --track-label: 0.16em;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1600px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E");

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ground);
  overflow-x: hidden;             /* no sideways scroll on any viewport */
}

/* Fine film grain over the whole page: the one texture layer, nothing stacked
   on top of it. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0.005em;   /* crème op donker oogt smaller: iets lucht terug */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* Shared icon body: the mask carries the shape, currentColor carries the ink. */
.icon-arrow-right::after,
.icon-arrow-up::after {
  content: "";
  flex: none;
  width: 1.05em; height: 1.05em;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}
.icon-arrow-right::after {
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
          mask: var(--icon-arrow-right) center / contain no-repeat;
}
.icon-arrow-up::after {
  -webkit-mask: var(--icon-arrow-up) center / contain no-repeat;
          mask: var(--icon-arrow-up) center / contain no-repeat;
}
h1, h2, h3 { margin: 0; font-weight: 700; }  /* Cabinet Grotesk: we leveren alleen 700 */
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: var(--accent-ink); }

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 400;
  background: var(--text);
  color: var(--ground);
  padding: 0.6em 1em;
  font-family: var(--font-body);
  font-size: var(--t-ui);
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- Header -------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.5vw, 1.6rem) var(--pad);
  mix-blend-mode: difference;
}
/* Brand lockup: beeldmerk + woordmerk, per the huisstijl primary lockup.
   Lives in the mix-blend-mode:difference header, so currentColor #fff reads
   correctly on any background. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: #fff;
}
.brand__mark {
  width: 1.7em; height: 1.7em;
  display: block;
  flex: none;
}
/* On hover the beeldmerk rebuilds itself stripe by stripe, left → right.
   `backwards` holds each stripe hidden through its delay so they truly appear
   one at a time; opacity/transform only, so no layout shift. */
@keyframes sj-pre-stripe {
  0%   { opacity: 0; transform: translate(-150px, 150px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0); }
}
.brand:hover .brand__mark polygon { animation: sj-pre-stripe 0.5s var(--ease) backwards; }
.brand:hover .brand__mark polygon:nth-child(2) { animation-delay: 0.1s; }
.brand:hover .brand__mark polygon:nth-child(3) { animation-delay: 0.2s; }
.brand__word {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  align-items: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-ui);
  color: #fff;
}
.nav a { position: relative; padding: 0.2em 0; }
.nav a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav a:not(.nav__cta):hover::after { transform: scaleX(1); }
/* .nav a.nav__cta (not just .nav__cta) so the inline padding beats the
   higher-specificity ".nav a { padding: 0.2em 0 }" rule above. */
.nav a.nav__cta {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  padding: 0.5em 1.1em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
/* Header rides mix-blend-mode:difference, so hover text is authored as #000:
   it renders inverted: light on the dark pill (light theme), dark on the
   light pill (dark theme). var(--ground) broke this in light mode (near-white
   → black text on a black-blended pill). */
.nav a.nav__cta:hover { background: #fff; color: #000; }

/* Right-hand cluster: nav + theme toggle + mobile menu button. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
}


.menu-toggle {
  display: none;
  background: none; border: none;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-ui);
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
}
.menu-toggle__icon { width: 22px; height: 9px; position: relative; }
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0; width: 100%; height: 1.5px;
  background: #fff;
  transition: transform 0.35s var(--ease);
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after  { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Mobile nav ---------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ground);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2em;
  padding: var(--pad);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a { transition: color 0.25s var(--ease); }
.mobile-nav a:hover { color: var(--accent); }

/* ---------- Layout -------------------------------------- */
section { padding-inline: var(--pad); }

.section-head { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* ---------- Hero ---------------------------------------- */
/* A dark warm stage lit by one shaft of light. Licht en kop komen samen op
   bij het laden en staan daarna stil. Alleen het glazen beeldmerk (op
   desktop, via hero-3d.js) draait traag door en reageert op de cursor. */
.hero {
  --gold: #d6a460;
  --gold-lit: #f0d2a0;
  --cream: #f4e9d8;
  --hero-bg: #171310;
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6rem, 14vh, 9rem) var(--pad) clamp(3rem, 7vh, 4.5rem);
  background: var(--hero-bg);
  color: var(--cream);
  isolation: isolate;            /* own stacking context above the site aurora */
}

/* --- atmosphere layers (all behind the content) --- */
.hero__atmos {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Dissolve the light toward the bottom so it never hard-cuts into the next
     section: the hero fades to plain ground for a seamless overlap. */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.hero__beam {
  position: absolute; left: -14%; top: -22%; width: 128%; height: 150%;
  background:
    conic-gradient(from 173deg at 50% 4%,
      rgba(214,164,96,0) 0deg,
      rgba(214,164,96,0.10) 7deg,
      rgba(240,210,160,0.26) 17deg,
      rgba(214,164,96,0.10) 27deg,
      rgba(214,164,96,0) 34deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 45%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 45%, transparent 88%);
}
.hero__glow {
  position: absolute; left: 50%; bottom: -12%; width: min(880px, 72%); height: 44%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214,164,96,0.18), rgba(214,164,96,0) 75%);
}
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 50% 55%, rgba(23,19,16,0) 55%, rgba(23,19,16,0.82) 100%);
}

/* --- het glazen beeldmerk, achter de tekst --- */
.hero__object {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;                 /* tekst en knoppen blijven klikbaar */
  transform: translateY(var(--par, 0px)); /* parallax, gezet door hero-3d.js */
  will-change: transform;
  /* De open plek. Het glas omlijst de woorden en trekt zich er zacht achter
     terug, zodat de kop altijd op donkere grond staat, hoe het licht ook
     valt. Niet volledig weg in het midden: een rest glas blijft zichtbaar,
     anders leest het als een gat. */
  -webkit-mask-image: radial-gradient(ellipse 38% 34% at 50% 47%,
      rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.6) 70%, #000 100%);
  mask-image: radial-gradient(ellipse 38% 34% at 50% 47%,
      rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.6) 70%, #000 100%);
}
/* Platte terugval: het merk in stil goud, laag genoeg om onder de kop te
   blijven. Dit is wat mobiel en reduced-motion zien. */
.hero__object svg {
  width: min(58vw, 640px); height: auto;
  fill: var(--gold); opacity: 0.11;
  transform: translateY(-4%);
}
.hero__object.is-3d svg { display: none; }
.hero__object canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: auto;                 /* het glas is sleepbaar */
  cursor: grab;
}
.hero__object.is-dragging canvas { cursor: grabbing; }

/* --- centred content --- */
.hero__center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.4rem, 3vw, 1.9rem);
  width: min(88vw, 1080px);      /* definite width so the headline wraps on small screens */
}
.hero__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 100%;
  color: var(--cream);
  text-wrap: balance;
}
/* The gold half is a phrase, not a fragment: give it its own line so the
   accent never breaks across two. Both halves are blocks so the arrival
   animation can transform them (transforms skip inline boxes). */
.hero__mark > span { display: block; }
.hero__mark em { display: block; font-style: normal; color: var(--gold); }
.hero__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: rgba(244,233,216,0.82);
  max-width: 40ch;
  margin: 0;
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.4rem; margin-top: 0.4rem; }
.hero__cta-primary {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-ui); letter-spacing: 0.005em;
  background: var(--gold); color: #241f19;
  padding: 1.05em 1.8em; border-radius: 999px; text-decoration: none;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero__cta-primary:hover { background: var(--gold-lit); box-shadow: 0 6px 30px rgba(214,164,96,0.35); transform: translateY(-1px); }
.hero__cta-primary:hover::after { transform: translateX(4px); }
.hero__cta-secondary {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-ui); letter-spacing: 0.005em;
  color: rgba(244,233,216,0.62); text-decoration: none;
  border-bottom: 1px solid rgba(244,233,216,0.25); padding-bottom: 3px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero__cta-secondary:hover { color: var(--cream); border-bottom-color: rgba(244,233,216,0.7); }

/* ---------- Work: list with hover preview -------------- */
.work {
  position: relative;
  padding-top: clamp(5rem, 12vw, 11rem);
}
.work__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.work-item { border-bottom: 1px solid var(--line); }
.work-item__btn {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3.2vw, 2.6rem) 0;
  color: var(--text);
}
.work-item__btn:not([href]) { cursor: default; }
.work-item__btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.work-item__index {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  align-self: start;
  padding-top: 0.35em;
}
.work-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.work-item__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}
.work-item__btn:hover .work-item__name,
.work-item__btn:focus-visible .work-item__name {
  transform: translateX(clamp(0.5rem, 2vw, 1.5rem));
  color: var(--accent);
}
.work-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.4s var(--ease);
}
.work-item__btn:hover .work-item__tags,
.work-item__btn:focus-visible .work-item__tags {
  transform: translateX(clamp(0.5rem, 2vw, 1.5rem));
}
.work-item__tags li {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.32em 0.8em;
}
.work-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-ui);
  color: var(--muted);
}
.work-item__view {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.work-item__view svg { width: 0.95em; height: 0.95em; }

/* ---------- Services ------------------------------------ */
/* Warm-lit panel: a deeper warm surface with a soft gold glow spilling from
   the top, echoing the hero's light. */
.services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #1d160f 0%, #14100b 100%);
  color: var(--text);
  margin-top: clamp(4rem, 10vw, 9rem);
  padding-top: clamp(4rem, 9vw, 8rem);
  padding-bottom: clamp(4rem, 9vw, 8rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.service { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.service__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.service__body { max-width: 38ch; margin: 0 0 2rem; color: rgba(244, 233, 216, 0.78); }
.service__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.service__tags li {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(244, 233, 216, 0.8);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.45em 0.9em;
}

/* ---------- Process: editorial numbered steps ---------- */
/* Four quiet columns under a hairline, each led by a large gold serif number.
   No cards, no tilt: the numbering carries the sequence. */
.process { padding-top: clamp(6rem, 14vw, 13rem); }
.process__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.step {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.1rem, 1.8vw, 1.9rem) clamp(1.8rem, 3vw, 2.8rem) 0;
  border-left: 1px solid var(--line);
}
.step:first-child { border-left: 0; }
.step + .step { padding-left: clamp(1.1rem, 1.8vw, 1.9rem); }
.step__icon { display: none; }        /* the number leads now */
.step__no {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 0.95;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.step__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}
.step__body p { margin: 0; color: var(--muted); font-size: var(--t-body); line-height: 1.6; }

/* ---------- About --------------------------------------- */
.about { padding-top: clamp(6rem, 14vw, 13rem); }
.about__statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
}
.about__grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) 1.5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about__portrait { margin: 0; }
.about__portrait[hidden] { display: none; }
.about__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: grayscale(1) sepia(0.4) saturate(1.1) contrast(1.02) brightness(1.02); /* warm duotone, on-brand */
}
.about__portrait figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-body);
  font-size: var(--t-ui);
  color: var(--muted);
}
.about__cols {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  max-width: 56ch;
}
.about__cols p { margin: 0; }

/* ---------- Contact ------------------------------------- */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(6rem, 14vw, 13rem);
  padding-bottom: clamp(4rem, 10vw, 9rem);
  text-align: center;
}
/* Warm glow rising from the base: a quiet bookend to the hero's light. */
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(62% 55% at 50% 100%, rgba(214,164,96,0.14), transparent 62%);
}
.contact__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: 0.6rem auto 0;
  text-wrap: balance;
}
.contact__intro {
  max-width: 44ch;
  margin: clamp(1.4rem, 3vw, 2rem) auto clamp(2rem, 4vw, 2.6rem);
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-ui);
  letter-spacing: 0.005em;
  color: var(--ground);
  background: var(--accent);
  padding: 1em 1.9em;
  border-radius: 100px;
  border: 1px solid var(--accent);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.contact__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(214, 164, 96, 0.35);
}
.contact__cta:hover::after { transform: translateX(4px); }
.contact__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.7rem 1.6rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.contact__email {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-ui);
  color: var(--muted);
  padding-bottom: 0.15em;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.contact__email:hover { color: var(--accent); border-color: var(--accent); }
.contact__links {
  display: flex;
  gap: 1.6rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-ui);
}
.contact__links a { color: var(--muted); transition: color 0.3s var(--ease); }
.contact__links a:hover { color: var(--text); }

/* ---------- Footer -------------------------------------- */
.site-footer {
  display: flex;
  flex-wrap: nowrap;               /* keep the three items on one line (desktop) */
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem var(--pad);
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-ui);
  letter-spacing: 0.005em;
  color: var(--muted);
}
.site-footer a { display: inline-flex; align-items: center; gap: 0.5em; }
.site-footer a:hover { color: var(--text); }
.site-footer a:hover::after { transform: translateY(-2px); }

/* ---------- Loader error -------------------------------- */
.loader-error {
  max-width: 48ch;
  margin: 22vh auto;
  padding: 0 var(--pad);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--muted);
  line-height: 1.7;
}
.loader-error[hidden] { display: none; }
.loader-error strong { color: var(--text); }
.loader-error code {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.5em 0.9em;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.loader-error a { color: var(--accent); }

/* ---------- Responsive ---------------------------------- */
@media (max-width: 1023px) {
  .process__list { grid-template-columns: repeat(2, 1fr); border-top: 0; }
  .step { border-left: 0; border-top: 1px solid var(--line); padding: clamp(1.4rem,4vw,2rem) 0; }
  .step + .step { padding-left: 0; }
}
@media (max-width: 560px) {
  .process__list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .services__grid,
  .process__list { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .about__portrait img { aspect-ratio: 3 / 4; }
  .contact__title { max-width: 100%; }
  .work-item__btn { grid-template-columns: auto 1fr; row-gap: 0.5rem; }
  .work-item__meta { grid-column: 2; align-items: flex-start; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
}

/* ---------- Motion --------------------------------------
   Three authored moments, geen sfeer die uit zichzelf blijft lopen:
   1. de hero komt één keer aan, gestapeld;
   2. een sectiekop veegt per regel open zodra hij in beeld scrollt;
   3. een gouden haarlijn tekent onder een werkregel in bij hover.

   Elke startstaat staat binnen @keyframes met `backwards`, dus de rust-CSS
   is de zichtbare staat. Draait een animatie niet, dan verdwijnt er niets.
   -------------------------------------------------------- */

/* --- 1. Hero-aankomst (eenmalig, na render) --- */
@keyframes sj-arrive {
  from { opacity: 0; transform: translateY(0.55rem); filter: blur(7px); }
}
@keyframes sj-light {
  from { opacity: 0; }
}
.is-ready .hero__mark > span,
.is-ready .hero__mark > em,
.is-ready .hero__sub,
.is-ready .hero__cta {
  animation: sj-arrive 0.95s var(--ease) backwards;
}
.is-ready .hero__mark > em { animation-delay: 0.10s; }
.is-ready .hero__sub       { animation-delay: 0.24s; }
.is-ready .hero__cta       { animation-delay: 0.36s; }

/* Het licht komt op terwijl de kop landt: trager dan de tekst, zodat de
   schacht zich vestigt in plaats van mee te springen. */
.is-ready .hero__beam { animation: sj-light 1.8s var(--ease) backwards; }
.is-ready .hero__glow { animation: sj-light 2.2s var(--ease) 0.2s backwards; }
/* Het glas komt op met het licht, niet met de tekst: het hoort bij het podium. */
.is-ready .hero__object { animation: sj-light 2.4s var(--ease) 0.3s backwards; }

/* --- 2. Kop veegt per regel open --- */
/* De regels worden in JS opgesplitst; zonder JS blijft de kop gewone tekst. */
.ln { display: block; }
.ln__i {
  display: inline-block;
  /* Ruimte voor stok- en staartletters: het masker klipt op de padding-box,
     en bij line-height 1 valt de inkt daarbuiten. Marge heft de padding op,
     dus de opmaak schuift niet. */
  padding-block: 0.16em;
  margin-block: -0.16em;
}
/* Klaargezet door JS, uitsluitend voor koppen die nog onder de vouw staan:
   de regel wacht op zijn veeg in plaats van eerst kaal in beeld te komen.
   Staat nooit in de rust-CSS, dus zonder JS blijft alles zichtbaar. */
.wacht .ln__i { opacity: 0; }

@keyframes sj-wipe {
  from {
    opacity: 0;
    transform: translateY(0.26em);
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
.is-in .ln__i {
  /* Maskerbeeld is 3× zo breed als de regel. Dekkend tot 40% (= 1,2× de
     regelbreedte) zodat de ruststaat de regel volledig dekt, en doorzichtig
     vanaf 66% (= 2×) zodat de startpositie hem volledig wegneemt. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0) 66%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0) 66%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;              /* ruststaat: het masker dekt de hele regel */
  animation: sj-wipe 1s var(--ease) backwards;
  animation-delay: calc(var(--ln, 0) * 110ms);
}

/* --- 3. Gouden haarlijn onder de werkregel --- */
.work-item__btn { position: relative; }
.work-item__btn::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;   /* precies over de bestaande scheidslijn */
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.work-item__btn:hover::before,
.work-item__btn:focus-visible::before { transform: scaleX(1); }

/* ---------- Reduced motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}