/* ==========================================================================
   DHB Over ons

   Overgenomen uit het ontwerp dhb-over-ons-sectie-abstract: zes foto's losjes
   rond de titel, elk licht gedraaid en op een eigen hoogte, maar in een vast
   raster van twaalf kolommen. Daardoor oogt het los zonder rommelig te worden.

   De lettertypes van het ontwerp (Elms Sans, Satoshi) zijn onze eigen DHB Elms
   en DHB Satoshi geworden; die laadt de plugin zelf.
   ========================================================================== */

.dhb-abs{
  --b-bg:#F4F1EE;--b-ink:#161616;--b-muted:#6B6360;--b-orange:#FF4500;--b-deep:#D63A00;--b-slot:#E9E4DF;--b-line:#16161614;
  --b-head:'DHB Elms','Satoshi',system-ui,sans-serif;--b-font:'DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --b-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  padding:clamp(52px,5vw,78px) clamp(20px,4vw,56px) clamp(56px,5.5vw,84px);
  background:var(--b-bg);color:var(--b-ink);font:500 16px/1.65 var(--b-font);
  -webkit-font-smoothing:antialiased
}
.dhb-abs::before{content:"";position:absolute;z-index:-1;left:-12%;bottom:-25%;width:60%;height:75%;pointer-events:none;background:radial-gradient(closest-side,#ff450017,transparent)}
.dhb-abs::after{content:"";position:absolute;z-index:-1;right:-8%;top:-15%;width:45%;height:60%;pointer-events:none;background:radial-gradient(closest-side,#1616160a,transparent)}
.dhb-abs *,.dhb-abs *::before,.dhb-abs *::after{box-sizing:border-box}
:where(.dhb-abs) :is(h2,p){margin:0}
.dhb-abs a{color:inherit;text-decoration:none}
.dhb-abs img{display:block;max-width:none;border:0}

/* ---------- raster ---------- */
.dhb-abs-canvas{
  position:relative;width:min(100%,1280px);margin-inline:auto;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(58px,auto);gap:clamp(10px,1.2vw,18px)
}

/* ---------- tekst ---------- */
.dhb-abs-title{grid-column:4/10;grid-row:1/3;align-self:center;justify-self:center;text-align:center}
/* Elke ingevoerde regel blijft één regel: de letter schaalt mee met het scherm zodat
   "Elk pand verdient" in de titelkolom past (3,2vw: op 1920 60 px, op 1440 46 px). */
.dhb-abs h2{font-family:var(--b-head);font-size:clamp(34px,3.2vw,60px);font-weight:800;line-height:1.02;letter-spacing:-.04em}
.dhb-abs h2 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;white-space:nowrap}
.dhb-abs h2 .ln>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--b-ease)}
.dhb-abs h2 .ln:nth-child(2)>span{transition-delay:.12s}
.dhb-abs h2 .ln:nth-child(3)>span{transition-delay:.24s}
.dhb-abs.in h2 .ln>span,.dhb-abs:not(.is-js) h2 .ln>span{transform:none}
.dhb-abs h2 em{font-style:normal;background:linear-gradient(100deg,#E83E00,var(--b-orange) 60%,#FF7A3D);-webkit-background-clip:text;background-clip:text;color:transparent}
.dhb-abs h2 .dot{color:var(--b-orange)}
.dhb-abs-body{grid-column:4/10;grid-row:3;align-self:start;justify-self:center;max-width:46ch;text-align:center;font-size:16px;line-height:1.7;color:var(--b-muted);margin-top:6px}
.dhb-abs-foot{grid-column:3/11;grid-row:4;align-self:start;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:6px}

/* ---------- foto's ---------- */
.dhb-abs-cell{position:relative;min-width:0;will-change:transform}
.dhb-abs-ph{
  position:relative;width:100%;overflow:hidden;border-radius:22px;background:var(--b-slot);
  box-shadow:0 34px 64px -44px #16161699;
  transition:transform .7s var(--b-ease),box-shadow .5s
}
.dhb-abs-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.8s var(--b-ease)}
.dhb-abs-ph::after{content:"";position:absolute;inset:0;background:var(--b-bg);transform-origin:top;transition:transform 1.2s var(--b-ease)}
.dhb-abs.in .dhb-abs-ph::after{transform:scaleY(0)}
.dhb-abs.in .dhb-abs-ph img,.dhb-abs:not(.is-js) .dhb-abs-ph img{transform:scale(1)}
.dhb-abs:not(.is-js) .dhb-abs-ph::after{display:none}
.dhb-abs-ph:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 44px 80px -40px #161616a6}
.dhb-abs-ph:hover img{transform:scale(1.05)!important}
.dhb-abs-ph .slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;text-align:center;font-size:12.5px;font-weight:700;color:#16161659;
  background:radial-gradient(60% 60% at 50% 40%,#ff450014,transparent 70%),repeating-linear-gradient(135deg,#16161608 0 10px,transparent 10px 20px)}
.dhb-abs-ph .slot svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dhb-abs-ph img+.slot{display:none}

/* zoekerhoeken */
.dhb-abs-vf{position:absolute;inset:11px;pointer-events:none;z-index:2}
.dhb-abs-vf i{position:absolute;width:18px;height:18px;border:0 solid var(--b-orange);opacity:0;transition:opacity .35s,transform .55s var(--b-ease)}
.dhb-abs-vf i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px;border-top-left-radius:11px;transform:translate(-7px,-7px)}
.dhb-abs-vf i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px;border-top-right-radius:11px;transform:translate(7px,-7px)}
.dhb-abs-vf i:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:11px;transform:translate(-7px,7px)}
.dhb-abs-vf i:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:11px;transform:translate(7px,7px)}
.dhb-abs-ph:hover .dhb-abs-vf i{opacity:1;transform:none}

