/* Hoogenboom ICT — huisstijl
   Kleuren uit het logo: goud (de boom) op antraciet, met warm crème als rustige ondergrond.
   Letters: Schibsted Grotesk (koppen), Instrument Sans (tekst), JetBrains Mono (prijzen/specs),
   Barlow Condensed (alleen het woordmerk, zoals in het logo). */

@font-face{font-family:"Schibsted Grotesk";src:url("/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --ink:#1c1c1c;          /* antraciet uit het logo */
  --ink-2:#2a2a28;
  --text:#34332f;
  --muted:#6b675d;
  --line:#ebe5d6;
  --paper:#ffffff;
  --cream:#fbf7ec;
  --cream-2:#f5edd8;
  --gold:#f2c200;         /* boom, licht */
  --gold-2:#e0a800;       /* boom, midden */
  --gold-deep:#8a6a00;    /* goud als tekstkleur op wit (leesbaar) */
  --gold-soft:#fdf3cc;
  --on-ink:#f3efe6;
  --on-ink-muted:#a8a294;
  --ink-line:#34332f;

  --f-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --f-brand:"Barlow Condensed","Arial Narrow",Arial,sans-serif;

  --max:1180px;
  --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--text);font:400 1.0625rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-deep)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5.6vw,4rem);font-weight:800;letter-spacing:-.04em}
h2{font-size:clamp(1.85rem,3.6vw,2.6rem);font-weight:780;letter-spacing:-.03em}
h3{font-size:1.2rem;font-weight:680;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:6px;z-index:100}
.skip:focus{left:8px}

.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.stack{display:grid;gap:16px}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* Label boven een kop: klein goud bolletje + tekst */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 .78rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--gold-deep)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--gold)}

/* Markeerstift-accent op een woord in een kop */
.mark{position:relative;white-space:nowrap;z-index:0}
.mark::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.16em;background:var(--gold);border-radius:2px;z-index:-1}

/* Knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border-radius:10px;font:650 .98rem/1.2 var(--f-body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{background:var(--gold-2);color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;color:#fff}
.btn-secondary{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-secondary:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--gold);color:var(--ink)}
.btn-sm{padding:9px 16px;font-size:.92rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Header: overal donker, naadloos met de donkere bovenkant van elke pagina */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
.site-header.scrolled{background:rgba(28,28,28,.92);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom-color:var(--ink-line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo:hover{color:#fff}
.logo img{width:44px;height:auto}
.wordmark{font:700 1.4rem/1 var(--f-display);letter-spacing:-.04em;white-space:nowrap}
.wordmark b{font-weight:700;color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;padding:0}
.nav-links a{color:#d9d4c7;text-decoration:none;font-weight:550;font-size:.98rem;position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-links .btn{color:var(--ink)}
.nav-toggle{display:none;background:none;border:1px solid #3d3b35;border-radius:10px;width:44px;height:44px;cursor:pointer;color:#fff}
.nav-toggle svg{width:20px;height:20px}
@media (max-width:860px){
  .nav-toggle{display:inline-grid;place-items:center;order:2}
  .nav-links{display:none;position:absolute;left:0;right:0;top:78px;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);border-bottom:1px solid var(--ink-line);padding:8px var(--gutter) 20px;box-shadow:0 20px 30px -20px rgba(0,0,0,.5)}
  .nav-links.open{display:flex}
  .nav-links li a{display:block;padding:14px 0;border-bottom:1px solid var(--ink-line)}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links li:last-child a{border:0;margin-top:14px;text-align:center}
  .nav-links a[aria-current="page"]{color:var(--gold)}
}

/* Secties: alles op dezelfde crème ondergrond, zodat de pagina als één geheel doorloopt.
   Alleen de bovenkant (hero/paginakop) en de footer zijn donker, met afgeronde hoeken naar het crème toe. */
:root{--round:clamp(28px,4vw,56px)}
.section{padding-block:clamp(48px,6vw,84px);position:relative}
.section-tight{padding-block:clamp(40px,5vw,64px);position:relative}
.section-cream{background:var(--cream)}
.section-ink{background:var(--ink);color:var(--on-ink)}
/* Ritme zonder harde blokken: crème als basis, witte en donkere vlakken met afgeronde hoeken,
   en een zachte gouden of witte gloed waarmee de vlakken in elkaar overlopen. */
.section-paper{--sec:#fff;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 22%,#fff 78%,rgba(255,255,255,0))}
.section-ink{--sec:var(--ink);border-radius:var(--round);margin-inline:clamp(0px,2vw,28px);background:radial-gradient(55% 60% at 88% 0%,rgba(242,194,0,.13),transparent 70%),radial-gradient(45% 50% at 0% 100%,rgba(242,194,0,.07),transparent 70%),var(--ink)}
.section-paper+.section-ink,.section-ink+.section-paper{margin-top:clamp(8px,1.4vw,16px)}
/* Het donkere blok staat als kaart, even breed als de werkwijze-stappen (1480 - 2x40), met crème eromheen. */
.section-ink:not(.section-ink-top){margin-inline:max(clamp(0px,2vw,28px),(100% - 1400px)/2)}
/* Werkwijze loopt juist over de volle breedte: bredere inhoud en een tijdlijn van rand tot rand. */
.container-wide{max-width:1480px}
.werkwijze{overflow-x:clip}
/* Werkwijze breed op een lichte band, met ruimte tot het donkere projectenblok eronder. */
.werkwijze{margin-top:0}
.section:has(+.werkwijze){padding-bottom:clamp(24px,3vw,40px)}
.werkwijze+#projecten{margin-top:clamp(40px,5vw,72px)}
.glow-top{background:radial-gradient(38% 45% at 88% 30%,rgba(242,194,0,.15),transparent 70%),radial-gradient(35% 40% at 8% 80%,rgba(255,255,255,.95),transparent 70%)}
.glow-light{background:radial-gradient(42% 75% at 22% 50%,#fff 0%,rgba(255,255,255,0) 70%)}
.glow-bottom{background:radial-gradient(38% 45% at 85% 55%,rgba(242,194,0,.14),transparent 70%)}
.section-ink h2,.section-ink h3{color:#fff}
.section-ink .lead,.section-ink .muted{color:var(--on-ink-muted)}
.section-ink .eyebrow{color:var(--gold)}
.section-head{display:grid;gap:14px;margin-bottom:48px;max-width:720px}
.section-head.center{margin-inline:auto;text-align:center;justify-items:center}
.section-head-split{max-width:none;grid-template-columns:1fr 1fr;align-items:end;gap:24px 48px}
@media (max-width:900px){.section-head-split{grid-template-columns:1fr}}
.more-link{margin-top:40px}
.section-ink .text-link{color:#fff}
.section-ink .text-link:hover{color:var(--gold)}

/* Hero: grote kop links, rechts een schuin geplaatste wand met eigen projecten die heel langzaam schuift */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink-muted);min-height:calc(100svh - 78px);display:grid;grid-template-rows:1fr auto}
.hero-wall{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wall{position:absolute;top:-40%;right:-14%;width:min(1180px,92vw);height:190%;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;transform:rotate(-14deg);opacity:.62}
.wall-col{display:flex;flex-direction:column;animation:wall-up 170s linear infinite;will-change:transform}
.wall-col:nth-child(2n){animation-name:wall-down;margin-top:-30%}
.wall-col:nth-child(3){animation-duration:200s}
.wall-col img{width:100%;height:auto;margin-bottom:22px;border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
@keyframes wall-up{from{transform:translateY(0)}to{transform:translateY(-33.333%)}}
@keyframes wall-down{from{transform:translateY(-33.333%)}to{transform:translateY(0)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,var(--ink) 0%,var(--ink) 30%,rgba(28,28,28,.82) 50%,rgba(28,28,28,.2) 78%,rgba(28,28,28,.35) 100%),
  linear-gradient(0deg,var(--ink) 0%,rgba(28,28,28,0) 26%),
  linear-gradient(180deg,var(--ink) 0%,rgba(28,28,28,0) 14%)}
.hero-body{position:relative;z-index:2;align-self:center;width:100%;padding-block:clamp(56px,8vw,110px) clamp(40px,5vw,64px)}
.hero-inner{max-width:780px;display:grid;gap:26px}
.hero-offer{display:grid;gap:12px;justify-items:start;margin-top:clamp(32px,4.6vw,72px)}
.hero-kicker{display:inline-flex;align-items:center;gap:12px;font-size:1.05rem;font-weight:600;color:var(--gold)}
.hero-kicker::before{content:"";width:28px;height:2px;background:var(--gold)}
.hero h1{color:#fff;font-size:clamp(3rem,8.4vw,6.6rem);line-height:.98;letter-spacing:-.05em;margin-top:-4px}
.hero h1 em{font-style:normal;color:var(--gold)}
.nowrap{white-space:nowrap}
.hero-price{font-size:clamp(1.05rem,1.6vw,1.2rem);color:#d9d4c7}
.hero-price b{font:800 1.5em/1 var(--f-display);color:#fff;letter-spacing:-.02em;margin-left:4px}
.btn-ghost{border-color:#5a564c;color:#fff;background:transparent}
.btn-ghost:hover{border-color:#fff;color:#fff}
.hero-foot{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:22px 30px;font-size:.92rem;color:var(--on-ink-muted)}
.hero-foot::before{content:"";position:absolute;top:0;left:50%;width:min(100vw,1760px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 22%,rgba(255,255,255,.16) 78%,transparent)}
.hero-foot b{color:#fff;font-weight:650}
@media (max-width:860px){
  .hero{min-height:0}
  .wall{right:-60%;width:150vw;opacity:.32}
  /* Op de telefoon zijn de tegels klein, dus de wand beweegt sneller om de beweging zichtbaar te houden. */
  .wall-col{animation-duration:55s}
  .wall-col:nth-child(3){animation-duration:65s}
  .hero::before{background:linear-gradient(90deg,rgba(28,28,28,.94) 0%,rgba(28,28,28,.8) 60%,rgba(28,28,28,.55) 100%),linear-gradient(0deg,var(--ink) 0%,rgba(28,28,28,0) 30%)}
  /* Telefoon (variant G): kop op ongeveer een derde van het scherm, de vraag, de prijs en de knoppen
     samen onderin, met wat lucht tot de onderrand. Geen intro en geen drie regels onderaan. */
  .hero{min-height:100svh;grid-template-rows:1fr}
  .hero-foot{display:none}
  .hero-body{align-self:stretch;display:flex;padding-block:calc(33svh - 78px) 110px}
  .hero-inner{display:flex;flex-direction:column;gap:0;flex:1;width:100%}
  .hero-offer{display:contents}
  .hero-kicker{margin-top:auto;padding-top:48px}
  .hero-price{margin-top:10px}
  .hero-inner .btn-row{margin-top:24px}
}

/* De websitedeal: links het verhaal met de prijs, rechts wat erbij zit (25 okt: linkerkant rustiger: kop en prijs kleiner) */
.deal-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.deal-intro{display:grid;gap:20px;align-content:start}
.deal-intro h2{font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.deal-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:4px}
.deal-price b{font:800 clamp(4.2rem,8vw,6rem)/.88 var(--f-display);color:var(--ink);letter-spacing:-.055em}
.deal-price span{font:500 .95rem var(--f-mono);color:var(--muted)}
.deal-sub{color:var(--muted);font-size:.95rem;max-width:40ch}
.deal-list{list-style:none;padding:clamp(24px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;background:#fff;border:1px solid var(--line);border-radius:28px;color:var(--muted);box-shadow:0 40px 80px -56px rgba(28,28,28,.45)}
.deal-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.93rem;line-height:1.45}
.deal-list b{display:block;color:var(--ink);font:650 1rem/1.3 var(--f-display);margin-bottom:3px}
/* Wat erbij zit: donkere kaart, zodat het zwart van de hero en het projectenblok ook hier terugkomt. */
.deal-list{background:radial-gradient(70% 60% at 100% 0%,rgba(242,194,0,.14),transparent 70%),var(--ink);border-color:var(--ink);color:var(--on-ink-muted);box-shadow:0 50px 90px -50px rgba(28,28,28,.7)}
.deal-list b{color:#fff}
.alt-plan .plan-icon{background:var(--gold);color:var(--ink)}
.deal-list svg{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--gold);color:var(--ink)}
@media (max-width:900px){.deal-grid{grid-template-columns:1fr}}
@media (max-width:520px){.deal-list{grid-template-columns:1fr}}

/* Andere pakketten (compact), onder de websitedeal */
.alt-wrap{margin-top:clamp(64px,7.5vw,104px);display:grid;gap:18px}
.alt-head{font:650 1.15rem var(--f-display);color:var(--ink)}
.alt-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.alt-plan{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:18px;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
.alt-plan:hover{border-color:var(--gold);box-shadow:0 20px 40px -30px rgba(28,28,28,.4);color:inherit}
.alt-plan p{color:var(--muted);font-size:.95rem;margin-top:4px}
.alt-price{display:grid;text-align:right}
.alt-plans .alt-plan{grid-template-columns:auto 1fr;grid-template-rows:1fr auto;align-items:start}
.alt-plans .alt-price{grid-column:1/-1;text-align:left;padding-top:14px;border-top:1px dashed var(--line)}
.hosting-strip{margin-top:26px}
.hosting-strip h2,.hosting-strip h3{font-size:1.2rem}
.alt-price b{font:800 1.6rem/1 var(--f-display);color:var(--ink);letter-spacing:-.02em}
.alt-price span{font:500 .75rem var(--f-mono);color:var(--muted);margin-top:4px}
@media (max-width:980px){.alt-plans{grid-template-columns:1fr}.alt-plans .alt-plan{grid-template-columns:auto 1fr auto;grid-template-rows:auto;align-items:center}.alt-plans .alt-price{grid-column:auto;text-align:right;padding-top:0;border-top:0}}
@media (max-width:980px){.hosting-strip{max-width:560px}}
@media (max-width:520px){.alt-plan,.alt-plans .alt-plan{grid-template-columns:auto 1fr}.alt-price,.alt-plans .alt-price{grid-column:1/-1;text-align:left}}

/* Pakketten */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{position:relative;display:grid;grid-template-rows:auto auto auto auto auto 1fr auto;gap:14px;border:2px solid var(--line);border-radius:20px;padding:30px 28px;background:var(--paper);min-width:0;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.plan:hover{border-color:var(--gold);box-shadow:0 24px 44px -32px rgba(28,28,28,.35)}
.plan-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-deep)}
.plan-icon svg{width:26px;height:26px}
.plan-featured{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.plan-featured h2,.plan-featured h3{color:#fff}
.plan-featured .plan-then,.plan-featured .plan-desc{color:var(--on-ink-muted)}
.plan-featured .plan-icon{background:rgba(242,194,0,.15);color:var(--gold)}
.plan-flag{position:absolute;top:-14px;right:24px;background:var(--gold);color:var(--ink);font:700 .75rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;padding:7px 12px;border-radius:999px}
.plan h2,.plan h3{font-size:1.35rem}
.plan-desc{color:var(--muted);font-size:.98rem;margin-top:-6px}
.plan-price{font:800 3rem/1 var(--f-display);color:var(--ink);letter-spacing:-.04em}
.plan-featured .plan-price{color:var(--gold)}
.plan-price small{font:500 .9rem var(--f-body);color:var(--muted);letter-spacing:0;margin-left:6px}
.plan-featured .plan-price small{color:var(--on-ink-muted)}
.plan-then{font:500 .85rem var(--f-mono);color:var(--muted);margin-top:-6px}
.plan ul{list-style:none;padding:0;display:grid;gap:10px;font-size:.97rem;align-content:start;border-top:1px dashed var(--line);padding-top:18px}
.plan-featured ul{border-color:var(--ink-line)}
.plan li{display:flex;gap:10px;align-items:baseline}
.plan li::before{content:"";flex:none;width:12px;height:7px;background:var(--gold-2);border-radius:7px 0;transform:rotate(-20deg) translateY(-2px)}
.plan-featured li::before{background:var(--gold)}
.plan .btn{width:100%}
@supports (grid-template-rows:subgrid){@media (min-width:981px){.plan{grid-row:span 7;grid-template-rows:subgrid;row-gap:14px}}}
@media (max-width:980px){.plans{grid-template-columns:1fr;max-width:560px;gap:30px}}
.vat-note{margin-top:26px;font-size:.92rem;color:var(--muted)}

/* Inbegrepen */
.included{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.included div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 22px;display:grid;gap:10px;align-content:start;transition:transform .3s var(--ease),border-color .3s,background .3s}
.included div:hover{border-color:var(--gold)}
.section-ink .included div{background:var(--ink-2);border-color:var(--ink-line)}
.section-ink .included div:hover{border-color:#5a5442}
.section-ink .included svg{background:rgba(242,194,0,.14);color:var(--gold)}
.section-ink .included b{color:#fff}
.section-ink .included span{color:var(--on-ink-muted)}
.included svg{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep)}
.included b{font:680 1.08rem/1.25 var(--f-display);color:var(--ink)}
.included span{color:var(--muted);font-size:.95rem}
@media (max-width:980px){.included{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.included{grid-template-columns:1fr}}

/* Stappen: tijdlijn die van licht naar donker verloopt en zich vult als hij in beeld komt */
.steps{--gap:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);list-style:none;padding:0;position:relative;counter-reset:step}
.steps::before,.steps::after{content:"";position:absolute;left:32px;right:calc(25% - var(--gap)*.75 - 32px);top:31px;height:3px;border-radius:3px}
.steps::before{background:var(--line)}
.steps::after{background:linear-gradient(90deg,#f7e08a,var(--gold) 45%,var(--gold-2) 70%,var(--ink));transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease) .2s}
.steps.in::after{transform:none}
.steps li{display:grid;gap:8px;align-content:start;position:relative;padding-top:92px;counter-increment:step}
@media (min-width:901px){
  .werkwijze .steps::before{left:calc(50% - 50vw);right:calc(50% - 50vw);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .werkwijze .steps{--gap:clamp(28px,4vw,64px)}
  .werkwijze .steps p{max-width:30ch}
}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;z-index:1;left:0;top:0;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font:700 1.15rem var(--f-mono);box-shadow:0 0 0 8px var(--sec,var(--cream));transition:transform .5s var(--ease),opacity .5s;transition-delay:calc(var(--i)*.45s + .2s)}
.steps li:nth-child(1)::before{background:#fbecb0;color:var(--gold-deep)}
.steps li:nth-child(2)::before{background:#f7d955;color:var(--ink)}
.steps li:nth-child(3)::before{background:var(--gold);color:var(--ink)}
.steps li:nth-child(4)::before{background:var(--ink);color:var(--gold)}
.js .steps li::before{transform:scale(.6);opacity:0}
.js .steps.in li::before{transform:none;opacity:1}
.step-label{font:600 .74rem var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--gold-deep)}
.steps h3{font-size:1.35rem}
.steps p{color:var(--muted);font-size:.97rem}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before,.steps::after{left:30px;right:auto;top:32px;bottom:60px;width:3px;height:auto}
  .steps::after{background:linear-gradient(180deg,#f7e08a,var(--gold) 45%,var(--gold-2) 70%,var(--ink));transform:scaleY(0);transform-origin:top}
  .steps.in::after{transform:none}
  .steps li{padding:6px 0 0 92px;min-height:64px}
}

/* Tekstlink */
.text-link{font-weight:650;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.text-link:hover{color:var(--gold-deep)}

/* Over Hoogenboom ICT (home): foto met naamkaartje, rechts drie kernpunten */
/* Over Hoogenboom ICT: de foto steekt links uit tot dezelfde rand als het donkere projectenblok
   erboven (max. 1400px breed), zodat hij op brede schermen niet te groot wordt. */
/* Over Hoogenboom ICT: witte band over de volle breedte. De foto vult links de hele hoogte van de band en loopt door
   tot de rand van het scherm, de tekst staat rechts. Zo hoort de foto bij het vlak in plaats van los te zweven. */
.about-section{--edge:max(var(--gutter),(100vw - 1180px)/2 + var(--gutter));background:#fff;padding:0;margin-top:clamp(48px,6vw,88px);overflow-x:clip}
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:stretch}
.about-photo{position:relative;margin:0 0 0 calc(-1 * var(--edge));min-height:clamp(520px,44vw,680px)}
.about-text{align-content:center;padding-block:clamp(56px,7vw,104px)}
/* Lichte warme overlay op foto's van Jonathan, zodat ze aansluiten bij de kleuren van de site. */
.about-photo img,.about-page-photo img,.meet-strip-card img,.aside-card img.face{filter:saturate(.75) sepia(.08)}
.about-photo img,.about-page-photo img{width:100%;border-radius:28px;object-fit:cover;box-shadow:0 30px 60px -36px rgba(28,28,28,.5)}
.about-photo img{position:absolute;inset:0;height:100%;object-position:50% 40%;box-shadow:none;border-radius:0}
.about-text{display:grid;gap:18px;justify-items:start}
.about-points{list-style:none;padding:0;width:100%;border-top:1px solid var(--line);margin-block:4px 6px}
.about-points li{display:grid;grid-template-columns:minmax(150px,.8fr) 1.2fr;gap:6px 20px;padding:16px 0;border-bottom:1px solid var(--line)}
.about-points b{font:680 1rem/1.4 var(--f-display);color:var(--ink)}
.about-points span{color:var(--muted);font-size:.96rem}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:0}.about-photo{margin:0 calc(-1 * var(--gutter));min-height:0}.about-photo img{position:static;aspect-ratio:4/3}.about-text{padding-block:40px 56px}}
@media (max-width:520px){.about-points li{grid-template-columns:1fr}}

/* Projecten: showcase met tabs links en een laptop (soms met telefoon) rechts. Wisselt rustig vanzelf. */
.showcase{display:grid;grid-template-columns:minmax(260px,.75fr) 1.6fr;gap:clamp(32px,5vw,80px);align-items:center}
.sc-list{display:grid;align-content:center}
.sc-tab{appearance:none;background:none;border:0;border-top:1px solid var(--ink-line);font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:20px 0 22px}
.sc-tab:last-of-type{border-bottom:1px solid var(--ink-line)}
.sc-num{grid-row:span 2;font:500 .78rem/1.9 var(--f-mono);color:#6f6a5e;transition:color .3s}
.sc-name{font:700 clamp(1.2rem,1.8vw,1.45rem)/1.2 var(--f-display);letter-spacing:-.02em;color:#8d887b;transition:color .3s}
.sc-type{font:500 .72rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:#6f6a5e}
.sc-tab:hover .sc-name{color:#d9d4c7}
.sc-tab.is-active .sc-name{color:#fff}
.sc-tab.is-active .sc-num{color:var(--gold)}
.sc-bar{position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--gold)}
.sc-tab.is-active .sc-bar{width:100%}
.showcase.is-auto .sc-tab.is-active .sc-bar{width:0;animation:sc-progress var(--sc-time,7s) linear forwards}
@keyframes sc-progress{to{width:100%}}
.sc-more{margin-top:26px;justify-self:start}
.sc-stage{position:relative;padding:4% 9% 6% 0}
.sc-stage::before{content:"";position:absolute;inset:-6% -4% -4% 4%;background:radial-gradient(closest-side,rgba(242,194,0,.16),rgba(242,194,0,0));pointer-events:none}
.sc-devices{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;display:block;width:100%;position:relative;cursor:zoom-in}
.laptop{display:block;position:relative}
.laptop-lid{display:block;padding:2.2% 2.2% 3%;background:#0c0c0c;border-radius:18px 18px 4px 4px;box-shadow:0 0 0 1px #3b3933,0 40px 70px -40px rgba(0,0,0,.9)}
.laptop-screen{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#fff;container-type:size}
.laptop-base{display:block;position:relative;height:clamp(10px,1.4vw,18px);margin:0 -7%;background:linear-gradient(180deg,#56534b,#2c2b27 60%,#1d1c1a);border-radius:2px 2px 14px 14px}
.laptop-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:45%;transform:translateX(-50%);background:#24231f;border-radius:0 0 8px 8px}
.sc-shot{position:absolute;inset:0 0 auto;width:100%;height:auto;opacity:0;transition:opacity .7s ease,filter .6s ease,transform 7s ease-in-out;filter:saturate(.85) sepia(.04)}
.sc-shot.is-active{opacity:1}
.sc-devices:hover .sc-shot,.sc-devices:focus-visible .sc-shot{filter:none}
.sc-devices:hover .laptop-screen .sc-shot.is-active{transform:translateY(calc(-100% + 100cqh))}
.sc-phone{position:absolute;right:-1%;bottom:-2%;width:21%;aspect-ratio:9/19;padding:1.1%;background:#0c0c0c;border-radius:22px;box-shadow:0 0 0 1px #3b3933,0 30px 50px -20px rgba(0,0,0,.85);transition:opacity .5s ease,transform .6s var(--ease)}
.sc-phone::before{content:"";position:absolute;z-index:2;top:3.5%;left:50%;width:30%;height:2.6%;border-radius:9px;background:#0c0c0c;transform:translateX(-50%)}
.sc-phone-screen{display:block;position:relative;height:100%;overflow:hidden;border-radius:17px;background:#fff}
.sc-phone-screen .sc-shot{height:100%;object-fit:cover;object-position:top}
.no-phone .sc-phone{opacity:0;transform:translateY(24px);pointer-events:none}
.sc-devices:hover .sc-phone{transform:translateY(-10px)}
.sc-devices .work-zoom{left:4%;bottom:14%}
.work-zoom{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--ink);font:650 .8rem var(--f-body);padding:8px 13px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease)}
.work-zoom::before{content:"";width:11px;height:11px;border:2px solid var(--ink);border-radius:50%;box-shadow:5px 5px 0 -3px var(--ink)}
.sc-devices:hover .work-zoom,.sc-devices:focus-visible .work-zoom{opacity:1;transform:none}
@media (hover:none){.work-zoom{opacity:1;transform:none}}
.section-ink-top{border-top-left-radius:0;border-top-right-radius:0;margin-inline:0;background:radial-gradient(50% 40% at 78% 58%,rgba(242,194,0,.11),transparent 72%),radial-gradient(40% 40% at 0% 100%,rgba(242,194,0,.06),transparent 70%),var(--ink)}
@media (max-width:900px){
  .showcase{grid-template-columns:1fr;gap:28px}
  .sc-list{order:2;grid-template-columns:1fr 1fr;column-gap:20px}
  .sc-tab:last-of-type{border-bottom:0}
  .sc-tab{padding:16px 0}
  .sc-more{grid-column:1/-1}
  .sc-stage{padding:0 6% 6% 0}
  .sc-phone{border-radius:16px}.sc-phone-screen{border-radius:12px}
}
@media (max-width:520px){.sc-list{grid-template-columns:1fr}.sc-tab{padding:13px 0}}

/* Vergroting van een project: de hele pagina loopt rustig van boven naar beneden */
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:clamp(0px,3vw,40px)}
.lb[hidden]{display:none}
.lb-backdrop{position:absolute;inset:0;background:rgba(20,20,19,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:lb-fade .3s ease}
.lb-panel{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:16px;width:min(1120px,100%);height:min(920px,100%);color:var(--on-ink-muted);animation:lb-in .35s var(--ease)}
@keyframes lb-fade{from{opacity:0}}
@keyframes lb-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
.lb-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-inline:4px}
.lb-title{flex:1;min-width:0}
.lb-title span{font:500 .78rem var(--f-mono);color:var(--gold)}
.lb-title h2{color:#fff;font-size:clamp(1.25rem,2.4vw,1.7rem)}
.lb-tabs{display:inline-flex;padding:4px;gap:4px;border-radius:999px;background:#2b2a27}
.lb-tabs button{appearance:none;border:0;cursor:pointer;font:600 .86rem var(--f-body);color:#d9d4c7;background:transparent;padding:8px 16px;border-radius:999px}
.lb-tabs button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.lb-tabs[hidden]{display:none}
.lb-btn{appearance:none;cursor:pointer;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #4a4740;background:#2b2a27;color:#fff;font:400 1.4rem/1 var(--f-body);transition:background .2s,border-color .2s}
.lb-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.lb-btn svg{width:20px;height:20px}
.lb-stage{min-height:0;display:grid;place-items:center}
.lb-device{position:relative;display:grid;grid-template-rows:1fr;width:100%;max-width:980px;height:100%;min-height:0;overflow:hidden;background:#fff;border-radius:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.lb-device.is-mobile{width:auto;height:100%;max-width:100%;aspect-ratio:9/19;padding:10px;grid-template-rows:1fr;border-radius:40px;background:#0f0f0e;box-shadow:0 0 0 2px #3a3833,0 40px 80px -30px rgba(0,0,0,.7)}
.lb-device.is-mobile .lb-scroll{border-radius:30px}
.lb-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;background:#fff;scrollbar-width:thin}
.lb-scroll img{width:100%;height:auto}
/* Desktopweergave in een laptop: zwarte rand om het scherm (16:10) en een onderkant, net als in de showcase. */
.lb-stage{container-type:size}
.lb-laptop{display:grid;justify-items:center;width:min(100%,1000px,calc((100cqh - 22px) * 1.5))}
.lb-laptop:not(.is-mobile) .lb-device{max-width:none;height:auto;padding:1.6% 1.6% 2.2%;background:#0c0c0c;border-radius:18px 18px 4px 4px;box-shadow:0 0 0 1px #3b3933,0 40px 80px -30px rgba(0,0,0,.8)}
.lb-laptop:not(.is-mobile) .lb-scroll{aspect-ratio:16/10;border-radius:4px}
.lb-base{display:block;position:relative;width:114%;height:clamp(10px,1.6cqw,18px);background:linear-gradient(180deg,#56534b,#2c2b27 60%,#1d1c1a);border-radius:2px 2px 14px 14px}
.lb-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:45%;transform:translateX(-50%);background:#24231f;border-radius:0 0 8px 8px}
.lb-laptop.is-mobile{display:contents}
.lb-laptop.is-mobile .lb-base{display:none}
.lb-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:4px}
.lb-hint{font:500 .8rem var(--f-mono);color:var(--on-ink-muted);text-align:center}
.lb-nav{display:flex;gap:10px}
body.lb-open{overflow:hidden}
@media (max-width:640px){
  .lb{padding:0}
  .lb-panel{height:100%;padding:12px 12px 14px;gap:12px;background:#141413}
  .lb-device{border-radius:10px}
  .lb-hint{display:none}
}

/* Ook ICT-hulp */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.services{display:grid;gap:14px;list-style:none;padding:0}
.services li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:20px;border-radius:18px;background:var(--paper);border:1px solid var(--line);transition:transform .25s var(--ease),border-color .25s}
.services li:hover{border-color:var(--gold)}
.services svg{width:52px;height:52px;padding:13px;border-radius:14px;background:var(--gold);color:var(--ink)}
.services b{display:block;font-family:var(--f-display);font-weight:680;color:var(--ink);margin-bottom:2px}
.services span{color:var(--muted)}

/* Vergelijking */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:#fff}
table.compare{border-collapse:collapse;width:100%;min-width:640px;font-size:.97rem}
.compare th,.compare td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font:700 1rem var(--f-display);color:var(--ink);background:var(--cream)}
.compare thead th.hl{background:var(--gold)}
.compare tbody th{font-weight:550;color:var(--text)}
.compare td{color:var(--muted)}
.compare .yes{color:var(--gold-2);font-weight:800}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
/* Start-kolom standaard lichtgeel; bij hover krijgt de kolom onder de muis een lichtgeel accent */
.compare td{transition:background-color .2s ease}
.compare td:nth-child(2){background:rgba(242,194,0,.13)}
.compare:has(td:nth-child(2):hover) td:nth-child(2){background:rgba(242,194,0,.22)}
.compare:has(td:nth-child(3):hover) td:nth-child(3),.compare:has(thead th:nth-child(3):hover) td:nth-child(3),
.compare:has(td:nth-child(4):hover) td:nth-child(4),.compare:has(thead th:nth-child(4):hover) td:nth-child(4),
.compare:has(td:nth-child(5):hover) td:nth-child(5),.compare:has(thead th:nth-child(5):hover) td:nth-child(5){background:rgba(242,194,0,.1)}
.compare:has(td:nth-child(3):hover) thead th:nth-child(3),.compare:has(thead th:nth-child(3):hover) thead th:nth-child(3),
.compare:has(td:nth-child(4):hover) thead th:nth-child(4),.compare:has(thead th:nth-child(4):hover) thead th:nth-child(4),
.compare:has(td:nth-child(5):hover) thead th:nth-child(5),.compare:has(thead th:nth-child(5):hover) thead th:nth-child(5){background:#f8ebb4}
.compare thead th{transition:background-color .2s ease}

/* FAQ */
.faq{display:grid;gap:12px;max-width:840px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:2px 22px;transition:border-color .2s}
.faq details[open]{border-color:var(--gold)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font:680 1.08rem/1.35 var(--f-display);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold-soft);font:500 1.2rem/1 var(--f-mono);color:var(--gold-deep);transition:transform .25s var(--ease),background .25s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--gold);color:var(--ink)}
.faq details p{padding:0 0 20px;color:var(--muted);max-width:68ch}

/* Pagina-kop (subpagina's) */
.page-head{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px) clamp(44px,6vw,80px);background:var(--ink);color:var(--on-ink-muted)}
.page-head h1{color:#fff;font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:1;letter-spacing:-.05em;max-width:18ch}
.page-head .lead{color:#c4beb0}
.page-head .eyebrow{color:var(--gold)}
.page-head .lead{margin-top:26px}
.page-head h1{margin-top:16px}

/* Lopende tekst */
.prose{max-width:720px;display:grid;gap:18px}
.prose h2{font-size:1.5rem;margin-top:22px}
.prose ul{padding-left:20px;display:grid;gap:6px}

/* Over-pagina: portret links, rustige tekst rechts, afgesloten met een kennismaak-kaart */
.about-page{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,96px);align-items:start}
.about-page-photo{position:sticky;top:110px;margin:0}
.about-page-photo img{aspect-ratio:4/5;border-radius:16px;box-shadow:none}
.about-page-text{display:grid;gap:26px;max-width:620px;padding-top:4px}
.about-page-text .intro{font:600 clamp(1.25rem,2vw,1.5rem)/1.35 var(--f-display);color:var(--ink);letter-spacing:-.015em;text-wrap:balance}
.about-page-text .prose{gap:16px;color:var(--text)}
.about-page-cta{display:grid;gap:18px;justify-items:start;padding-top:26px;border-top:1px solid var(--line)}
.about-page-cta p{color:var(--muted)}
.about-page-cta b{color:var(--ink);font-weight:650}
@media (max-width:900px){.about-page{grid-template-columns:1fr}.about-page-photo{position:relative;top:0;max-width:440px}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
form.contact{display:grid;gap:18px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(20px,4vw,36px)}
.field{display:grid;gap:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
label{font-weight:600;color:var(--ink);font-size:.95rem}
label .opt{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;background:#fff;border-color:var(--gold-2);box-shadow:0 0 0 4px var(--gold-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{border-radius:14px;padding:14px 16px;font-weight:550}
.notice-ok{background:#e9f6ee;color:#185c35;border:1px solid #bfe3cc}
.notice-err{background:#fdecec;color:#8a1c1c;border:1px solid #f3c2c2}
.aside-card{border-radius:24px;padding:28px;display:grid;gap:16px;background:var(--ink);color:var(--on-ink)}
.aside-card h2{color:#fff}
.aside-card img.face{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--gold)}
.aside-card dl{margin:0;display:grid;gap:12px}
.aside-card dt{font:500 .75rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--on-ink-muted)}
.aside-card dd{margin:0;font-weight:600;color:#fff}
.aside-card a{color:var(--gold)}

/* Footer */
.site-footer{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink-muted);padding-block:clamp(40px,5vw,56px) 26px;font-size:.93rem;margin-top:clamp(24px,4vw,48px)}
/* Kennismaken: ongeveer 70% op de pagina, 30% over de bovenrand van de footer. */
/* Eindigt de pagina met een donker blok (zoals /projecten/), dan eerst crème ruimte, zodat de kaart niet tussen twee donkere vlakken klemt. */
main>.section-ink:last-child{margin-bottom:clamp(56px,7vw,96px)}
.meet-strip{position:relative;z-index:2;margin-top:0;margin-bottom:-34px}
.meet-strip+.site-footer{margin-top:0;padding-top:calc(34px + clamp(36px,4vw,48px))}
.meet-strip-card{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 22px 18px 18px;box-shadow:0 30px 60px -30px rgba(28,28,28,.45)}
.meet-strip-card img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.meet-strip-card h2{font-size:clamp(1.3rem,2.2vw,1.65rem)}
.meet-strip-card p{color:var(--muted);margin-top:2px}
@media (max-width:700px){.meet-strip-card{grid-template-columns:auto 1fr}.meet-strip-card .btn{grid-column:1/-1}.meet-strip{margin-bottom:-56px}.meet-strip+.site-footer{padding-top:calc(56px + 36px)}}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.footer-logo img{width:52px}
.footer-logo .wordmark{font-size:1.6rem}
.site-footer h4{font:600 .75rem var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:14px}
.site-footer ul{list-style:none;padding:0;display:grid;gap:8px}
.site-footer a{color:var(--on-ink-muted);text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.site-footer .btn-primary,.site-footer .btn-primary:hover{color:var(--ink)}
.footer-tag{margin-top:12px;max-width:30ch}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:36px;padding-top:20px;border-top:1px solid var(--ink-line);font:400 .8rem var(--f-mono)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* Inkomen bij scrollen: alleen als JavaScript draait; zonder JS is alles direct zichtbaar */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--delay,0s)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}
/* Op de telefoon is de header bovenaan doorzichtig en loopt hij over in de donkere bovenkant van de pagina. */
@media (max-width:860px){
  .site-header:not(.scrolled){background:transparent}
  .site-header{margin-bottom:-78px}
  .hero{padding-top:78px}
  .page-head{padding-top:calc(78px + clamp(48px,7vw,96px))}
}


/* Projectenpagina: na de projecten een doorverwijzing naar de pakketten, daarna de werkwijze. */
.next-plans{display:grid;gap:14px}
.next-plans .alt-plan{grid-template-columns:auto 1fr auto;align-items:center}
.next-plan-main{background:var(--ink);border-color:var(--ink);color:var(--on-ink-muted)}
.next-plan-main:hover{border-color:var(--gold);color:var(--on-ink-muted)}
.next-plan-main h3,.next-plan-main .alt-price b{color:#fff}
.next-plan-main p,.next-plan-main .alt-price span{color:var(--on-ink-muted)}
.next-site+.werkwijze{margin-top:0}
@media (max-width:520px){.next-plans .alt-plan{grid-template-columns:auto 1fr}}
.terms h3{font-size:1.1rem;margin-top:8px}
.terms h2{scroll-margin-top:90px}
.terms p strong{font-weight:600;margin-right:4px}
.terms-toc{background:#fff;border:1px solid rgba(28,28,28,.08);border-radius:14px;padding:20px 24px}
.terms-toc ol{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.terms-toc a{color:inherit}