/* ==========================================================================
   Bolwerk Technology Consultancy
   Black, white, one red sphere. No gradients, no shadows, no rounded corners.
   ========================================================================== */

:root{
  --black:  #000000;
  --white:  #FFFFFF;
  --red:    #E10600;   /* the sphere, and nothing else */

  --text:   #FFFFFF;
  --text-2: #A8A8A8;   /* Steel 400 */
  --text-3: #808080;   /* Slate 500, bumped from #737373 for 4.5:1 contrast on black (WCAG AA) */

  --line:   rgba(255,255,255,.15);
  --line-2: rgba(255,255,255,.30);

  --pad:     clamp(20px, 5vw, 56px);
  --maxw:    1120px;
  --section: clamp(64px, 8.5vw, 118px);
  --gutter:  clamp(28px, 4.5vw, 76px);

  /* ---- Type scale (stage 3). Sans steps ~1.2; exactly two mono label sizes. */
  --fs-label:    .6875rem;                          /* 11px - every mono label */
  --fs-label-sm: .625rem;                           /* 10px - legal, hero foot */
  --fs-xs:       .875rem;                           /* 14px - notes, sub-lines */
  --fs-sm:       .9375rem;                          /* 15px - dense lists      */
  --fs-base:     1rem;
  --fs-lead:     clamp(1.0625rem, 1.2vw, 1.1875rem);
  --fs-h3:       clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-h2:       clamp(1.75rem, 3.2vw, 2.4rem);
  --fs-display:  clamp(2.25rem, 5vw, 3.4rem);

  --lh-tight: 1.08;   /* display */
  --lh-head:  1.15;   /* h2 / row headings */
  --lh-h3:    1.3;
  --lh-body:  1.65;
  --lh-label: 1.4;    /* single-line uppercase mono */

  --ls-label: .16em;  /* uppercase mono tracking - one value everywhere */

  --measure:    60ch;  /* ~68 rendered characters */
  --measure-lg: 64ch;
  --measure-sm: 46ch;

  /* ---- Vertical rhythm: multiples of 8 (4 only for hairline sub-lines) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 56px;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --strip: 46px;   /* bottom instrument strip height (menu v3) */
}

/* Phone type floor: nothing body-like drops below 16px, notes below 15px. */
@media (max-width:600px){
  :root{
    --fs-xs: .9375rem;   /* 15px */
    --fs-sm: 1rem;       /* 16px */
    --lh-h3: 1.25;
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:var(--strip);   /* clear the bottom instrument strip (menu v3) */
}
img,svg,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ margin:0; font-weight:300; letter-spacing:-.02em; line-height:var(--lh-head); text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }
::selection{ background:var(--white); color:var(--black); }
:focus-visible{ outline:1px solid var(--white); outline-offset:4px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{
  position:absolute; left:var(--pad); top:-100px; z-index:100;
  background:var(--black); color:var(--white);
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--white);
  transition:top .15s linear;
}
.skip-link:focus{ top:12px; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--section); }
.section--sm{ padding-block:clamp(56px,7vw,96px); }
.line{ border-top:1px solid var(--line); }
main > section + section{ border-top:1px solid var(--line); }

/* Two-column editorial grid: mono label left, content right */
.grid{ display:grid; gap:var(--sp-5) var(--gutter); }
@media (min-width:860px){
  .grid{ grid-template-columns:minmax(140px,190px) minmax(0,1fr); }
}

/* ---------- Type ---------- */
.label{
  font-family:var(--mono);
  font-size:var(--fs-label);
  font-weight:400;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--text-3);
}
.display{ font-size:var(--fs-display); line-height:var(--lh-tight); }
.h2{ font-size:var(--fs-h2); }
.h3{ font-size:var(--fs-h3); font-weight:400; line-height:var(--lh-h3); letter-spacing:-.01em; }
.lead{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--text-2); }
.body{ color:var(--text-2); }
.measure{ max-width:var(--measure); }
.measure-sm{ max-width:var(--measure-sm); }

