/* Soverra site layout. Tokens and components load first; this file loads last
   so site rules win at equal specificity. Never hardcode hex here. */

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--ink);
  padding:10px 16px;border:1px solid var(--line-strong);border-radius:0 0 8px 0}
.skip:focus{left:0}

/* Section descriptions are secondary text. components.css only styles .note
   inside .card, so the bare .note uses across the page fell through to the
   default 17px ink paragraph. Give them the intended slate treatment; .card .note
   keeps its own (higher-specificity) rule, margins included. */
.note{color:var(--slate);font-size:14px;line-height:1.55}

/* Visually-hidden helper, for connector words a sighted reader gets from layout. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- nav ---- */
.site-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 24px;border-bottom:1px solid var(--line);
  /* explicit background: never rely on .mode-dark{background} winning by source order */
  background:var(--surface);color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.site-nav nav{display:flex;align-items:center;gap:8px}
/* Uppercase is presentational only: the accessible name stays sentence case, so
   screen readers do not spell the items out letter by letter. */
.site-nav nav a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);text-decoration:none;padding:10px 12px;border-radius:6px;
  min-height:24px;display:inline-flex;align-items:center}
.site-nav nav a:hover{color:var(--ink)}
.site-nav nav a[aria-current="page"]{color:var(--ink);font-weight:700}
.site-nav .btn{font-family:var(--sans);font-size:15px;letter-spacing:normal;text-transform:none;
  color:var(--sov-btn-ink)}
.site-nav.mode-dark .btn-primary{background:var(--voltage);color:var(--signal-ink)}

/* ---- footer ---- */
.site-footer{padding:56px 24px 28px}
.footer-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:40px}
.site-footer .tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--signal);margin:12px 0 0}
.site-footer .fine{color:var(--muted);font-size:13px;margin:10px 0 0}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.col-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);margin:0 0 12px}
.site-footer nav{display:flex;flex-direction:column;gap:9px}
.site-footer nav a{color:var(--slate);text-decoration:none;font-size:14px}
.site-footer nav a:hover{color:var(--ink)}
.footer-base{max-width:1080px;margin:34px auto 0;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
@media(max-width:820px){.footer-inner{grid-template-columns:1fr}}
@media(max-width:560px){.footer-cols{grid-template-columns:1fr}}

/* anchors must not land under the sticky nav (WCAG 2.4.11) */
[id]{scroll-margin-top:88px}

@media(max-width:820px){
  .site-nav{flex-wrap:wrap;padding:12px 16px}
  .site-nav nav{width:100%;order:3;gap:2px;flex-wrap:wrap}
  .site-nav nav .btn{margin-left:auto}
}

/* ---- bands ----
   Colour rule: default light = Pijler 02 CIO. .dark = Pijler 01 Beheer.
   .deep = the close band and the footer only. There is no green band. */
.band{padding:104px 24px;position:relative}
.band.dark{background:var(--bg);color:var(--ink)}
.band.deep{background:var(--bg);color:var(--ink)}
.band-inner{max-width:1080px;margin:0 auto;position:relative;z-index:1}
.band-h{font-family:var(--display);font-size:clamp(30px,4.6vw,54px);font-weight:800;
  letter-spacing:var(--dls);line-height:1.02;margin:10px 0 0}
.sub-h{font-family:var(--display);font-size:clamp(24px,3vw,36px);font-weight:800;
  letter-spacing:var(--dls);line-height:1.05;margin:10px 0 0}
.lead{color:var(--slate);font-size:clamp(16px,1.6vw,19px);max-width:64ch;margin:14px 0 0}
.foot-note{color:var(--muted);font-size:14px;margin:22px 0 0;max-width:72ch}
.closer{text-align:center;max-width:70ch;margin-left:auto;margin-right:auto;color:var(--slate)}
.center{text-align:center}

@media(max-width:600px){.band{padding:64px 16px}}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}

/* Neutral band: belongs to neither pillar. Gives the long page the rhythm the
   briefing asks for without making background colour meaningless. */
.band.grey{background:var(--surface2)}

