/* ============================================================
   Zenith 3E Keukens & Badkamers
   Gedeeld designsysteem, herbouw 12 augustus 2026.

   Uitgangspunten na de audit:
   - Alles is zichtbaar zonder JavaScript. Geen opacity:0 als startwaarde.
   - Geen opschrift boven elke kop, geen genummerde stappen, geen lopende
     band, geen vast licht-donkerritme. Secties krijgen de vorm die hun
     inhoud vraagt.
   - Informatie staat in tabellen en specificatielijsten, niet in claims.
   - Goud is alleen leesbaar op donker. Op licht wordt --gold-dark gebruikt.
   ============================================================ */

:root{
  --navy:#082040;
  --navy-2:#0D2A54;
  --navy-deep:#061A34;
  --gold:#D0A830;          /* uitsluitend op donkere ondergrond */
  --gold-lite:#E3C560;
  --gold-dark:#6B5210;     /* op ivoor, haalt de contrasteis */
  --ivory:#F5F1E9;
  --ivory-2:#EDE8DD;
  --paper:#FBF9F5;
  --ink:#12203A;
  --muted:#57617A;
  --line-l:rgba(8,32,64,.14);
  --line-d:rgba(245,241,233,.16);
  --serif:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --sans:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  --maxw:1180px;
  --gut:clamp(20px,5vw,56px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font:400 16.5px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
}
img{max-width:100%;display:block;-webkit-user-drag:none;user-drag:none}
a{color:var(--ink)}
::selection{background:var(--gold);color:var(--navy)}
input,textarea,select{font-family:var(--sans);-webkit-user-select:text;user-select:text}

:where(a,button,summary,input,textarea):focus-visible{
  outline:3px solid var(--gold-dark);outline-offset:2px;
}
.on-dark :where(a,button,summary):focus-visible,
header.bar :where(a,button,summary):focus-visible,
footer :where(a,button,summary):focus-visible{
  outline-color:var(--gold);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--navy);padding:14px 22px;
  font:600 14px/1 var(--sans);
}
.skip:focus{left:0}

/* ---------- raster ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding:clamp(52px,7vw,92px) 0}
.sec--tight{padding:clamp(36px,4.5vw,56px) 0}
.sec--dark{background:var(--navy);color:var(--ivory)}
.sec--paper{background:var(--paper)}
.lede{font-size:clamp(17px,1.7vw,19.5px);line-height:1.65;color:var(--muted);max-width:62ch}
.sec--dark .lede{color:rgba(245,241,233,.82)}

/* ---------- typografie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(32px,5.2vw,58px);line-height:1.08}
h2{font-size:clamp(26px,3.6vw,40px);line-height:1.18;margin-bottom:18px}
h3{font-size:clamp(20px,2.2vw,25px);line-height:1.3;margin:36px 0 12px}
h4,.label{
  font:600 12.5px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-dark);margin:32px 0 12px;
}
.sec--dark h4,.sec--dark .label{color:var(--gold)}
p{margin:0 0 18px;max-width:66ch}
.sec--dark p{color:rgba(245,241,233,.86)}
strong{font-weight:600}
.rule{width:44px;height:2px;background:var(--gold-dark);margin-bottom:20px}
.sec--dark .rule{background:var(--gold)}

/* ---------- kop ---------- */
header.bar{background:var(--navy);border-bottom:1px solid var(--line-d)}
.bar .row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin:0 auto;padding:13px var(--gut);
}
.brand{display:flex;flex-direction:column;gap:6px;width:150px;line-height:1;text-decoration:none;padding:4px 0}
.brand img{display:block;width:150px;height:auto}
/* Onderschrift exact zo breed als het woordmerk: uitgevuld via letterspatiëring i.p.v. woordspatiëring, zodat Keukens/&/Badkamers bij elkaar blijven staan. */
.brand small{
  font:600 8px/1 var(--sans);text-transform:uppercase;color:var(--gold);
  white-space:nowrap;letter-spacing:2.917px;
}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  font:500 14px/1 var(--sans);color:rgba(245,241,233,.82);text-decoration:none;
  padding:12px 13px;display:block;
}
.nav a:hover{color:var(--gold)}
.nav a[aria-current="page"]{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
.nav a.solid{
  background:var(--gold);color:var(--navy);font-weight:600;margin-left:10px;
  padding:12px 18px;
}
.nav a.solid:hover{background:var(--gold-lite);color:var(--navy)}

/* Mobiel menu als details, zodat het ook zonder JavaScript werkt. */
.menu{display:none}
.menu>summary{
  list-style:none;cursor:pointer;color:var(--ivory);
  border:1px solid rgba(245,241,233,.34);padding:11px 17px;
  font:600 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
}
.menu>summary::-webkit-details-marker{display:none}
.menu[open]>summary{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.menu .panel{
  position:absolute;left:0;right:0;z-index:60;background:var(--navy-deep);
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  padding:8px var(--gut) 20px;
}
.menu .panel a{
  display:block;padding:15px 0;color:var(--ivory);text-decoration:none;
  border-bottom:1px solid var(--line-d);
  font:400 20px/1.3 var(--serif);
}
.menu .panel a:last-child{border-bottom:none;color:var(--gold)}
@media(max-width:900px){
  .nav{display:none}
  .menu{display:block}
  header.bar{position:relative}
}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  font:600 13.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-primary{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-lite)}
.btn-ghost{background:transparent;color:var(--ivory);border-color:rgba(245,241,233,.42)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--ivory)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:var(--ivory);overflow:hidden}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .veil{
  position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(6,26,52,.94) 0%,rgba(6,26,52,.86) 42%,rgba(6,26,52,.42) 100%);
}
.hero .inner{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(56px,8vw,104px) var(--gut);
}
.hero h1{max-width:16ch}
.hero p{max-width:52ch;color:rgba(245,241,233,.88);font-size:clamp(16.5px,1.6vw,18.5px);margin-top:22px}
/* Subpagina's hebben geen heroafbeelding. Kop links, intro rechts, zodat de
   rechterhelft van het scherm niet leeg blijft staan. */
