/* jensdevries.com
   Direction lives in ../DESIGN.md: a light, calm site with Clash Display titles over Hanken Grotesk text,
   white ground, near-black ink, and one accent (#E8490F) used in few places. White text on
   the accent is always large or bold (contrast 3.9). The recurring device is the square
   "pixel" from the logo: the dot on the j, and the full stop of the hero line. */

:root {
  --bg: #FFFFFF;
  --tint: #F5F5F3;
  --ink: #141414;
  --soft: #5C5C5A;
  --faint: #737371;
  --line: #E6E6E3;
  --accent: #E8490F;
  --accent-text: #C93D09;   /* accent as small text on white: 4.9 */
  --on-accent: #FFFFFF;

  --f: "Hanken Grotesk", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Clash Display", var(--f);

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1240px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.6 var(--f);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }
section[id], details[id], [data-plans] { scroll-margin-top: 88px; }

.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- type ---------- */
/* titles in Clash Display (one weight, 500); everything else stays Hanken Grotesk */
.display {
  font-family: var(--f-display);
  font-size: clamp(44px, 7.2vw, 104px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* stacked (phone/tablet): section titles a step above the case titles (h3.h2), or Pakketten reads as one more case */
@media (max-width: 860px) { h2.h2 { font-size: clamp(42px, 11vw, 52px); } }
.h3 { font-size: clamp(22px, 2vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; color: var(--soft); max-width: 40ch; }
.body { color: var(--soft); max-width: 60ch; }
.small { font-size: 15px; line-height: 1.5; color: var(--soft); }
.kicker { font-size: 15px; font-weight: 500; color: var(--soft); }

/* the square from the logo, used as the full stop of the hero line */
.pixel {
  display: inline-block;
  width: .16em; height: .16em;
  margin-left: .04em;
  background: var(--accent);
  vertical-align: baseline;
}

/* ---------- logo ---------- */
.logo { display: inline-flex; font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; text-decoration: none; }
.logo .j { position: relative; }
.logo .dot { position: absolute; left: .145em; top: .05em; width: .18em; height: .18em; background: var(--accent); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 56px; padding: 0 26px;
  border-radius: 8px;
  background: var(--accent); color: var(--on-accent);
  font-size: 19px; font-weight: 700; letter-spacing: -0.005em;  /* 19px at 700 counts as large text: white on accent passes AA */
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #D6420C; } }
.btn-quiet {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 56px; font-size: 19px; font-weight: 500;
  text-decoration: none; color: var(--ink);
}
.btn-quiet span:not(.arrow) { border-bottom: 1.5px solid var(--line); transition: border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .btn-quiet:hover span:not(.arrow) { border-color: var(--ink); } }
.link {
  color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--accent);
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--accent-text); } }
.arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a:hover .arrow { transform: translateX(3px); } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding-top: env(safe-area-inset-top, 0px); }
.nav { display: flex; align-items: center; gap: 32px; font-size: 17px; }
.nav a { text-decoration: none; color: var(--soft); transition: color 200ms ease; }
.nav a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--ink); } }
.nav .nav-cta { color: var(--ink); font-weight: 500; border-bottom: 1.5px solid var(--accent); }
.menu-btn { display: none; min-height: 44px; padding: 0 4px; font-size: 17px; font-weight: 500; }

@media (max-width: 760px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px max(var(--gutter), env(safe-area-inset-left, 0px)) 20px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    font-size: 22px;
    opacity: 0; transform: translateY(-6px); visibility: hidden;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
  }
  .nav a { padding: 12px 0; color: var(--ink); }
  .nav .nav-cta { border: 0; color: var(--accent-text); }
  .site-header.is-open .nav { opacity: 1; transform: none; visibility: visible; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
  .site-header.is-open { border-bottom-color: var(--line); }
}

/* ---------- sections ---------- */
.section { padding-block: clamp(80px, 11vw, 160px); }
.section + .section { padding-top: 0; }
main > .section:last-child { padding-bottom: clamp(56px, 6vw, 96px); }  /* the footer adds its own space */
.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); max-width: 760px; }

/* ---------- hero ---------- */
/* The hero is exactly the first screen (below the sticky header); the rest of the page starts below the fold.
   Left: "Ik bouw websites voor" small, the last word huge; main.js cycles that word through kinds of
   business (it stays "ondernemers" without JS or with reduced motion). Right: the cut-out photo in front
   of a big orange square, the pixel from the logo at full size. Type and photo grow with the screen, capped
   by its height so the buttons always stay above the fold. On big screens the header and hero share a wider
   frame (1760, from 1600px wide) than the sections below (1240). */