/* ---- eyebrow label (mono kicker above every section heading) ---- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);margin:0}
.eyebrow.dot{display:inline-flex;align-items:center;gap:9px}
.eyebrow.dot::before{content:"";width:8px;height:8px;background:var(--signal);flex:none}
/* legacy alias, still used by scan.html */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}

.sec-head{margin-bottom:44px}
.sec-head.center{text-align:center;max-width:44ch;margin-left:auto;margin-right:auto}
.sec-head.center .eyebrow.dot{justify-content:center}
.sec-head.split{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-top:72px}
.sec-head.split:first-child{margin-top:0}

/* ---- the glow: a soft voltage bloom behind dark bands (decorative) ---- */
.glow{position:absolute;left:50%;bottom:-40%;width:min(860px,120%);height:80%;
  transform:translateX(-50%);pointer-events:none;z-index:0;border-radius:50%;
  background:radial-gradient(circle,var(--signal-soft),transparent 66%)}
@media (prefers-reduced-motion:reduce){.glow{display:none}}

/* ---- reveals ----
   Gated on html.js, which the inline head script sets. With JS off the gate
   never applies, so nothing is ever hidden. Opacity (not display/visibility)
   keeps screen readers, Ctrl+F and anchor links working. */
html.js .reveal:not(.in){opacity:0;transform:translateY(10px)}
.reveal{transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0)*60ms)}

@media (prefers-reduced-motion:reduce){
  html.js .reveal:not(.in){opacity:1;transform:none}
  .reveal{transition:none;transition-delay:0s}
}
@media print{
  html.js .reveal:not(.in){opacity:1;transform:none}
}

/* ---- hero ---- */
.hero{padding-top:96px;padding-bottom:0;overflow:hidden}
.hero-h{font-family:var(--display);font-size:clamp(38px,8vw,112px);font-weight:800;
  letter-spacing:-.05em;line-height:.92;margin:24px 0 0}
.hero-h.sm{font-size:clamp(32px,5.4vw,64px);line-height:1}
/* the outlined word: a stroke, so it reads as a shape rather than as low-contrast
   text. Paired with a solid word so meaning never rests on the outline alone. */
.hollow{-webkit-text-stroke:2px var(--signal);color:transparent}
.lit{color:var(--signal)}
/* on light bands --signal is the deepened voltage, which stays legible as text */
.lit-ink{color:var(--signal)}
.hero-foot{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end;justify-content:space-between;
  margin-top:40px;padding-bottom:64px}
.hero-foot .lead{margin:0;max-width:52ch}
.hero-foot .cta-row{margin:0}
/* overflow:hidden clips the glow, which is deliberately wider than the viewport
   and would otherwise create horizontal scroll on narrow screens */
.page-head{padding-bottom:88px;overflow:hidden}

/* ---- hero ticker ----
   Smaller than the display type on purpose: it is a list of what we cover,
   not a second headline. Decorative and aria-hidden, so the duplicated set
   is never announced twice. */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0}
