/* ==========================================================================
   Solin Stukadoor — site.css
   Ontwerp: "strijklicht op pleisterwerk"
   Kleuren afgeleid uit het logo: turkoois #61C2D0 + diepblauw #12293F
   Digitale Brug webdesign studio
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* --- merk: diepblauw --------------------------------------------------
     Uit het logomerk. Draagt de donkere vlakken: hero, footer, CTA.        */
  --navy-900:#0A1A28;
  --navy-800:#12293F;
  --navy-700:#1B3D55;
  --navy-500:#35708C;

  /* --- merk: turkoois ---------------------------------------------------
     --accent-300 is de logokleur; die is te licht voor tekst op wit.
     Daarom twee diepere tinten voor knoppen en links op lichte vlakken,
     en de logokleur zelf uitsluitend op donkere vlakken.
       #0F7488 op wit .......... 5.4:1  (AA, ook voor kleine tekst)
       #61C2D0 op --navy-900 ... 7.5:1  (AA)                              */
  --accent:#0F7488;       /* VULLING: knop/badge, altijd witte tekst erop */
  --accent-700:#0B5B6B;
  --accent-300:#61C2D0;   /* = logo */
  --accent-050:#E8F5F7;
  /* INKT: accentkleurige tekst en iconen. Wisselt mee met de ondergrond,
     zie de regel onder 'donkere vlakken' verderop. */
  --accent-ink:var(--accent-700);

  /* --- oppervlak: pleistertinten --------------------------------------- */
  --plaster:#ECEAE5;      /* verse gipswand */
  --plaster-2:#E2DCD1;    /* zand-cement    */
  --white:#FFFFFF;
  --ink:#101A22;
  --steel:#5F6B76;
  --stone:#8C97A1;        /* neutrale punten op de kaart */
  --line:rgba(18,41,63,.15);
  --line-soft:rgba(18,41,63,.08);

  /* systeem */
  --wa:#25D366;
  --ok:#2E7D5B;
  --err:#B3392C;

  /* maat */
  --wrap:1200px;
  --wrap-narrow:820px;
  --r:14px;
  --r-sm:9px;
  --nav-h:106px;

  /* schaduw — laag en breed, als strijklicht */
  --sh-1:0 1px 2px rgba(10,26,40,.05), 0 6px 18px -8px rgba(10,26,40,.16);
  --sh-2:0 2px 4px rgba(10,26,40,.06), 0 22px 48px -22px rgba(10,26,40,.34);
  --sh-3:0 40px 80px -40px rgba(10,26,40,.55);

  --ease:cubic-bezier(.22,.68,.24,1);
}

/* --- donkere vlakken --------------------------------------------------
   Accentkleurige TEKST is op diepblauw onleesbaar in #0F7488. Daar geldt
   de logokleur. Knoppen houden hun eigen vulling: die zetten --bg zelf. */
.hero,.section--navy,.ftr,.cta,.hdr--over.hdr--light{--accent-ink:var(--accent-300)}
.hero :focus-visible,.section--navy :focus-visible,.ftr :focus-visible,
.cta :focus-visible{outline-color:var(--accent-300)}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px)}
body{
  margin:0;background:var(--plaster);color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:var(--navy-700);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:"Archivo",system-ui,sans-serif;font-stretch:118%;
  line-height:1.02;letter-spacing:-.022em;font-weight:800;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:clamp(64px,8vw,108px)}
