/* ============================================
   3HTS · Over ons X
   Cinematic about pagina met dramatic hero + belofte + values + brief + certificaten
   ============================================ */

/* ============================================
   HERO — cinematic donker, "Vakmensen · Eigen ploeg"
   ============================================ */
.about-hero-x{
  position:relative;
  padding:108px 0 60px;
  background:linear-gradient(180deg,#0d1117 0%,#161b22 60%,#0d1117 100%);
  color:#fff;
  overflow:hidden;
}

/* Floating blobs */
.about-hero-x-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.about-hero-x-bg span{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.45;
  pointer-events:none;
}
.about-hero-x-bg span:nth-child(1){
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(232,100,26,.55),transparent 70%);
  top:-120px;left:-100px;
  animation:abxFloat1 22s ease-in-out infinite;
}
.about-hero-x-bg span:nth-child(2){
  width:420px;height:420px;
  background:radial-gradient(circle,rgba(80,140,200,.4),transparent 70%);
  top:25%;right:-100px;
  animation:abxFloat2 26s ease-in-out infinite;
}
.about-hero-x-bg span:nth-child(3){
  width:340px;height:340px;
  background:radial-gradient(circle,rgba(180,80,200,.32),transparent 70%);
  bottom:-100px;left:35%;
  animation:abxFloat3 20s ease-in-out infinite;
}
@keyframes abxFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(140px,80px) scale(1.2)}
}
@keyframes abxFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-120px,-90px) scale(1.15)}
}
@keyframes abxFloat3{
  0%,100%{transform:translate(0,0) scale(.9)}
  50%{transform:translate(-180px,-100px) scale(1.1)}
}

/* Mesh */
.about-hero-x-mesh{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 90%);
  opacity:.5;
  animation:abxMeshDrift 50s linear infinite;
}
@keyframes abxMeshDrift{
  0%{background-position:0 0,0 0}
  100%{background-position:72px 72px,72px 72px}
}

/* Beams */
.about-hero-x-beam{
  position:absolute;width:1px;height:160%;
  background:linear-gradient(180deg,transparent 0%,rgba(232,100,26,.55) 50%,transparent 100%);
  z-index:1;pointer-events:none;
}
.about-hero-x-beam:nth-of-type(1){left:18%;top:-30%;transform:rotate(14deg);animation:abxBeam 8s ease-in-out infinite}
.about-hero-x-beam:nth-of-type(2){left:82%;top:-30%;transform:rotate(-12deg);animation:abxBeam 10s ease-in-out infinite 1.5s}
@keyframes abxBeam{
  0%,100%{opacity:.15}
  50%{opacity:.65}
}

/* Sparkles */
.about-hero-x-sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}
.about-hero-x-sparkles i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.9),0 0 12px rgba(232,100,26,.7);
  opacity:0;
}
.about-hero-x-sparkles i:nth-child(1){top:14%;left:12%;animation:abxTwinkle 3s ease-in-out infinite}
.about-hero-x-sparkles i:nth-child(2){top:24%;left:88%;animation:abxTwinkle 4s ease-in-out infinite .8s}
.about-hero-x-sparkles i:nth-child(3){top:60%;left:6%;animation:abxTwinkle 3.5s ease-in-out infinite 1.6s}
.about-hero-x-sparkles i:nth-child(4){top:72%;left:94%;animation:abxTwinkle 4.5s ease-in-out infinite 2.4s}
.about-hero-x-sparkles i:nth-child(5){top:42%;left:50%;animation:abxTwinkle 3.2s ease-in-out infinite 3.2s}
.about-hero-x-sparkles i:nth-child(6){top:84%;left:34%;animation:abxTwinkle 4s ease-in-out infinite .4s}
.about-hero-x-sparkles i:nth-child(7){top:18%;left:65%;animation:abxTwinkle 3.8s ease-in-out infinite 1.2s}
@keyframes abxTwinkle{
  0%,100%{opacity:0;transform:scale(.5)}
  50%{opacity:1;transform:scale(1.4)}
}