.link{
  display:inline-block;
  border-bottom:1px solid var(--line-2);
  padding-bottom:2px;
  transition:border-color .2s linear, color .2s linear;
}
.link:hover{ border-bottom-color:var(--white); }
.link--q{ color:var(--text-2); }
.link--q:hover{ color:var(--white); }

/* ---------- Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:var(--black);
  border-bottom:1px solid transparent;
  transition:border-color .2s linear;
}
.hdr.is-stuck{ border-bottom-color:var(--line); }
.hdr--over{ background:transparent; }
.hdr--over.is-stuck{ background:var(--black); }
.hdr__in{ display:flex; align-items:center; justify-content:flex-start; gap:24px; height:70px; }
.hdr__logo{ height:22px; width:auto; }

/* .nav / .burger / .mobile-nav removed — superseded by the bottom instrument
   strip (menu v3): see .strip / .strip__nav / .strip__clock at end of file. */

/* ---------- Hero ---------- */
/* Desktop: the section is tall and .hero__pin sticks for the length of it, so
   scrolling drives the sphere (assets/js/hero.js). --explode and --labels are
   set by the script, 0..1. Mobile and reduced motion: .hero--static, one screen,
   pre-rendered video or poster, categories as a plain list. */
.hero{
  --r: clamp(99px, 15.4vw, 165px);      /* sphere radius on screen (also in hero.js: idleRadiusPx) */
  --explode: 0; --labels: 0;
  position:relative;
}
.hero--live{ height:200vh; }
.hero__pin{
  position:sticky; top:0; height:calc(100vh - var(--strip)); height:calc(100svh - var(--strip)); overflow:hidden;
  padding:96px var(--pad) 26px;
}
.sphere{ position:absolute; inset:0; width:100%; height:100%; display:none; }
.hero--live .sphere{ display:block; }
.hero.is-grabbable .sphere{ cursor:grab; }
.hero.is-dragging .sphere{ cursor:grabbing; }
.hero.is-dragging .hero__tip{ opacity:0; }

/* Also `hidden` in the markup — see the outro note below. */
.hero__video, .hero__poster{ display:none; }

.hero__leads{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero__leads polyline{ stroke:var(--white); stroke-width:1; opacity:.55; }

.hero__word{
  position:absolute; left:50%; top:calc(50% + var(--r) + clamp(48px,8vh,86px));
  transform:translate(-50%,0);
  width:clamp(196px,27vw,300px); height:auto;
  will-change:opacity, transform;
}

/* hover reveal: layer name beside the sphere */
.hero__tip{
  position:absolute; top:50%; left:calc(50% + var(--r) + clamp(28px,4vw,56px));
  transform:translateY(-50%) translateX(6px);
  max-width:250px; opacity:0; transition:opacity .22s linear, transform .22s ease-out;
  pointer-events:none;
}
.hero__tip.is-on{ opacity:1; transform:translateY(-50%) translateX(0); }
.hero__tip .h3{ margin-top:var(--sp-3); }
.hero__tip p:last-child{ margin-top:var(--sp-2); color:var(--text-2); font-size:var(--fs-sm); }

/* service categories, labelled from the exploded parts */
.hero__cats{
  position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(28px,6vh,60px);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gutter);
  opacity:var(--labels); transform:translateY(calc((1 - var(--labels)) * 14px));
  pointer-events:none;
}
.hero.is-labelled .hero__cats{ pointer-events:auto; }
.cat{ display:block; border-top:1px solid var(--line); padding-top:var(--sp-4); }
.cat .h3{ margin-top:var(--sp-3); transition:color .2s linear; }
.cat p:last-child{ margin-top:var(--sp-2); color:var(--text-2); font-size:var(--fs-sm); max-width:32ch; }
.cat:hover .h3{ color:var(--white); }
.cat:hover{ border-top-color:var(--line-2); }