@media (min-width: 1600px) { .site-header.is-wide .wrap, .hero .wrap { max-width: calc(1760px + 2 * var(--gutter)); } }
.hero { min-height: calc(100svh - 76px); display: grid; align-items: center; padding-block: clamp(24px, 5svh, 72px); }
.hero + .section { padding-top: clamp(56px, 6vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 4vw, 96px); align-items: center; }
.hero .wrap > .hero-copy { container-type: inline-size; }  /* the title sizes itself to this column */
.hero-copy { display: grid; gap: clamp(24px, 2.6vw, 36px); min-width: 0; }
.hero-title { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.02em; }
.hero-pre { display: block; font-size: clamp(26px, min(6.6cqi, 5.6svh), 88px); line-height: 1.1; }
.hero-big { display: block; font-size: clamp(40px, min(15.6cqi, 13svh), 210px); line-height: .98; white-space: nowrap; }
.hero .lead { font-size: clamp(19px, min(1.5vw, 2.4svh), 24px); }
.hero-word { display: inline-block; }
.hero-text { display: grid; gap: 28px; min-width: 0; }  /* 404 and thank-you pages */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 8px; }
.hero-copy .hero-actions { margin-top: 0; }
/* the art box is square; the orange square fills its lower 86%. The photo is a bit larger and sits lower,
   so its soft bottom edge falls outside the box (clipped) and his head rises above the square. Its sides
   are clipped to the square's edges. Never taller than the screen leaves room for. */
.hero-art { position: relative; aspect-ratio: 1; width: 100%; max-width: calc(100svh - 76px - 2 * clamp(24px, 5svh, 72px)); justify-self: end; overflow: hidden; }
.hero-square { position: absolute; left: 7%; right: 7%; bottom: 0; aspect-ratio: 1; background: var(--accent); transform-origin: 50% 100%; }
.hero-photo { position: absolute; left: -6%; bottom: -16%; width: 112%; max-width: none; height: auto; clip-path: inset(0 11.6% 0 11.6%); }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-square { animation: hero-grow 700ms var(--ease-out) 120ms both; }
  .js .hero-photo { animation: hero-up 800ms var(--ease-out) 260ms both; }
}
@keyframes hero-grow { from { opacity: 0; transform: scale(.9); } }
@keyframes hero-up { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 860px) {
  .hero { align-items: start; }
  .hero .wrap { grid-template-columns: 1fr; align-items: start; }
  .hero-art { width: min(100%, 34svh); justify-self: center; }
  .hero-big { font-size: clamp(40px, min(14.4cqi, 13svh), 210px); }  /* "ondernemers" plus the pixel fits the column */
}

/* ---------- privacy ---------- */
.legal .wrap > * { max-width: 680px; }
.legal h2 { margin: 40px 0 10px; }
.legal p, .legal li { color: var(--soft); }
.legal ul { display: grid; gap: 10px; }
.legal li { position: relative; padding-left: 26px; }
.legal li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--accent); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--accent-text); }
.legal-date { font-size: 15px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* load-in: once, on first paint only (rare, so it may have a little delight) */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(14px); animation: rise 700ms var(--ease-out) forwards; }
  .js .rise:nth-child(2) { animation-delay: 70ms; }
  .js .rise:nth-child(3) { animation-delay: 140ms; }
  .js .rise:nth-child(4) { animation-delay: 210ms; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- intro ---------- */
.intro .wrap { display: grid; gap: 28px; justify-items: start; }
.intro .h2 { max-width: 24ch; }
.intro .btn-quiet { min-height: 0; }

/* ---------- work ---------- */
.cases { display: grid; gap: clamp(56px, 5.5vw, 80px); }
.case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px); align-items: center;
  text-decoration: none; color: inherit;
}
.case:nth-child(even) .case-media { order: 2; }
.case-text { display: grid; gap: 16px; align-content: center; min-width: 0; }
.case-media { min-width: 0; }
.case-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--faint); }
.case-more { margin-top: 8px; font-size: 18px; font-weight: 500; }
.case-more span:not(.arrow) { border-bottom: 1.5px solid var(--accent); }
@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; }
  .case:nth-child(even) .case-media { order: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .case .stage { transition: transform 400ms var(--ease-out); }
  .case:hover .stage { transform: translateY(-4px); }
}

