/* Van Praag AI Agency — the /nl-sessie look, laid over every page.
   Leib, 15-10-2026: "ik vind het design van /nl-sessie beter dan de reguliere pages".
   This file is loaded LAST, after home-v2.css or styles.css (+ team.css / blog.css),
   and only overrides. Remove the <link> and a page is exactly what it was before.

   What /nl-sessie does that the rest did not:
   - one typeface: Assistant, headlines at 800, tight tracking (no Fraunces/Iowan serif)
   - the gold word in a headline is upright gold-deep, not italic
   - paid CTA = ink pill with a gold disc; free CTA = ink outline pill
   - kicker = plain small caps label, no leading rule
   - cards = paper, one hairline, 20px radius, one soft shadow
   - header = flat cream with a hairline, no glow
   Logical properties only (inline-start/end), so /he/ mirrors for free. */

@font-face{font-family:"Assistant";src:url("/assets/fonts/assistant-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Assistant";src:url("/assets/fonts/assistant-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Assistant";src:url("/assets/fonts/assistant-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Assistant Hebrew";src:url("/assets/fonts/assistant-hebrew-var.woff2") format("woff2-variations");font-weight:200 800;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}

:root{
  --cream:#FAF6EC; --ivory:#FAF6EC; --ivory-2:#F3ECDC; --panel:#F3ECDC; --white:#FFFDF7; --paper:#FFFDF7;
  --ink:#2E2219; --body:#4A3D31; --ink-soft:#5A5346; --muted:#5A5346;
  --gold-deep:#8C6818; --gold:#B8891F;
  --hair:rgba(46,34,25,.12);
  --sans:"Assistant","Assistant Hebrew",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --sans-he:"Assistant Hebrew","Assistant",system-ui,Arial,sans-serif;
  --serif:var(--sans);
  --shadow-card:0 30px 60px -40px rgba(46,34,25,.3);
}
body{background:var(--cream);color:var(--body);font-family:var(--sans);font-size:1.125rem;line-height:1.6}
[dir=rtl] body{font-family:var(--sans-he)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);font-weight:800;letter-spacing:-.025em;line-height:1.05}
h1,.tophero h1{font-weight:800;letter-spacing:-.035em;line-height:.98}
.humangrid.nophoto .said{font-family:var(--sans);font-weight:600;letter-spacing:-.01em}
h3,h4{letter-spacing:-.01em;line-height:1.2}
h1 em,h2 em,h3 em,.em{font-style:normal;font-weight:inherit;color:var(--gold-deep)}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{letter-spacing:0;line-height:1.1}
.lede{color:var(--body)}

.kicker,.eyebrow{font:600 .85rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.kicker::before,.kicker::after,.eyebrow::before,.eyebrow::after{display:none}
[dir=rtl] .kicker,[dir=rtl] .eyebrow{letter-spacing:0;text-transform:none}
.rule{background:var(--gold);height:2px}

/* ---------- buttons ---------- */
.btn{font-family:var(--sans);font-weight:600;font-size:1.02rem;min-height:54px;padding-block:0;padding-inline:26px;
  border-radius:999px;transform:none;transition:background .2s,color .2s,border-color .2s}
.btn:hover{transform:none}
.btn:not(.btn-ghost){background:var(--ink);color:var(--cream);box-shadow:none}
.btn:not(.btn-ghost):hover{background:#46362A;color:var(--cream)}
.btn-gold{background:var(--ink);color:var(--cream);border:0;box-shadow:none;padding-inline-end:8px}
.btn-gold:hover{background:#46362A;color:var(--cream);box-shadow:none;transform:none}
.btn-gold::after{content:"→";display:grid;place-items:center;flex:none;width:40px;height:40px;margin-inline-start:6px;
  border-radius:50%;background:var(--gold);color:var(--ink);font-weight:600}
[dir=rtl] .btn-gold::after{content:"←"}
.btn-gold .arrow{display:none}
.btn-sm{min-height:44px;font-size:.95rem;padding-inline:18px}
.btn-sm.btn-gold{padding-inline-end:6px}
.btn-sm.btn-gold::after{width:32px;height:32px}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none}
.btn-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);transform:none}

/* ---------- header ---------- */
header{background:var(--cream);backdrop-filter:none;border-bottom:1px solid var(--hair);box-shadow:none}
header::before{display:none}
header.scrolled{background:var(--cream);box-shadow:none}
header .btn,nav a.btn{min-height:38px;font-size:13.6px;padding-block:0;padding-inline:16px}
header .btn-gold::after{display:none} /* /nl-sessie's header CTA has no disc, and the disc costs 42px the 1000-1100px header does not have */
@media (max-width:1180px){nav{gap:20px}}
.brand b,.brand .name{font-family:var(--sans);font-weight:800;letter-spacing:-.01em;color:var(--ink)}

/* ---------- surfaces ---------- */
.card,.price-card,.tcard,.pcard,.svc-card,.panel{background:var(--paper);border:1px solid var(--hair);border-radius:20px;box-shadow:var(--shadow-card)}
.card:hover,.price-card:hover,.pcard:hover,.svc-card:hover{transform:none;border-color:var(--hair);box-shadow:var(--shadow-card)}
hr,.divider{border-color:var(--hair)}
footer{border-top:1px solid var(--hair);color:var(--ink-soft)}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* testimonial: centred block under the centred CTA row (Leib 16-10: "the quote should be in the middle") */
.quote{text-align:center}
.quote blockquote{margin-inline:auto;max-width:32ch;font-weight:600;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.35}
.quote figcaption{margin-top:14px}

/* the Video nav item (16-10) costs ~45px; in the 941-1060 band the DE logo touched the nav */
@media (min-width:941px) and (max-width:1060px){header .bar nav{gap:10px}}
@media (min-width:941px) and (max-width:1000px){header .bar nav{font-size:13px} header .bar nav a.btn{padding-inline:12px}}