/* Wireframe ambacht-iconen */
.about-hero-x-shapes{position:absolute;inset:0;pointer-events:none;z-index:1}
.about-hero-x-shapes svg{
  position:absolute;
  fill:none;stroke-width:1.4;
}
.about-hero-x-shapes svg:nth-child(1){
  top:10%;left:5%;width:140px;height:140px;
  stroke:rgba(232,100,26,.22);
  animation:abxRotate 28s linear infinite;
}
.about-hero-x-shapes svg:nth-child(2){
  bottom:8%;right:5%;width:120px;height:120px;
  stroke:rgba(80,160,255,.22);
  animation:abxRotate 22s linear infinite reverse;
}
.about-hero-x-shapes svg:nth-child(3){
  top:55%;right:10%;width:90px;height:90px;
  stroke:rgba(232,100,26,.18);
  animation:abxRotate 20s linear infinite;
}
@keyframes abxRotate{
  to{transform:rotate(360deg)}
}

.about-hero-x-inner{
  position:relative;z-index:5;
  max-width:1200px;width:100%;
  margin:0 auto;padding:0 var(--pad-x);
  display:flex;flex-direction:column;align-items:center;gap:22px;
  text-align:center;
}

.about-hero-x-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  background:rgba(232,100,26,.1);
  border:1px solid rgba(232,100,26,.25);
  border-radius:99px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  font-weight:700;color:var(--orange-light);text-transform:uppercase;
  opacity:0;transform:translateY(20px);
  animation:abxFadeUp .9s var(--ease-out) .2s both;
}
.about-hero-x-kicker::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px rgba(232,100,26,.8);
  animation:pxPulse 1.4s ease-in-out infinite;
}

.about-hero-x-inner h1{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(30px,3.2vw,48px);line-height:.92;
  letter-spacing:-.02em;color:#fff;
  text-transform:uppercase;margin:0;
  max-width:14ch;
  opacity:0;transform:translateY(20px);
  animation:abxFadeUp .9s var(--ease-out) .35s both;
}
.about-hero-x-inner h1 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;letter-spacing:.005em;
}
@keyframes abxFadeUp{
  to{opacity:1;transform:none}
}

.about-hero-x-lead{
  font-size:16px;line-height:1.55;
  color:rgba(255,255,255,.78);
  max-width:60ch;margin:0;
  opacity:0;transform:translateY(20px);
  animation:abxFadeUp .9s var(--ease-out) .5s both;
}

.about-hero-x-actions{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px;
  opacity:0;transform:translateY(20px);
  animation:abxFadeUp .9s var(--ease-out) .65s both;
}

.about-hero-x-stats{
  display:flex;gap:32px;flex-wrap:wrap;justify-content:center;margin-top:18px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
  width:100%;max-width:780px;
  opacity:0;transform:translateY(20px);
  animation:abxFadeUp .9s var(--ease-out) .8s both;
}
.about-hero-x-stat{
  display:flex;flex-direction:column;gap:4px;align-items:center;
}
.about-hero-x-stat-num{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(22px,2.2vw,32px);line-height:1;
  color:var(--orange);
}
.about-hero-x-stat-lbl{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.55);text-transform:uppercase;
  font-weight:600;
}

/* Outline button op donker */
.about-hero-x .btn-outline{
  color:#fff !important;
  border-color:rgba(255,255,255,.3) !important;
  background:rgba(255,255,255,.04) !important;
}
.about-hero-x .btn-outline:hover{
  color:#fff !important;
  border-color:var(--orange) !important;
  background:rgba(232,100,26,.08) !important;
}

/* ============================================
   BELOFTE-STRIP — lichte tussen-band
   ============================================ */