.section--tight{padding-block:clamp(48px,6vw,76px)}
.section--plaster2{background:var(--plaster-2)}
.section--white{background:var(--white)}
.section--navy{background:var(--navy-800);color:#fff}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}

.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- 4. Typografie ------------------------------------------------ */
.eyebrow{
  display:inline-block;font-family:"Archivo",sans-serif;font-stretch:112%;
  font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:14px;
}
.h-xl{font-size:clamp(38px,6.4vw,74px)}
.h-lg{font-size:clamp(30px,4.4vw,48px)}
.h-md{font-size:clamp(22px,2.6vw,30px)}
.h-sm{font-size:clamp(18px,2vw,21px);font-weight:700}
.lead{font-size:clamp(17px,1.7vw,19.5px);line-height:1.6;color:var(--steel);max-width:60ch}
.section--navy .lead{color:rgba(255,255,255,.78)}
.muted{color:var(--steel);font-size:15px}
.sec-head{max-width:66ch;margin-bottom:clamp(30px,4vw,50px)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head .lead{margin-top:16px}
.sec-head--center .lead{margin-inline:auto}

/* ---------- 5. Knoppen --------------------------------------------------- */
.btn{
  --bg:var(--accent);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  padding:14px 24px;border-radius:var(--r-sm);cursor:pointer;
  font-family:"Archivo",sans-serif;font-stretch:110%;font-weight:700;font-size:15.5px;
  letter-spacing:.005em;text-align:center;
  transition:transform .18s var(--ease),background .18s,box-shadow .18s;
  box-shadow:var(--sh-1);
}
.btn:hover{--bg:var(--accent-700);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn--navy{--bg:var(--navy-700)}
.btn--navy:hover{--bg:var(--navy-800)}
.btn--ghost{--bg:transparent;--fg:var(--navy-700);--bd:var(--line)}
.btn--ghost:hover{--bg:rgba(18,41,63,.06);--fg:var(--navy-700);--bd:var(--navy-500)}
.section--navy .btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.34)}
.section--navy .btn--ghost:hover{--bg:rgba(255,255,255,.12);--fg:#fff}
/* lichte knop — goed zichtbaar op een donkere hero */
.btn--light{--bg:#F1EEE9;--fg:var(--navy-800);--bd:#F1EEE9}
.btn--light:hover{--bg:#fff;--fg:var(--navy-900);--bd:#fff}
.btn--wa{--bg:var(--wa)}
.btn--wa:hover{--bg:#1FB855}
.btn--lg{padding:17px 30px;font-size:16.5px}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ico--fill{fill:currentColor;stroke:none}

/* ---------- 6. Header ---------------------------------------------------- */
/* De koptekst wordt door JS opgebouwd. Zonder kleur is de balk in het
   eerste beeld doorzichtig en schemert de inhoud eronder door.
   :not(.hdr) zorgt dat deze regel stopt zodra JS de balk heeft gebouwd —
   anders wint hij (ID-selector) van .hdr--over en blijft de balk licht. */
#site-header:not(.hdr){background:var(--plaster)}
/* De kleurovergang blauw <-> pleister mag pas meedoen ná dat eerste beeld,
   anders fade't de balk bij elke paginalading zichtbaar in. site.js zet
   .hdr--anim in de frame erna. */
.hdr--anim{transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:90;background:var(--plaster);
  border-bottom:1px solid var(--line-soft);
}
.hdr__in{height:var(--nav-h);display:flex;align-items:center;gap:18px}
/* --- logo -------------------------------------------------------------
   Het logo is een beeld, geen gezette tekst: de slogan zit erin en de
   taal wisselt mee. Beide kleurvarianten staan in de HTML; hieronder
   bepaalt de ondergrond welke zichtbaar is. Twee <img> in plaats van
   een src-wissel voorkomt geflikker tijdens het scrollen.            */
.brand{display:flex;align-items:center;position:relative;
  /* flex-item mag NIET krimpen: doet hij dat wel, dan knijpt de globale
     regel img{max-width:100%} het logo horizontaal samen en klopt de
     verhouding niet meer. Op smalle schermen zorgen de media queries
     hieronder voor een lagere hoogte, dus breed wordt het daar niet. */
  flex:none}
.brand__logo{display:block;height:74px;width:auto;max-width:none;flex:none;transition:opacity .25s var(--ease)}
.brand__logo--onDark{position:absolute;left:0;top:50%;transform:translateY(-50%)}
/* standaard: vaste koptekst op een lichte balk -> donker logo */
.brand__logo--onDark{opacity:0}
.brand__logo--onLight{opacity:1}
/* zwevend over een donkere hero -> wit logo */
.hdr--over.hdr--light .brand__logo--onDark{opacity:1}
.hdr--over.hdr--light .brand__logo--onLight{opacity:0}
@media(max-width:1180px){.brand__logo{height:56px}}
@media(max-width:520px){.brand__logo{height:42px}}

/* in de footer staat het logo altijd op diepblauw */
.brand-slot{margin-bottom:18px}
.brand-slot .brand{position:static}
.brand-slot .brand__logo{height:46px}
.brand-slot .brand__logo--onDark{position:static;transform:none;opacity:1}
.brand-slot .brand__logo--onLight{display:none}

.nav{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav a{padding:9px 10px;border-radius:7px;font-size:14.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;
  transition:background .15s,color .15s}
.nav a:hover{background:rgba(18,41,63,.07);color:var(--navy-700)}
.nav a[aria-current="page"]{color:var(--navy-700);box-shadow:inset 0 -2.5px 0 var(--accent-ink)}

.hdr__act{display:flex;align-items:center;gap:10px}

/* taalkiezer */
.lang{display:flex;gap:2px;background:rgba(18,41,63,.07);border-radius:8px;padding:3px}
.lang button{border:0;background:none;cursor:pointer;padding:6px 10px;border-radius:6px;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.05em;
  color:var(--steel);transition:.15s}
.lang button:hover{color:var(--navy-700)}
.lang button[aria-pressed="true"]{background:var(--navy-700);color:#fff}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px}
.burger span{width:23px;height:2.5px;background:var(--navy-700);border-radius:2px;transition:.25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mnav{display:none;border-top:1px solid var(--line-soft);background:var(--white);padding:10px 22px 22px}
.mnav.open{display:block}
.mnav a{display:block;padding:14px 2px;font-weight:600;border-bottom:1px solid var(--line-soft)}
.mnav .btn{margin-top:16px}

@media(max-width:1180px){
  .nav{display:none}
  .burger{display:flex}
  .hdr__act .btn{display:none}
}

/* Op de homepage staat de offerte-knop al in de hero.
   De knop in de koptekst blijft daarom weg zolang de hero in beeld is,
   en verschijnt zodra je eroverheen scrollt. Zo staan er nooit twee. */
.hdr--over .hdr__act .btn{display:none}

/* koptekst staat vast bovenaan -> inhoud krijgt ruimte,
   maar de hero schuift er juist onderdoor zodat het beeld doorloopt */
main{padding-top:var(--nav-h)}
.hero--blend{margin-top:calc(-1 * var(--nav-h))}

/* ---------- 7. Hero — blauw vlak, beeld vloeit erin over --------------- */
.hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;
  background:
    radial-gradient(120% 85% at 88% 12%, #1B3D55 0%, transparent 62%),
    radial-gradient(90% 70% at 4% 0%, rgba(15,116,136,.14) 0%, transparent 60%),
    linear-gradient(168deg, #16334C 0%, #12293F 52%, #0A1A28 100%);
}
/* pleisterkorrel over het hele blauw — geeft het vlak textuur */
.hero__grain{position:absolute;inset:0;z-index:0;opacity:.14;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* --- het beeld: groot, maar vloeit aan alle kanten weg in het blauw ---
   Twee lagen op elkaar, elk met één verloop. Zo is er nergens een rand:
   de buitenste laag lost horizontaal op, de binnenste verticaal.
   (mask-composite wordt bewust vermeden — dat werkt niet in elke browser
   hetzelfde en gaf juist die zichtbare streep.)                        */
.hero__media{position:absolute;top:0;right:0;bottom:0;z-index:1;pointer-events:none;
  width:min(66%, 1040px);
  -webkit-mask-image:linear-gradient(90deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 14%, rgba(0,0,0,.22) 26%,
      rgba(0,0,0,.52) 40%, rgba(0,0,0,.82) 54%, #000 70%);
          mask-image:linear-gradient(90deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 14%, rgba(0,0,0,.22) 26%,
      rgba(0,0,0,.52) 40%, rgba(0,0,0,.82) 54%, #000 70%);
}
.hero__media-in{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 9%, #000 22%, #000 66%,
      rgba(0,0,0,.45) 92%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 9%, #000 22%, #000 66%,
      rgba(0,0,0,.45) 92%, rgba(0,0,0,0) 100%);
}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%;filter:saturate(.78) contrast(1.07) brightness(.9) hue-rotate(-6deg)}

/* blauwe waas ligt BINNEN dezelfde maskers, dus hij krijgt geen eigen rand */
.hero__wash{position:absolute;inset:0;display:block;
  background:linear-gradient(100deg,
    rgba(18,41,63,.88) 0%, rgba(18,41,63,.55) 26%,
    rgba(18,41,63,.20) 52%, rgba(16,36,55,.16) 76%, rgba(10,26,40,.36) 100%)}

.hero__in{position:relative;z-index:3;width:100%;
  padding-block:calc(var(--nav-h) + clamp(34px,6vh,72px)) clamp(84px,12vh,132px)}
.hero__copy{max-width:min(56%, 660px)}

.hero__eyebrow{color:#61C2D0;margin-bottom:16px}
.hero h1{font-size:clamp(38px,6.6vw,82px);font-weight:900;letter-spacing:-.035em;
  text-shadow:0 4px 40px rgba(6,14,24,.45)}
.hero h1 em{font-style:normal;color:var(--accent-ink);display:block}
.hero .lead{color:rgba(255,255,255,.86);margin-top:18px;max-width:44ch;
  text-shadow:0 2px 18px rgba(6,14,24,.5)}
.hero .btn-row{margin-top:28px}

.hero__pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.hero__pills li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:rgba(255,255,255,.92);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  padding:7px 14px;border-radius:100px}
.hero__pills li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-ink);flex:none}

/* onderrand vloeit in de volgende sectie */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:2;
  background:linear-gradient(180deg,transparent,var(--plaster));pointer-events:none}

@media(max-width:1000px){
  .hero__media{width:52%}
  .hero__copy{max-width:64%}
}
@media(max-width:760px){
  /* op de telefoon: beeld als brede band achter de tekst */
  .hero__media{width:100%;height:50%;top:auto;bottom:0;
    -webkit-mask-image:none;mask-image:none}
  .hero__media-in{
    -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 14%, rgba(0,0,0,.75) 34%, #000 52%,
      #000 84%, rgba(0,0,0,.4) 96%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 14%, rgba(0,0,0,.75) 34%, #000 52%,
      #000 84%, rgba(0,0,0,.4) 96%, rgba(0,0,0,0) 100%)}
  .hero__vid{object-position:center 34%}
  .hero__wash{background:linear-gradient(180deg,rgba(18,41,63,.8) 0%,rgba(18,41,63,.3) 40%,rgba(10,26,40,.6) 100%)}
  .hero__copy{max-width:100%}
  .hero__in{padding-block:calc(var(--nav-h) + clamp(14px,3vh,30px)) clamp(228px,32vh,320px)}
  .hero h1{font-size:clamp(33px,8vw,46px)}
  .hero__eyebrow{margin-bottom:10px;font-size:11.5px;letter-spacing:.17em}
  .hero .lead{margin-top:14px;font-size:15.5px;line-height:1.5}
  .hero .btn-row{margin-top:20px;gap:9px}
  .hero .btn--lg{padding:13px 20px;font-size:15px}
  .hero__pills{margin-top:16px;gap:6px}
  .hero__pills li{font-size:12px;padding:5px 11px}
}

.hero__cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;
  display:grid;justify-items:center;gap:9px;color:rgba(255,255,255,.8);
  font-family:"Archivo",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase}
.hero__cue:hover{color:#fff}
.hero__cue i{display:block;width:1px;height:34px;background:rgba(255,255,255,.72);
  transform-origin:top;animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.35}50%{transform:scaleY(1);opacity:1}}
@media(max-width:760px){.hero__cue{display:none}}

/* ---- koptekst boven de hero ------------------------------------------
   .hdr--over  = de balk zweeft over de hero
   .hdr--light = witte letters (er staat diepblauw achter)

   De balk is hier één effen blauw vlak. Eerst liep het herobeeld er
   doorheen met een verloop-sluier erover; daardoor stond het logo op een
   wisselende ondergrond en oogde het vuil. Effen kleur lost dat op — en
   scheelt bovendien een backdrop-filter die bij elk scrollframe de
   achtergrond opnieuw moest vervagen.                                 */
.hdr--over{background:var(--navy-900);border-bottom-color:rgba(255,255,255,.09)}

.hdr--over.hdr--light .nav a{color:rgba(255,255,255,.94)}
.hdr--over.hdr--light .nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.hdr--over.hdr--light .nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2.5px 0 var(--accent-ink)}
.hdr--over.hdr--light .lang{background:rgba(255,255,255,.16)}
.hdr--over.hdr--light .lang button{color:rgba(255,255,255,.82)}
.hdr--over.hdr--light .lang button:hover{color:#fff}
.hdr--over.hdr--light .lang button[aria-pressed="true"]{background:#fff;color:var(--navy-800)}
.hdr--over.hdr--light .burger span{background:#fff}

/* donkere variant: als er een licht beeld achter de koptekst staat */

/* ---------- 8. Diensten -------------------------------------------------- */
.svc{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svc{grid-template-columns:1fr}}
.card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line)}

/* --- werkfoto ---------------------------------------------------------
   Vervangt het icoon dat hier eerst stond. Een foto van opgeleverd werk
   overtuigt nu eenmaal meer dan een pictogram. Valt het bestand weg, dan
   springt .shot--leeg bij en verschijnt alsnog het icoon.            */
.shot{position:relative;display:block;background:var(--plaster-2);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.shot__ico{display:none;position:absolute;inset:0;place-items:center;color:var(--accent);opacity:.5}
.shot__ico svg{width:34%;height:34%;max-width:76px}
.shot--leeg img{display:none}
.shot--leeg .shot__ico{display:grid}

.card__shot{aspect-ratio:4/3}
.card:hover .card__shot img{transform:scale(1.05)}
/* dun accentlijntje dat bij hover onder de foto doorloopt */
.card__shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--accent-ink);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.card:hover .card__shot::after{transform:scaleX(1)}

.card__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:20px;margin-bottom:5px}
.card__nl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
  font-weight:700;margin-bottom:9px}
.card p{font-size:15px;color:var(--steel);line-height:1.6;flex:1}
.card__link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:14.5px;
  font-weight:700;color:var(--navy-700);align-self:flex-start}
.card__link svg{transition:transform .2s var(--ease)}
.card:hover .card__link svg{transform:translateX(4px)}

/* ---------- 8b. Dienstpagina: beeld naast tekst, om en om --------------- */
.svcrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,58px);align-items:center}
.svcrow--flip .svcrow__media{order:2}
@media(max-width:880px){
  .svcrow{grid-template-columns:1fr;gap:26px}
  .svcrow--flip .svcrow__media{order:0}
}
.svcrow__media{aspect-ratio:4/3;border-radius:var(--r);box-shadow:var(--sh-2)}
/* Staand gefotografeerde diensten krijgen een staand kader; in 4:3 zou
   bijna de helft van de hoogte wegvallen. De kaarten op de homepage
   blijven wél 4:3 — die staan in een raster en moeten gelijk zijn. */
.svcrow__media.is-staand{aspect-ratio:3/4}
@media(max-width:880px){.svcrow__media.is-staand{aspect-ratio:4/3}}
.svcrow__nr{display:flex;align-items:center;gap:12px;
  font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}
.svcrow__nr i{display:block;width:34px;height:2px;background:var(--accent-ink);opacity:.5}
.svcrow__body>p{margin-top:14px;font-size:16px;line-height:1.68;color:var(--steel)}
.svcrow__lst{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.svcrow__lst .eyebrow{margin-bottom:12px}
.svcrow__lst ul{display:grid;gap:11px}
.svcrow__lst li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
.svcrow__lst svg{color:var(--ok);flex:none;width:17px;height:17px;margin-top:3px}

/* ---------- 10. Voor / na ------------------------------------------------ */
.ba{position:relative;overflow:hidden;border-radius:var(--r);background:#111;
  aspect-ratio:4/3;box-shadow:var(--sh-2);touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
  -webkit-user-drag:none;user-select:none}
.ba__after{clip-path:inset(0 0 0 50%)}
.ba__tag{position:absolute;top:13px;z-index:4;font-family:"Archivo",sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(10,26,40,.86);padding:6px 12px;border-radius:100px}
.ba__tag--v{left:13px}
.ba__tag--n{right:13px;background:var(--accent)}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:5;
  transform:translateX(-50%);cursor:ew-resize;border:0;padding:0;
  box-shadow:0 0 14px rgba(0,0,0,.45)}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.ba__handle::before{content:"";position:absolute;top:50%;left:50%;width:18px;height:10px;z-index:2;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,var(--navy-700) 0 6px,transparent 6px 12px,var(--navy-700) 12px 18px);
  clip-path:polygon(0 50%,32% 0,32% 100%,68% 0,68% 100%,100% 50%)}
.ba__handle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* --- voor/na: elke foto in beeld, en toch een gesloten raster --------
   Elk kader is 4:3, behalve staande opnamen: die krijgen 3:4. Kaarten
   met een andere verhouding komen nooit naast elkaar te staan — brede
   kaarten (duo en liggende schuifbalk) nemen de hele rij. Zie
   paarBreedte() in gallery.js.                                        */
.paircard--breed{grid-column:1 / -1}
.paircard--breed .ba{aspect-ratio:4/3}
.paircard--breed .duo figure{aspect-ratio:4/3}

.ba.is-staand,.paircard .ba.is-staand{aspect-ratio:3/4}
.duo.is-staand figure{aspect-ratio:3/4}

/* Op één kolom valt er niets meer naast elkaar; dan mag alles gewoon
   de volle breedte hebben. */
@media(max-width:780px){
  .paircard--breed{grid-column:auto}
  .ba.is-staand,.paircard .ba.is-staand{aspect-ratio:4/5}
}

/* twee foto's naast elkaar — werkt met elk fotopaar */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duo figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);
  background:#DCD5C8;aspect-ratio:1/1;cursor:zoom-in}
