/* Over ons, contact (/contact/ and /gesprek/), privacy and terms in the Zipchat-style design (src/pages/company.mjs).
   Loaded after site/pages.css. Colours come from tokens.css only. The example on Over ons is as tall as its tallest
   scene, so changing tab or phase never moves the page; the form reserves a line for each error. */

/* Inline links inside running text stay underlined, so they never rely on colour alone. */
.page-hero .lead a, .booking-privacy a, .booking-fallback a, .contact-privacy a, .ask-noscript a, .legal-section p a {
  text-decoration: underline; text-decoration-color: var(--line-ink); text-underline-offset: 3px; transition: text-decoration-color var(--fast);
}
.page-hero .lead a:hover, .booking-privacy a:hover, .booking-fallback a:hover, .contact-privacy a:hover, .legal-section p a:hover { text-decoration-color: var(--accent); }

/* ── Over ons ── */
/* The portrait on the hero gradient, with the name on a glass label. */
.about-portrait { position: relative; justify-self: end; width: min(100%, 420px); margin: 0; }
.about-portrait img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-card); background: var(--panel-solid); box-shadow: var(--shadow-frame); }
.about-portrait figcaption {
  position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 10px 16px 10px 14px;
  border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass-strong); box-shadow: var(--shadow-sim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.about-portrait figcaption > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.about-portrait figcaption b { font-size: 15px; font-weight: 500; }
.about-portrait figcaption small { color: var(--ink-muted); font-size: 13px; }

/* Why Operlivo: the story and its three kinds of work on the left, the example on the right. */
.about-why { padding-top: 32px; }
/* Desktop: the copy with the tabs under it, centred beside the example. One column: copy, example, then the tabs right
   under it, so the pointer's click on Akkoord and on the next tab stay on one screen. */
.story-sim {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-rows: 1fr auto auto 1fr auto;
  grid-template-areas: ". stage" "copy stage" "tabs stage" ". stage" ". foot"; column-gap: 56px;
}
.story-copy { grid-area: copy; display: grid; justify-items: start; gap: 16px; }
.story-copy > p { max-width: 460px; color: var(--ink-muted); font-size: 17px; line-height: 1.6; }
.story-tabs { grid-area: tabs; display: grid; gap: 6px; width: 100%; margin-top: 28px; }
.story-stage { grid-area: stage; align-self: center; display: grid; min-width: 0; }
.story-sim > .sim-foot { grid-area: foot; margin-top: 16px; }
/* All panels share one cell, so the example is as tall as its tallest scene from the first paint: nothing jumps. */
.story-panel { grid-area: 1 / 1; display: grid; min-width: 0; }
.story-panel[hidden] { display: grid; visibility: hidden; }
/* A waiting panel stays fully hidden (children with their own visibility too) and rests in its start state without
   transitions, so the next tab never shows the previous scene's end state fading out. */
.story-panel[hidden] * { visibility: hidden !important; transition: none !important; }
.story-sim.is-ready .story-panel[hidden] :is(.r1, .r2, .r3) { opacity: 0; transform: translateY(8px); }

.story-scene {
  position: relative; display: flex; flex-direction: column; justify-content: center; padding: 28px;
  overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--hue-soft);
}
.story-scene > * { flex: none; }
.story-label { margin-bottom: 10px; color: var(--hue); font-size: 13px; font-weight: 500; text-align: center; }
.story-scene { --src-gap: 10px; }
.story-sources ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--src-gap); }
.story-src {
  display: grid; justify-items: start; align-content: start; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--canvas); box-shadow: var(--shadow-sim); transition: transform .6s var(--enter), opacity .6s var(--enter); transition-delay: calc(var(--n) * 70ms);
}
.story-src .mk-icon { width: 20px; height: 20px; border-radius: 6px; }
.story-src > span:last-child { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
.story-src b { font-size: 13px; font-weight: 600; }
.story-src small { color: var(--ink-muted); font-size: 12.5px; }
/* Before the agent starts the sources lie scattered; then they line up and lines join them to one task. */
.story-sim.is-ready .story-src { opacity: .7; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
.story-src:nth-child(1) { --sx: -6px; --sy: 10px; --sr: -4deg; }
.story-src:nth-child(2) { --sx: 0px; --sy: -8px; --sr: 3deg; }
.story-src:nth-child(3) { --sx: 6px; --sy: 12px; --sr: -2.5deg; }
.story-sim.is-p1 .story-src { opacity: 1; transform: none; }
.story-sim.is-ready .story-panel[hidden] .story-src { opacity: .7; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
/* The lines run from the middle of the first source to the middle of the third (the columns have a gap, so that is
   not the full width); x = 150 is the middle source and the point where all three meet the card. They draw downwards. */
.story-join {
  display: block; align-self: center; width: calc((200% + 2 * var(--src-gap)) / 3); height: 40px; overflow: visible;
  clip-path: inset(0 -4px 0 -4px); transition: clip-path .6s var(--enter) .15s;
}
.story-join path { fill: none; stroke: var(--hue); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.story-sim.is-ready .story-join { clip-path: inset(0 -4px 100% -4px); }
.story-sim.is-p1 .story-join { clip-path: inset(0 -4px 0 -4px); }
.story-sim.is-ready .story-panel[hidden] .story-join { clip-path: inset(0 -4px 100% -4px); }
.story-card { margin-bottom: 14px; }
/* The card's state: looking it up while the sources lie scattered, then all in one place. One cell, so nothing moves. */
.story-state { display: inline-grid; }
.story-state > * { grid-area: 1 / 1; justify-self: end; }
.story-state > :first-child, .story-sim.is-ready:not(.is-p1) .story-state > :last-child { visibility: hidden; }
.story-sim.is-ready:not(.is-p1) .story-state > :first-child { visibility: inherit; }
/* While it looks things up, two quiet lines hold the place of the rows that follow. */
.story-card .mk-rows { position: relative; }
.story-card .mk-rows::before, .story-card .mk-rows::after {
  content: ""; position: absolute; left: 36px; width: 58%; height: 10px; border-radius: 5px; background: var(--line);
  pointer-events: none; opacity: 0; transition: opacity .3s var(--enter);
}
.story-card .mk-rows::before { top: calc(25% - 5px); }
.story-card .mk-rows::after { top: calc(75% - 5px); width: 40%; }
.story-sim.is-ready:not(.is-p1) .story-panel:not([hidden]) .story-card .mk-rows::before,
.story-sim.is-ready:not(.is-p1) .story-panel:not([hidden]) .story-card .mk-rows::after { opacity: 1; }
.story-scene .sim-crew { width: 100%; }

/* The way of working as tiles with a small proof: brand marks stand cut out, without a tile behind them. */
.pf-logo { flex: none; width: 14px; height: 14px; object-fit: contain; }
.pf-logo--picqer { object-fit: cover; object-position: 0 50%; }
/* Four systems as two even rows, so one name never ends up alone on a line. */
.about-approach .tile:nth-child(2) .tile-proof { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; }

/* Where Operlivo stands: the platform today and the business details. */
.about-now .path-card h3 { max-width: 20ch; }
/* Short texts end on a pair of words: Chrome's 'pretty' leaves a long last word alone, 'balance' does not. */
.about-now .path-card p { text-wrap: balance; }
.fact-list { display: grid; gap: 10px; margin: 4px 0 8px; }
.fact-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.fact-list .i { flex: none; margin-top: 1px; color: var(--ink-muted); }

/* ── Contact: the calendar card, the intake form and the direct ways to reach us ── */
.contact-book { padding-top: 8px; }
/* The copy and the calendar card end on one line: the card takes the row's height and keeps its privacy note at the
   bottom; below the form, the side cards share the form's height. */
.book-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: stretch; gap: 40px; padding: 40px;
  border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel);
}
.book-copy { display: grid; justify-items: start; align-content: start; gap: 14px; padding-top: 4px; }
.book-copy > p { max-width: 440px; color: var(--ink-muted); }
.book-sub { margin-top: 14px; font-size: 16px; letter-spacing: -.01em; }
.num { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--canvas); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.num-list { display: grid; gap: 16px; }
.num-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 14px; }
.num-list li > span:last-child { display: grid; gap: 2px; }
.num-list b { font-weight: 500; }
.num-list small { color: var(--ink-muted); font-size: 14.5px; line-height: 1.5; }

.booking-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); box-shadow: var(--shadow-sim); }
.booking-panel > [hidden] { display: none; }
.booking-start { display: grid; flex: 1 0 auto; grid-template-rows: repeat(4, auto) minmax(0, 1fr); justify-items: start; gap: 18px; padding: 32px; }
.booking-start > .booking-privacy { align-self: end; }
.booking-host { display: flex; align-items: center; gap: 14px; min-width: 0; }
.booking-host img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 16%; background: var(--panel-solid); }
.booking-host > span { display: grid; gap: 2px; min-width: 0; }
.booking-host h3 { font-size: 20px; }
.booking-host small { color: var(--ink-muted); font-size: 14px; }
.booking-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.booking-facts li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500; }
.booking-facts .i { flex: none; color: var(--accent); }
.booking-start > p:not(.booking-privacy) { max-width: 460px; color: var(--ink-muted); }
.booking-start .btn[aria-disabled="true"] { background: var(--ink-800); cursor: progress; }
.booking-privacy { max-width: 460px; color: var(--ink-muted); font-size: 13px; line-height: 1.55; }
.booking-widget { height: 760px; }
.booking-widget iframe { display: block; width: 100%; height: 100%; border: 0; }
.booking-status, .booking-fallback { padding: 14px 24px; color: var(--ink-muted); font-size: 14px; line-height: 1.55; }
.booking-fallback { border-top: 1px solid var(--line); }
/* While Calendly loads, the card already takes the agenda's height, so the page below does not jump when it arrives. */
.booking-panel:has([data-booking-open][aria-disabled="true"]) { min-height: 810px; }