.about-promise{
  background:var(--paper);
  padding:60px 0;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.about-promise::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(232,100,26,.06) 0%,transparent 60%);
}
.about-promise-inner{
  position:relative;z-index:1;
  max-width:1200px;margin:0 auto;padding:0 var(--pad-x);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);
}
@media(max-width:780px){
  .about-promise-inner{grid-template-columns:1fr}
}
.about-promise-pillar{
  padding:30px 28px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;
  position:relative;
  transition:background .3s var(--ease-out);
}
.about-promise-pillar:last-child{border-right:0}
@media(max-width:780px){
  .about-promise-pillar{border-right:0;border-bottom:1px solid var(--line)}
  .about-promise-pillar:last-child{border-bottom:0}
}
.about-promise-pillar:hover{background:rgba(232,100,26,.03)}
.about-promise-pillar::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--orange) 0%,#B53F00 100%);
  transition:width .6s var(--ease-out);
}
.about-promise-pillar:hover::before{width:100%}
.about-promise-icon{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:rgba(232,100,26,.08);
  border:1px solid rgba(232,100,26,.18);
  color:var(--orange);
  margin-bottom:6px;
  transform:rotate(45deg);transition:transform .5s var(--ease-out);
}
.about-promise-pillar:hover .about-promise-icon{transform:rotate(225deg)}
.about-promise-icon svg{transform:rotate(-45deg);width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .5s var(--ease-out)}
.about-promise-pillar:hover .about-promise-icon svg{transform:rotate(-225deg)}
.about-promise-label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  color:var(--orange);text-transform:uppercase;font-weight:700;
}
.about-promise-title{
  font-family:var(--f-display);font-weight:600;
  font-size:20px;line-height:1.15;
  color:var(--ink);margin:2px 0 4px;
}
.about-promise-title em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);
}
.about-promise-pillar p{
  font-size:15px;line-height:1.55;color:var(--ink-2);margin:0;
}

/* ============================================
   VALUES — drie principes als cinematic cards
   ============================================ */
.about-values-x{
  position:relative;
  padding:80px 0;
  background:linear-gradient(180deg,#0d1117 0%,#161b22 50%,#0d1117 100%);
  color:#fff;
  overflow:hidden;
}
.about-values-x::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 15% 30%,rgba(232,100,26,.1),transparent 50%),
    radial-gradient(circle at 85% 70%,rgba(80,140,200,.08),transparent 50%);
}
.about-values-x::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/80px 80px,
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/80px 80px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 90%);
  opacity:.6;
}
.about-values-x > .container{position:relative;z-index:1}
.about-values-x .sec-head .h-section,
.about-values-x .sec-head h2{color:#fff}
.about-values-x .sec-head .lead{color:rgba(255,255,255,.7)}
.about-values-x .sec-head .kicker{
  background:rgba(232,100,26,.1);
  border-color:rgba(232,100,26,.25);
  color:var(--orange-light);
}

.about-values-x-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-top:50px;
}
@media(max-width:980px){.about-values-x-grid{grid-template-columns:1fr;gap:20px}}

.about-value-card{
  position:relative;
  background:linear-gradient(160deg,rgba(22,27,34,.92) 0%,rgba(13,17,23,.95) 100%);
  border:1px solid rgba(255,255,255,.08);
  padding:48px 32px 32px;
  display:flex;flex-direction:column;gap:18px;
  overflow:hidden;
  transition:transform .55s var(--ease-out),border-color .35s var(--ease-out),box-shadow .55s var(--ease-out);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}
.about-value-card::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,transparent 0%,var(--orange) 50%,#ff8a3d 100%);
  box-shadow:0 0 14px rgba(232,100,26,.7);
  transition:width .8s var(--ease-out);
  z-index:2;
}
.about-value-card:hover::before{width:100%}
.about-value-card::after{
  content:"";position:absolute;bottom:-50%;right:-30%;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,100,26,.16) 0%,transparent 70%);
  opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.about-value-card:hover::after{
  opacity:1;
  transform:translate(-20px,-30px);
}
.about-value-card:hover{
  transform:translateY(-8px);
  border-color:rgba(232,100,26,.4);
  box-shadow:0 32px 70px rgba(0,0,0,.55),0 0 0 1px rgba(232,100,26,.2),0 0 60px rgba(232,100,26,.15);
}