.duo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.duo figure:hover img{transform:scale(1.04)}
.duo figcaption{position:absolute;top:0;left:0;font-family:"Archivo",sans-serif;
  font-weight:700;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#fff;
  background:var(--navy-900);padding:5px 11px 4px}
.duo figure:last-child figcaption{left:auto;right:0;background:var(--accent);color:#fff}
@media(max-width:520px){.duo figcaption{font-size:10px;letter-spacing:.14em;padding:4px 9px 3px}}

.ba-pair{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,3.4vw,40px);align-items:center}
@media(max-width:860px){.ba-pair{grid-template-columns:1fr}}

/* voor/na kart izgarasi (projeler sayfasi) */
/* Drie kolommen, niet twee. Bij twee kolommen werd een staand paar op
   een breed scherm 752 px hoog en een liggend paar zelfs 868 px — die
   vulden in hun eentje het halve beeldscherm. Met drie kolommen komt een
   staand paar op ~520 px en een breed paar op ~450 px. */
.pairgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}
@media(max-width:1040px){.pairgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.pairgrid{grid-template-columns:1fr}}
.paircard{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.paircard:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.paircard .ba{border-radius:0;aspect-ratio:4/3;box-shadow:none}
.paircard .duo{gap:2px}
.paircard .duo figure{border-radius:0}
.paircard__txt{padding:18px 20px 20px}
.paircard__txt h3{font-size:18.5px;margin-bottom:6px}
.paircard__txt p{font-size:14.5px;color:var(--steel);line-height:1.55}

/* De naad tussen voor en na. Bij hover kleurt hij oranje: het enige
   accent in de galerij, als het spoor van een spaan. */
.paircard .duo{gap:0;position:relative}
.paircard .duo::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  transform:translateX(-1px);background:var(--plaster);z-index:2;
  transition:background .35s var(--ease)}
