/* clustertriage-v2.css: the 2026 redesign additions (home, assurance, methodology, about, appointment). */
/* ClusterTriage redesign v2 — page hierarchy, leadership and Method integration */

/* Brand lock-up: make ClusterTriage itself a little larger so the wordmark
   and the strapline read as one balanced block. Do not stretch the strapline. */
.brand.ct-brand{display:inline-flex;flex-direction:column;align-items:flex-start;width:max-content;min-width:max-content;line-height:1.04}
.brand.ct-brand b{display:block;font-size:21.75px;letter-spacing:-.025em;white-space:nowrap}
.brand.ct-brand small{display:block;margin-top:5px;font-family:var(--mono);font-size:8.2px;font-weight:500;line-height:1.1;letter-spacing:0;white-space:nowrap;color:var(--band-dim)}
.navlinks a[aria-current="page"]{color:var(--band-ink)}
.navlinks a[aria-current="page"]:after{right:0}

/* Equal proof rows: headings and supporting lines remain aligned even when a heading wraps. */
.trust.ct-trust .trust-inner{grid-template-columns:repeat(4,1fr);align-items:stretch}
.trust.ct-trust .cred{min-width:0;display:grid;grid-template-rows:minmax(58px,auto) minmax(34px,auto);align-content:start}
.trust.ct-trust .cred b,.trust.ct-trust .cred i{align-self:start}

.page-hero{background:radial-gradient(58% 72% at 78% 24%,rgba(63,182,216,.13),transparent 72%),linear-gradient(135deg,var(--band),var(--band-op) 62%,var(--band-rule));color:var(--band-ink);padding:88px var(--gutter) 82px}
.page-hero-inner{max-width:var(--max);margin:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.65fr);gap:72px;align-items:end}
.page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,6.5vw,88px);line-height:.99;letter-spacing:-.045em;margin:0 0 26px;text-wrap:balance}
.page-hero h1 em{font-style:italic;color:var(--band-accent)}
.page-hero .hero-copy{font-size:18px;line-height:1.62;color:var(--band-dim);max-width:66ch;margin:0}
.page-hero-side{border-left:1px solid #ffffff2e;padding-left:28px}
.page-hero-side p{margin:0 0 20px;color:var(--band-dim);font-size:14px}
.page-hero-side strong{display:block;font-family:var(--serif);font-size:30px;font-weight:400;color:var(--band-ink);line-height:1.15;margin-bottom:7px}

.home-hero .hero-inner{grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr)}
.home-hero h1{font-size:clamp(54px,7vw,94px)}
.home-hero .assurance-visual{min-height:390px}
.home-services{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:22px minmax(78px,auto) minmax(94px,1fr) 24px;gap:14px;margin-top:44px;align-items:stretch}
.home-service{grid-row:1/-1;border:1px solid var(--rule);background:var(--surface);padding:30px;position:relative;text-decoration:none;color:var(--ink);display:grid;grid-template-rows:subgrid;align-content:start}
.home-service:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);transform:scaleX(.18);transform-origin:left;transition:transform .25s ease}
.home-service:hover:before{transform:scaleX(1)}
.home-service .n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent)}
.home-service h3{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.08;margin:24px 0 13px;align-self:start}
.home-service p{font-size:14px;color:var(--dim);margin:0;align-self:start}
.home-service .more{display:block;margin:0;font-family:var(--mono);font-size:10px;color:var(--accent);align-self:end}