.about-value-num{
  position:absolute;top:-20px;right:18px;
  font-family:var(--f-display);font-weight:700;
  font-size:150px;line-height:1;letter-spacing:-.04em;
  color:rgba(232,100,26,.12);
  -webkit-text-stroke:1px rgba(232,100,26,.22);
  pointer-events:none;user-select:none;
  transition:color .5s var(--ease-out),transform .6s var(--ease-out);
}
.about-value-card:hover .about-value-num{
  color:rgba(232,100,26,.2);
  transform:translateY(-6px) scale(1.05);
}
.about-value-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  color:var(--orange-light);text-transform:uppercase;font-weight:700;
  position:relative;z-index:1;
}
.about-value-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px rgba(232,100,26,.6);
}
.about-value-card h4{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(20px,1.6vw,26px);line-height:1.15;
  color:#fff;margin:0;position:relative;z-index:1;
}
.about-value-card h4 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;
}
.about-value-card p{
  font-size:15px;line-height:1.65;color:rgba(255,255,255,.7);
  margin:0;position:relative;z-index:1;flex:1;
}

/* ============================================
   BRIEF VAN EIGENAAR — cinematic light panel
   ============================================ */
.about-letter-x{
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  padding:90px 0;
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.about-letter-x::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 50% 0%,rgba(232,100,26,.06) 0%,transparent 60%);
}

/* Decoratieve grote quote-marks */
.about-letter-x-quote{
  position:absolute;
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  font-size:clamp(180px,28vw,420px);line-height:.8;
  color:rgba(232,100,26,.07);
  pointer-events:none;user-select:none;
}
.about-letter-x-quote.tl{top:20px;left:30px}
.about-letter-x-quote.br{bottom:-100px;right:30px;transform:scaleX(-1)}

.about-letter-x-inner{
  position:relative;z-index:1;
  max-width:780px;margin:0 auto;padding:0 var(--pad-x);
}

.about-letter-x-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  background:rgba(232,100,26,.08);
  border:1px solid rgba(232,100,26,.2);
  border-radius:99px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  font-weight:700;color:var(--orange);text-transform:uppercase;
  margin-bottom:24px;
}
.about-letter-x-kicker::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px rgba(232,100,26,.5);
}

.about-letter-x-title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(22px,2.2vw,34px);line-height:.95;
  letter-spacing:-.02em;color:var(--ink);
  text-transform:uppercase;margin:0 0 40px;
}
.about-letter-x-title em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;
}

.about-letter-x-body{
  font-size:16px;line-height:1.7;color:var(--ink-2);
}
.about-letter-x-body p{margin:0 0 20px}
.about-letter-x-body p:first-of-type{
  font-family:var(--f-italic);font-style:italic;
  font-size:1.18em;line-height:1.55;color:var(--ink);
}
.about-letter-x-body p:first-of-type::before{
  content:"\201C";
  font-family:var(--f-italic);font-size:2em;line-height:0;
  color:var(--orange);
  margin-right:6px;
  vertical-align:-.15em;
}

/* Het sluitteken aan het einde van het citaat. Er stond alleen een teken
   aan het begin, waardoor het citaat open bleef staan. Toegevoegd 17-09-2026. */
.about-letter-x-body p:first-of-type::after{
  content:"\201D";
  font-family:var(--f-italic);font-size:2em;line-height:0;
  color:var(--orange);
  margin-left:4px;
  vertical-align:-.15em;
}