.paircard:hover .duo::after,.paircard:focus-within .duo::after{background:var(--accent)}

/* in uitvoering — horizontale strip: werk is een volgorde, geen verzameling */
.workrail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;-webkit-overflow-scrolling:touch}
.workrail::-webkit-scrollbar{height:6px}
.workrail::-webkit-scrollbar-track{background:rgba(14,33,53,.08);border-radius:3px}
.workrail::-webkit-scrollbar-thumb{background:var(--navy-500);border-radius:3px}
.workrail>*{flex:0 0 clamp(172px,26vw,244px);scroll-snap-align:start;margin:0;
  aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-sm);background:#DCD5C8;position:relative}
.workrail img,.workrail video{width:100%;height:100%;object-fit:cover;display:block}
.workrail figure{cursor:zoom-in}
.workrail img{transition:transform .5s var(--ease)}
.workrail figure:hover img{transform:scale(1.045)}
.workrail__clip{background:#111}
.workrail__clip::after{content:"";position:absolute;left:10px;bottom:10px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(14,33,53,.45)}

/* voor/na vitrin */
.show{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,36px);
  grid-template-areas:"stage side" "thumbs thumbs";align-items:start}
@media(max-width:900px){.show{grid-template-columns:1fr;grid-template-areas:"stage" "side" "thumbs"}}
.show__stage{grid-area:stage;position:relative}
.show__stage .ba{aspect-ratio:4/3}
.show__side{grid-area:side;align-self:center}
.show__count{font-family:"Archivo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.16em;
  color:var(--steel);margin-bottom:12px}
