:root{
    --bg:#f5f3ec;
    --ink:#141917;
    --soft:#3a4744;
    --grey:#7c8079;
    --accent:#a83c19;
    --accent-warm:#c9541f;
    --brand:#123f43;
    --brand-deep:#0e3236;
    --brand-ink:#eef0ea;
    --brand-tint:#b9cbc8;
    --field:#ffffff;
    --field-border:rgba(20,25,23,.28);
    --rule:rgba(18,63,67,.16);
    --rule-strong:#123f43;
    --dot:rgba(18,63,67,.32);
    --label:#123f43;
    --moon:#16494d;
    --disp:'Source Serif 4',Georgia,serif;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;overflow-x:hidden}
  ::selection{background:var(--ink);color:var(--bg)}
  a{color:inherit}

  .g{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}
  h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.005em}
  /* reveal only kicks in when JS is present; without JS content is always shown */
  .rise{opacity:1;transform:none}
  .js .rise{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  .js .rise.on{opacity:1;transform:none}
  /* hero content never waits on scroll-reveal */
  .js .hero .rise{opacity:1;transform:none;animation:heroIn .8s ease both}
  @keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion: reduce){.rise,.hero .rise,.js .rise{animation:none;opacity:1;transform:none}}

  /* ---------- top bar ---------- */
  .bar-bg{position:fixed;top:0;left:0;right:0;height:64px;z-index:59;background:var(--bg);border-bottom:2px solid var(--rule-strong);opacity:0;transition:opacity .3s;pointer-events:none}
  .scrolled .bar-bg{opacity:1}
  header{position:fixed;top:0;left:0;right:0;z-index:60}
  .bar{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(20px,4vw,52px);max-width:1200px;margin:0 auto}
  .bar .name{font-family:var(--disp);font-weight:600;font-size:15px;text-decoration:none;display:flex;align-items:center;gap:10px}
  .bar .name .mark{display:block}
  .bar .name .mark .c1{fill:var(--accent)}
  .bar .name .mark .c2{fill:var(--moon)}
  body:not(.scrolled) .bar .name .mark .c1{fill:#e0653a}
  body:not(.scrolled) .bar .name .mark .c2{fill:#6fb0ab}
  .bar nav{display:flex;gap:clamp(16px,2.4vw,32px);align-items:center;font-size:13.5px}
  .bar nav a{text-decoration:none;color:var(--soft);transition:color .15s}
  .bar nav a:hover{color:var(--ink)}
  .bar nav a.mail{color:var(--accent);font-weight:500}
  .burger{display:none;background:none;border:none;color:var(--ink);font-size:22px;cursor:pointer}

  /* ---------- hero: planet horizon ---------- */
  .hero{min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;padding:90px 0 22vh;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#101820 0%,#0a0e13 55%,#070a0d 100%)}
  .starlayer{position:absolute;inset:0;z-index:1;background-repeat:repeat;pointer-events:none}
  .starlayer.s1{background-size:620px 620px;animation:tw 5.5s ease-in-out infinite;background-image:
    radial-gradient(1px 1px at 40px 60px,rgba(226,232,236,.7) 50%,transparent 51%),
    radial-gradient(1px 1px at 130px 210px,rgba(226,232,236,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 220px 90px,rgba(226,232,236,.65) 50%,transparent 51%),
    radial-gradient(1px 1px at 310px 320px,rgba(226,232,236,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 400px 150px,rgba(226,232,236,.6) 50%,transparent 51%),
    radial-gradient(1px 1px at 490px 420px,rgba(226,232,236,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 80px 480px,rgba(226,232,236,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 560px 250px,rgba(226,232,236,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 180px 560px,rgba(226,232,236,.6) 50%,transparent 51%),
    radial-gradient(1px 1px at 350px 500px,rgba(226,232,236,.4) 50%,transparent 51%),
    radial-gradient(1px 1px at 520px 40px,rgba(226,232,236,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 260px 380px,rgba(226,232,236,.5) 50%,transparent 51%)}
  .starlayer.s2{background-size:860px 860px;animation:tw 7.5s ease-in-out infinite 1.2s;background-image:
    radial-gradient(1.4px 1.4px at 90px 120px,rgba(226,232,236,.85) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 300px 340px,rgba(226,232,236,.7) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 520px 80px,rgba(226,232,236,.8) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 700px 460px,rgba(226,232,236,.65) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 160px 620px,rgba(226,232,236,.75) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 640px 700px,rgba(226,232,236,.6) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 420px 550px,rgba(226,232,236,.7) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 780px 220px,rgba(226,232,236,.75) 50%,transparent 51%)}
  .starlayer.s3{background-size:1200px 1200px;animation:tw 4s ease-in-out infinite .6s;background-image:
    radial-gradient(2px 2px at 200px 180px,rgba(240,161,114,.95) 50%,transparent 51%),
    radial-gradient(2px 2px at 800px 90px,rgba(238,240,242,.95) 50%,transparent 51%),
    radial-gradient(2px 2px at 1050px 420px,rgba(111,176,171,.9) 50%,transparent 51%),
    radial-gradient(2px 2px at 460px 300px,rgba(238,240,242,.9) 50%,transparent 51%),
    radial-gradient(2px 2px at 650px 560px,rgba(240,161,114,.85) 50%,transparent 51%),
    radial-gradient(2px 2px at 120px 680px,rgba(238,240,242,.85) 50%,transparent 51%),
    radial-gradient(2px 2px at 920px 750px,rgba(111,176,171,.85) 50%,transparent 51%)}
  @keyframes tw{0%,100%{opacity:1}50%{opacity:.55}}
  .sat{position:absolute;width:5px;height:5px;border-radius:50%;background:#f0a172;box-shadow:0 0 10px 2px rgba(240,161,114,.55);z-index:2}
  .sat.a{top:62%;animation:flyR 17s linear infinite}
  .sat.b{top:70%;width:4px;height:4px;animation:flyL 26s linear infinite 6s}
  @keyframes flyR{0%{left:-3%;transform:translateY(0);opacity:0}6%{opacity:1}50%{transform:translateY(-5vh)}94%{opacity:1}100%{left:103%;transform:translateY(0);opacity:0}}
  @keyframes flyL{0%{left:103%;transform:translateY(0);opacity:0}6%{opacity:1}50%{transform:translateY(-4vh)}94%{opacity:1}100%{left:-3%;transform:translateY(0);opacity:0}}
  @media (prefers-reduced-motion: reduce){.starlayer,.sat{animation:none}.sat.a{left:24%}.sat.b{left:70%}}
  .planet{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(-190vw + 20vh);width:190vw;height:190vw;border-radius:50%;z-index:2;
    background:radial-gradient(circle at 50% 12%,#131c22 0%,#0b1116 22%,#05080a 55%);
    box-shadow:0 -3px 22px rgba(240,140,80,.55),0 -18px 80px rgba(224,101,58,.28),0 -60px 220px rgba(42,107,111,.30)}
  .planet::before{content:"";position:absolute;inset:-1px;border-radius:50%;
    background:radial-gradient(circle at 50% 0%,rgba(255,196,150,.5) 0%,rgba(224,101,58,.16) 1.1%,transparent 2.6%)}
  .atmo{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(-190vw + 20vh);width:190vw;height:190vw;border-radius:50%;z-index:1;filter:blur(34px);
    background:radial-gradient(circle at 50% 0%,rgba(111,176,171,.32) 0%,rgba(111,176,171,.10) 1.6%,transparent 4%)}
  @media(max-width:860px){
    .planet,.atmo{width:340vw;height:340vw;bottom:calc(-340vw + 16vh)}
    .hero{padding-bottom:18vh}
  }
  .hero-copy{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;padding:0 20px}
  .hero-copy .meta{font-size:12.5px;color:#8f9aa3;margin-bottom:24px}
  .hero-copy .meta b{color:#f0a172;font-weight:500}
  .hero-copy h1{font-size:clamp(40px,5.8vw,82px);line-height:1.05;letter-spacing:-.015em;margin-bottom:26px;max-width:16ch;text-wrap:balance;color:#fbfaf7}
  .hero-copy h1 span{display:block;color:#eaa982;font-style:italic;font-weight:500;margin-top:6px}
  .hero-copy p{font-size:clamp(16px,1.45vw,19px);line-height:1.6;color:#d3dbdd;max-width:48ch;margin-bottom:36px}
  .hero-copy p b{color:#fff;font-weight:600}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
  .btn{display:inline-block;font-size:14px;font-weight:500;padding:14px 28px;border-radius:2px;text-decoration:none;transition:all .2s;border:1.5px solid var(--ink);cursor:pointer;font-family:var(--sans);background:transparent;color:var(--ink)}
  .btn:hover{background:var(--ink);color:var(--bg)}
  .btn.acc{border-color:var(--accent);background:var(--accent);color:#fff}
  .btn.acc:hover{opacity:.85;background:var(--accent);color:#fff}
  .hero .btn{border-color:#dfe3e6;color:#eef0f2}
  .hero .btn:hover{background:#eef0f2;color:#0a0e13}
  .hero .btn.acc{border-color:#e0653a;background:#e0653a;color:#fff}
  .hero .btn.acc:hover{opacity:.85;background:#e0653a;color:#fff}
  .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;width:1.5px;height:44px;background:linear-gradient(180deg,#f0a172,transparent);animation:drip 2.2s ease-in-out infinite}
  @keyframes drip{0%{transform:translateX(-50%) scaleY(.15);transform-origin:top}55%{transform:translateX(-50%) scaleY(1);transform-origin:top}100%{transform:translateX(-50%) scaleY(.15);transform-origin:bottom}}
  /* nav over dark hero */
  body:not(.scrolled) .bar .name,body:not(.scrolled) .bar nav>a,body:not(.scrolled) .modebtn,body:not(.scrolled) .burger{color:#dfe3e6}
  body:not(.scrolled) .bar nav>a:hover{color:#fff}
  body:not(.scrolled) .bar nav>a.mail{color:#f0a172}

  /* ---------- statement (petrol anchor, two columns) ---------- */
  .strip{background:var(--brand);color:var(--brand-ink);padding:clamp(64px,9vw,120px) 0;position:relative;overflow:hidden}
  .strip::before{content:"";position:absolute;right:-14vw;bottom:-30vw;width:46vw;height:46vw;border-radius:50%;background:radial-gradient(circle at 40% 30%,rgba(200,84,31,.22),transparent 62%);pointer-events:none}
  .strip .g{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(34px,5vw,80px);align-items:center;position:relative;z-index:2}
  .strip .lead{font-family:var(--disp);font-size:clamp(24px,3vw,38px);line-height:1.28;letter-spacing:-.01em;font-weight:500;color:#f4f1ea;margin:0}
  .strip .lead em{font-style:italic;color:#fbfaf7}
  .strip .txt{grid-column:1;font-size:15.5px;line-height:1.7;color:var(--brand-tint);max-width:56ch;margin-top:22px}
  .strip .txt b{color:#fff;font-weight:600}
  .facts{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
  .fact{display:flex;align-items:baseline;gap:16px;padding-bottom:clamp(16px,2vw,24px);border-bottom:1px solid rgba(185,203,200,.22)}
  .fact:last-child{border-bottom:none;padding-bottom:0}
  .fact b{font-family:var(--disp);font-weight:600;font-size:clamp(30px,3.6vw,46px);line-height:1;color:#eaa982;white-space:nowrap;min-width:3.4ch}
  .fact span{font-size:13.5px;line-height:1.4;color:var(--brand-tint)}
  @media(max-width:820px){.strip .g{grid-template-columns:1fr;gap:34px}.strip .txt{grid-column:1}}

  /* ---------- section scaffold ---------- */
  section.blk{padding:clamp(56px,8vw,110px) 0}
  .blk h2{font-size:clamp(27px,3.6vw,46px);line-height:1.12;letter-spacing:-.008em;max-width:24ch;margin-bottom:clamp(20px,2.5vw,30px)}
  .blk p.txt{color:var(--soft);max-width:58ch;margin-bottom:18px}
  .blk p.txt b{color:var(--ink);font-weight:600}
  .note{font-size:13.5px;color:var(--soft);max-width:52ch;margin-top:26px}
  .note b{color:var(--accent);font-weight:600}

  /* ---------- THE DEMAND SIDE ---------- */
  .field-sec{background:var(--brand);color:var(--brand-ink);padding:clamp(72px,10vw,140px) 0;position:relative;overflow:hidden}
  .field-sec .wordbg{position:absolute;top:-1vw;left:0;font-family:var(--disp);font-weight:600;font-size:clamp(70px,13vw,200px);letter-spacing:-.01em;line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--brand-ink) 15%,transparent);white-space:nowrap;pointer-events:none;user-select:none}
  .field-sec h2{color:var(--brand-ink)}
  .field-sec p.txt{color:color-mix(in srgb,var(--brand-ink) 75%,transparent)}
  .editions{margin-top:clamp(28px,3.5vw,44px)}
  .ed{display:grid;grid-template-columns:clamp(60px,7vw,110px) 1fr auto;gap:clamp(14px,2vw,30px);align-items:baseline;padding:clamp(20px,2.6vw,30px) 0;border-top:1px dotted color-mix(in srgb,var(--brand-ink) 45%,transparent);text-decoration:none;transition:padding-left .3s ease}
  .ed:hover{padding-left:14px}
  .ed .eno{font-family:var(--sans);font-weight:600;font-size:clamp(26px,3.2vw,46px);letter-spacing:0;color:color-mix(in srgb,var(--brand-ink) 45%,transparent);line-height:1;transition:color .3s}
  .ed:hover .eno{color:#eba179}
  .ed h3{font-size:clamp(17px,1.9vw,24px);font-weight:500;letter-spacing:-.005em;line-height:1.3;max-width:40ch}
  .ed p{font-size:13px;color:color-mix(in srgb,var(--brand-ink) 60%,transparent);margin-top:4px;max-width:56ch}
  .ed .est{font-size:12.5px;color:#eba179;font-weight:600;white-space:nowrap}
  .ed .est.dim{color:color-mix(in srgb,var(--brand-ink) 42%,transparent)}
  .sub-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:clamp(26px,3vw,40px)}
  .sub-btn{font-size:14px;font-weight:500;text-decoration:none;color:var(--brand);background:var(--brand-ink);padding:14px 30px;border-radius:2px;transition:transform .2s;border:none;cursor:pointer}
  .sub-btn:hover{transform:translateY(-2px)}
  .sub-note{font-size:12.5px;color:color-mix(in srgb,var(--brand-ink) 60%,transparent)}
  @media(max-width:640px){.ed{grid-template-columns:1fr;gap:4px}.ed .eno{font-size:24px}}

  /* ---------- services ---------- */
  .svc-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:clamp(24px,4vw,70px);padding:clamp(34px,4.5vw,56px) 0;border-top:1px dotted var(--dot)}
  .svc-row:first-of-type{border-top:none;padding-top:0}
  .svc-main h3{font-size:clamp(23px,2.6vw,32px);letter-spacing:-.005em;margin-bottom:4px}
  .svc-main .for{font-size:13.5px;color:var(--grey);margin-bottom:16px}
  .svc-main p.d{color:var(--soft);max-width:54ch;margin-bottom:18px;font-size:15px}
  .svc-main ul{list-style:none}
  .svc-main li{padding:8px 0;font-size:14px;color:var(--soft);max-width:58ch}
  .svc-main li b{color:var(--ink);font-weight:600}
  .svc-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding-top:6px}
  .svc-side .tagline{font-size:13px;color:var(--accent);font-weight:600}
  .svc-side .pr{font-family:var(--sans);font-weight:600;font-size:clamp(23px,2.2vw,30px);font-weight:500;letter-spacing:0}
  .svc-side .pr small{display:block;font-family:var(--sans);font-size:12px;color:var(--grey);font-weight:400;margin-top:3px}
  @media(max-width:860px){.svc-row{grid-template-columns:1fr}.svc-side{flex-direction:row;align-items:center;gap:22px;flex-wrap:wrap}}

  .folds{margin-top:clamp(26px,3.5vw,44px)}
  .folds details{border-top:1px dotted var(--dot)}
  .folds details:last-of-type{border-bottom:1px dotted var(--dot)}
  .folds summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:14px;padding:19px 0;font-size:14.5px;font-weight:500}
  .folds summary::-webkit-details-marker{display:none}
  .folds summary::after{content:"+";margin-left:auto;color:var(--accent);font-size:19px;transition:transform .25s}
  .folds details[open] summary::after{transform:rotate(45deg)}
  .fold-in{padding:2px 0 24px;max-width:66ch}
  .fold-in p{font-size:14px;color:var(--soft);margin-bottom:13px}
  .fold-in p b{color:var(--ink);font-weight:600}
  .cmp-wrap{overflow-x:auto;margin:6px 0 12px}
  .cmp{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
  .cmp th{text-align:left;font-size:12px;color:var(--label);padding:8px 14px 8px 0;border-bottom:2px solid var(--rule-strong);font-weight:600}
  .cmp td{padding:10px 14px 10px 0;border-bottom:1px dotted var(--dot);color:var(--soft)}
  .cmp td:first-child{color:var(--ink);font-weight:500}
  .cmp .you td{color:var(--accent);font-weight:600}
  .cmp-src{font-size:11px;color:var(--grey)}

  /* ---------- about ---------- */
  .about-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(30px,5vw,80px);align-items:start}
  .about-fig .ph{aspect-ratio:4/5;background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 22%,var(--bg)),color-mix(in srgb,var(--accent) 10%,var(--bg)));display:grid;place-items:center;color:var(--grey);font-size:12px;border-radius:2px}
  .about-fig figcaption{font-size:11px;color:var(--grey);padding-top:8px}
  .about-body p{color:var(--soft);max-width:58ch;margin-bottom:16px}
  .about-body p b{color:var(--ink);font-weight:600}
  .roles{margin-top:26px;max-width:58ch}
  .role{padding:13px 0;border-top:1px dotted var(--dot);font-size:14px}
  .role b{font-weight:600;display:block}
  .role span{color:var(--grey);font-size:13px}
  @media(max-width:860px){.about-grid{grid-template-columns:1fr}.about-fig{max-width:340px}}

  /* ---------- contact ---------- */
  .contact h2{font-size:clamp(27px,3.6vw,46px);letter-spacing:-.008em;line-height:1.12;max-width:20ch;margin-bottom:16px}
  .contact>.g>p{color:var(--soft);max-width:48ch;margin-bottom:clamp(28px,4vw,44px)}
  .bigmail{display:inline-block;font-family:var(--disp);font-size:clamp(24px,4.2vw,54px);font-weight:500;letter-spacing:-.01em;text-decoration:none;line-height:1.1;border-bottom:3px solid var(--accent);padding-bottom:6px;margin-bottom:clamp(34px,4.5vw,52px);transition:color .2s;word-break:break-all}
  .bigmail:hover{color:var(--accent)}
  .c-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:start}
  .c-alt{font-size:14px;color:var(--soft)}
  .c-alt .row{padding:13px 0;border-top:1px dotted var(--dot);display:flex;justify-content:space-between;gap:16px;align-items:baseline}
  .c-alt .row span{font-size:12.5px;color:var(--label);font-weight:600}
  .c-alt .row a{text-decoration:none;border-bottom:1px solid var(--rule);transition:all .2s}
  .c-alt .row a:hover{color:var(--accent);border-color:var(--accent)}
  form{display:flex;flex-direction:column;gap:15px}
  form p.fh{font-size:12px;color:var(--grey)}
  .fld label{display:block;font-size:12.5px;color:var(--label);font-weight:600;margin-bottom:6px}
  .fld input,.fld textarea,.fld select{width:100%;background:var(--field);border:1px solid var(--field-border);border-radius:2px;color:var(--ink);padding:12px 14px;font-family:var(--sans);font-size:14px;outline:none;transition:border-color .2s;-webkit-appearance:none}
  .fld select{color-scheme:light}
  .fld select option{color:#1a1a18;background:#fff}
  .fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--ink)}
  .fld textarea{min-height:84px;resize:vertical}
  .send{align-self:flex-start;font-size:14px;font-weight:500;border:none;border-radius:2px;background:var(--ink);color:var(--bg);padding:14px 32px;cursor:pointer;transition:opacity .2s;font-family:var(--sans)}
  .send:hover{opacity:.82}
  form small{font-size:11px;color:var(--grey)}
  @media(max-width:860px){.c-cols{grid-template-columns:1fr}}

  /* ---------- footer ---------- */
  footer{padding:clamp(40px,6vw,80px) 0 26px;border-top:2px solid var(--rule-strong);overflow:hidden}
  .wordmark{font-family:var(--disp);font-weight:600;font-size:clamp(38px,8.6vw,132px);letter-spacing:-.015em;line-height:.98;white-space:nowrap}
  .wordmark i{font-style:normal;color:var(--accent)}
  .foot-meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:clamp(24px,3vw,38px);font-size:12px;color:var(--grey)}
  .foot-meta a{text-decoration:none}
  .foot-meta a:hover{color:var(--ink)}

  @media(max-width:720px){
    .bar nav{display:none;position:absolute;top:64px;right:0;left:0;background:var(--bg);flex-direction:column;align-items:flex-start;padding:22px clamp(20px,4vw,52px);gap:16px;border-bottom:2px solid var(--rule-strong)}
    .bar nav.open{display:flex}
    .burger{display:block}
  }

/* ---------- meerpagina-aanvullingen ---------- */
.pagehead{padding:118px 0 0}
.pagehead h1{font-size:clamp(30px,4.4vw,54px);line-height:1.1;letter-spacing:-.008em;max-width:22ch;margin-bottom:14px}
.pagehead .stand{font-size:clamp(15.5px,1.4vw,17.5px);color:var(--soft);max-width:56ch;margin-bottom:26px}
.pagehead .rulebar{height:2px;background:var(--rule-strong);margin-bottom:clamp(30px,4vw,54px)}
body.nohero .bar-bg{opacity:1}
.routes{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--rule)}
.route{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:clamp(26px,3.4vw,40px) clamp(14px,1.6vw,24px);border-bottom:1px solid var(--rule);text-decoration:none;transition:background .3s ease,padding-left .3s ease}
.route:hover{background:var(--brand);padding-left:calc(clamp(14px,1.6vw,24px) + 10px)}
.route h3{font-size:clamp(22px,2.6vw,33px);font-weight:500;line-height:1.18;max-width:40ch;color:var(--ink);transition:color .25s}
.route p{font-size:14.5px;line-height:1.5;color:var(--soft);margin-top:7px;max-width:62ch;transition:color .25s}
.route .go{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap;display:flex;align-items:center;gap:8px;transition:color .25s}
.route .go::after{content:"→";font-size:17px;transition:transform .3s ease}
.route:hover h3{color:#fff}
.route:hover p{color:var(--brand-tint)}
.route:hover .go{color:#eaa982}
.route:hover .go::after{transform:translateX(5px)}
.figplate{background:#F4F3EE;border:1px solid rgba(26,26,24,.12);border-radius:2px;padding:clamp(10px,1.6vw,18px);margin:clamp(18px,2.5vw,28px) 0}
.figplate img{width:100%;height:auto;display:block}
.figcap{font-size:12.5px;color:var(--grey);margin-top:10px}
@media(max-width:720px){}
.bignum{font-family:var(--sans);font-weight:600;font-size:clamp(42px,6vw,74px);line-height:1;color:var(--brand)}
.article{max-width:680px}
.article p{font-family:Georgia,'Source Serif 4',serif;font-size:17px;line-height:1.75;color:var(--ink);margin-bottom:20px}
.article .standfirst{font-family:var(--disp);font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--soft);margin-bottom:26px}
.article .meta-line{font-size:13px;color:var(--grey);margin-bottom:34px}
.article .meta-line b{color:var(--accent);font-weight:600}
.comingsoon{border-top:2px solid var(--rule-strong);margin-top:34px;padding-top:22px;font-size:14.5px;color:var(--soft);max-width:52ch}
.comingsoon b{color:var(--ink)}


/* ---------- premium herziening (22 juli 2026, ronde 3) ---------- */
/* .strip is nu petrol-anker (zie statement-blok hierboven) */
.pagehead{background:var(--brand);color:var(--brand-ink);padding:132px 0 clamp(40px,5vw,64px);border-bottom:none;margin-bottom:clamp(40px,5vw,64px);position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;right:-8vw;bottom:-24vw;width:38vw;height:38vw;border-radius:50%;background:radial-gradient(circle at 40% 30%,rgba(200,84,31,.20),transparent 62%);pointer-events:none}
.pagehead .g{position:relative;z-index:2}
.pagehead h1{color:#f6f3ec;max-width:20ch}
.pagehead .stand{color:var(--brand-tint);margin-bottom:0;max-width:58ch}
.pagehead .crumb{color:var(--brand-tint)}
.pagehead .rulebar{display:none}
footer{background:var(--brand-deep);border-top:none;color:var(--brand-ink);padding-top:clamp(44px,6vw,84px)}
footer .wordmark{color:#dfeae7}
footer .wordmark i{color:#E0653A}
footer .foot-meta{color:color-mix(in srgb,var(--brand-ink) 62%,transparent)}
footer .foot-meta a:hover{color:var(--brand-ink)}
.blk h2{color:var(--brand)}
.contact h2{color:var(--brand)}
/* body-tekst en labels contrastrijker */
.blk p.txt{color:var(--soft)}
.svc-main p.d,.svc-main li,.fold-in p{color:var(--soft)}
/* figuurplaat past bij nieuwe bg */
.figplate{background:#fff;border:1px solid var(--rule)}
/* nette focus-states voor toetsenbord */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}


/* kwadranten als lopende tekst (22 juli, anti-AI-ronde 2) */
.defrun{max-width:62ch;margin:clamp(18px,2.5vw,28px) 0}
.defrun p{font-size:14.5px;color:var(--soft);margin-bottom:13px}
.defrun p b{font-family:var(--disp);font-weight:500;color:var(--ink);font-style:normal}
.defrun p.hot b{color:var(--accent)}

/* ---------- afsluitende CTA-band (22 juli, ronde 3: bodem zwaarder) ---------- */
/* Petrol-anker vlak vóór de footer, zodat pagina's niet op lege beige eindigen.
   Tonale stap: .closer = --brand, footer = --brand-deep. Eén amber-accent in de kop. */
.closer{background:var(--brand);color:var(--brand-ink);padding:clamp(56px,7.5vw,104px) 0;position:relative;overflow:hidden}
.closer::before{content:"";position:absolute;left:-12vw;top:-30vw;width:46vw;height:46vw;border-radius:50%;background:radial-gradient(circle at 60% 62%,rgba(200,84,31,.20),transparent 62%);pointer-events:none}
.closer .g{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(30px,5vw,74px);align-items:center}
.closer h2{font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.5vw,46px);line-height:1.14;letter-spacing:-.01em;color:#f6f3ec;max-width:20ch}
.closer h2 em{font-style:italic;color:#eaa982}
.closer .sub{font-size:15px;line-height:1.65;color:var(--brand-tint);max-width:48ch;margin-top:16px}
.closer .sub b{color:#fff;font-weight:600}
.closer .cta-side{display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.closer .btn{border-color:#dfe3e6;color:#eef0f2}
.closer .btn:hover{background:#eef0f2;color:#0a1416}
.closer .btn.acc{border-color:#e0653a;background:#e0653a;color:#fff}
.closer .btn.acc:hover{opacity:.9;background:#e0653a;color:#fff}
.closer .cta-note{font-size:12.5px;line-height:1.5;color:color-mix(in srgb,var(--brand-ink) 55%,transparent);max-width:34ch}
@media(max-width:820px){.closer .g{grid-template-columns:1fr;gap:26px}.closer .cta-side{flex-direction:row;flex-wrap:wrap;align-items:center}.closer .cta-note{flex-basis:100%}}

/* ---- risk reversal under a price ---- */
.svc-side .risk{font-size:12.5px;line-height:1.5;color:var(--grey);margin-top:12px;padding-top:12px;border-top:1px dotted var(--dot);max-width:34ch}
/* ---- what the price is, in the buyer's numbers ---- */
.scale{margin:clamp(34px,4.5vw,60px) 0 clamp(10px,1.5vw,18px)}
.scale h4{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.2vw,24px);color:var(--brand);margin:0 0 clamp(16px,2vw,22px)}
.scale-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,30px);border-top:2px solid var(--brand);padding-top:clamp(16px,2vw,22px)}
.scale-row>div{display:flex;flex-direction:column;gap:5px}
.scale-row b{font-family:var(--disp);font-weight:600;font-size:clamp(24px,3.2vw,36px);color:var(--ink);line-height:1}
.scale-row span{font-size:13px;line-height:1.45;color:var(--grey);max-width:22ch}
.scale-src{font-size:12.5px;color:var(--grey);margin-top:clamp(14px,1.8vw,20px);font-style:italic}
@media(max-width:820px){.scale-row{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:480px){.scale-row{grid-template-columns:1fr}}


/* ==========================================================================
   VERSION 2 (25 July 2026) — the research, drawn the way the style guide
   already draws it.

   Everything above is the v1 system and is left intact.

   The rule from Publicatie/Branding/stijlgids.md, applied to the page and not
   only to the figures: everything petrol, except the one bar that carries the
   story, which is rust. Paper background, no shadows, no gradients on content,
   a source line under every figure. Bars and rules, never fields of small
   circles: an isotype grid of dots is a dashboard mannerism, not this brand.
   ========================================================================== */

/* ---------- the bar primitive: one row, one number ---------- */
.bars{margin:clamp(14px,2vw,20px) 0 0;border-top:2px solid var(--rule-strong)}
.barrow{display:grid;grid-template-columns:clamp(58px,7vw,92px) minmax(0,1fr) auto;
  gap:clamp(12px,1.8vw,22px);align-items:center;padding:9px 0;border-bottom:1px dotted var(--dot)}
.barrow .bl{font-size:13.5px;color:var(--soft);white-space:nowrap}
.barrow .bt{height:clamp(12px,1.5vw,17px);background:rgba(18,63,67,.085);position:relative}
.barrow .bf{position:absolute;inset:0 auto 0 0;background:var(--brand);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.barrow.hot .bl{color:var(--accent);font-weight:600}
.barrow.hot .bf{background:var(--accent)}
.barrow .bv{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;white-space:nowrap;min-width:5.5ch;text-align:right}
.barrow .bv small{font-weight:400;color:var(--grey);font-size:12px}
.barnote{font-size:12.5px;color:var(--grey);margin-top:12px;max-width:64ch}
.barnote b{color:var(--accent);font-weight:600}
@media(max-width:520px){.barrow{grid-template-columns:clamp(48px,14vw,70px) minmax(0,1fr) auto;gap:10px}}

/* the same primitive on a petrol ground */
.onbrand .bars{border-top-color:rgba(185,203,200,.5)}
.onbrand .barrow{border-bottom-color:rgba(185,203,200,.22)}
.onbrand .barrow .bl{color:var(--brand-tint)}
.onbrand .barrow .bt{background:rgba(255,255,255,.09)}
.onbrand .barrow .bf{background:#7fa5a3}
.onbrand .barrow.hot .bl{color:#eaa982}
.onbrand .barrow.hot .bf{background:#e0653a}
.onbrand .barrow .bv{color:#f2f5f2}
.onbrand .barrow .bv small{color:var(--brand-tint)}

/* ---------- hero second beat: what the sector hires for ---------- */
.reckon{background:#080c10;color:#e7ecee;position:relative;overflow:hidden}
.reckon .g{position:relative;z-index:2}
/* Deliberately not a full viewport: the band is a beat between the hero and the
   statement, and a screen of empty black reads as a gap rather than a pause. */
.reckon-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,74px);align-items:center;padding:clamp(64px,11vh,132px) 0}
.reckon h2{font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.5vw,45px);line-height:1.16;
  letter-spacing:-.012em;color:#fbfaf7;max-width:23ch}
.reckon h2 em{font-style:italic;color:#eaa982}
.reckon .sub{font-size:15.5px;line-height:1.68;color:#9fb0b3;max-width:46ch;margin-top:18px}
.reckon .sub b{color:#fff;font-weight:600}
.reckon .srcline{font-size:12px;color:#6f8085;margin-top:20px;max-width:44ch}
.reckon .srcline a{color:#c98a63}

.vac-count{font-family:var(--sans);font-weight:600;font-size:clamp(44px,6.4vw,76px);line-height:1;
  color:#e0653a;letter-spacing:-.025em}
.vac-count small{display:block;font-family:var(--sans);font-size:13px;font-weight:400;color:#9fb0b3;
  letter-spacing:0;margin-top:10px;max-width:28ch;line-height:1.5}

/* one rule, 1,109 positions wide, with the commercial sliver in rust */
.split{margin-top:clamp(24px,3vw,34px)}
.splitbar{display:flex;width:100%;height:clamp(30px,3.6vw,44px);overflow:hidden;background:#16262b}
.splitbar span{display:block;height:100%;transition:width .9s cubic-bezier(.2,.7,.3,1)}
.splitbar .s-eng{background:#2f545a}
.splitbar .s-ops{background:#427075}
.splitbar .s-unc{background:#5b8b8f}
.splitbar .s-com{background:#e0653a}
.splitkey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px clamp(18px,2.4vw,32px);margin-top:16px}
.splitkey div{display:flex;align-items:baseline;gap:9px;font-size:12.5px;color:#8fa1a5;line-height:1.4}
.splitkey i{flex:none;width:11px;height:11px;margin-top:2px;font-style:normal}
.splitkey b{color:#e7ecee;font-weight:600;font-variant-numeric:tabular-nums}
.splitkey .k-eng i{background:#2f545a}.splitkey .k-ops i{background:#427075}
.splitkey .k-unc i{background:#5b8b8f}.splitkey .k-com i{background:#e0653a}
.splitkey .k-com b{color:#eaa982}
@media(max-width:860px){
  .reckon-inner{grid-template-columns:1fr;gap:34px;padding:clamp(56px,8vh,88px) 0}
  .splitkey{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){.splitbar span,.barrow .bf{transition:none}}

/* ---------- THE FIELD ---------- */
.fld-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);align-items:end;
  border-bottom:2px solid var(--rule-strong);padding-bottom:clamp(16px,2vw,22px);margin-bottom:clamp(22px,3vw,32px)}
.fld-head p{font-size:14.5px;color:var(--soft);max-width:56ch}
.fld-live{font-family:var(--sans);font-size:13px;color:var(--grey);white-space:nowrap;text-align:right}
.fld-live b{font-family:var(--disp);font-weight:600;font-size:28px;color:var(--brand);display:block;line-height:1}
@media(max-width:640px){.fld-head{grid-template-columns:1fr}.fld-live{text-align:left}}

/* filters: plain text, no pills, no all-caps */
.filters{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-items:baseline;margin-bottom:clamp(14px,2vw,20px)}
.filters .flabel{font-size:12.5px;color:var(--label);font-weight:600;white-space:nowrap;padding-top:2px}
.filters .fset{display:flex;flex-wrap:wrap;gap:4px 16px}
.fbtn{font-family:var(--sans);font-size:13.5px;color:var(--soft);background:none;border:none;padding:3px 0;
  cursor:pointer;border-bottom:1.5px solid transparent;transition:color .15s,border-color .15s}
.fbtn:hover{color:var(--ink)}
.fbtn[aria-pressed="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.fbtn .cnt{color:var(--grey);font-weight:400;font-size:12px;margin-left:4px}
.fbtn[aria-pressed="true"] .cnt{color:var(--accent)}
@media(max-width:640px){.filters{grid-template-columns:1fr;gap:4px}}

.plotwrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(26px,4vw,58px);align-items:start}
.plotwrap h3,.readout h3{font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.9vw,21px);
  color:var(--brand);margin-bottom:2px;line-height:1.2}
.plotwrap .ph-sub,.readout .ph-sub{font-size:13px;color:var(--grey);margin-bottom:clamp(10px,1.4vw,14px)}
.readout{background:var(--brand);color:var(--brand-ink);border-radius:3px;padding:clamp(20px,2.4vw,28px)}
.readout h3{color:#fff}
.readout .ph-sub{color:var(--brand-tint)}
.readout .rlbl{font-family:var(--disp);font-style:italic;font-size:15px;color:#eaa982;margin-bottom:3px}
.readout .rnote{font-size:12.5px;line-height:1.55;color:color-mix(in srgb,var(--brand-ink) 62%,transparent);
  margin-top:15px;border-top:1px solid rgba(185,203,200,.22);padding-top:13px}
.readout .rnote b{color:#fff;font-weight:600}
@media(max-width:900px){.plotwrap{grid-template-columns:1fr}}

/* honours */
.honours{margin-top:clamp(26px,3.4vw,42px);border-top:2px solid var(--rule-strong)}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:baseline;
  padding:14px 0;border-bottom:1px dotted var(--dot)}
.hrow b{font-family:var(--disp);font-weight:600;font-size:16.5px;color:var(--ink)}
.hrow span.ct{font-size:12.5px;color:var(--grey);font-variant-numeric:tabular-nums}
.hrow .what{grid-column:1/-1;font-size:13.5px;color:var(--soft);max-width:72ch;margin-top:-6px}

/* country bars reuse the primitive with a wider label column */
.cbars .barrow{grid-template-columns:clamp(88px,11vw,132px) minmax(0,1fr) auto}

/* ---------- scorecard ---------- */
.you-field{margin-top:clamp(22px,3vw,32px);border-top:2px solid var(--rule-strong);
  padding-top:clamp(18px,2.4vw,26px);max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s ease,opacity .4s ease}
.you-field.show{max-height:1200px;opacity:1}
.you-field h3{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.2vw,25px);color:var(--brand);margin-bottom:6px}
.you-field p.yf{font-size:14px;color:var(--soft);max-width:58ch;margin-bottom:clamp(14px,2vw,20px)}
.barrow.you .bl{color:var(--accent);font-weight:600}
.barrow.you .bf{background:var(--accent)}
.barrow.you .bv::after{content:" · you";color:var(--accent);font-weight:600}
.fixes{margin-top:clamp(20px,2.6vw,30px)}
.fix{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:14px 0;
  border-top:1px dotted var(--dot);font-size:14px;color:var(--soft);line-height:1.55}
.fix b{font-family:var(--disp);font-weight:600;color:var(--ink);font-size:15px;display:block;margin-bottom:3px}
.fix .no{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--accent);padding-top:3px}

/* ---------- research: the two thin slices ---------- */
.chi-plate{border-top:2px solid var(--rule-strong);padding:clamp(18px,2.4vw,26px) 0 0;margin:clamp(24px,3vw,38px) 0}
.chi-plate .cap{font-size:12.5px;color:var(--grey);margin-top:14px;max-width:66ch}
.chi-plate .cap b{color:var(--accent);font-weight:600}

/* ---------- misc ---------- */
.lede{font-family:var(--disp);font-size:clamp(18px,2.1vw,23px);line-height:1.45;color:var(--ink);
  max-width:46ch;margin-bottom:clamp(18px,2.4vw,26px)}
.route .tag{font-size:12px;color:var(--accent);font-weight:600;display:block;margin-bottom:5px}
.route:hover .tag{color:#eaa982}

/* contrast fix: .note inherits a dark ink colour that disappears on the petrol bands */
.strip .note,.field-sec .note,.closer .note{color:var(--brand-tint)}
.strip .note a,.field-sec .note a,.closer .note a{color:#eaa982}
.strip .note b,.field-sec .note b{color:#fff}

/* six nav items instead of five */
.bar nav{gap:clamp(12px,1.8vw,26px)}
@media(max-width:860px) and (min-width:721px){.bar nav{font-size:12.5px}}

/* about: portrait column stays; caption sits under it */
.about-fig img{width:100%;height:auto;display:block;border-radius:2px;aspect-ratio:4/5;object-fit:cover}
.roles-lbl{font-size:12.5px;color:var(--label);font-weight:600;margin-bottom:2px}

/* print: a scorecard result worth keeping */
@media print{
  header,.bar-bg,.closer,footer,.pcta,.reset,.hero,.reckon,.scroll-hint,.filters{display:none !important}
  body{background:#fff;color:#000}
  .pagehead{background:none;color:#000;padding:0 0 12px;margin-bottom:18px;border-bottom:2px solid #000}
  .pagehead h1,.pagehead .stand,.pagehead .crumb{color:#000}
  .panel,.readout{background:#fff;color:#000;border:1.5px solid #000;position:static}
  .panel .score,.panel .lbl,.panel .verdict,.panel .bench,.readout h3,.readout .rlbl{color:#000}
  .onbrand .barrow .bl,.onbrand .barrow .bv{color:#000}
  .onbrand .barrow .bf{background:#555}
  .q .hint{opacity:1;max-height:none}
  .you-field{max-height:none;opacity:1;overflow:visible}
}

/* ---------- booking page ----------
   The calendar is the page's one job. Cal's month view needs real width: below
   about 700px it falls back to its mobile layout and the page looks broken, so
   the embed gets the full container and the context sits above it. */
.bookintro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:start;margin-top:clamp(6px,1.6vw,14px);
  padding-bottom:clamp(24px,3.4vw,40px);border-bottom:2px solid var(--rule-strong)}
.bookintro h2{font-family:var(--disp);font-weight:600;font-size:clamp(20px,2.3vw,26px);
  color:var(--brand);margin-bottom:10px;line-height:1.2}
.bookintro>div>p{font-size:14.5px;line-height:1.65;color:var(--soft);max-width:52ch}
.bookfacts{border-top:2px solid var(--rule-strong)}
.bookfacts div{padding:12px 0;border-bottom:1px dotted var(--dot)}
.bookfacts b{display:block;font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink)}
.bookfacts span{font-size:13px;color:var(--grey)}
.bmore{font-size:13.5px;color:var(--soft);margin-top:clamp(14px,2vw,20px);max-width:52ch}
.bmore a{color:var(--accent)}

.bookcal{margin-top:clamp(24px,3.4vw,40px)}
.calbox{min-height:clamp(560px,58vw,760px)}
.calfall{font-size:14px;color:var(--soft);padding:22px}
.calbox.calfallback{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:12px;min-height:clamp(280px,30vw,360px);padding:clamp(24px,3.4vw,44px);
  background:var(--brand);border:1px solid var(--brand);border-radius:3px;color:var(--brand-ink)}
.calbox.calfallback .cf-h{font-family:var(--disp);font-weight:600;font-size:clamp(20px,2.4vw,27px);color:#fff}
.calbox.calfallback .cf-p{font-size:14.5px;line-height:1.6;color:var(--brand-tint);max-width:44ch;margin-bottom:6px}
.calbox.calfallback .btn.acc{border-color:#e0653a;background:#e0653a;color:#fff}
.calbox.calfallback .btn.acc:hover{opacity:.9;background:#e0653a;color:#fff}
.bnote{font-size:12px;line-height:1.55;color:var(--grey);margin-top:14px;max-width:72ch}
.bnote a{color:var(--accent)}
@media(max-width:820px){.bookintro{grid-template-columns:1fr;gap:24px}}


/* ---------- instruments: the research read as one system ----------
   Rows, not columns of equal cards. A research index reads as infrastructure;
   three matching panels with a heading each read as a template. */
.instr{margin-top:clamp(20px,2.8vw,32px);border-top:2px solid var(--rule-strong)}
.instr-row{display:grid;grid-template-columns:clamp(96px,12vw,168px) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);align-items:start;padding:clamp(20px,2.8vw,32px) 0;
  border-bottom:1px dotted var(--dot)}
.instr-fig{font-family:var(--sans);font-weight:600;font-size:clamp(28px,3.6vw,46px);
  line-height:1;letter-spacing:-.02em;color:var(--brand)}
.instr-fig small{display:block;font-size:12px;font-weight:400;letter-spacing:0;
  color:var(--grey);margin-top:8px;line-height:1.45}
.instr-row.lead .instr-fig{color:var(--accent)}
.instr-body h3{font-family:var(--disp);font-weight:600;font-size:clamp(18px,2.1vw,23px);
  color:var(--ink);line-height:1.25;margin-bottom:6px}
.instr-body p{font-size:14.5px;line-height:1.65;color:var(--soft);max-width:62ch}
.instr-body p a{color:var(--accent)}
@media(max-width:640px){.instr-row{grid-template-columns:1fr;gap:12px}}

/* ---------- ledger: what actually lands ---------- */
.ledger{margin-top:clamp(20px,2.8vw,32px);border-top:2px solid var(--rule-strong)}
.led-row{display:grid;grid-template-columns:clamp(120px,15vw,200px) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);align-items:baseline;padding:clamp(16px,2.2vw,24px) 0;
  border-bottom:1px dotted var(--dot)}
.led-when{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--brand);line-height:1.3}
.led-when small{display:block;font-family:var(--sans);font-size:12px;font-weight:400;
  color:var(--grey);margin-top:3px}
.led-what{font-size:14.5px;line-height:1.7;color:var(--soft)}
.led-what b{color:var(--ink);font-weight:600}
@media(max-width:640px){.led-row{grid-template-columns:1fr;gap:6px}}

/* ---------- a line worth stopping on ---------- */
.pull{background:var(--brand-deep);color:var(--brand-ink);padding:clamp(52px,7vw,96px) 0;
  position:relative;overflow:hidden}
.pull::before{content:"";position:absolute;right:-10vw;top:-26vw;width:44vw;height:44vw;border-radius:50%;
  background:radial-gradient(circle at 42% 58%,rgba(200,84,31,.18),transparent 62%);pointer-events:none}
.pull .g{position:relative;z-index:2}
.pull p{font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.8vw,50px);line-height:1.22;
  letter-spacing:-.014em;color:#f6f3ec;max-width:20ch}
.pull p em{font-style:italic;color:#eaa982}
.pull .attr{font-size:clamp(14.5px,1.5vw,17px);line-height:1.6;color:var(--brand-tint);
  max-width:44ch;margin-top:clamp(18px,2.4vw,28px);
  border-top:1px solid rgba(185,203,200,.28);padding-top:clamp(14px,1.8vw,20px)}

/* ---------- research status ----------
   The programme is not finished, and saying so is cheaper than being caught out
   later. One quiet line, tied to programme.* in the dataset. */
.status{font-size:12.5px;line-height:1.6;color:var(--grey);max-width:70ch;
  margin-top:clamp(14px,1.8vw,20px);padding-top:clamp(12px,1.6vw,16px);
  border-top:1px dotted var(--dot)}
.status b{color:var(--brand);font-weight:600}
.onbrand .status,.strip .status,.field-sec .status{color:var(--brand-tint);border-top-color:rgba(185,203,200,.28)}
.onbrand .status b,.strip .status b,.field-sec .status b{color:#eaa982}

/* ---------- legal pages ----------
   Long-form, numbered, quiet. These get read once by a lawyer or a procurement
   officer and skimmed by everyone else, so structure matters more than voice. */
.legal{max-width:74ch}
.legal h2{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.2vw,25px);color:var(--brand);
  margin:clamp(30px,4vw,46px) 0 10px;padding-top:clamp(16px,2vw,22px);border-top:2px solid var(--rule-strong)}
.legal h2:first-of-type{margin-top:clamp(8px,1.4vw,14px)}
.legal h3{font-family:var(--disp);font-weight:600;font-size:16.5px;color:var(--ink);margin:22px 0 5px}
.legal p{font-size:15px;line-height:1.72;color:var(--soft);margin-bottom:13px}
.legal p b,.legal li b{color:var(--ink);font-weight:600}
.legal ul{list-style:none;margin:4px 0 14px}
.legal li{font-size:15px;line-height:1.7;color:var(--soft);padding:6px 0 6px 18px;position:relative;border-bottom:1px dotted var(--dot)}
.legal li:before{content:"";position:absolute;left:0;top:16px;width:8px;height:1.5px;background:var(--dot)}
.legal .lead-in{font-size:16px;color:var(--ink);max-width:62ch;margin-bottom:20px}
.legal a{color:var(--accent)}
.legal .todo{font-style:normal;background:#f6e0d6;color:var(--accent);font-weight:600;
  padding:1px 7px;border-radius:2px;font-size:.92em;white-space:nowrap}

/* the company details block */
.details{border-top:2px solid var(--rule-strong);margin-top:clamp(24px,3vw,34px)}
.detrow{display:grid;grid-template-columns:clamp(130px,17vw,210px) minmax(0,1fr);gap:10px clamp(14px,2vw,26px);
  padding:10px 0;border-bottom:1px dotted var(--dot);font-size:14.5px}
.detrow dt{color:var(--label);font-weight:600}
.detrow dd{color:var(--ink)}
@media(max-width:560px){.detrow{grid-template-columns:1fr;gap:2px}}

/* the plain-language summary that sits above the formal text */
.nutshell{background:var(--brand);color:var(--brand-ink);border-radius:3px;
  padding:clamp(20px,2.6vw,30px);margin-bottom:clamp(22px,3vw,32px)}
.nutshell h2{color:#fff;border:none;margin:0 0 8px;padding:0;font-size:clamp(18px,2.1vw,22px)}
.nutshell p{color:var(--brand-tint);font-size:14.5px;margin-bottom:9px}
.nutshell p:last-child{margin-bottom:0}
.nutshell b{color:#fff;font-weight:600}
.nutshell em{color:#eaa982;font-style:italic}

/* ---------- email capture ----------
   A mailto link converts close to nothing, and a list is the one asset that
   compounds. This is a real form, posted to Netlify Forms. */
/* the v1 base rule form{flex-direction:column} applies to every form, so say row here */
.subform{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;align-items:flex-start;margin-top:clamp(22px,3vw,34px);max-width:540px}
/* a hidden input is still a flex item and would break the row onto two lines */
.subform input[type=hidden]{display:none}
.subform input[type=email]{flex:1 1 240px;min-width:0;font:inherit;font-size:15px;padding:13px 15px;
  border:1.5px solid rgba(185,203,200,.45);background:rgba(255,255,255,.06);border-radius:2px;
  color:var(--brand-ink);outline:none;transition:border-color .2s}
.subform input[type=email]::placeholder{color:color-mix(in srgb,var(--brand-ink) 45%,transparent)}
.subform input[type=email]:focus{border-color:#eaa982}
.subform button{font:inherit;font-size:14px;font-weight:500;padding:13px 28px;border:none;border-radius:2px;
  background:var(--brand-ink);color:var(--brand);cursor:pointer;transition:transform .2s}
.subform button:hover{transform:translateY(-2px)}
.subform .hp{position:absolute;left:-9999px}
.subnote{font-size:12.5px;line-height:1.55;color:color-mix(in srgb,var(--brand-ink) 60%,transparent);
  margin-top:12px;max-width:56ch}
.subnote a{color:#eaa982}

/* the same form on a paper background */
.onpaper .subform input[type=email]{border-color:var(--field-border);background:#fff;color:var(--ink)}
.onpaper .subform input[type=email]::placeholder{color:var(--grey)}
.onpaper .subform input[type=email]:focus{border-color:var(--ink)}
.onpaper .subform button{background:var(--accent);color:#fff}
.onpaper .subnote{color:var(--grey)}
.onpaper .subnote a{color:var(--accent)}

/* ---------- hero measure ----------
   The v1 rule caps the headline at 16ch, which was right for the short payoff it
   was written for ("Someone has to sell it."). The current headline is roughly
   five times longer, and 16ch turns it into a tall narrow column that reads as a
   phone screen stretched across a desktop. Wider measure, smaller type. */
.hero-copy h1{
  max-width:min(1000px, 94%);
  font-size:clamp(31px,5.2vw,60px);
  line-height:1.08;
}
.hero-copy h1 span{margin-top:2px}
.hero-copy p{max-width:60ch}
@media(max-width:720px){
  .hero-copy h1{font-size:clamp(28px,7.4vw,40px);max-width:22ch}
  .hero-copy p{max-width:44ch}
}