.hero--sub .inner{padding:clamp(38px,4.6vw,60px) var(--gut)}
.hero--sub h1{max-width:18ch;font-size:clamp(30px,4.4vw,50px)}
.hero--sub p{margin-top:0}
@media(min-width:900px){
  .hero--sub .inner{
    display:grid;grid-template-columns:1.15fr 1fr;
    column-gap:clamp(40px,6vw,80px);align-items:end;
  }
  .hero--sub .crumb{grid-column:1 / -1}
  .hero--sub h1{margin-bottom:0}
  .hero--sub p{padding-bottom:9px;max-width:44ch}
}

/* Kerngetallen onder de hero: feiten, geen claims. */
.factsband{background:var(--navy-deep);border-top:1px solid var(--line-d)}
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
}
.facts div{padding:22px 26px 22px 0;border-right:1px solid var(--line-d)}
.facts div:last-child{border-right:none}
@media(max-width:640px){
  .facts div{border-right:none;border-bottom:1px solid var(--line-d);padding-right:0}
  .facts div:last-child{border-bottom:none}
}
.facts dt{
  font:600 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px;
}
.facts dd{margin:0;font:400 clamp(19px,2.2vw,25px)/1.25 var(--serif);color:var(--ivory)}
/* Voor een waarde die uit meerdere woorden bestaat, zoals een opsomming van
   provincies. Zonder deze stap wordt die cel twee keer zo hoog als de rest en
   trekt hij meer aandacht dan de levertijd, wat de verkeerde volgorde is. */
.facts dd.lang{font-size:clamp(18px,1.6vw,20px);line-height:1.3}
.facts dd small{display:block;font:400 13px/1.5 var(--sans);color:rgba(245,241,233,.62);margin-top:6px}
.facts .wrapin{max-width:var(--maxw);margin:0 auto}

/* ---------- tabellen: de kern van de informatiedichtheid ---------- */
.tw{overflow-x:auto;margin:26px 0;border:1px solid var(--line-l);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
caption{
  text-align:left;padding:14px 18px;background:var(--ivory-2);
  font:600 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-l);
}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line-l);vertical-align:top}
thead th{
  font:600 11.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--ivory-2);white-space:nowrap;
}
tbody th{font-weight:600;font-size:15px;color:var(--ink);width:38%}
tr:last-child td,tr:last-child th{border-bottom:none}
td.who{font-weight:600;white-space:nowrap}
td.who[data-w="zenith"]{color:var(--gold-dark)}
td.who[data-w="aannemer"]{color:var(--ink)}

/* ---------- specificatielijst ---------- */
.spec{list-style:none;padding:0;margin:22px 0;border-top:1px solid var(--line-l)}
.spec li{
  display:grid;grid-template-columns:minmax(150px,26%) 1fr;gap:8px 26px;
  padding:13px 0;border-bottom:1px solid var(--line-l);font-size:15px;
}
.spec b{font-weight:600;color:var(--muted);font-size:13px;letter-spacing:.03em;text-transform:uppercase;padding-top:2px}
.sec--dark .spec{border-top-color:var(--line-d)}
.sec--dark .spec li{border-bottom-color:var(--line-d)}
.sec--dark .spec b{color:var(--gold)}
@media(max-width:620px){.spec li{grid-template-columns:1fr;gap:2px}}