.show__count b{color:var(--accent-ink);font-size:19px;letter-spacing:0}
.show__side .lead{margin-top:12px;font-size:16px}
.show__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.92);color:var(--navy-800);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--sh-1);transition:.18s var(--ease)}
.show__nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.show__nav--p{left:-14px}
.show__nav--n{right:-14px}
@media(max-width:520px){.show__nav--p{left:6px}.show__nav--n{right:6px}}
.show__demo{position:absolute;left:13px;bottom:13px;z-index:6;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.2em;
  background:rgba(14,33,53,.82);color:#fff;padding:5px 11px;border-radius:100px}
/* Kucuk resim seridi yatay kayar. Telefonda kaydirma cubugu gizli oldugu
   icin sag kenara solma efekti koyuyoruz: devami oldugu anlasilsin. */
.show__thumbs{grid-area:thumbs;display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;
  scrollbar-width:thin;margin-top:6px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 46px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 46px),transparent 100%)}
.show__thumbs:not([data-more]){-webkit-mask-image:none;mask-image:none}
.show__thumb{scroll-snap-align:start}
.show__thumb{flex:none;width:96px;aspect-ratio:4/3;padding:0;border-radius:9px;overflow:hidden;
  border:2px solid transparent;background:#DDD6C9;cursor:pointer;opacity:.62;
  transition:opacity .18s,border-color .18s,transform .18s var(--ease)}
.show__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.show__thumb:hover{opacity:.9;transform:translateY(-2px)}
.show__thumb[aria-selected="true"]{opacity:1;border-color:var(--accent)}
@media(max-width:520px){.show__thumb{width:76px}}

/* ---------- 11. Galerij -------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{background:var(--white);border:1.5px solid var(--line-soft);border-radius:100px;
  padding:9px 17px;font-size:14px;font-weight:600;cursor:pointer;transition:.18s var(--ease);color:var(--steel)}
.chip:hover{border-color:var(--navy-500);color:var(--navy-700)}
.chip[aria-pressed="true"]{background:var(--navy-700);border-color:var(--navy-700);color:#fff}

/* --- fotoraster op de projectenpagina ---------------------------------
   Eén beeldverhouding voor elke foto. De vorige opzet (CSS-columns,
   "masonry") liet elk beeld zijn eigen hoogte houden; staande foto's
   werden dan bijna twee keer zo hoog als liggende en onderaan de
   kolommen bleef wit over. Een vast kader houdt het raster rustig,
   ongeacht welk formaat er later bij komt. De volledige foto blijft
   bereikbaar via de lightbox.
   De kaart zelf is dezelfde .prj als op de homepage, zodat beide
   pagina's dezelfde taal spreken. */
.prj-grid--galerij{margin-bottom:clamp(26px,3.4vw,40px)}
.prj-grid--galerij .prj__shot{cursor:zoom-in}
.prj-grid--galerij .prj__body{padding:14px 16px 16px}
.prj-grid--galerij .prj h3{font-size:17px;margin-bottom:2px}
.prj-grid--galerij .prj p{font-size:13px}

.loops{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.loops{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.loops{grid-template-columns:1fr}}
.loops video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-sm);background:#111}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,20,32,.94);display:none;
  align-items:center;justify-content:center;padding:20px}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:6px}