.ticker-track{display:flex;width:max-content;animation:sv-marquee 38s linear infinite}
.ticker-set{display:flex;align-items:center;font-family:var(--mono);font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.ticker-set span{padding:0 26px}
.ticker-set i{color:var(--signal);font-style:normal}
@keyframes sv-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---- over ons ---- */
.combo-lead{max-width:52ch;margin:0 auto 48px;text-align:center}
.combo-lead .eyebrow.dot{justify-content:center}
.combo-lead .lead{margin-left:auto;margin-right:auto}
.story{max-width:70ch;margin:0 auto;color:var(--slate)}
.story p{margin:0 0 1rem}

.founders-head{margin:72px 0 0;text-align:center}
.founders-head .eyebrow.dot{justify-content:center}
.founders{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:32px 0 0}
.founder{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px;
  text-align:center;box-shadow:var(--card-shadow)}
/* Portrait slot. Holds the initials until real photography lands; sized to the
   final crop so swapping in an <img> does not reflow the card. */
.portrait{display:inline-grid;place-items:center;width:112px;height:112px;border-radius:16px;
  background:var(--sov);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.ini{font-family:var(--word);font-weight:700;font-size:32px;color:var(--sov-btn-ink)}
.f-n{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.02em;margin:16px 0 4px}
.f-r{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);margin:0 0 12px}
.founder .note{max-width:38ch;margin:0 auto}
.todo{font-family:var(--mono);font-size:11px;color:var(--muted);display:inline-block;
  border:1px dashed var(--line-strong);border-radius:6px;padding:3px 8px;margin-top:12px}

/* ---- SLA stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:64px 0 0;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:40px 36px;
  box-shadow:var(--card-shadow)}
.s-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);margin:0 0 8px}
.s-v{font-family:var(--display);font-size:clamp(32px,4vw,48px);font-weight:800;letter-spacing:-.03em;
  line-height:1;margin:0}
.s-n{color:var(--slate);font-size:13px;margin:8px 0 0}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stats{grid-template-columns:1fr}}

/* ---- the two pillars: one dark card, one light, sharing an edge ---- */
.pillars{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;
  box-shadow:var(--card-shadow);border:1px solid var(--line)}
.pillar{padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  background:var(--surface);min-height:440px}
.pillar.mode-dark{background:var(--bg)}
.p-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.p-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.p-h{font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.03em;
  line-height:1.02;margin:0 0 12px}
.p-body .note{max-width:40ch}
.ticks{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ticks li{position:relative;padding-left:22px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.58em;width:12px;height:1px;background:var(--signal-line)}
@media(max-width:820px){.pillars{grid-template-columns:1fr}.pillar{min-height:0}}

/* ---- services ---- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;
  box-shadow:var(--card-shadow)}
.svc-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--signal);margin:0 0 10px}
.svc-h{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
@media(max-width:900px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svcs{grid-template-columns:1fr}}

/* ---- aanpak: intro pinned beside the steps ---- */
.aanpak-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.aanpak-intro{position:sticky;top:110px}
.aanpak-intro .lead{max-width:38ch}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.step{border:1px solid var(--line);border-radius:16px;padding:30px 32px;background:var(--surface)}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);font-weight:700}
.step-h{font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-.02em;margin:10px 0 8px}
@media(max-width:900px){
  .aanpak-grid{grid-template-columns:1fr;gap:36px}
  .aanpak-intro{position:static}
}

/* ---- nieuws + cases lists ----
   The empty state is deliberate: the sections ship before the content does, and
   an honest "nothing here yet" beats three fabricated placeholder articles. */
.posts{display:grid;gap:20px}
.empty{border:1px dashed var(--line-strong);border-radius:16px;padding:36px;text-align:center;
  color:var(--slate);font-size:15px;margin:0}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
#contactform{margin:0}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{margin:0;display:grid;gap:6px}
.f-wide{grid-column:1/-1}
.f label{font-size:14px;font-weight:600}
.f .opt{font-weight:400;color:var(--muted);font-size:12px}
.f input,.f textarea{font-family:var(--sans);font-size:15px;padding:11px 13px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);width:100%}
.f [aria-invalid="true"]{border-color:var(--danger);background:var(--danger-soft)}
.err{color:var(--danger);font-size:13px;min-height:1em}
/* display:none, not off-screen: a screen reader must not reach the honeypot and
   have its answer silently discarded. */
.hp{position:absolute;display:none}
.pane{margin:0}
.pane-h{font-family:var(--display);font-size:20px;font-weight:700;margin:0 0 6px}
.mailaddr{user-select:all}
.fine{color:var(--muted);font-size:13px}
@media(max-width:820px){.founders,.contact-grid{grid-template-columns:1fr}}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}}

/* ---- scan page ---- */
.price-line{margin:22px 0 0;font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.02em}
.price-line span{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted);letter-spacing:.06em;margin-left:10px}
.doms{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dom{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:6px}
.dom .n{font-family:var(--mono);font-size:11px;color:var(--signal);font-weight:700}
.dom .t{font-family:var(--display);font-size:17px;font-weight:700}
.weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 0}
.wk{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px}
.wk-h{font-family:var(--display);font-size:19px;font-weight:700;margin:6px 0 8px}
.sols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0 0}
.sol{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px}
.sol-h{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
@media(max-width:900px){.sols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.doms,.weeks{grid-template-columns:1fr}}
@media(max-width:600px){.sols{grid-template-columns:1fr}}