.feature-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:68px;align-items:center}
.feature-copy h2{font-family:var(--serif);font-size:clamp(40px,5vw,64px);font-weight:400;line-height:1.03;letter-spacing:-.035em;margin:0 0 20px}
.feature-copy p{color:var(--dim);font-size:16px;max-width:58ch}
.feature-copy .actions{margin-top:25px}
.method-preview{background:var(--band);border:1px solid var(--band-rule);border-radius:14px;padding:22px;box-shadow:0 26px 70px rgba(10,16,36,.16)}
.method-preview-head{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--band-faint);padding-bottom:14px;border-bottom:1px solid var(--band-rule)}
.method-preview-flow{display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr;gap:8px;align-items:center;margin-top:17px}
.method-preview-flow .node{border:1px solid #ffffff27;background:#ffffff08;border-radius:7px;padding:13px;color:var(--band-ink);font-size:12px;min-height:78px}
.method-preview-flow .node b{display:block;font-size:13px;margin-bottom:3px}
.method-preview-flow .node small{color:var(--band-dim);font-size:9px}
.method-preview-flow .arrow{text-align:center;color:var(--band-accent);font-family:var(--mono)}

.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;align-items:stretch}
.benefit-card{border:1px solid var(--rule);background:var(--surface);padding:30px;min-height:270px;position:relative;display:grid;grid-template-rows:22px minmax(96px,auto) 1fr;align-content:start}
.benefit-card .n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent)}
.benefit-card h3{font-family:var(--serif);font-size:29px;font-weight:400;line-height:1.08;margin:24px 0 13px;align-self:start}
.benefit-card p{font-size:14px;color:var(--dim);margin:0;align-self:start}
.benefit-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);transform:scaleX(.18);transform-origin:left;transition:transform .25s ease}
.benefit-card:hover:before{transform:scaleX(1)}
.enterprise-band{background:var(--band);color:var(--band-ink);padding:82px var(--gutter)}
.enterprise-band-inner{max-width:var(--max);margin:auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.enterprise-band h2{font-family:var(--serif);font-size:clamp(40px,5vw,64px);font-weight:400;line-height:1.03;letter-spacing:-.035em;margin:0}
.enterprise-points{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--band-rule);border:1px solid var(--band-rule)}
.enterprise-point{background:var(--band);padding:25px;display:grid;grid-template-rows:minmax(27px,auto) 1fr}
.enterprise-point b{display:block;color:var(--band-ink);margin-bottom:7px}
.enterprise-point span{font-size:13px;color:var(--band-dim)}

.output-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px;align-items:stretch}
.output-card{border:1px solid var(--rule);background:var(--surface);text-decoration:none;color:var(--ink);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;display:grid;grid-template-rows:210px 1fr}
.output-card:hover{border-color:var(--accent);box-shadow:0 18px 42px rgba(10,16,36,.09)}
.output-card img{display:block;width:100%;height:210px;object-fit:cover;object-position:top;background:var(--ground);border-bottom:1px solid var(--rule)}
.output-card .inside{padding:18px;display:grid;grid-template-rows:18px minmax(31px,auto) 1fr;align-content:start}
.output-card .tag{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.output-card h3{font-size:17px;margin:7px 0 6px}
.output-card p{font-size:13px;color:var(--dim);margin:0}

.people-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:42px;align-items:stretch}
.person-card{border:1px solid var(--rule);background:var(--surface);padding:30px;display:grid;grid-template-columns:104px 1fr;gap:24px;align-items:start;height:100%}
.person-photo,.person-mark{width:96px;height:96px;border-radius:12px;border:1px solid var(--rule);background:var(--ground)}
.person-photo{display:block;object-fit:cover;object-position:center 22%}
.person-photo.hans{object-position:center 18%}
.person-mark{display:grid;place-items:center;background:var(--band);color:var(--band-accent);font-family:var(--mono);font-size:20px;letter-spacing:.04em;border-color:var(--band-rule)}
.person-copy{display:grid;grid-template-rows:18px 44px minmax(86px,1fr) 22px;align-content:start;height:100%}
.person-role{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:5px}
.person-card h3{font-family:var(--serif);font-size:29px;font-weight:400;margin:0 0 10px}
.person-card p{font-size:14px;color:var(--dim);margin:0 0 14px}
.person-card a{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--accent);text-decoration:none;align-self:end}
.person-card a:hover{text-decoration:underline}