/* plaatsing: dit maakt het losjes, maar wel voorspelbaar */
.dhb-abs-c1{grid-column:1/3;grid-row:1/3;transform:translateY(2%)}
.dhb-abs-c1 .dhb-abs-ph{aspect-ratio:3/4;transform:rotate(-2.5deg)}
.dhb-abs-c2{grid-column:1/3;grid-row:4/6;transform:translate(8%,6%)}
.dhb-abs-c2 .dhb-abs-ph{aspect-ratio:1;transform:rotate(4deg)}
.dhb-abs-c3{grid-column:4/6;grid-row:5/7;transform:translateY(16%)}
.dhb-abs-c3 .dhb-abs-ph{aspect-ratio:4/3;transform:rotate(1.5deg)}
.dhb-abs-c4{grid-column:11/13;grid-row:1/4;transform:translateY(4%)}
.dhb-abs-c4 .dhb-abs-ph{aspect-ratio:5/7;transform:rotate(2.5deg)}
.dhb-abs-c5{grid-column:9/11;grid-row:5/7;transform:translateY(10%)}
.dhb-abs-c5 .dhb-abs-ph{aspect-ratio:1;transform:rotate(-4.5deg)}
.dhb-abs-c6{grid-column:11/13;grid-row:4/6;transform:translate(-6%,18%)}
.dhb-abs-c6 .dhb-abs-ph{aspect-ratio:1;transform:rotate(-2deg)}