a.case-more { justify-self: start; text-decoration: none; color: inherit; }
/* the personeelsapp, centre stage: a big playable phone in front of the orange square, with a caption that
   follows the screen you are on (app-demo.js). Without JS the phone shows the static Home screen. */
.podium { display: grid; gap: clamp(36px, 5vw, 64px); padding-block: 8px clamp(24px, 4vw, 48px); }
.podium-head { display: grid; gap: 14px; justify-items: center; text-align: center; }
.podium-head .case-meta { justify-content: center; }
.podium-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.podium-art { position: relative; display: grid; place-items: center; }
.podium-square { position: absolute; left: 50%; top: 50%; width: 124%; aspect-ratio: 1; background: var(--accent); transform: translate(-50%, -44%); }
.phone.big { --w: 320px; position: relative; }
.podium-caption {
  justify-self: end; max-width: 13ch; text-align: right;
  font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 38px); font-weight: 500;
  line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance;
}
.podium-side { display: grid; gap: 18px; justify-items: start; max-width: 30ch; }
@media (max-width: 860px) {
  .podium-stage { grid-template-columns: 1fr; justify-items: center; }
  .podium-caption { justify-self: center; text-align: center; min-height: 2.3em; }
  .podium-side { justify-items: center; text-align: center; }
  .phone.big { --w: min(300px, 76vw); }
  .podium-square { width: 112%; }
}

/* a quiet tinted stage for devices, so white screenshots don't melt into the page */
.stage {
  position: relative;
  display: grid; place-items: center;
  background: var(--tint); border-radius: 16px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px);
  overflow: hidden;
}