.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:42px;align-items:stretch}
.profile-card{border:1px solid var(--rule);background:var(--surface);overflow:hidden;display:grid;grid-template-rows:auto 1fr;height:100%}
.profile-card .profile-head{display:grid;grid-template-columns:180px 1fr;min-height:220px;border-bottom:1px solid var(--rule)}
.profile-card .profile-photo{width:180px;height:100%;min-height:220px;object-fit:cover;object-position:center 18%;background:var(--ground)}
.profile-card .profile-photo-placeholder{width:180px;min-height:220px;display:grid;place-items:center;background:var(--band);color:var(--band-accent);font-family:var(--mono);font-size:34px;letter-spacing:.05em}
.profile-card .profile-title{padding:28px;align-self:center}
.profile-card .profile-role{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:7px}
.profile-card h3{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.05;margin:0 0 12px}
.profile-card .profile-sub{font-size:14px;color:var(--dim);margin:0}
.profile-card .profile-body{padding:28px;display:grid;grid-template-rows:minmax(190px,auto) minmax(102px,auto) 24px;align-content:start}
.profile-card .profile-copy{align-self:start}
.profile-card .profile-body p{font-size:14px;color:var(--dim);margin:0 0 14px}
.profile-card .profile-link{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--accent);text-decoration:none;align-self:end}
.profile-card .profile-link:hover{text-decoration:underline}
.profile-card .specialisations{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;align-content:flex-start}
.profile-card .specialisations span{font-family:var(--mono);font-size:10px;font-weight:500;border:1px solid var(--dim);background:var(--surface);padding:5px 8px;color:var(--ink)}

.methodology-shell{background:var(--ground);padding:70px var(--gutter) 90px}
.methodology-shell-inner{max-width:var(--max);margin:auto}
.methodology-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;margin-bottom:38px;align-items:start}
.methodology-intro h2{font-family:var(--serif);font-size:clamp(38px,4.5vw,60px);font-weight:400;line-height:1.04;letter-spacing:-.035em;margin:0}
.methodology-intro p{margin:0;color:var(--dim);font-size:16px;max-width:64ch}
.method-frame-wrap{border:1px solid var(--rule);background:#f4f7fa;border-radius:14px;padding:18px;box-shadow:0 24px 60px rgba(10,16,36,.08);overflow:hidden}
.method-frame{display:block;width:100%;border:0;min-height:950px;background:transparent}
.method-note{font-family:var(--mono);font-size:9px;color:var(--faint);margin:12px 2px 0;letter-spacing:.03em}
.about-story{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start}
.about-story h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,64px);line-height:1.03;letter-spacing:-.035em;margin:0}
.about-story p{font-size:16px;color:var(--dim);margin:0 0 16px}