.hero__foot{
  position:absolute; left:var(--pad); right:var(--pad); bottom:26px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
}
.hero__foot .label{ font-size:var(--fs-label-sm); }
.hero__down{ display:flex; align-items:center; gap:10px; color:var(--text-3); }
.hero__down span{ font-family:var(--mono); font-size:var(--fs-label-sm); line-height:var(--lh-label); letter-spacing:var(--ls-label); text-transform:uppercase; }

/* ---- static hero: mobile, coarse pointers, reduced motion, no WebGL ---- */
.hero--static .hero__pin{
  position:static; height:auto; min-height:100vh; min-height:100svh; overflow:visible;
  display:flex; flex-direction:column; align-items:center; gap:clamp(26px,5vh,44px);
  padding-top:110px; padding-bottom:40px;
}
.hero--static .hero__video{ display:block; width:clamp(220px,64vw,360px); height:auto; }
.hero--static .hero__poster{ display:none; width:clamp(220px,64vw,360px); height:auto; }
@media (prefers-reduced-motion:reduce){
  .hero--static .hero__video{ display:none; }
  .hero--static .hero__poster{ display:block; }
}
.hero--static .hero__word{ position:static; transform:none; }
.hero--static .hero__tip, .hero--static .hero__leads{ display:none; }
.hero--static .hero__cats{
  position:static; opacity:1; transform:none; pointer-events:auto;
  grid-template-columns:1fr; gap:0; width:100%; max-width:520px; margin-top:8px;
}
.hero--static .cat{ padding-block:18px; }
.hero--static .cat:last-child{ border-bottom:1px solid var(--line); }
.hero--static .hero__foot{ position:static; width:100%; margin-top:auto; }
@media (max-width:600px){ .hero__foot > .label{ display:none; } .hero__foot{ justify-content:center; } }

/* ---------- Outro: the closing sphere ---------- */
/* Last block on every page, below the footer and above the strip. One viewport
   tall minus the strip — the same maths as .hero__pin — with the sphere at the
   hero's idle radius, turning and nothing else. Driven by the same renderer
   (assets/js/hero.js, boot() with interactive:false against [data-outro]).
   .outro--static gets the same pre-rendered loop / poster as the hero. */
.outro{
  --r: clamp(99px, 15.4vw, 165px);      /* same radius as the hero (hero.js: idleRadiusPx) */
  position:relative;
  border-top:1px solid var(--line);
}
.outro__pin{
  position:relative; overflow:hidden;
  height:calc(100vh - var(--strip)); height:calc(100svh - var(--strip));
}
.outro--live .sphere{ display:block; }

/* The two fallbacks also carry `hidden` in the markup, so a stale or missing
   stylesheet can never drop the 800x800 exploded poster into the page; the
   .outro--static rules below out-specify the UA [hidden] rule. (Fix 2026-09-04.) */
.outro__video, .outro__poster{ display:none; }
.outro--static .outro__pin{ display:grid; place-items:center; }
.outro--static .outro__video{ display:block; width:clamp(220px,64vw,360px); height:auto; }
.outro--static .outro__poster{ display:none; width:clamp(220px,64vw,360px); height:auto; }
@media (prefers-reduced-motion:reduce){
  .outro--static .outro__video{ display:none; }
  .outro--static .outro__poster{ display:block; }
}

/* Page hero for About / Contact */
.phero{ padding-block:clamp(140px,18vh,200px) clamp(46px,6vw,80px); }
.phero .display{ margin-top:var(--sp-5); }
.phero .lead{ margin-top:var(--sp-6); }

/* ---------- Statement ---------- */
.statement .display{ max-width:20ch; }
.statement .lead{ margin-top:var(--sp-6); }