.lb__cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:14px}
.lb__btn{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.lb__btn:hover{background:rgba(255,255,255,.24)}
.lb__x{top:20px;right:20px}
.lb__p{left:20px;top:50%;transform:translateY(-50%)}
.lb__n{right:20px;top:50%;transform:translateY(-50%)}

/* lege staat */
.empty{border:2px dashed var(--line);border-radius:var(--r);padding:44px 26px;text-align:center;
  color:var(--steel);background:rgba(255,255,255,.5)}
.empty b{display:block;color:var(--ink);font-family:"Archivo",sans-serif;font-size:17px;margin-bottom:6px}

/* werkgebied-kaart — echte provinciegrenzen, echte plaatsen */
.area{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,52px);align-items:center}
@media(max-width:900px){.area{grid-template-columns:1fr}}
.area__map{width:100%}
.area__map svg{width:100%;height:auto;display:block;overflow:hidden}

.am-buur{fill:rgba(18,41,63,.045);stroke:var(--line-soft);stroke-width:1.5}
.am-gld{fill:var(--white);stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round}
.section--white .am-gld{fill:var(--plaster)}

.am-ring-c{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:6 9;opacity:.45}
.am-ring{font:700 17px "Instrument Sans",sans-serif;fill:var(--accent-ink);
  text-anchor:middle;opacity:.85}
.am-ring--in{opacity:.34}

.am-city circle{fill:var(--stone)}
.am-city text{font:600 19px "Instrument Sans",sans-serif;fill:var(--steel);
  dominant-baseline:middle}
/* plaatsen waar wij werk hebben opgeleverd: accentkleur en zwaarder gezet */
.am-city--prj circle{fill:var(--accent);stroke:var(--white);stroke-width:2.5}
.am-city--prj text{fill:var(--navy-800);font-weight:700;font-size:21px}

.am-home circle:not(.am-pulse){fill:var(--accent);stroke:var(--white);stroke-width:3}
.am-home .am-pulse{fill:var(--accent);opacity:.22;transform-box:fill-box;
  transform-origin:center;animation:amp 2.8s ease-in-out infinite}
.am-home text{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:900;
  font-size:30px;fill:var(--navy-900)}
@keyframes amp{0%,100%{transform:scale(.7);opacity:.3}50%{transform:scale(1.5);opacity:.05}}

.area__facts{display:grid;gap:14px;margin-top:26px}
.area__fact{display:flex;gap:13px;align-items:flex-start}
.area__fact svg{color:var(--accent-ink);flex:none;width:21px;height:21px;margin-top:2px}
.area__fact b{display:block;font-family:"Archivo",sans-serif;font-size:15.5px;margin-bottom:2px}
.area__fact span{font-size:14.5px;color:var(--steel);line-height:1.55}

/* ---------- 12. Werkwijze (genummerd — echte volgorde) ------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:22px;border-top:2px solid var(--line)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:-15px;left:0;background:var(--plaster);padding-right:12px;
  font-family:"Archivo",sans-serif;font-stretch:118%;font-weight:900;font-size:15px;
  color:var(--accent-ink);letter-spacing:.06em}
.section--white .step::before{background:var(--white)}
.section--plaster2 .step::before{background:var(--plaster-2)}
.step h3{font-size:17.5px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--steel)}

/* ---------- 13. USP band ------------------------------------------------- */
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-soft);
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft)}
@media(max-width:860px){.usp{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.usp{grid-template-columns:1fr}}
.usp>div{background:var(--white);padding:24px 22px;display:flex;gap:14px;align-items:flex-start}
.usp svg{color:var(--accent-ink);flex:none;width:24px;height:24px;margin-top:2px}
.usp b{display:block;font-family:"Archivo",sans-serif;font-size:15.5px;margin-bottom:3px}
.usp span{font-size:13.5px;color:var(--steel);line-height:1.5}

/* ---------- 13b. Materialen ---------------------------------------------
   De zak zoals hij op de bouw staat, naast wat hij kan. Het product-
   beeld staat op een pleisterkleurig vlak: geen webshop-wit, maar de
   kleur van de muur waar het materiaal op terechtkomt.               */
.mats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,22px)}
@media(max-width:880px){.mats{grid-template-columns:1fr}}
.mat{display:grid;grid-template-columns:150px 1fr;gap:22px;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh-1);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.mat:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line)}
@media(max-width:520px){.mat{grid-template-columns:1fr;gap:16px}}

.mat__shot{background:var(--plaster);border-radius:var(--r-sm);padding:14px;
  display:grid;place-items:center;align-self:start;position:relative;overflow:hidden}
/* strijklicht over de zak — hetzelfde licht als op een pas gestucte wand */
.mat__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.55) 0%,transparent 42%)}
.mat__shot img{width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:520px){.mat__shot{padding:20px}.mat__shot img{max-width:190px;margin-inline:auto}}

.mat__brand{font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent-ink)}
.mat__body h3{font-size:21px;margin:5px 0 3px}
.mat__type{font-size:14px;font-weight:600;color:var(--steel);margin-bottom:11px}
.mat__body>p{font-size:14.5px;color:var(--steel);line-height:1.6}

.mat__use{display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  padding:11px 13px;border-radius:var(--r-sm);background:var(--accent-050);
  font-size:13.5px;line-height:1.5;color:var(--navy-800)}
.mat__use svg{color:var(--accent-ink);flex:none;width:17px;height:17px;margin-top:2px}
.mat__use b{display:block;font-family:"Archivo",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:2px}

.mat__specs{display:grid;gap:7px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.mat__specs li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink)}
.mat__specs svg{color:var(--ok);flex:none;width:15px;height:15px;margin-top:3px}