/* Signature card */
.about-letter-x-sign{
  margin-top:40px;
  padding:24px 28px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-left:3px solid var(--orange);
  display:flex;flex-direction:column;gap:4px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.about-letter-x-sign-name{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  font-size:28px;line-height:1.1;color:var(--ink);
}
.about-letter-x-sign-role{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  color:var(--mute);text-transform:uppercase;font-weight:600;
}

/* ============================================
   CERTIFICATEN — cinematic donker grid
   ============================================ */
.about-certs-x{
  position:relative;
  padding:80px 0;
  background:linear-gradient(180deg,#0d1117 0%,#161b22 50%,#0d1117 100%);
  color:#fff;
  overflow:hidden;
}
.about-certs-x::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 75% 30%,rgba(232,100,26,.1),transparent 50%);
}
.about-certs-x::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/80px 80px,
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/80px 80px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 90%);
  opacity:.5;
}
.about-certs-x > .container{position:relative;z-index:1}
.about-certs-x .sec-head .h-section{color:#fff}
.about-certs-x .sec-head .lead{color:rgba(255,255,255,.7)}
.about-certs-x .sec-head .kicker{
  background:rgba(232,100,26,.1);
  border-color:rgba(232,100,26,.25);
  color:var(--orange-light);
}

.about-certs-x-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:40px;
}
@media(max-width:900px){.about-certs-x-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.about-certs-x-grid{grid-template-columns:1fr}}

.about-cert-badge{
  position:relative;
  padding:26px 24px;
  background:linear-gradient(160deg,rgba(22,27,34,.85) 0%,rgba(13,17,23,.92) 100%);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:18px;
  transition:transform .4s var(--ease-out),border-color .35s var(--ease-out),box-shadow .4s var(--ease-out);
  overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.about-cert-badge::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--orange) 0%,#ff8a3d 100%);
  transition:width .6s var(--ease-out);
}
.about-cert-badge:hover::before{width:100%}
.about-cert-badge:hover{
  transform:translateY(-4px);
  border-color:rgba(232,100,26,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 30px rgba(232,100,26,.12);
}

.about-cert-icon{
  flex-shrink:0;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(232,100,26,.1);
  border:1px solid rgba(232,100,26,.3);
  border-radius:50%;
  color:var(--orange);
  transition:transform .5s var(--ease-out),background .35s var(--ease-out);
}
.about-cert-badge:hover .about-cert-icon{
  transform:rotate(360deg);
  background:rgba(232,100,26,.2);
}
.about-cert-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.about-cert-info{flex:1;display:flex;flex-direction:column;gap:4px}
.about-cert-name{
  font-family:var(--f-display);font-weight:700;
  font-size:18px;line-height:1.15;color:#fff;
}
.about-cert-desc{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:rgba(255,255,255,.55);text-transform:uppercase;font-weight:600;
}

/* Bottom note */
.about-certs-x-note{
  margin-top:32px;padding:18px 24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--orange);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.about-certs-x-note p{
  margin:0;font-size:15px;line-height:1.55;
  color:rgba(255,255,255,.75);max-width:50ch;
}
.about-certs-x .btn-outline{
  color:#fff !important;
  border-color:rgba(255,255,255,.3) !important;
  background:rgba(255,255,255,.04) !important;
}
.about-certs-x .btn-outline:hover{
  color:#fff !important;
  border-color:var(--orange) !important;
  background:rgba(232,100,26,.08) !important;
}


/* ------------------------------------------------------------------
   Op verzoek van Tim en Jeffrey gaan de drie ronddraaiende tekeningen in de
   banner uit, dus het tandwiel, het helmpje en de sleutel. Ze blijven wel
   in de pagina staan, alleen onzichtbaar. Zo blijft de opmaak hierboven
   kloppen, die kiest ze namelijk op volgorde. Knip je er een weg, dan
   schuift de volgende in zijn plek en krijgt die kleur. 16-09-2026.
   ------------------------------------------------------------------ */
.about-hero-x-shapes{ display:none !important; }

/* Over ons begint sinds 13-10-2026 direct met het verhaal van Tim. Het donkere
   bovenste vak is op zijn verzoek weg ("het hele vak"). Het verhaal schuift
   daarom omhoog en heeft ruimte nodig onder de vaste menubalk. */
.about-letter-x.about-letter-x--eerst{padding-top:calc(var(--hts-menu-hoogte, 81px) + 64px)!important}
@media(max-width:768px){.about-letter-x.about-letter-x--eerst{padding-top:calc(var(--hts-menu-hoogte, 73px) + 44px)!important}}