/* knop */
.dhb-abs a.dhb-abs-btn,.dhb-abs a.dhb-abs-btn:hover,.dhb-abs a.dhb-abs-btn:focus,.dhb-abs-btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:14px;padding:8px 8px 8px 26px;border-radius:999px;
  background:linear-gradient(180deg,#FF6128,var(--b-orange));color:#fff;
  font-family:var(--b-head);font-size:17px;font-weight:800;white-space:nowrap;
  box-shadow:0 20px 44px -18px #ff4500b3,inset 0 1px 0 #ffffff40;
  transition:transform .3s var(--b-ease),box-shadow .3s
}
.dhb-abs-btn .c{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;background:#fff;color:var(--b-orange);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.dhb-abs-btn .c svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dhb-abs-btn::before{content:"";position:absolute;z-index:-1;right:8px;top:50%;width:46px;height:46px;border-radius:50%;background:#1f1d1c;transform:translateY(-50%) scale(0);transition:transform .6s var(--b-ease)}
.dhb-abs-btn:hover::before{transform:translateY(-50%) scale(18)}
.dhb-abs-btn:hover{transform:translateY(-2px)}
.dhb-abs-btn:hover .c{transform:translateX(3px)}
.dhb-abs-btn:focus-visible{outline:2px solid var(--b-ink);outline-offset:4px}
.dhb-abs-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.dhb-abs-proof span{display:inline-flex;align-items:center;gap:9px;font-size:15px;color:#3a3532}
.dhb-abs-proof svg{width:16px;height:16px;fill:none;stroke:var(--b-orange);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* binnenkomen */
.dhb-abs.is-js .dhb-abs-rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--b-ease),transform .9s var(--b-ease)}
.dhb-abs.is-js.in .dhb-abs-rv{opacity:1;transform:none}
.dhb-abs.is-js .dhb-abs-body{transition-delay:.25s}
.dhb-abs.is-js .dhb-abs-foot{transition-delay:.35s}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .dhb-abs-canvas{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto}
    .dhb-abs-title{grid-column:1/7;grid-row:1;transform:none}
  .dhb-abs-body{grid-column:1/7;grid-row:2;transform:none;margin-top:8px}
  .dhb-abs-cell{transform:none!important}
  .dhb-abs-ph{transform:none!important;aspect-ratio:1!important}
  .dhb-abs-c1{grid-column:1/3;grid-row:3}
  .dhb-abs-c2{grid-column:3/5;grid-row:3}
  .dhb-abs-c3{grid-column:5/7;grid-row:3}
  .dhb-abs-c4{grid-column:1/3;grid-row:4}
  .dhb-abs-c5{grid-column:3/5;grid-row:4}
  .dhb-abs-c6{grid-column:5/7;grid-row:4}
  .dhb-abs-foot{grid-column:1/7;grid-row:5;transform:none;margin-top:10px}
}
/* ---------- mobiel ---------- */
@media (max-width:640px){
  .dhb-abs-canvas{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dhb-abs-title,.dhb-abs-body,.dhb-abs-foot{grid-column:1/3}
  /* Op telefoon hooguit drie regels: de letter past bij "Elk pand verdient" op 360 px. */
  .dhb-abs h2{font-size:clamp(27px,8.6vw,44px)}
  .dhb-abs h2 .ln{white-space:normal}
  .dhb-abs-c1{grid-column:1/2;grid-row:3}
  .dhb-abs-c2{grid-column:2/3;grid-row:3;align-self:center}
  .dhb-abs-c3{grid-column:1/2;grid-row:4}
  .dhb-abs-c4{grid-column:2/3;grid-row:4}
  .dhb-abs-c5{grid-column:1/2;grid-row:5}
  .dhb-abs-c6{grid-column:2/3;grid-row:5;align-self:center}
  .dhb-abs-foot{grid-row:6;flex-direction:column;align-items:flex-start;gap:16px}
  .dhb-abs-proof{flex-direction:column;justify-content:flex-start;gap:9px}
  .dhb-abs-btn{width:100%;justify-content:space-between}
  .dhb-abs-ph{border-radius:18px}
  .dhb-abs-ph,.dhb-abs-c1 .dhb-abs-ph,.dhb-abs-c2 .dhb-abs-ph,.dhb-abs-c3 .dhb-abs-ph,.dhb-abs-c4 .dhb-abs-ph,.dhb-abs-c5 .dhb-abs-ph,.dhb-abs-c6 .dhb-abs-ph{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .dhb-abs *,.dhb-abs *::before,.dhb-abs *::after{animation:none!important;transition:none!important}
  .dhb-abs.is-js .dhb-abs-rv{opacity:1;transform:none}
}

/* ---------- Kleuren vastzetten ----------
   Een Elementor-kit stijlt kale koppen en alinea's, en dat weegt zwaarder dan
   de enkele klassen hierboven. De wrapper staat hier dubbel zodat deze regels
   het wel winnen. De titel staat per regel in twee geneste spans - dat is nodig
   voor het omhoogschuiven - en die erven uitdrukkelijk van de kop. */
.dhb-abs.dhb-abs h2{color:var(--b-ink)}
.dhb-abs.dhb-abs h2 .ln,
.dhb-abs.dhb-abs h2 .ln>span{color:inherit}
.dhb-abs.dhb-abs h2 em{color:transparent}
.dhb-abs.dhb-abs h2 .dot{color:var(--b-orange)}
.dhb-abs.dhb-abs .dhb-abs-body{color:var(--b-muted)}
.dhb-abs.dhb-abs .dhb-abs-proof span{color:#3a3532}
.dhb-abs.dhb-abs .dhb-abs-btn,
.dhb-abs.dhb-abs .dhb-abs-btn:hover{color:#fff}
.dhb-abs.dhb-abs .dhb-abs-btn .c{color:var(--b-orange);background:#fff}
.dhb-abs.dhb-abs .dhb-abs-ph .slot{color:#16161659}