/* ---------- 13c. Garantie -----------------------------------------------
   Drie blokken op diepblauw. Geen jaartal en geen keurmerk dat wij niet
   kunnen waarmaken — alleen wat er werkelijk in de offerte staat.    */
.gar{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:clamp(26px,3.4vw,38px);
  border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.14)}
@media(max-width:860px){.gar{grid-template-columns:1fr}}
.gar__item{background:var(--navy-800);padding:clamp(24px,3vw,32px);position:relative}
.gar__n{font-family:"Archivo",sans-serif;font-stretch:118%;font-weight:900;font-size:13px;
  letter-spacing:.14em;color:var(--accent-ink);display:block;margin-bottom:14px}
.gar__item h3{font-size:18.5px;margin-bottom:9px}
.gar__item p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.76)}

/* ---------- 13d. Projecten per plaats -----------------------------------
   Plaats, soort werk, status — en een foto uit dat project.          */
.prj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,18px)}
@media(max-width:940px){.prj-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.prj-grid{grid-template-columns:1fr}}
.prj{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.prj:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.prj__shot{aspect-ratio:4/3}
.prj:hover .prj__shot img{transform:scale(1.05)}
.prj__body{padding:18px 20px 22px}
.prj h3{font-size:21px;margin-bottom:5px}
.prj p{font-size:14px;color:var(--steel);line-height:1.55}

/* status ligt op de foto, zodat de kaart rustig blijft */
.prj__status{position:absolute;left:12px;top:12px;z-index:2;
  font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;display:inline-flex;align-items:center;gap:7px;
  }
.prj__status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.prj__status{background:rgba(255,255,255,.92);color:#1E6045}

/* ---------- 14. Reviews -------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r);padding:26px 24px}
.quote__stars{color:var(--accent-ink);letter-spacing:2px;font-size:14px;margin-bottom:12px}
.quote p{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.9)}
.quote footer{margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.6)}
.quote footer b{color:#fff;font-weight:600;display:block}

/* ---------- 15. Formulieren ---------------------------------------------- */
.form-shell{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:clamp(24px,3.4vw,38px);box-shadow:var(--sh-1)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:660px){.fgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:600}
.field label .req{color:var(--err)}
.field .hint{font-size:12.5px;color:var(--steel)}
.field input,.field select,.field textarea{
  width:100%;background:#FBFAF7;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;font-size:15.5px;transition:border-color .15s,box-shadow .15s}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(51,115,166,.16)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--err);background:#FEF6F5}
.err{font-size:12.5px;color:var(--err);font-weight:600;display:none}
.err.on{display:block}

/* Kompakt secim dugmeleri — acilir liste yerine, hepsi tek bakista gorunur */
.field__lbl{font-size:13.5px;font-weight:600}
.secim{display:flex;flex-wrap:wrap;gap:8px}
.secim input{position:absolute;opacity:0;width:0;height:0}
.secim label{cursor:pointer;user-select:none;font-size:14.5px;font-weight:600;
  padding:9px 15px;border-radius:100px;background:#FBFAF7;color:var(--steel);
  border:1.5px solid var(--line);transition:.16s var(--ease)}
.secim label:hover{border-color:var(--navy-500);color:var(--navy-700)}
.secim input:checked + label{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.secim input:focus-visible + label{outline:3px solid var(--accent);outline-offset:2px}

.drop{border:2px dashed var(--line);border-radius:var(--r-sm);background:#FBFAF7;padding:26px 18px;
  text-align:center;cursor:pointer;transition:.2s var(--ease)}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-050)}
.drop svg{width:26px;height:26px;color:var(--accent-ink);margin:0 auto 8px}
.drop b{display:block;font-size:14.5px}
.drop span{font-size:12.5px;color:var(--steel)}
.thumbs{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.thumb{position:relative;width:72px;height:72px;border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
  border:0;background:rgba(14,33,53,.82);color:#fff;font-size:12px;line-height:1;cursor:pointer}

.check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--steel)}
.check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--accent)}
.form-note{font-size:12.5px;color:var(--steel);text-align:center;margin-top:12px}
.sent{background:#EAF5EF;border:1px solid #B8DFCB;color:#1F5F45;border-radius:var(--r-sm);
  padding:15px 17px;font-size:14.5px;font-weight:600;margin-top:16px;display:none}
.sent.on{display:block}

/* aside naast formulier */
.form-aside{display:grid;gap:14px;align-content:start}
.aside-card{background:var(--navy-800);color:#fff;border-radius:var(--r);padding:26px 24px}
.aside-card h3{font-size:19px;margin-bottom:10px}
.aside-card p{font-size:14.5px;color:rgba(255,255,255,.76)}
.aside-card ol{margin:14px 0 0;padding-left:0;list-style:none;counter-reset:a;display:grid;gap:12px}
.aside-card ol li{counter-increment:a;display:flex;gap:12px;font-size:14.5px;color:rgba(255,255,255,.86)}
.aside-card ol li::before{content:counter(a);flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700;
  font-family:"Archivo",sans-serif}
.form-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,3vw,34px);align-items:start}
@media(max-width:900px){.form-layout{grid-template-columns:1fr}}

/* ---------- 16. FAQ ------------------------------------------------------ */
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--line)}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:16px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:none;border-right:2.2px solid var(--accent-ink);
  border-bottom:2.2px solid var(--accent-ink);transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq__a{padding:0 22px 20px;font-size:15px;color:var(--steel);line-height:1.65}

/* FAQ altindaki "sorunuz mu var" blogu */
.faq-more{display:flex;flex-wrap:wrap;align-items:center;gap:18px;max-width:820px;
  margin-top:20px;padding:22px 24px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line-soft);box-shadow:var(--sh-1)}