@media(max-width:1050px){
  .page-hero-inner,.feature-split,.methodology-intro,.about-story,.enterprise-band-inner{grid-template-columns:1fr;gap:38px}
  .page-hero-side{border-left:0;border-top:1px solid #ffffff2e;padding:24px 0 0}
  .benefit-grid,.output-grid,.home-services{grid-template-columns:repeat(2,1fr)}
  .home-service{grid-row:auto;grid-template-rows:22px minmax(78px,auto) minmax(94px,1fr) 24px}
  .trust.ct-trust .trust-inner{grid-template-columns:repeat(2,1fr)}
  .profile-grid{grid-template-columns:1fr}
  .profile-card .profile-body{grid-template-rows:auto auto auto}
}
@media(max-width:700px){
  .brand.ct-brand b{font-size:20.5px}.brand.ct-brand small{font-size:7.8px}
  .page-hero{padding-top:66px}.page-hero h1{font-size:clamp(44px,12.5vw,62px)}
  .benefit-grid,.output-grid,.people-grid,.home-services,.trust.ct-trust .trust-inner,.enterprise-points{grid-template-columns:1fr}
  .trust.ct-trust .cred,.home-service,.benefit-card,.person-copy{grid-template-rows:auto}
  .home-service{grid-row:auto}
  .person-card{grid-template-columns:76px 1fr;padding:22px;gap:16px}.person-photo,.person-mark{width:70px;height:70px}.person-mark{font-size:16px}
  .profile-card .profile-head{grid-template-columns:120px 1fr;min-height:170px}.profile-card .profile-photo,.profile-card .profile-photo-placeholder{width:120px;min-height:170px}.profile-card .profile-title,.profile-card .profile-body{padding:20px}.profile-card h3{font-size:27px}
  .method-frame-wrap{padding:8px;border-radius:10px;margin-left:calc(var(--gutter) * -.45);margin-right:calc(var(--gutter) * -.45)}
  .method-preview-flow{grid-template-columns:1fr}.method-preview-flow .arrow{transform:rotate(90deg)}
}

/* Assurance: de jaarcyclus-tekening en de feitenkaarten (meting, rapport,
   naast wat u al heeft, afbakening). De tekening houdt een minimale breedte
   en schuift op een telefoon horizontaal, anders worden de labels onleesbaar. */
.cycle-figure{margin:48px 0 0;overflow-x:auto}
.cycle-figure svg{width:100%;min-width:760px;height:auto;display:block}
.cycle-figure figcaption{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:12px;text-align:center}
.fact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:44px;align-items:stretch}
.fact-grid.four{grid-template-columns:repeat(4,1fr)}
.fact-card{border:1px solid var(--rule);background:var(--ground);padding:26px 28px;border-radius:var(--ct-radius)}
.fact-card h3{font-size:17px;margin:0 0 12px}
.fact-card p{margin:0;font-size:14px;line-height:1.6;color:var(--dim)}
.fact-card ul{margin:0;padding-left:18px;font-size:14px;line-height:1.6;color:var(--dim);display:grid;gap:8px}
.fact-note{max-width:72ch;margin:26px auto 0;font-size:14px;line-height:1.6;color:var(--dim);text-align:center}
@media(max-width:1000px){.fact-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.fact-grid,.fact-grid.four{grid-template-columns:1fr}}

/* Hero headings (2026-09-18): one type scale for every hero including the
   home page, weight 500, the second line in accent colour but upright (no
   italics). On phones a smaller minimum so two-line headings do not wrap
   into three. */
.hero h1,.hero.mid h1,.page-hero h1,.assurance-hero h1,.home-hero h1{font-weight:500;font-size:clamp(40px,6vw,80px);line-height:.98;letter-spacing:-.035em}
.hero h1 em,.page-hero h1 em,.assurance-hero h1 em{font-style:normal;color:var(--band-accent)}
@media(max-width:800px){.hero h1,.hero.mid h1,.page-hero h1,.assurance-hero h1,.home-hero h1{font-size:clamp(38px,10.5vw,52px)}}

/* Appointment form (2026-09-18): readable field labels, sentence case in the
   body font instead of small grey mono capitals. */
.aanvraag label .lbl,.cta .aanvraag .lbl{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:8px}

/* Site-wide search (2026-09-18): the icon button in the header and the
   overlay that site.js builds on first use. Colours come from the tokens so
   the panel follows light and dark mode. */
.nav-actions .search{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:6px;color:var(--band-ink);opacity:.85;cursor:pointer}
.nav-actions .search:hover{opacity:1;background:#ffffff14}
.nav-actions .search svg{width:19px;height:19px}
@media(max-width:800px){.nav-actions .search{display:inline-flex}}
.zoeklaag{position:fixed;inset:0;z-index:120;background:rgba(8,14,20,.62);backdrop-filter:blur(2px);display:none;padding:min(12vh,90px) 16px 16px}
.zoeklaag.aan{display:block}
.zoekpaneel{max-width:720px;margin:0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:12px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);max-height:76vh;display:flex;flex-direction:column;overflow:hidden}
.zoekkop{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 18px;border-bottom:1px solid var(--rule)}
.zoekveld{flex:1;font:inherit;font-size:18px;border:0;outline:0;background:none;color:var(--ink);padding:10px 0}
.zoeksluit{font:inherit;font-size:26px;line-height:1;background:none;border:0;color:var(--faint);cursor:pointer;padding:4px 10px}
.zoeksluit:hover{color:var(--ink)}
.zoekstatus{margin:0;padding:10px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint)}
.zoeklijst{list-style:none;margin:0;padding:0 8px 8px;overflow:auto}
.zoeklijst a{display:block;padding:12px 10px;border-radius:8px;text-decoration:none;color:inherit}
.zoeklijst a:hover,.zoeklijst a:focus-visible{background:var(--sunk);outline:0}
.zoeksectie{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.zoeklijst b{display:block;font-weight:600;font-size:16px;line-height:1.3}
.zoeksnip{display:block;font-size:13.5px;line-height:1.5;color:var(--dim);margin-top:4px}

/* ---- veelgestelde vragen ------------------------------------------------ */
.vraag-index-blok h2{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
                     color:var(--faint);font-weight:400;margin:0 0 20px}
.vraag-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;
             counter-reset:vraag}