.contact-ask { padding-top: 0; }
.ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; gap: 24px; }
.ask-card { min-width: 0; padding: 40px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); box-shadow: var(--shadow-sim); scroll-margin-top: 104px; }
.ask-card:focus, .ask-card:focus-visible { border-radius: var(--r-card); box-shadow: var(--shadow-sim); }
.ask-head { display: grid; justify-items: start; gap: 10px; margin-bottom: 28px; }
.js .contact-form { display: grid; gap: 12px; }
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.field label { font-size: 15px; font-weight: 500; }
.field label small { color: var(--ink-muted); font-size: 13.5px; font-weight: 450; }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--line-ink); border-radius: var(--r-tile); background: var(--canvas);
  color: var(--ink); font-size: 16px; line-height: 1.45; caret-color: var(--accent); transition: border-color var(--fast), box-shadow var(--fast);
}
.field textarea { min-height: 148px; resize: vertical; scrollbar-width: none; }
.field textarea::-webkit-scrollbar { display: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-subtle); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--ink-subtle); }
.field input:focus, .field textarea:focus { border-color: var(--ink); border-radius: var(--r-tile); box-shadow: var(--focus); }
.field [aria-invalid="true"] { border-color: var(--orange); }
.field-error { min-height: 20px; color: var(--orange); font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.intake-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The privacy line sits under the button, so "Versturen…" (a shorter label) never pulls anything along. */
.form-submit { display: grid; justify-items: start; gap: 14px; margin-top: 4px; }
.form-submit .btn:disabled { background: var(--ink-800); cursor: progress; }
.contact-privacy { color: var(--ink-muted); font-size: 14px; }
.form-status { margin-top: 14px; padding: 12px 16px; border-radius: var(--r-tile); background: var(--green-soft); color: var(--green); font-size: 15px; font-weight: 500; }
.form-status[role="alert"] { background: var(--orange-soft); color: var(--orange); }
.form-status[hidden] { display: none; }
.ask-noscript { color: var(--ink-muted); }

.ask-side { display: grid; gap: 12px; min-width: 0; }
.side-card { display: grid; justify-items: start; align-content: start; gap: 6px; min-width: 0; padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel); }
.side-card .tile-icon { margin-bottom: 6px; }
.side-card h3 { font-size: 17px; }
.side-card p { color: var(--ink-muted); font-size: 15px; }
.side-link { overflow-wrap: anywhere; }
.side-steps { display: grid; gap: 10px; margin-top: 4px; }
.side-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--ink-muted); font-size: 14.5px; line-height: 1.45; }
.side-steps .num { width: 24px; height: 24px; font-size: 12px; color: var(--ink); }

