*{box-sizing:border-box;margin:0}
:root{--f:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:Georgia,"Times New Roman",serif}
body{font-family:var(--f);line-height:1.55;color:#1a1a1a;background:#fff}
a{color:inherit}
.idx{position:sticky;top:0;z-index:9;display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;padding:.7rem 1.5rem;background:#111;color:#eee;font-size:.85rem}
.idx a{text-decoration:none;opacity:.75}.idx a:hover,.idx a:focus-visible{opacity:1;text-decoration:underline}
.idx strong{margin-right:auto}
.label{font:600 .75rem/1 var(--f);letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-bottom:2rem}
section{overflow:hidden;padding:4rem clamp(1.2rem,6vw,6rem);min-height:80vh}
.idx-f{padding:2rem;text-align:center;font-size:.8rem;color:#666}
:focus-visible{outline:3px solid #2563eb;outline-offset:3px}

/* 1 neutraal split */
.t1{background:#f4f2ee}
.t1-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center;max-width:1200px;margin:auto}
.kicker{display:block;font-size:.85rem;font-weight:600;letter-spacing:.04em;color:#5b5b55;margin-bottom:1rem}
.t1 h2{font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:1.2rem}
.t1-text p{max-width:46ch;color:#444;margin-bottom:1.2rem}
.t1 ul{list-style:none;padding:0;margin-bottom:2rem;display:grid;gap:.5rem}
.t1 li::before{content:"";display:inline-block;width:.5rem;height:.5rem;background:#1f4d3a;border-radius:50%;margin-right:.7rem}
.btn{display:inline-block;background:#1f4d3a;color:#fff;padding:.95rem 1.6rem;border-radius:999px;text-decoration:none;font-weight:600;transition:transform .2s,background .2s}
.btn:hover{background:#17392b;transform:translateY(-2px)}
.t1-visual{aspect-ratio:4/5;border-radius:1.5rem;display:grid;place-items:center;color:#fff9;font-size:.9rem;background:linear-gradient(160deg,#cfd8cf,#8aa093 55%,#4a6657)}

/* 2 editorial grid */
.t2{background:#fbf9f4;font-family:var(--serif)}
.t2 .label{font-family:var(--f)}
.t2-head{display:grid;grid-template-columns:1fr 3fr;gap:2rem;border-top:2px solid #1a1a1a;padding-top:1rem;margin-bottom:2.5rem}
.t2-head span{font:600 .8rem var(--f);letter-spacing:.06em;text-transform:uppercase}
.t2-head h2{font-weight:400;font-size:clamp(2rem,5vw,4rem);line-height:1.05}
.t2-head em{color:#7a4b2a}
.t2-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(140px,auto);gap:1.2rem}
.t2-grid .a{grid-column:1/6;grid-row:1/4}.t2-grid .b{grid-column:6/9;grid-row:1/2}
.t2-grid .c{grid-column:9/13;grid-row:1/3}.t2-grid .d{grid-column:6/9;grid-row:2/4}
.t2-grid .e{grid-column:9/13;grid-row:3/4}.t2-grid .f{grid-column:1/13;grid-row:4/6}
.t2-grid article{border-top:1px solid #1a1a1a;padding-top:.8rem}
.t2-grid h3{font-weight:400;font-size:1.4rem;margin-bottom:.4rem}
.t2-grid p{font:.95rem/1.5 var(--f);color:#444}
.t2-grid figure{display:flex;flex-direction:column;gap:.4rem}
.ph{flex:1;min-height:140px;background:#c9c2b2}
.p1{background:linear-gradient(135deg,#8b9a73,#4e5c3c)}.p2{background:linear-gradient(135deg,#d9b8a3,#a46a52)}.p3{background:linear-gradient(90deg,#c9c2b2,#e8e1cf 50%,#b9ad8f)}
figcaption{font:italic .8rem var(--serif);color:#555}

/* 3 bold headline */
.t3{background:#e6ff3d;color:#0b0b0b}
.t3-h{display:flex;flex-direction:column;font-size:clamp(4rem,17vw,16rem);line-height:.82;letter-spacing:-.06em;text-transform:uppercase;font-weight:900;margin:1rem 0 2.5rem}
.t3-h span:last-child{padding-left:.4em;-webkit-text-stroke:2px #0b0b0b;color:transparent}
.t3-row{display:flex;gap:2rem;justify-content:space-between;align-items:center;flex-wrap:wrap;border-top:3px solid #0b0b0b;padding-top:1.5rem}
.t3-row p{max-width:34ch;font-weight:600;font-size:1.2rem}
.btn-inv{background:#0b0b0b;color:#e6ff3d;padding:1rem 1.8rem;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.03em;transition:transform .2s}
.btn-inv:hover{transform:translate(4px,-4px);box-shadow:-4px 4px 0 #0b0b0b55}
.t3-stats{display:flex;gap:3rem;margin-top:2.5rem;flex-wrap:wrap}
.t3-stats dt{font-size:3rem;font-weight:900;line-height:1}.t3-stats dd{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}

/* 4 bento */
.t4{background:#eef1f5}
.t4 h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.02em;max-width:18ch;margin-bottom:2rem}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:1rem}
.cell{background:#fff;border-radius:1.25rem;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #dde2ea}
.cell.big{grid-column:span 2;grid-row:span 2;background:#14213d;color:#fff;border:0}.cell.big p{opacity:.8;margin-top:.6rem}
.cell.big h3{font-size:1.8rem;line-height:1.1}
.cell.accent{background:#ff7a1a;color:#1b0f02;border:0}
.cell.wide{grid-column:span 4}
.cell b{font-size:2.2rem;letter-spacing:-.02em}.cell span{color:#555;font-size:.9rem}
.cell ol{display:flex;gap:1rem;list-style:none;padding:0;margin-top:.8rem;counter-reset:s;flex-wrap:wrap}
.cell li{counter-increment:s}.cell li::before{content:counter(s);display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#14213d;color:#fff;font-size:.8rem;margin-right:.5rem}
.cell{transition:transform .25s}.cell:hover{transform:translateY(-4px)}

/* 5 spotlight */
.t5{background:radial-gradient(60% 60% at 70% 30%,#5a2a3a 0,#1c1017 55%,#0d080b);color:#f5ece6;display:grid;align-content:center}
.t5 .label{color:#f5ece6}
.t5-inner{max-width:720px}
.t5 .kicker{color:#e8b4a0}
.t5 h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,5.5rem);line-height:1}
.t5 em{color:#ffb38a}
.t5 p{margin:1.4rem 0 2rem;max-width:44ch;opacity:.85}
.t5-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn-glow{background:#ffb38a;color:#2a120a;padding:.95rem 1.7rem;border-radius:.6rem;text-decoration:none;font-weight:700;box-shadow:0 0 0 0 #ffb38a66;transition:box-shadow .3s}
.btn-glow:hover{box-shadow:0 0 32px 4px #ffb38a66}
.ghost{padding:.95rem 1.4rem;border:1px solid #f5ece666;border-radius:.6rem;text-decoration:none}
.ghost:hover{background:#ffffff14}

@media(max-width:800px){
 .t1-grid{grid-template-columns:1fr}.t1-visual{aspect-ratio:16/10}
 .t2-head{grid-template-columns:1fr}
 .t2-grid{display:flex;flex-direction:column}.t2-grid figure{min-height:200px}
 .bento{grid-template-columns:1fr 1fr}.cell.big,.cell.wide{grid-column:span 2}.cell.big{grid-row:auto}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}