.vraag-index li{counter-increment:vraag;display:flex;gap:12px;align-items:baseline}
.vraag-index li:before{content:counter(vraag,decimal-leading-zero);font-family:var(--mono);font-size:11px;
                       color:var(--accent);flex:none}
.vraag-index a{color:var(--ink);text-decoration:none;font-size:16px;line-height:1.45;
               border-bottom:1px solid transparent}
.vraag-index a:hover{border-bottom-color:var(--accent)}
.vraag-groep{max-width:860px}
.vraag{border-top:1px solid var(--rule);padding:30px 0 6px}
.vraag h3{font-size:22px;font-weight:600;letter-spacing:-.012em;margin:0 0 14px;color:var(--ink);
          scroll-margin-top:110px}
.vraag p,.vraag ul{margin:0 0 14px;color:var(--dim);font-size:17px;line-height:1.65}
.vraag ul{padding-left:20px}
.vraag li{margin:0 0 10px}
.vraag li strong{color:var(--ink);font-weight:600}
.vraag p:last-child,.vraag ul:last-child{margin-bottom:0}
@media(max-width:800px){
  .vraag-index{grid-template-columns:1fr}
  .vraag h3{font-size:19px}
  .vraag p,.vraag ul{font-size:16px}
}

/* Page heroes start at the same height on every page. The two columns used to
   be bottom-aligned, so a taller side panel (the blog has four entries) pushed
   the heading and the copy down and the blog began lower than the rest. */
.page-hero-inner{align-items:start}
/* The rule beside the panel spans the whole hero, so it is the same line on
   every page whether the panel holds three entries or four. */
.page-hero-side{align-self:stretch}
/* A button row under the hero copy needs air; .hero-copy has no bottom margin
   on the page heroes. */
.page-hero .actions{margin-top:30px}
/* The sub-page heroes used 88px of top padding and the home hero 86px, which
   put the eyebrow two pixels apart. One value for both. */
.page-hero{padding-top:86px}
/* Every answer ends with a way back to the list of questions. */
.vraag .terug{display:inline-block;margin:6px 0 2px;font-family:var(--mono);font-size:11px;
              letter-spacing:.08em;color:var(--faint);text-decoration:none;
              border-bottom:1px solid transparent}
.vraag .terug:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- merkteken voor de woordmerk ----------------------------------------
   The tile from the favicon sits in front of the wordmark and is exactly as
   tall as the wordmark block, tagline included. Two rows, the tile spans
   both, so it shrinks with the wordmark when the tagline is hidden. */
.brand.ct-brand{display:inline-grid;grid-template-columns:auto auto;column-gap:11px;
                align-items:center;width:max-content}
.brand.ct-brand .brand-mark{grid-column:1;grid-row:1/3;width:38px;height:38px;border-radius:7px}
.brand.ct-brand b{grid-column:2;grid-row:1}
.brand.ct-brand small{grid-column:2;grid-row:2}
/* Under 800px the wordmark keeps its tagline but both shrink a little, so the
   tile follows: the text block measures 35 to 37px there. */
@media(max-width:800px){ .brand.ct-brand .brand-mark{width:36px;height:36px} }
/* Brand mark in the footer, next to the wordmark and the same height as that line. */
.ct-footer-brand .footer-mark{width:28px;height:28px;border-radius:5px;vertical-align:middle;margin-right:10px;position:relative;top:-1px}