/* ---------- Rows (capabilities, steps, principles) ---------- */
.rows{ border-top:1px solid var(--line); }
.row{ border-bottom:1px solid var(--line); padding-block:clamp(32px,3.6vw,48px); }
.row__h{ margin-bottom:var(--sp-4); }
.row__p{ color:var(--text-2); max-width:var(--measure); }
.row__list{ margin-top:var(--sp-5); display:grid; gap:0; max-width:58ch; }
.row__list li{
  padding-block:var(--sp-3); border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--text-2);
}
.row__list li:first-child{ border-top:0; padding-top:0; }

/* ---------- AI thread: three short columns ---------- */
.thread{ display:grid; gap:0; border-top:1px solid var(--line); }
.thread__item{ padding-block:var(--sp-5); border-bottom:1px solid var(--line); display:grid; gap:var(--sp-2) var(--sp-6); }
.thread__item p:last-child{ color:var(--text-2); max-width:var(--measure); }
@media (min-width:640px){ .thread__item{ grid-template-columns:200px minmax(0,1fr); align-items:baseline; } }

/* ---------- Definition rows ---------- */
.facts{ border-top:1px solid var(--line); }
.facts > div{ padding-block:var(--sp-5); border-bottom:1px solid var(--line); display:grid; gap:var(--sp-2) var(--sp-6); }
@media (min-width:640px){ .facts > div{ grid-template-columns:200px minmax(0,1fr); align-items:baseline; } }
.facts dt{ font-family:var(--mono); font-size:var(--fs-label); line-height:var(--lh-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-3); }
.facts dd{ color:var(--text); }
.facts .sub{ display:block; color:var(--text-3); font-size:var(--fs-xs); margin-top:var(--sp-1); }

/* ---------- Contact list ---------- */
.clist{ border-top:1px solid var(--line); }
.clist a,.clist div.ci{
  display:grid; gap:var(--sp-2) var(--sp-6); padding-block:var(--sp-6); border-bottom:1px solid var(--line);
  transition:background .15s linear;
}
@media (min-width:640px){ .clist a,.clist div.ci{ grid-template-columns:200px minmax(0,1fr); align-items:baseline; } }
.clist a:hover{ background:rgba(255,255,255,.04); }
.ci__k{ font-family:var(--mono); font-size:var(--fs-label); line-height:var(--lh-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-3); }
.ci__v{ font-size:clamp(1.05rem,2vw,1.35rem); font-weight:300; line-height:var(--lh-h3); letter-spacing:-.02em; word-break:break-word; }
.ci__n{ font-size:var(--fs-xs); color:var(--text-3); margin-top:var(--sp-2); }

/* ---------- Portrait ---------- */
.portrait{
  border:1px solid var(--line); aspect-ratio:4/5;
  display:grid; place-items:center; max-width:420px;
}
@supports not (aspect-ratio:1/1){
  .portrait{ position:relative; height:0; padding-bottom:125%; display:block; }
  .portrait picture{ position:absolute; inset:0; }
}
.portrait picture{ display:block; width:100%; height:100%; }
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.portrait .label{ font-size:var(--fs-label-sm); }

/* ---------- Prose ---------- */
.prose{ color:var(--text-2); max-width:var(--measure); }
.prose p + p{ margin-top:1.2em; }
.prose strong{ color:var(--text); font-weight:400; }
.prose em{ font-style:italic; }

/* Placeholder marker — delete this rule once the copy is final */
.todo{ color:var(--white); border-bottom:1px dashed var(--line-2); cursor:help; }

/* ---------- Closing ---------- */
.close .h2{ max-width:22ch; }
.close .lead{ margin-top:var(--sp-5); }
.close .link{ margin-top:var(--sp-6); font-size:1.05rem; }

/* ---------- Footer ---------- */
.ftr{ border-top:1px solid var(--line); padding-bottom:8px; }
.ftr__in{ padding-block:var(--sp-7); display:grid; gap:var(--sp-6); }
.ftr__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-5); align-items:center; }
.ftr__logo{ height:20px; width:auto; }
.ftr__links{ display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.ftr__links a{ font-family:var(--mono); font-size:var(--fs-label); line-height:var(--lh-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-3); }
.ftr__links a:hover{ color:var(--white); }
.ftr__legal{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6);
  font-family:var(--mono); font-size:var(--fs-label-sm); line-height:var(--lh-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-3);
}

/* ==========================================================================
   Bottom instrument strip — navigation, menu concept v3.
   Header keeps the logo only (see .hdr__in above); this bar carries the
   nav cells and the live Alkmaar clock. --strip is defined in :root above.
   ========================================================================== */

.strip{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:var(--black);
  border-top:1px solid var(--line);
  display:flex; align-items:stretch;
  height:var(--strip);
}

.strip__nav{ display:flex; align-items:stretch; flex:1 1 auto; }
.strip__nav a{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding-inline:clamp(16px,3vw,34px);
  border-right:1px solid var(--line);
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--text-3);
  transition:color .2s linear;
}
.strip__nav a:first-child{ border-left:1px solid var(--line); margin-left:clamp(16px,4vw,52px); }
.strip__nav a:hover, .strip__nav a:focus-visible{ color:var(--white); }
.strip__n{ color:var(--text-3); font-variant-numeric:tabular-nums; transition:color .2s linear; }
.strip__nav a:hover .strip__n{ color:var(--text-2); }

/* current page: a white hairline sits on top of its cell */
.strip__nav a[aria-current="page"]{ color:var(--white); }
.strip__nav a[aria-current="page"] .strip__n{ color:var(--white); }
.strip__nav a[aria-current="page"]::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:var(--white);
}

/* the live readout cell */
.strip__clock{
  display:flex; align-items:center; gap:10px;
  padding-inline:clamp(16px,3vw,30px);
  margin-right:clamp(16px,4vw,52px);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--text-2); white-space:nowrap;
  transition:color .2s linear;
}
.strip__clock:hover, .strip__clock:focus-visible{ color:var(--white); }
.strip__clock [data-clock]{ font-variant-numeric:tabular-nums; color:var(--white); }
.strip__clock .strip__dot{ color:var(--text-3); }

/* the readout panel, opened from the clock cell */
.strip__meta{
  position:fixed; right:clamp(16px,4vw,52px); bottom:var(--strip); z-index:54;
  width:min(360px,92vw);
  background:var(--black);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  padding:6px clamp(16px,4vw,52px) 14px 20px;
}
.strip__meta[hidden]{ display:none; }
.strip__meta dl{ display:grid; grid-template-columns:auto 1fr; gap:0 20px; }
.strip__meta dt, .strip__meta dd{
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  padding-block:var(--sp-2); border-bottom:1px solid var(--line);
}
.strip__meta dt{ color:var(--text-3); }
.strip__meta dd{ color:var(--white); text-align:right; font-variant-numeric:tabular-nums; }

/* phone: two decks — readout above, nav cells below */
@media (max-width:760px){
  :root{ --strip: 82px; }

  .strip{ flex-direction:column; height:var(--strip); }

  .strip__clock{
    order:-1; width:100%; height:30px; margin:0; border:0;
    border-bottom:1px solid var(--line);
    justify-content:center; font-size:var(--fs-label-sm); letter-spacing:var(--ls-label);
  }

  .strip__nav{ width:100%; height:52px; }
  .strip__nav a{
    flex:1 1 0; min-width:0;
    justify-content:center; gap:6px;
    padding-inline:4px; margin:0;
    border-left:0; border-right:1px solid var(--line);
    font-size:var(--fs-label-sm); letter-spacing:.12em;
  }
  .strip__nav a:first-child{ margin-left:0; border-left:0; }
  .strip__nav a:last-child{ border-right:0; }
  .strip__n{ font-size:.5625rem; }

  .strip__meta{ width:100%; right:0; border-left:0; border-right:0; padding-inline:20px; }
}
@media (max-width:400px){
  .strip__nav a .strip__n{ display:none; }   /* names only when it gets tight */
}