/* ---------- open punt, zichtbaar gemarkeerd ---------- */
.tbd{
  background:var(--ivory-2);border:1px dashed var(--muted);
  padding:3px 9px;font:500 13px/1.5 var(--sans);color:var(--muted);
  display:inline-block;
}

/* ---------- beeldraster ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:2px;margin-top:34px}
.shot{position:relative;overflow:hidden;background:var(--navy-2);aspect-ratio:4/3}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;
  background:linear-gradient(0deg,rgba(6,26,52,.9),transparent);
  color:var(--ivory);font-size:14px;
}
.shot figcaption b{display:block;font-weight:600}
.shot figcaption span{font-size:12.5px;color:rgba(245,241,233,.78)}
.shot--tall{aspect-ratio:3/4}

/* ---------- twee kolommen ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(30px,5vw,60px);align-items:start}
.split--wide{grid-template-columns:minmax(300px,1fr) minmax(300px,1.15fr)}

/* ---------- kruimelpad ---------- */
/* Staat in de hero op donkere ondergrond, dus lichte tekst. */
.crumb{font-size:13.5px;color:rgba(245,241,233,.78);padding:0 0 18px;margin:0}
.crumb a{color:rgba(245,241,233,.92)}
.crumb a:hover{color:var(--gold)}
.crumb span{margin:0 8px;color:rgba(245,241,233,.45)}

/* ---------- vervolgnavigatie ---------- */
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;margin-top:8px}
.next a{
  background:var(--paper);border:1px solid var(--line-l);padding:24px 26px;
  text-decoration:none;display:block;
}
.next a:hover{border-color:var(--gold-dark)}
.next b{display:block;font:400 20px/1.3 var(--serif);margin-bottom:6px}
.next span{font-size:14px;color:var(--muted)}

/* ---------- formulier ---------- */
form{background:var(--paper);border:1px solid var(--line-l);padding:clamp(24px,4vw,38px)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:16px}
.field{margin-bottom:16px}
label{
  display:block;font:600 11.5px/1.4 var(--sans);letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
input,textarea{
  width:100%;padding:13px 14px;border:1px solid rgba(8,32,64,.28);background:#fff;
  font:400 15px/1.45 var(--sans);color:var(--ink);
}
input::placeholder,textarea::placeholder{color:#6C7689}
input:focus,textarea:focus{outline:none;border-color:var(--gold-dark);box-shadow:0 0 0 3px rgba(107,82,16,.18)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#9B1C1C}
textarea{resize:vertical;min-height:108px}
form .btn-primary{width:100%;border:none;margin-top:4px}
form .btn-primary[disabled]{opacity:.62;cursor:progress}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.formerror{
  font:400 14.5px/1.55 var(--sans);color:#8A1414;background:#FBEDED;
  border:1px solid #E2B8B8;padding:12px 14px;margin:0 0 16px;
}
.privacy{font:400 13px/1.6 var(--sans);color:var(--muted);margin:16px 0 0}
.privacy a{color:var(--muted)}
.thanks{background:var(--paper);border:1px solid var(--line-l);padding:clamp(30px,5vw,50px)}
.thanks .ok{
  width:50px;height:50px;border-radius:50%;background:var(--gold);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font:700 22px/1 var(--sans);margin-bottom:20px;
}
.thanks h2{margin-bottom:12px}

/* ---------- veelgestelde vragen ---------- */
.faq{border-top:1px solid var(--line-l);margin-top:26px}
.faq details{border-bottom:1px solid var(--line-l)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 0;display:flex;gap:20px;
  align-items:center;justify-content:space-between;
  font:500 17px/1.45 var(--sans);color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-dark);font:400 26px/1 var(--serif);flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0 0 20px;color:var(--muted);max-width:72ch}

/* ---------- voet ---------- */
footer{background:var(--navy-deep);color:var(--ivory);padding:clamp(44px,6vw,64px) 0 24px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;padding-bottom:34px}
footer h2{
  font:600 11.5px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;
}
footer p{color:rgba(245,241,233,.72);font-size:14px;margin:0;max-width:34ch}
footer nav a,footer .lnk{
  display:block;padding:7px 0;color:rgba(245,241,233,.82);text-decoration:none;font-size:14.5px;
}
footer nav a:hover,footer .lnk:hover{color:var(--gold)}
.foot-bot{
  border-top:1px solid var(--line-d);padding-top:20px;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:13.5px;color:rgba(245,241,233,.72);
}
.foot-bot a{color:rgba(245,241,233,.82);padding:6px 0;display:inline-block}
.foot-bot a:hover{color:var(--gold)}
.foot-bot .links{display:flex;flex-wrap:wrap;gap:22px}