/* ---------- devices ---------- */
.laptop { width: 100%; max-width: 720px; }
.laptop-screen {
  position: relative;
  border-radius: 12px 12px 4px 4px;
  background: #1B1B1B;
  padding: 2.2% 2.2% 2.6%;
  box-shadow: 0 30px 60px -30px rgba(20, 20, 20, .35);
}
.laptop-screen img, .laptop-screen .compare { border-radius: 3px; aspect-ratio: 16 / 10; width: 100%; object-fit: cover; object-position: top; }
.laptop-base {
  height: 0; padding-bottom: 3.2%;
  margin: 0 -7%;
  background: linear-gradient(#DCDCD9, #C4C4C0);
  border-radius: 0 0 12px 12px;
  position: relative;
}
.laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 40%; transform: translateX(-50%); background: #B4B4B0; border-radius: 0 0 6px 6px; }

.phone {
  --w: 280px;
  width: var(--w); max-width: 100%;
  border-radius: calc(var(--w) * .16);
  background: #1B1B1B;
  padding: calc(var(--w) * .035);
  box-shadow: 0 30px 60px -28px rgba(20, 20, 20, .4);
}
.phone-screen {
  position: relative; overflow: hidden;
  aspect-ratio: 390 / 844;
  border-radius: calc(var(--w) * .13);
  background: #fff;
}
.phone-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone-sm { --w: 180px; }
.devices { position: relative; width: 100%; display: grid; place-items: center; }
.devices .phone-sm { position: absolute; right: 0; bottom: -6%; }
/* when the photo on the site sits on the right, the phone moves left so it stays visible */
.devices.phone-left .phone-sm { right: auto; left: 0; }
@media (max-width: 560px) { .phone-sm { --w: 120px; } .devices .phone-sm { right: -4px; } .devices.phone-left .phone-sm { right: auto; left: -4px; } }

/* ---------- review ---------- */
.reviews { display: grid; gap: 64px; }
.review { display: grid; gap: 28px; max-width: 900px; align-content: start; }
.review blockquote { font-size: clamp(26px, 3vw, 38px); line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; }
@media (min-width: 861px) {
  .reviews { grid-template-columns: 1fr 1fr; gap: 48px 72px; }
  .reviews .review { grid-template-rows: auto 1fr auto; }
  .reviews .review blockquote { font-size: clamp(24px, 2.3vw, 32px); }
}
.review-stars { display: flex; align-items: center; gap: 6px; }
.review-stars svg { width: 28px; height: 28px; fill: var(--accent); transform-origin: 50% 60%; }
.review-score { margin-left: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.review-score span { font-weight: 400; color: var(--soft); }
.review-who { display: flex; align-items: center; gap: 14px; font-size: 17px; color: var(--soft); }
.review-who b { color: var(--ink); font-weight: 600; }
.review-av { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font: 500 16px/1 var(--f-display); color: var(--ink); }
/* the stars pop in one by one, once, when the review scrolls into view. They are only hidden once main.js has armed the
   observer (.is-armed), so a missing, stale or failed script can never leave them invisible. Reduced motion: no animation. */
@media (prefers-reduced-motion: no-preference) {
  .review.is-armed .review-stars svg { opacity: 0; transform: scale(.5); }
  .review.is-armed.in .review-stars svg { animation: star-pop 260ms var(--ease-out) forwards; }
  .review.is-armed.in .review-stars svg:nth-child(2) { animation-delay: 50ms; }
  .review.is-armed.in .review-stars svg:nth-child(3) { animation-delay: 100ms; }
  .review.is-armed.in .review-stars svg:nth-child(4) { animation-delay: 150ms; }
  .review.is-armed.in .review-stars svg:nth-child(5) { animation-delay: 200ms; }
}
@keyframes star-pop { to { opacity: 1; transform: scale(1); } }
.case-review { scroll-margin-top: 88px; margin-block: 24px; padding-left: 20px; border-left: 3px solid var(--accent); display: grid; gap: 12px; }
.case-review blockquote { font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.case-review figcaption { font-size: 16px; color: var(--soft); }
.case-review figcaption b { color: var(--ink); font-weight: 600; }
.placeholder-line {
  border: 2px dashed var(--accent); border-radius: 12px; padding: 32px;
  color: var(--accent-text); font-size: 18px; font-weight: 500;
}

/* ---------- pricing ---------- */
/* One question, three answers: pick how often something changes, see that plan large.
   Without JS the picker is hidden and the three plans stack, so every price is still readable. */
.plans { display: grid; gap: 16px; }
.plans-q { display: none; font-size: 19px; font-weight: 500; margin-bottom: -2px; }
.plans-seg { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--tint); border-radius: 12px; }
.js .plans-seg { display: grid; }
.js .plans-q { display: block; }
.plans-seg button {
  display: grid; gap: 2px; justify-items: start; text-align: left;
  padding: 14px 16px; border: 0; border-radius: 9px; background: transparent;
  font: inherit; color: var(--soft); cursor: pointer;
  transition: transform 160ms var(--ease-out), color 150ms ease;
}
.plans-seg button b { font-size: 18px; font-weight: 600; color: var(--ink); }
.plans-seg button span { font-size: 15px; }
.plans-seg button[aria-checked="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 20, 20, .08), 0 0 0 1px var(--line); }
/* the Basis deal: a small tag on top of its picker button (and next to the name when there is no picker) */
.plans-seg button { position: relative; }
.deal {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, #fff); color: #B53608;  /* 5.2:1 */
  font-size: 13px; font-style: normal; font-weight: 600; line-height: 1.2; letter-spacing: 0;
}
.plans-seg .deal { position: absolute; top: -10px; right: 10px; box-shadow: 0 0 0 3px var(--bg); }
.plan-name .deal { vertical-align: middle; margin-left: 6px; }
.plan-start s { color: var(--faint); margin-right: 4px; }
.plan-deal { color: var(--ink); font-weight: 600; }
.plans-seg button[aria-checked="true"] b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; background: var(--accent); transform: translateY(-2px); }
.plans-seg button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .plans-seg button:hover { color: var(--ink); } }

.plan {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); gap: 32px 48px;
  border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(28px, 4vw, 44px);
}
.js .plan:not(.is-on) { display: none; }
.plan-price { display: grid; gap: 8px; align-content: start; font-variant-numeric: tabular-nums; }
.plan-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
/* the picker already names the plan */
.js .plan-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plan-month { font-size: clamp(48px, 5.4vw, 72px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.plan-month small { font-size: 20px; font-weight: 400; letter-spacing: 0; color: var(--soft); }
.plan-start { font-size: 18px; color: var(--soft); }
.plan-alt { font-size: 16px; line-height: 1.4; color: var(--soft); }
.js .plan-alt { display: none; }
/* Plus without setup fee: a second, smaller toggle inside the Plus card */
.pay-seg { display: none; grid-template-columns: auto auto; gap: 2px; padding: 3px; margin-bottom: 10px; justify-self: start; background: var(--tint); border-radius: 999px; }
.js .pay-seg { display: inline-grid; }
.pay-seg button {
  padding: 7px 14px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--soft); cursor: pointer;
  transition: transform 160ms var(--ease-out), color 150ms ease;
}
.pay-seg button[aria-checked="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 20, 20, .08), 0 0 0 1px var(--line); }
.pay-seg button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pay-seg button:hover { color: var(--ink); } }
[data-amount] { display: inline-block; }
/* the same offer as one line above the plans, seen whichever plan is open */
.nopay {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-bottom: 32px; padding: 18px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint);
  font-size: 17px; line-height: 1.5; color: var(--soft);
}
.nopay p { position: relative; padding-left: 21px; }
.nopay p::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--accent); }
.nopay b { color: var(--ink); font-weight: 600; }
.nopay .link { font-weight: 500; white-space: nowrap; }
.plan-for { font-size: 17px; line-height: 1.5; color: var(--soft); max-width: 32ch; }
.plan-cta { display: grid; gap: 16px; align-content: start; justify-items: start; padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--line); }
.plan-list { display: grid; gap: 12px; align-content: start; font-size: 17px; line-height: 1.45; }
.plan-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; }
.plan-list li::before { content: ""; width: 7px; height: 7px; margin-top: .55em; background: var(--ink); }
.plan-list li.hl { font-weight: 600; }
.plan-list li.hl::before { background: var(--accent); }
.price-note { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 16px; color: var(--soft); }
@media (max-width: 960px) {
  .plan { grid-template-columns: 1fr; }
  .plan-cta { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
}
@media (max-width: 720px) {
  .plans-seg button { padding: 12px 10px; }
  .plans-seg button b { font-size: 17px; }
  .plans-seg button span { font-size: 14px; }
}

/* ---------- faq ---------- */
/* heading on the left stays put while the questions scroll by on the right; stacked on phones */
.faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-side { position: sticky; top: 112px; display: grid; gap: 18px; }
.faq-side a { color: var(--ink); border-bottom: 1.5px solid var(--accent); text-decoration: none; }
.faq-split .faq { max-width: none; }
@media (max-width: 860px) { .faq-split { grid-template-columns: 1fr; } .faq-side { position: static; } }
.faq { border-top: 1px solid var(--line); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(19px, 1.7vw, 22px); font-weight: 500; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { position: relative; flex: none; width: 18px; height: 18px; }
.faq .plus::before, .faq .plus::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px;
  background: var(--ink); transition: transform 220ms var(--ease-out);
}
.faq .plus::after { transform: rotate(90deg); }
.faq details[open] .plus::after { transform: rotate(0deg); }
.faq details[open] .plus::before { background: var(--accent); }
.faq details[open] .plus::after { background: var(--accent); }
.faq .answer { padding: 0 0 28px; max-width: 64ch; color: var(--soft); }
.faq .answer p + p { margin-top: 12px; }

/* ---------- contact block ---------- */
/* title and direct lines on the left, the form as a white card on the right; stacked on phones */
.contact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px;
  grid-template-areas: "title form" "lines form";
  align-items: start;
  background: var(--accent); color: var(--on-accent);
  border-radius: 20px;
  padding: clamp(24px, 6vw, 80px);
}
.contact-head { grid-area: title; display: grid; gap: 18px; }
.contact .h2 { font-weight: 500; }  /* white on accent: keep it large and a touch heavier */
.contact-lines { grid-area: lines; align-self: end; display: grid; gap: 14px; justify-items: start; }
.contact-big { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.01em; color: inherit; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, .55); overflow-wrap: anywhere; transition: border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .contact-big:hover { border-color: #fff; } }
.contact-sub { font-size: 19px; font-weight: 700; }

.contact-form {
  grid-area: form; position: relative;
  display: grid; gap: 16px; align-content: start;
  background: var(--bg); color: var(--ink);
  border-radius: 14px; padding: clamp(20px, 3vw, 36px);
}
.field { display: grid; gap: 6px; }
.field label { font-size: 16px; font-weight: 600; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink);  /* 16px+ keeps iOS from zooming in */
  background: var(--bg); border: 1px solid #CFCFCB; border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 20, 20, .12); }
.field [aria-invalid="true"] { border-color: var(--accent-text); }
.contact-form .btn { justify-self: start; margin-top: 4px; }
.contact-form .btn[disabled] { opacity: .7; cursor: progress; }
.form-status { font-size: 16px; font-weight: 500; color: var(--accent-text); }
.form-status:empty { display: none; }
.form-privacy { font-size: 14px; color: var(--soft); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form.is-done { align-content: center; }
.form-done { display: grid; gap: 10px; align-content: center; }
.form-done:focus { outline: none; }
.form-done h3 { font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
.form-done p { font-size: 17px; color: var(--soft); }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; grid-template-areas: "title" "lines" "form"; }
  .contact-lines { align-self: start; }
}

/* ---------- footer ---------- */
.site-footer { padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; font-size: 15px; color: var(--soft); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.site-footer a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--ink); } }
.footer-pt a { color: var(--ink); border-bottom: 1.5px solid var(--accent); }
.footer-id { display: grid; gap: 8px; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer-contact a { color: var(--ink); }

/* ---------- case pages ---------- */
.section.case-show { padding-block: 0 clamp(48px, 6vw, 88px); }
.case-hero { padding-block: clamp(40px, 7vw, 100px) clamp(40px, 5vw, 72px); }
.case-hero .wrap { display: grid; gap: 28px; }
.back { font-size: 16px; color: var(--soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--ink); } }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 12px; }
.facts dt { font-size: 14px; color: var(--faint); margin-bottom: 4px; }
.facts dd { font-size: 17px; font-weight: 500; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px clamp(32px, 6vw, 96px); padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.story .body p + p, .story .body ul { margin-top: 14px; }
.story .body ul { display: grid; gap: 10px; }
.story .body li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; }
.story .body li::before { content: ""; width: 7px; height: 7px; margin-top: .6em; background: var(--accent); }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; row-gap: 12px; } }
.next { display: grid; gap: 10px; padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); text-decoration: none; }
.next .h2 span { border-bottom: 2px solid var(--accent); }