.faq-more h3{margin-bottom:5px}
.faq-more p{font-size:14.5px;color:var(--steel);line-height:1.55;max-width:52ch}
.faq-more .btn{margin-left:auto;flex:none}
.section--white .faq-more{background:var(--plaster);border-color:var(--line)}
@media(max-width:620px){.faq-more .btn{margin-left:0;width:100%}}

/* SSS ozeti — tam liste faq.html'de */
.faq-teaser{display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  padding:clamp(24px,3vw,34px);border-radius:var(--r);
  background:var(--plaster);border:1px solid var(--line-soft)}
.section--white .faq-teaser{background:var(--plaster)}
.faq-teaser > div:first-child{flex:1 1 380px;min-width:0}
.faq-teaser h2{margin-top:2px}
.faq-teaser .lead{max-width:56ch}
.faq-teaser .btn-row{flex:0 0 auto}
@media(max-width:620px){.faq-teaser .btn-row{width:100%}.faq-teaser .btn{flex:1 1 auto}}

/* SSS sayfasi — konu basliklarina ayrilmis */
.faq-groups{display:grid;gap:clamp(26px,3.6vw,42px);max-width:840px}
.faq-group__t{font-family:"Archivo",sans-serif;font-stretch:112%;font-size:clamp(17px,2vw,20px);
  font-weight:800;letter-spacing:-.01em;margin-bottom:12px;padding-bottom:10px;
  border-bottom:2px solid var(--line);display:flex;align-items:center;gap:10px}
.faq-group__t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-ink);flex:none}

/* ---------- 17. CTA band ------------------------------------------------- */
.cta{background:var(--navy-800);color:#fff;border-radius:var(--r);padding:clamp(32px,5vw,56px);
  position:relative;overflow:hidden;isolation:isolate}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 130% at 100% 0%,rgba(15,116,136,.26),transparent 60%)}
.cta h2{font-size:clamp(26px,3.6vw,40px)}
.cta p{color:rgba(255,255,255,.78);margin-top:14px;max-width:52ch}

/* ---------- 18. Footer --------------------------------------------------- */
.ftr{background:var(--navy-900);color:rgba(255,255,255,.72);padding:clamp(48px,6vw,72px) 0 26px;font-size:14.5px}
.ftr h3{font-family:"Archivo",sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:16px;font-weight:700}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px}
@media(max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr a{color:rgba(255,255,255,.72)}
.ftr a:hover{color:var(--accent-ink)}
.ftr ul{display:grid;gap:9px}
.ftr__contact li{display:flex;gap:11px;align-items:flex-start}
.ftr__contact svg{color:var(--accent-ink);flex:none;margin-top:3px;width:17px;height:17px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;transition:.2s var(--ease)}
.social a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.social svg{width:19px;height:19px}
/* Henuz link girilmemis sosyal hesap — sadece duzenleme modunda gorunur */
.social__slot{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:rgba(18,41,63,.07);border:1.5px dashed var(--line);color:var(--steel);
  opacity:.65;cursor:help}
.social__slot svg{width:19px;height:19px}

.ftr__bar{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;
  color:rgba(255,255,255,.5)}
.ftr__bar a{color:rgba(255,255,255,.62)}
.made{display:inline-flex;align-items:center;gap:7px}
/* KvK/BTW staan achter de copyrightregel; alleen zichtbaar als ze in
   config.js zijn ingevuld. */
.ftr__reg{margin-left:12px;white-space:nowrap}
.made b{color:rgba(255,255,255,.86);font-weight:600}

/* ---------- 19. Zwevende knoppen ----------------------------------------- */
.fab{position:fixed;right:16px;bottom:16px;z-index:80;display:grid;gap:10px;justify-items:end}
.fab a{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 26px rgba(14,33,53,.34);transition:transform .2s var(--ease)}
.fab a:hover{transform:scale(1.07)}
.fab .fab--wa{background:var(--wa)}
.fab .fab--tel{background:var(--accent)}
.fab svg{width:27px;height:27px}
@media(min-width:900px){.fab .fab--tel{display:none}}

/* ---------- 20. Admin ---------------------------------------------------- */
.adm{max-width:1080px;margin:0 auto;padding:26px 22px 90px}
.adm-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px 20px;
  margin-bottom:20px;position:sticky;top:12px;z-index:20;box-shadow:var(--sh-1)}
.adm-list{display:grid;gap:12px}
.adm-row{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:start;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:14px}
@media(max-width:680px){.adm-row{grid-template-columns:1fr}}
.adm-row img{width:88px;height:88px;object-fit:cover;border-radius:7px;background:#DDD6C9}
.adm-row .fgrid{gap:10px}
.adm-row input,.adm-row select{padding:9px 11px;font-size:14px}
.adm-act{display:flex;flex-direction:column;gap:7px}
.adm-act button{border:1px solid var(--line);background:var(--white);border-radius:7px;padding:7px 11px;
  font-size:13px;cursor:pointer;white-space:nowrap}
.adm-act button:hover{border-color:var(--navy-500)}
.adm-act .del:hover{border-color:var(--err);color:var(--err)}
.gate{max-width:400px;margin:14vh auto;background:var(--white);border-radius:var(--r);
  padding:34px 30px;box-shadow:var(--sh-2);text-align:center}
.gate img{width:66px;margin:0 auto 16px}
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}

/* ---------- 21. Onthullen bij scrollen ----------------------------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- 22. Hulpklassen ---------------------------------------------- */
.sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0);white-space:nowrap;border:0!important}
.skip{position:absolute;left:14px;top:-60px;z-index:200;background:var(--navy-700);color:#fff;
  padding:11px 18px;border-radius:0 0 8px 8px;transition:top .2s}
.skip:focus{top:0;color:#fff}
.center{text-align:center}
.mt-l{margin-top:34px}
.divider{height:1px;background:var(--line);border:0;margin:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}