/* Buildspoke — paginalayouts voor de meerdelige site.
   Hergebruikt de bestaande tokens, knoppen, kleuren en diagonale overgangen.
   Geen redesign: dezelfde donkere premium look, mountain-decor en ritme. */

/* ---- Page hero (donkere band bovenaan, zoals contact/featured-case) ---- */
.page-hero{position:relative;isolation:isolate;color:#fff;padding:138px var(--gutter) 104px;
  background:#101724 url('assets/rock-landscape.webp') center 30%/cover no-repeat}
.page-hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,#0f1420f2,#111724ee 55%,#111724cc);pointer-events:none}
.page-hero-inner{position:relative;z-index:2;max-width:760px}
.page-hero .eyebrow{color:var(--lavender);margin-bottom:12px}
.page-hero h1{font-size:clamp(38px,4.3vw,64px);line-height:1.0;letter-spacing:-.046em}
.page-hero h1 em{font-style:normal;color:var(--lavender)}
.page-hero-intro{font-size:clamp(15px,1.25vw,18px);line-height:1.45;color:#dfe1ec;margin-top:20px;max-width:56ch}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:11px;color:#9aa0b4;
  letter-spacing:.02em;margin-bottom:20px}
.breadcrumb a{color:#b9bdcd}.breadcrumb a:hover{color:#fff}
.breadcrumb span[aria-hidden]{color:#5a6075}
.breadcrumb>span:last-child{color:#e7e8f0}

/* ---- Lichte content-body met diagonale bovenrand (zoals light-world) ---- */
.page-body{position:relative;isolation:isolate;z-index:2;margin-top:-52px;
  padding:64px var(--gutter) 96px;background:none}
.page-body::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(145deg,#fff 18%,#f7f7f9 64%,#f0f0f4);
  clip-path:polygon(0 19px,9% 0,63% 32px,78% 5px,100% 20px,100% 100%,0 100%)}
.page-body>*{position:relative;z-index:1}
.page-body>*+*{margin-top:60px}

/* generieke sectiekop binnen de body */
.block-head{max-width:620px;margin-bottom:28px}
.block-head h2{font-size:clamp(28px,2.9vw,42px)}
.block-head>p:not(.eyebrow){font-size:15px;line-height:1.55;max-width:48ch;margin-top:12px}

/* lopende tekst */
.prose{max-width:62ch}
.prose p{font-size:16px;line-height:1.6;color:var(--muted);margin-top:16px}
.prose p:first-child{margin-top:0}
.prose p strong{color:var(--ink);font-weight:600}

/* twee kolommen: tekst + "wat je krijgt"-kaart */
.detail-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(30px,5vw,64px);align-items:start}
.detail-aside{border:1px solid var(--line);background:#ffffffee;border-radius:12px;
  padding:26px 26px 24px;box-shadow:0 10px 28px #111b2906}
.detail-aside h3{font-size:16px;letter-spacing:-.01em;margin-bottom:6px}
.detail-aside .aside-sub{font-size:12px;color:var(--muted);margin:0 0 16px}
.checklist{list-style:none;margin:0;padding:0;color:var(--muted);font-size:14px;line-height:1.45}
.checklist li{position:relative;padding-left:24px;margin-bottom:12px}
.checklist li:last-child{margin-bottom:0}
.checklist li::before{content:'✓';position:absolute;left:0;top:0;color:var(--purple);font-weight:600}
.aside-price{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.aside-price .amount{font-size:30px;line-height:1.05;letter-spacing:-.045em;font-weight:600}
.aside-price .amount small{font-size:11px;color:var(--muted);font-weight:400;margin-left:7px}
.aside-price p{font-size:12px;color:var(--muted);margin-top:7px}

/* benefit-rij (zoals principles, maar met korte uitleg) */
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.benefits dt{font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.benefits dd{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--muted);max-width:26ch}

/* ---- Diensten-overzicht: kaarten die naar detailpagina's linken ---- */
.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.offer{display:grid;grid-template-columns:48px 1fr;gap:16px 18px;align-items:start;
  border:1px solid var(--line);background:#ffffffee;border-radius:13px;padding:24px 24px 22px;
  box-shadow:0 8px 24px #111b2905;transition:border-color .18s,box-shadow .18s,transform .18s}
.offer:hover{border-color:#d2c4f7;box-shadow:0 12px 30px #4e35740e;transform:translateY(-2px)}
.offer-icon{grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:linear-gradient(145deg,#fff,#f4f0ff);box-shadow:inset 0 1px 0 #fff,0 3px 9px #4331660b}
.offer-icon .icon{width:28px;height:28px}
.offer h3{font-size:21px;line-height:1.15}
.offer p{grid-column:2;font-size:14px;line-height:1.5;margin-top:8px}
.offer ul{grid-column:2;list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;font-size:12px}
.offer li{background:#f0ecf8;color:#665b7a;border:1px solid #e8e1f2;padding:5px 9px;border-radius:6px}
.offer .offer-link{grid-column:2;display:inline-flex;align-items:center;gap:12px;margin-top:16px;
  color:var(--purple);font-size:13px;font-weight:600;min-height:28px}

/* ---- Over ons: oprichters ---- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
.member{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start}
.member-photo{width:96px;height:96px;border-radius:14px;object-fit:cover;background:
  linear-gradient(145deg,#ece6fb,#dcd2f6);display:grid;place-items:center;color:#8a79c9;
  font-size:30px;font-weight:600;letter-spacing:-.03em;border:1px solid #e3dcf4}
.member h3{font-size:21px;line-height:1.1}
.member .role{color:var(--purple);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin:5px 0 0}
.member p{font-size:14px;line-height:1.55;margin-top:12px;max-width:40ch}
.placeholder-note{margin-top:26px;font-size:12px;line-height:1.5;color:#7a7f8e;
  background:#f4f2fb;border:1px dashed #d6cdf0;border-radius:9px;padding:13px 15px;max-width:62ch}
.team-solo{grid-template-columns:1fr;max-width:620px}
.team-solo .member{grid-template-columns:190px 1fr;gap:34px;align-items:center}
.team-solo .member-photo{width:190px;height:190px;border-radius:18px}
.team-solo .member p{max-width:none}
@media(max-width:600px){
  .team-solo .member{grid-template-columns:130px 1fr;gap:18px;align-items:start}
  .team-solo .member-photo{width:130px;height:130px;border-radius:16px}
}
.prose p.biz-note{font-size:13px;color:#8a8f9e;margin-top:20px}
.prose p.biz-note strong{color:var(--ink)}

/* ---- CTA-band (donker, diagonaal, hergebruikt knoppen) ---- */
.cta-band{position:relative;isolation:isolate;color:#fff;z-index:3;margin-top:-46px;
  padding:92px var(--gutter) 80px}
.cta-band::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(95deg,#111724f5,#141a2af2),#101724 url('assets/rock-landscape.webp') center bottom/cover no-repeat;
  clip-path:polygon(0 0,52% 14px,86% 40px,100% 6px,100% 100%,0 100%)}
.cta-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:30px 48px;align-items:center}
.cta-copy .eyebrow{color:var(--lavender)}
.cta-copy h2{font-size:clamp(28px,3vw,44px)}
.cta-copy>p{font-size:15px;line-height:1.5;color:#d2d6e0;max-width:46ch;margin-top:12px}
.cta-actions{display:flex;flex-wrap:wrap;gap:13px}
.cta-band .ghost{border-color:#7580985c;background:#ffffff12;color:#f3f2fb}

/* ---- rijkere footer ---- */
.footer-sub{display:flex;flex-wrap:wrap;gap:18px;width:100%;order:4;font-size:11px;
  padding-top:16px;margin-top:4px;border-top:1px solid #222a3b}
.footer-sub a{color:#aeb4c3;display:inline-flex;align-items:center;min-height:30px}
.footer-sub a:hover{color:#fff}
.footer-mail{color:#bfc5d2;border-bottom:1px solid #ffffff2b}
.footer-mail:hover{color:#fff}

/* ---- enkele case op werk-pagina ---- */
.work-note{font-size:13px;line-height:1.6;color:var(--muted);max-width:58ch}

/* ---- contactpagina: donkere sectie onder de absolute header ---- */
.contact-page{padding-top:134px}
.contact-page .breadcrumb a{color:#b9bdcd}
@media(max-width:850px){.contact-page{padding-top:112px}}
@media(max-width:600px){.contact-page{padding-top:100px}}

@media(max-width:1150px){
  .page-hero{padding:124px var(--gutter) 92px}
  .detail-split{grid-template-columns:1fr;gap:34px}
  .detail-aside{max-width:520px}
}
@media(max-width:850px){
  .page-hero{padding:118px 6% 84px}
  .offer-grid{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr;gap:20px}
  .benefits dd{max-width:none}
  .team{grid-template-columns:1fr;gap:30px}
  .cta-inner{grid-template-columns:1fr;gap:22px}
}
@media(max-width:600px){
  .page-hero{padding:104px 6% 78px}
  .page-hero h1{font-size:clamp(34px,10vw,46px)}
  .page-body{padding:52px 6% 84px;margin-top:-40px}
  .page-body::before{clip-path:polygon(0 12px,16% 0,100% 26px,100% 100%,0 100%)}
  .page-body>*+*{margin-top:48px}
  .offer{grid-template-columns:44px 1fr;gap:14px 16px;padding:20px}
  .member{grid-template-columns:72px 1fr;gap:16px}
  .member-photo{width:72px;height:72px;font-size:24px}
  .cta-band{padding:78px 6% 68px;margin-top:-36px}
  .cta-band::before{clip-path:polygon(0 0,60% 12px,100% 30px,100% 100%,0 100%)}
}