/* ── Privacy and terms: the document switch, the contents and the articles in the 720 column ── */
.doc-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.doc-switch a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border-radius: var(--r-small); color: var(--ink-muted); font-size: 15px; font-weight: 500; transition: color var(--fast), background var(--fast), box-shadow var(--fast); }
.doc-switch a:hover { color: var(--ink); }
.doc-switch a[aria-current="page"] { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-tab); }
.doc-switch .ds-short { display: none; }
.doc-date { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 14px; }
.doc-date .i { color: var(--accent); }
@media (pointer: coarse) { .doc-switch a { min-height: 44px; } }

.legal-block { padding: 8px 0 var(--section-y); }
.legal-toc { margin-bottom: 8px; padding: 24px 28px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel); }
.legal-toc h2 { margin-bottom: 10px; color: var(--ink-muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.legal-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.legal-toc a { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-inline: -8px; padding: 6px 8px; border-radius: var(--r-small); font-size: 15px; line-height: 1.35; transition: background var(--fast); }
.legal-toc a:hover { background: var(--canvas); }
.legal-num { display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: var(--canvas); font-size: 12.5px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.legal-section { padding-block: 36px; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.legal-section h2 { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; font-size: 24px; line-height: 1.3; letter-spacing: -.03em; }
.legal-section h2 .legal-num { width: 32px; height: 32px; border-color: transparent; background: var(--accent-soft); color: var(--orange); font-size: 14px; }
.legal-section p { color: var(--ink-muted); line-height: 1.7; }
.legal-section p + p { margin-top: 14px; }
.legal-out a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 500; }
.legal-out .i { color: var(--accent); transition: transform var(--base) var(--enter); }
.legal-out a:hover .i { transform: translate(2px, -2px); }

/* ── Breakpoints ── */
@media (max-width: 1100px) {
  .story-sim { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); column-gap: 40px; }
  .book-card { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px; padding: 32px; }
  .ask-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 960px) {
  .about-portrait { justify-self: start; width: min(100%, 440px); }
  .story-sim { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "copy" "stage" "tabs" "foot"; }
  .story-copy > p { max-width: 640px; }
  .story-stage, .story-tabs, .story-sim > .sim-foot { width: 100%; max-width: 640px; justify-self: start; }
  .story-stage { margin-top: 28px; }
  .story-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  .story-sim > .sim-foot { margin-top: 12px; }
  .book-card { grid-template-columns: minmax(0, 1fr); }
  .ask-grid { grid-template-columns: minmax(0, 1fr); }
  .ask-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Below 900px the tabs are the shared pills (sims.css), three on one row. */
@media (max-width: 899px) {
  .story-tabs { gap: 8px; }
  .story-tabs .sim-tab { justify-content: center; width: 100%; }
}
@media (max-width: 479px) {
  .story-tabs { gap: 6px; }
  .story-tabs .sim-tab { gap: 6px; padding: 5px 10px 5px 5px; }
  .story-tabs .sim-tab-icon { width: 28px; height: 28px; }
  .story-tabs .sim-tab-text b { font-size: 13.5px; }
}
@media (max-width: 379px) {
  .story-tabs .sim-tab { padding-inline: 8px; }
  .story-tabs .sim-tab-icon { display: none; }
}
@media (max-width: 767px) {
  /* Lower on phones so the name label shows on the first screen; the face stays in the crop. */
  .about-portrait img { aspect-ratio: 5 / 4; object-position: 50% 16%; }
  .book-card { padding: 24px; }
  .ask-card { padding: 28px 24px; }
  .ask-side { grid-template-columns: minmax(0, 1fr); }
  .legal-toc ol { grid-template-columns: minmax(0, 1fr); }
  .legal-section { padding-block: 28px; }
  .legal-section h2 { font-size: 21px; }
}
@media (max-width: 640px) {
  .story-scene { --src-gap: 8px; padding: 16px; }
  .story-card .mk-head .mk-meta { display: none; }
  .story-join { height: 24px; }
  .story-src { padding: 10px; gap: 6px; }
  .story-src small { font-size: 12px; }
  .story-card .mk-rows .mk-tag { display: none; }
  .story-card .mk-row { grid-template-columns: 24px minmax(0, 1fr); }
  .form-pair { grid-template-columns: minmax(0, 1fr); }
  /* Phones: the side cards turn into compact rows with the icon beside the text, like the tiles. */
  .side-card { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px; }
  .side-card .tile-icon { grid-row: span 2; margin: 0; }
  .side-card > :not(.tile-icon) { grid-column: 2; }
  .side-card .side-link { min-height: 40px; }
}
@media (max-width: 479px) {
  /* Phones: the card's rows already say what each source holds, so the sources show only their name. This keeps the
     example and its tabs on one screen, where the pointer's two clicks happen. */
  .story-src small { display: none; }
  .story-scene { padding: 12px; }
  .story-label { margin-bottom: 8px; }
  .story-card { margin-bottom: 10px; }
  .story-card .mk-head { min-height: 46px; padding-block: 8px; }
  .story-card .mk-body { gap: 8px; padding-bottom: 12px; }
  .story-card .mk-row { min-height: 44px; padding-block: 6px; }
  .story-card .mk-propose { padding: 12px; }
  .story-scene .sim-crew { gap: 6px; padding: 8px 8px 8px 10px; }
  .story-tabs { margin-top: 8px; }
  .book-card { padding: 0; border: 0; background: none; }
  .about-now .path-card .btn { width: 100%; }
  .booking-start { padding: 24px 20px; }
  .booking-widget { height: 900px; }
  .booking-status, .booking-fallback { padding-inline: 20px; }
  .booking-start .btn { width: 100%; }
  .ask-card { padding: 24px 18px; }
  .form-submit .btn { width: 100%; }
  .legal-toc { padding: 18px 20px; }
  .page-hero .doc-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .doc-switch a { padding: 8px 10px; font-size: 14px; line-height: 1.3; text-align: center; }
  .doc-switch .ds-long { display: none; }
  .doc-switch .ds-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .story-src, .story-join, .story-card .mk-rows::before, .story-card .mk-rows::after { transition: none; }
}