/* before/after slider: the top image is clipped; a native range input drives it (keyboard + touch for free) */
.compare { position: relative; overflow: hidden; --pos: 50%; background: #111; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0; }
.compare .after { clip-path: inset(0 0 0 var(--pos)); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); pointer-events: none; }
.compare .handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compare input:focus-visible + .handle::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.compare-labels { display: flex; justify-content: space-between; margin-top: 14px; font-size: 15px; color: var(--soft); }

/* ---------- personeelsapp demo: screen tabs + explanations ---------- */
.demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.demo .stage { padding-block: clamp(32px, 5vw, 56px); }
.demo-side { display: grid; gap: 28px; min-width: 0; }
.tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: var(--tint); border-radius: 10px; justify-self: start; }
.tabs button { min-height: 44px; padding: 0 16px; border-radius: 7px; font-size: 16px; font-weight: 500; color: var(--soft); transition: background-color 180ms ease, color 180ms ease; }
.tabs button[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.spots { display: grid; gap: 4px; }
.spots button {
  display: grid; gap: 4px; text-align: left; width: 100%;
  padding: 16px 18px; border-radius: 10px; border: 1px solid transparent;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.spots button b { font-size: 18px; font-weight: 600; }
.spots button span { font-size: 16px; color: var(--soft); line-height: 1.5; }
.spots button.is-on { background: var(--tint); border-color: var(--line); }
@media (max-width: 860px) { .demo { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.lost { padding-block: clamp(48px, 8vw, 120px); }
.lost .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.lost img { border-radius: 14px; max-height: 70vh; width: auto; justify-self: center; }
@media (max-width: 760px) { .lost .wrap { grid-template-columns: 1fr; } .lost img { max-height: 420px; } }

/* ---------- about ---------- */
.about .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-photo img { border-radius: 14px; }
.about-photo figcaption { margin-top: 12px; font-size: 15px; color: var(--soft); }
.about-text { display: grid; gap: 22px; min-width: 0; }
.about-text .body p + p { margin-top: 14px; }
.counter { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 8px; }
.counter b { font-size: clamp(36px, 4vw, 52px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .about .wrap { grid-template-columns: 1fr; } .about-photo { max-width: 520px; } }

/* ---------- page transitions ---------- */
/* Same-site navigations crossfade; the header stays put, and a project's device flies between the homepage
   and its own page (named "project" on the fly by the inline script in <head>). Browsers without
   cross-document view transitions (Firefox for now) simply load the next page. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: 160ms ease-out both vt-out; }
::view-transition-new(root) { animation: 280ms var(--ease-out) 60ms both vt-in; }
::view-transition-group(project) { animation-duration: 460ms; animation-timing-function: var(--ease-in-out); }
::view-transition-old(project), ::view-transition-new(project) { animation-duration: 460ms; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }