/* EXXPLORE — holding site. Stamp top left; the line runs down from it; markers sit on the line. */
@font-face{font-family:"IBM Plex Sans";src:url("fonts/plex-sans-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed";src:url("fonts/plex-sans-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#1C1B1A; --sub:#3F3B37; --muted:#716C67; --line:#D2CEC9; --petrol:#465548; --paper:#FFFFFF;
  --sans:"IBM Plex Sans",Arial,Helvetica,sans-serif; --mono:"IBM Plex Mono",Consolas,monospace; --display:"IBM Plex Sans Condensed","IBM Plex Sans",Arial,sans-serif;
  --spine:clamp(20px,6vw,72px);      /* x of the line */
  --gap:clamp(24px,4vw,44px);        /* line to content */
  --bar:2.9rem;                      /* height of the stamp bar */
  --mark:clamp(44px,4vw,56px);      /* length of the thick marker (the bookmark) on the line */
  /* three optical gaps (baseline to cap height), so the eye can group: small inside a block,
     medium between paragraphs of one text, large between the parts of the page */
  --s:20px;                         /* a label on its content */
  --s2:30px;                        /* two elements inside one block: headline + lead, figure rows */
  --q:35px;                         /* contact form: label to field, and between the questions */
  --m:clamp(32px,2.8vw,40px); --l:clamp(40px,3.5vw,50px);
  --rhythm:clamp(56px,5.6vw,80px);   /* the page margin: stamp to first block, last block to footer (story.js) */
  --col:calc(34 * clamp(17px,1.3vw,18px));   /* the text column: running text, hairlines, form, footer */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}

.page{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:0 clamp(20px,5vw,64px) 0 calc(var(--spine) + var(--gap))}
.page::before{content:"";position:absolute;left:var(--spine);top:var(--bar);bottom:0;border-left:1px solid var(--petrol)}
/* the stamp is a full-width petrol bar; the word mark sits on the line, a way to contact on the right */
.page::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--bar);background:var(--petrol)}

.stamp{position:absolute;z-index:1;left:var(--spine);top:0;display:block;line-height:0}
.stamp img{height:var(--bar);width:auto;display:block}
.topcontact{position:absolute;z-index:1;top:0;right:clamp(20px,5vw,64px);height:var(--bar);display:flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.topcontact svg{width:13px;height:13px;transition:transform .2s ease}
.topcontact:hover svg{transform:translateX(3px)}
.topcontact:focus-visible{outline-color:#fff;outline-offset:-2px}

main{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(120px,18vh,200px) clamp(64px,10vh,120px);max-width:1040px}

/* index: three blocks, each with its own screen, so the marker can move from block to block */
/* Scroll story (story.js): blocks are stops; one rhythm between stamp, blocks and footer.
   The script fine-tunes the top/bottom padding so the visible type sits exactly one
   rhythm under the stamp and above the footer. */
main.story{flex:none;justify-content:flex-start;padding-block:calc(var(--rhythm) + 3.5rem) var(--rhythm)}
.story>.blk{display:flex;flex-direction:column;align-items:flex-start}
/* margins = the optical gap minus what the line heights already add (measured with witruimte-tool in Chrome) */
.story>.blk+.blk{margin-top:calc(var(--l) - 13px)}
.story>.blk.evidence+.blk.step{margin-top:calc(var(--l) - 9.4px)}
.story>form{margin-top:calc(var(--l) - 12.3px)}
/* the evidence part opens with a hairline as wide as the text; the label sits directly on its figures */
.story>.blk.evidence{margin-top:calc(var(--l) - 8px);padding-top:calc(var(--s) - 5.3px);border-top:1px solid var(--ink);max-width:min(100%,var(--col))}
.story .figlabel{margin:0 0 calc(var(--s) - 10.7px)}
.story .figs{align-self:stretch}
.story .cta{margin-top:0}
.send{margin-top:calc(var(--l) - 43.9px)}
.mk{position:relative}
.mk::before{content:"";position:absolute;left:calc(-1 * var(--gap) - 1px);top:.1em;bottom:.1em;border-left:4px solid var(--petrol)}
/* the marker is a scrollbar on the line (script); the static one stays when there is nothing to scroll */
.marker{position:fixed;z-index:2;left:calc(var(--spine) - 1px);width:0;border-left:4px solid var(--petrol);pointer-events:none}
.bl{display:inline-block;width:0;height:0;overflow:hidden}
.has-marker .mk::before{display:none}

.kicker{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);margin:0 0 18px}
/* hero: contrast by weight and colour, not by size. Grey line Light, ink line Medium (the weight of the word mark) */
h1{font-family:var(--sans);font-weight:500;font-size:clamp(30px,3.7vw,48px);line-height:1.1;letter-spacing:-.022em;margin:0;text-wrap:balance}
h1 .not{color:#A39E98;font-weight:300;display:inline-block}
.figlabel{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:clamp(40px,5vw,60px) 0 12px}
.figlabel span{color:var(--muted);font-weight:400}
/* index: challenge / approach / follow-through / result; the label is smaller than the text and grey, so the text carries */
/* book setting: one running text, ordinary paragraph space between the four, reading size */
.story>.blk.step+.blk.step{margin-top:calc(var(--m) - 12.5px)}
.story>.blk.step+.blk.discuss{margin-top:calc(var(--l) - 16px)}
.steplabel{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 calc(var(--s) - 13.5px)}
.txt{font-size:clamp(17px,1.3vw,18px);line-height:1.62;color:var(--sub);max-width:34em;margin:0}
/* capitals inside running text: a little smaller and spaced, as a typesetter sets acronyms */
.brand{font-size:.88em;letter-spacing:.04em}
.lead2{margin-top:.6em}

.lead,.txt{text-wrap:pretty}   /* no single word on the last line */
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.5;color:var(--sub);max-width:34em;margin:clamp(18px,2vw,24px) 0 0}

/* the figures stay inside the text column: two by two, the hairline as wide as the text */
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--s2) - 10.7px) clamp(24px,3vw,48px);margin-top:0}
.figs div{display:grid;gap:6px}
.figs b{font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figs small{font-size:.5em;letter-spacing:0;color:var(--muted)}
.figs div>span{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.asof{font-size:12px;color:var(--muted);margin:14px 0 0}
.cta{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(36px,5vw,56px);background:transparent;color:var(--petrol);border:1px solid var(--petrol);text-decoration:none;transition:background .15s,color .15s;
  font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:18px 24px 17px 22px;align-self:flex-start}
.cta svg{width:16px;height:16px;transition:transform .2s ease}
.cta:hover,.cta:focus-visible{background:var(--petrol);color:#fff}
.cta:hover svg{transform:translateX(4px)}

footer{max-width:min(100%,var(--col));display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 28px;padding:22px 0 28px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--muted)}
footer nav{display:flex;gap:28px;margin-left:auto}
footer a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
footer a:hover,footer a:focus-visible{color:var(--petrol);border-bottom-color:currentColor}
.mono{font-family:var(--mono)}

/* ---- legal pages ---- */
.legal{max-width:70ch;margin-top:clamp(28px,4vw,44px);color:var(--sub);font-size:16px;line-height:1.6}
.legal h2{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);margin:36px 0 8px}
.legal p,.legal ul{margin:0 0 12px}
.legal ul{padding-left:1.1em}
.legal a{color:var(--petrol)}
.legal h2.doc{font-size:24px;font-weight:500;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin:64px 0 12px}
.legal section:first-child h2.doc{margin-top:0}
.legal .updated{font-size:12px;color:var(--muted);margin-top:36px}

/* ---- contact ---- */
.form-wrap{max-width:1040px}
.form-wrap>form{max-width:var(--col)}
h1.small{font-size:clamp(30px,3.7vw,48px)}
form{margin-top:clamp(36px,5vw,52px);display:grid;gap:34px}
.group{display:grid;gap:12px}
/* the form, set with witruimte-contact: one gap (--q) from label to field and between the questions (optical, measured) */
.story>form .group{gap:calc(var(--q) - 22.3px)}
.story>form .group+.group{margin-top:calc(var(--q) - 38.3px)}
.story>form .group.area{gap:calc(var(--q) - 25.3px);margin-top:calc(var(--q) - 43.3px)}
.story>form legend.label{margin-bottom:calc(var(--q) - 10.6px)}
.label{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.label .note{letter-spacing:.04em;text-transform:none;font-weight:400}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 0;border-radius:0;transition:border-color .15s}
textarea{min-height:120px;resize:vertical;border:1px solid var(--line);padding:12px 14px}
input:focus,textarea:focus{outline:none;border-color:var(--petrol)}
::placeholder{color:#9A958F}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--s) - 10.5px) 24px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:2px 0 0;border:1px solid var(--muted);background:#fff;cursor:pointer;display:grid;place-content:center}
.check input::after{content:"";width:8px;height:8px;background:var(--petrol);transform:scale(0);transition:transform .12s}
.check input:checked{border-color:var(--petrol)}
.check input:checked::after{transform:scale(1)}
button.cta{cursor:pointer;font-family:var(--sans);margin-top:4px}
.privacy{font-size:12px;color:var(--muted);margin:calc(var(--q) - 38.6px) 0 0;max-width:36em}
.back{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);text-decoration:none}

/* desktop: calmer and finer. The text column steps back from the line, a narrower stamp bar,
   a hairline above the figures, tighter tracking, and the button as a link with a line under it */
@media (min-width:1024px){
  :root{--gap:clamp(64px,7vw,120px);--bar:2.2rem;
    --m:40px;--l:50px;--rhythm:80px}   /* the white space chosen with witruimte-tool: fixed on every desktop width */
  .topcontact{font-size:11px}
  .lead{letter-spacing:-.005em}
  .story>.blk.evidence{border-top-color:var(--line)}
}
/* buttons everywhere: a link with a petrol line under it (no frame) */
.cta{border:0;border-bottom:1px solid var(--petrol);padding:0 0 8px;gap:12px}
.cta:hover,.cta:focus-visible{background:transparent;color:var(--petrol)}
@media (max-width:640px){
  .figs{grid-template-columns:1fr 1fr}
  .row,.checks{grid-template-columns:1fr}
  :root{--bar:2.75rem}
  .topcontact{font-size:11px;gap:8px}
  .topcontact svg{width:12px;height:12px}
  /* buttons run the full text width, arrow on the right */
  .cta,.story .cta{align-self:stretch;justify-content:space-between}
  button.cta{width:100%}
  .cta{padding:12px 0 12px}           /* a finger-sized target; the line runs the full text width */
  .mk::before,.marker{border-left-width:3px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.formerror{margin:0;padding:12px 14px;border-left:3px solid #B42318;background:#FBF1F0;color:#1C1B1A;font-size:14px}
.formerror[hidden]{display:none}

/* the closing line speaks in the voice of the lead (after .lead, so its margin wins) */
.lead.closing{margin:0 0 calc(var(--l) - 12.9px)}   /* the button stands apart: the gap between parts */
.hero .lead,.story>.blk:first-child .lead{margin-top:calc(var(--s2) - 16.8px)}   /* headline to lead: two elements inside one block */