/* LUXE-LAAG voor de subpagina's (diensten, cases, 404). Zelfde lettertype als de homepage:
   'Verso Display'. Cijfers en euroteken vallen terug op Raleway. */
@font-face{
  font-family:'Verso Display';
  src:url('/fonts/display.woff2') format('woff2'), url('/fonts/display.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0020-002F,U+003A-007E,U+00A0-20AB,U+20AD-FFFF;
}

/* Grote koppen in Verso Display, één gewicht, geen accentkleur in de kop */
.svc-hero h1, .sec-title, .prose h2, .cta-band h2, .other-services-title,
.cw-title, .cw-copy .panel.text h2, .cw-next strong{
  font-family:'Verso Display','Raleway',sans-serif !important;
  font-weight:400 !important;
  letter-spacing:-.005em !important;
}
.svc-hero h1{ font-size:clamp(2.8rem,6.4vw,5rem) !important; line-height:1 !important; }
.sec-title{ font-size:clamp(2rem,4.2vw,3.2rem) !important; line-height:1.05 !important; }
.prose h2{ font-size:clamp(1.8rem,3.4vw,2.7rem) !important; line-height:1.08 !important; }
.cta-band h2{ font-size:clamp(2rem,4.4vw,3.4rem) !important; line-height:1.05 !important; }

/* Achtergrond: niet pure zwart. De shader (#case-bg) wordt een textuur boven de pagina-achtergrond,
   zoals op de homepage. Dezelfde donkerblauwe basis als de rest van de site. */
#case-bg{ opacity:.20 !important; }
:root{ --bg:#111c23; --cw-bg:#111c23; }
@media (prefers-reduced-motion:reduce){ #case-bg{ opacity:.14 !important; } }

/* ===== Kenmerken: geen kaarten met iconen, maar een redactionele lijst.
   Elke regel: haarlijn erboven, titel links in Verso Display, uitleg rechts. Hover: lijn en titel worden zand. ===== */
.feat-grid, .feat-grid--3{ display:block !important; margin-top:clamp(28px,4vw,48px) !important; border-bottom:1px solid rgba(247,249,251,.14); }
.feat{
  display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); column-gap:clamp(28px,5vw,80px); align-items:baseline;
  background:none !important; border:0 !important; border-top:1px solid rgba(247,249,251,.14) !important; border-radius:0 !important;
  padding:clamp(20px,2.2vw,30px) 0 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  transform:none !important; position:relative; transition:border-color .4s ease !important;
}
.feat .ic{ display:none !important; }
.feat h3{ margin:0 !important; font-family:'Verso Display','Raleway',sans-serif !important; font-weight:400 !important; font-size:clamp(20px,1.9vw,28px) !important; letter-spacing:-.005em !important; line-height:1.15 !important; transition:color .4s ease; }
.feat p{ margin:0 !important; font-size:clamp(15px,1.05vw,17px) !important; line-height:1.65 !important; max-width:56ch; }
.feat::after{ content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:#e3b97e; transition:width .7s cubic-bezier(.16,1,.3,1); }
.feat:hover::after{ width:100%; }
.feat:hover h3{ color:#e3b97e; }

/* ===== Werkwijze: geen genummerde kaarten, maar één tijdlijn. Een doorlopende haarlijn met per stap een zandkleurig punt erop. ===== */
.steps{
  position:relative; display:grid !important; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important; gap:clamp(24px,3vw,44px) !important;
  margin-top:clamp(36px,4vw,56px) !important; padding-top:32px; border-top:1px solid rgba(247,249,251,.2);
}
.step{ background:none !important; border:0 !important; border-radius:0 !important; padding:0 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; position:relative; }
.step::before{
  content:"" !important; counter-increment:step; position:absolute; top:-37px; left:0; width:9px; height:9px; border-radius:50%;
  background:#e3b97e; box-shadow:0 0 0 5px #111c23; margin:0 !important; font-size:0 !important;
}
.step h3{ margin:0 0 8px !important; font-family:'Verso Display','Raleway',sans-serif !important; font-weight:400 !important; font-size:clamp(19px,1.6vw,24px) !important; letter-spacing:-.005em !important; }
.step p{ font-size:clamp(14px,1vw,16px) !important; line-height:1.6 !important; }

@media (max-width:760px){
  .feat{ grid-template-columns:1fr; row-gap:8px; }
  .steps{ grid-template-columns:1fr !important; border-top:0; padding-top:0; padding-left:26px; border-left:1px solid rgba(247,249,251,.2); gap:28px !important; }
  .step::before{ top:6px; left:-31px; }
}

/* ===== Andere diensten: geen kaartjes, maar een lijst met haarlijnen in twee kolommen (zelfde taal als de kenmerken) ===== */
.other-services-list{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; column-gap:clamp(28px,5vw,80px) !important; row-gap:0 !important; border-top:1px solid rgba(247,249,251,.14); }
.other-services-list li{ border-bottom:1px solid rgba(247,249,251,.14); }
.other-services-list a{
  display:flex !important; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 !important;
  border:0 !important; border-radius:0 !important; background:none !important;
  font-family:'Verso Display','Raleway',sans-serif !important; font-weight:400 !important; font-size:clamp(18px,1.5vw,22px) !important;
  color:var(--text) !important; transition:color .3s ease, padding-left .4s cubic-bezier(.16,1,.3,1) !important;
}
.other-services-list a:hover, .other-services-list a:focus-visible{ color:#e3b97e !important; padding-left:8px !important; }
.other-services-title{ font-family:'Verso Display','Raleway',sans-serif !important; font-weight:400 !important; font-size:clamp(22px,2vw,30px) !important; }

/* ===== Slot-CTA: geen afgerond glasblok met verloop, maar een open vlak tussen twee haarlijnen ===== */
.cta-band{
  background:none !important; border:0 !important; border-top:1px solid rgba(247,249,251,.14) !important; border-bottom:1px solid rgba(247,249,251,.14) !important;
  border-radius:0 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding:clamp(48px,7vw,96px) 0 !important;
}
@media (max-width:760px){ .other-services-list{ grid-template-columns:1fr !important; } }

/* casepagina's: blok 'Vindbaar gebouwd' (zelfde look als .panel.text, kleinere kop) */
.panel.seo{ margin-top:clamp(28px,3vw,44px); }
.panel.seo h2{ margin:0 0 14px; font-family:'Verso Display','Raleway',sans-serif; font-weight:400; font-size:clamp(22px,2vw,30px); line-height:1.15; }
.panel.seo p{ margin:0; color:var(--cw-muted,rgba(244,243,255,.56)); font-size:15px; line-height:1.7; max-width:44ch; }