:root{
  --ink:#0d1210;
  --muted:#66716b;
  --line:#d9dfdc;
  --green:#19b874;
  --paper:#f7faf8;
  --dark:#07110c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    linear-gradient(rgba(13,18,16,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,18,16,.025) 1px,transparent 1px),
    #f8faf9;
  background-size:40px 40px;
  font-family:Arial,Helvetica,sans-serif;
}
img{display:block;max-width:100%}
a{color:inherit}
.examples-shell{width:min(100% - 64px,1380px);margin-inline:auto}
.examples-hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);
  align-items:end;
  gap:64px;
  padding-top:88px;
  padding-bottom:78px;
}
.examples-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  color:#087b4b;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.examples-kicker::before{content:"";width:26px;height:2px;background:var(--green)}
.examples-hero h1{
  max-width:900px;
  margin:0;
  font-size:clamp(54px,7.4vw,112px);
  line-height:.92;
  letter-spacing:0;
}
.examples-hero p{
  max-width:560px;
  margin:28px 0 0;
  color:var(--muted);
  font-size:20px;
  line-height:1.65;
}
.examples-intro-note{
  padding:26px 0 4px 28px;
  border-left:1px solid var(--line);
}
.examples-intro-note strong{display:block;margin-bottom:12px;font-size:17px}
.examples-intro-note p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.examples-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding-bottom:100px;
}
.example-card{
  --card-accent:#205f3a;
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  box-shadow:0 20px 55px rgba(12,24,17,.08);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;
}
.example-card:hover{
  transform:translateY(-7px);
  border-color:color-mix(in srgb,var(--card-accent) 40%,var(--line));
  box-shadow:0 32px 70px rgba(12,24,17,.14);
}
.example-card[data-theme="tech"]{--card-accent:#075fa8}
.example-card[data-theme="bouw"]{--card-accent:#d76a16}
.example-card[data-theme="business"]{--card-accent:#9b7a34}
.example-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#dde4e0}
.example-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 48%,rgba(5,10,7,.54));
}
.example-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.example-card:hover .example-card-media img{transform:scale(1.035)}
.example-index{
  position:absolute;
  z-index:1;
  top:20px;
  left:20px;
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:50%;
  color:#fff;
  background:rgba(7,12,9,.28);
  font-size:12px;
  font-weight:900;
  backdrop-filter:blur(8px);
}
.example-tone{
  position:absolute;
  z-index:1;
  right:20px;
  bottom:18px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.example-card-body{display:grid;grid-template-columns:1fr auto;gap:28px;padding:32px}
.example-card-copy small{color:var(--card-accent);font-size:11px;font-weight:900;text-transform:uppercase}
.example-card-copy h2{margin:12px 0 12px;font-size:clamp(30px,3vw,46px);line-height:1.02;letter-spacing:0}
.example-card-copy p{max-width:540px;margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.example-link{
  align-self:end;
  display:inline-flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
}
.example-link span{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  color:#fff;
  background:var(--card-accent);
  transition:transform .3s ease;
}
.example-card:hover .example-link span{transform:translateX(4px)}
.examples-system{
  color:#fff;
  background:var(--dark);
}
.examples-system-inner{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:80px;
  align-items:center;
  padding-top:84px;
  padding-bottom:84px;
}
.examples-system h2{max-width:600px;margin:0;font-size:clamp(38px,5vw,70px);line-height:1}
.examples-system-copy{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.examples-system-copy article{padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.examples-system-copy strong{display:block;margin-bottom:10px;color:#8ce2ba;font-size:13px}
.examples-system-copy p{margin:0;color:#aab8b0;font-size:14px;line-height:1.65}
.examples-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  padding-top:74px;
  padding-bottom:74px;
}
.examples-cta h2{max-width:750px;margin:0;font-size:clamp(34px,4.8vw,66px);line-height:1}
.examples-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 26px;
  border-radius:999px;
  color:#fff;
  background:#141817;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
}
.examples-reveal{opacity:1;transform:none}
body.examples-ready .examples-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.16,1,.3,1);
}
body.examples-ready .examples-reveal.is-visible{opacity:1;transform:none}
@media(max-width:980px){
  .examples-hero{grid-template-columns:1fr;gap:34px}
  .examples-intro-note{max-width:620px}
  .examples-grid{grid-template-columns:1fr}
  .examples-system-inner{grid-template-columns:1fr;gap:44px}
}
@media(max-width:720px){
  .examples-shell{width:min(100% - 28px,1380px)}
  .examples-hero{padding-top:58px;padding-bottom:48px}
  .examples-hero h1{font-size:clamp(45px,14vw,66px)}
  .examples-hero p{font-size:17px}
  .examples-intro-note{padding-left:20px}
  .examples-grid{gap:16px;padding-bottom:68px}
  .example-card-body{grid-template-columns:1fr;padding:24px}
  .example-link{justify-content:space-between}
  .examples-system-inner{padding-top:64px;padding-bottom:64px}
  .examples-system-copy{grid-template-columns:1fr}
  .examples-cta{align-items:flex-start;flex-direction:column;padding-top:56px;padding-bottom:56px}
  .examples-cta a{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  body.examples-ready .examples-reveal{opacity:1;transform:none}
}