/* =========================================================
   CHROME: the homepage header, off-canvas menu, footer and mobile bar,
   for pages that keep their own page stylesheet (Producten,
   Duurzaamheid, legal pages). Rules are copied verbatim from main.css;
   base element rules are scoped to the chrome so they never reach
   page content, and page stylesheets are scoped to #main so they never
   reach the chrome.
   ========================================================= */

:root{
  --forest:#142D2D;
  --forest-deep:#0A1616;
  --forest-mid:#2C4A46;
  --forest-lift:#1E3B39;
  --ink:#0E1A19;
  --mist:#6E7A77;
  --sand:#E4DFD4;
  --bone:#F2F1EC;
  --chalk:#FBFAF7;
  --white:#fff;
  --signal:#A33A2A;
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:160px;
  --gut:40px;
  --header-h:96px;
  --hair:1px solid var(--sand);
  --hair-light:1px solid rgba(255,255,255,.16);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
[id]{scroll-margin-top:calc(var(--header-h) + 32px);}
::selection{background:var(--forest);color:#fff;}

/* ---------- scoped base (chrome only) ---------- */
:is(.site-header,.offcanvas,.site-footer,.mobile-bar){
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.62;font-weight:400;
}
:is(.site-header,.offcanvas,.site-footer,.mobile-bar,.skip) a{color:inherit;text-decoration:none;}
:is(.site-header,.offcanvas,.site-footer) img{max-width:100%;display:block;}
.site-footer p{margin:0 0 1.15em;}
.site-footer p:last-child{margin-bottom:0;}
.site-footer ul{margin:0 0 1.15em;padding-left:1.1em;}
.site-footer li{margin-bottom:.45em;}
.site-footer strong{font-weight:600;}
.site-footer h5{
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 100;
  font-weight:600;letter-spacing:-.01em;color:#fff;margin:0;
}
.site-footer .container{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gut);}
.site-footer .small{font-size:15px;color:var(--mist);}
:is(.site-header,.offcanvas,.site-footer,.mobile-bar) :is(a,button):focus-visible{
  outline:2px solid currentColor;outline-offset:4px;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:#fff;
  padding:14px 22px;z-index:400;font-size:14px;}
.skip:focus{left:0;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  :is(.site-header,.offcanvas,.scrim,.site-footer,.mobile-bar),
  :is(.site-header,.offcanvas,.scrim,.site-footer,.mobile-bar) *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ---------- buttons (chrome only) ---------- */
:where(.site-header,.offcanvas) .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100;
  font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:21px 44px;border:1px solid transparent;cursor:pointer;text-align:center;
  background-image:linear-gradient(to top,var(--fill,transparent) 50%,transparent 50%);
  background-size:100% 220%;background-position:0 0;background-repeat:no-repeat;
  transition:background-position .5s var(--ease-out),color .35s var(--ease),border-color .35s var(--ease);
}
:where(.site-header,.offcanvas) .btn:hover{background-position:0 100%;}
.offcanvas .btn--light{background-color:#fff;color:var(--forest);border-color:#fff;--fill:var(--sand);}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
  border-bottom:1px solid transparent;color:#fff;
}
.site-header--over{color:#fff;}
.site-header.is-scrolled,.site-header--solid{
  background:#142D2D;backdrop-filter:blur(14px);
  border-bottom-color:var(--sand);color:#fff;
}
.site-header__progress{position:absolute;left:0;bottom:-1px;height:1px;
  background:var(--forest);width:var(--sp,0%);transition:width .1s linear;opacity:0;}
.site-header.is-scrolled .site-header__progress,.site-header--solid .site-header__progress{opacity:1;}
.admin-bar .site-header{top:32px;}
@media (max-width:782px){.admin-bar .site-header{top:46px;}}

.brand{display:flex;align-items:center;gap:12px;line-height:1;color:inherit;}
.brand__mark{width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:1px solid currentColor;
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 118;
  font-weight:700;font-size:13px;}
.brand__name{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;
  font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;}
.brand__sub{display:block;font-family:'Inter Tight',sans-serif;font-weight:400;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-top:5px;}

.nav{display:flex;align-items:center;gap:34px;}
.nav > a,.nav__trigger{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100;
  font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:inherit;background:none;border:0;padding:0;cursor:pointer;
  opacity:.85;transition:opacity .25s var(--ease);}
.nav > a:hover,.nav__trigger:hover{opacity:.5;}
.nav a.is-current{opacity:.45;}
.nav .btn{padding:15px 30px;opacity:.85;transition:opacity .25s var(--ease);}
.nav .btn:hover{opacity:.5;}

/* Dropdown under a menu item that has sub-items (e.g. Producten). Keep in sync with main.css. */
.nav__has{position:relative;display:flex;align-items:center;}
.nav__has::after{content:"";position:absolute;left:-26px;right:-26px;top:100%;height:30px;}
.nav__menu{position:absolute;top:calc(100% + 24px);left:-26px;min-width:240px;
  background:var(--forest);padding:12px 0;opacity:0;visibility:hidden;
  transform:translateY(-8px);transition:all .3s var(--ease);}
.nav__has:hover .nav__menu,.nav__has:focus-within .nav__menu{
  opacity:1;visibility:visible;transform:translateY(0);}
.nav__menu a{display:block;padding:13px 26px;color:rgba(255,255,255,.78);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  transition:color .2s var(--ease),background .2s var(--ease);}
.nav__menu a:hover{color:#fff;background:var(--forest-mid,#0F2120);}

.nav-toggle{display:none;background:none;border:0;padding:10px 0;cursor:pointer;color:inherit;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;}

.offcanvas{position:fixed;inset:0 0 0 auto;width:min(480px,90vw);background:var(--forest);
  z-index:320;padding:36px var(--gut) 44px;transform:translateX(100%);
  transition:transform .55s var(--ease-out);display:flex;flex-direction:column;overflow-y:auto;}
.offcanvas.is-open{transform:translateX(0);}
.offcanvas__top{display:flex;justify-content:flex-end;margin-bottom:44px;}
.offcanvas__close{background:none;border:0;color:#fff;cursor:pointer;padding:8px 0;
  font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;}
.offcanvas nav{display:flex;flex-direction:column;}
.offcanvas nav a{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;
  font-weight:700;font-size:clamp(21px,5.5vw,28px);text-transform:uppercase;
  letter-spacing:-.01em;color:#fff;padding:15px 0;border-bottom:var(--hair-light);}
.offcanvas .btn{margin-top:40px;}
.scrim{position:fixed;inset:0;background:rgba(10,22,22,.6);z-index:300;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
.scrim.is-open{opacity:1;pointer-events:auto;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--forest-deep);color:rgba(255,255,255,.66);padding:120px 0 56px;}
.site-footer h5{font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;margin:0 0 24px;}
.site-footer a{color:rgba(255,255,255,.66);transition:color .25s var(--ease);}
.site-footer a:hover{color:#fff;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:12px;font-size:15px;}
.site-footer .brand{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:56px;}
.footer-bottom{margin-top:88px;padding-top:36px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.45);}
.footer-bottom a{color:rgba(255,255,255,.45);}

.mobile-bar{display:none;}

/* ---------- ≤1180 ---------- */
@media (max-width:1180px){
  :root{--pad:120px;--gut:32px;--header-h:80px;}
  .nav{display:none;}
  .nav-toggle{display:block;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:48px;}
}

/* ---------- ≤767 ---------- */
@media (max-width:767px){
  :root{--pad:88px;--gut:22px;--header-h:72px;}
  .site-header > div{padding:0 22px!important;gap:16px!important;}
  :is(.site-header,.offcanvas,.site-footer,.mobile-bar){font-size:16px;}
  .offcanvas .btn{width:100%;padding:20px 24px;}
  .site-footer{padding:80px 0 44px;}
  .footer-grid{grid-template-columns:1fr;gap:44px;}
  .footer-bottom{margin-top:56px;}

  .mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:180;
    background:var(--forest-deep);border-top:1px solid rgba(255,255,255,.14);}
  .mobile-bar a{flex:1;padding:17px 8px;text-align:center;color:#fff;
    font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;
    letter-spacing:.14em;text-transform:uppercase;border-right:1px solid rgba(255,255,255,.14);}
  .mobile-bar a:last-child{border-right:0;}
  body{padding-bottom:54px;}
}

/* Mobile bar: the first item ("Contact/offerte aanvragen") is longer, so it
   gets more room and stays on one line. */
@media (max-width:767px){
  .mobile-bar a{white-space:nowrap;}
  .mobile-bar a:first-child{flex:2.4 1 0;letter-spacing:.06em;font-size:10.5px;padding-left:4px;padding-right:4px;}
}

/* Header links and button stay on one line. */
.nav > a,.nav .btn{white-space:nowrap;}
@media (min-width:1181px) and (max-width:1400px){
  .nav{gap:24px;}
  .nav .btn{padding:15px 22px;}
}

/* Mobile bar: larger buttons with an icon above the label, three equal parts. */
@media (max-width:767px){
  .mobile-bar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:7px;flex:1 1 0;padding:14px 4px 13px;
    font-size:12px;letter-spacing:.12em;white-space:nowrap;
  }
  .mobile-bar a:first-child{flex:1 1 0;font-size:12px;letter-spacing:.12em;padding:14px 4px 13px;}
  .mobile-bar__icon{width:26px;height:26px;flex:none;display:block;}
  body{padding-bottom:0;}
  .site-footer{padding-bottom:calc(44px + 80px);}
}

/* Mobile: the Contact/offerte button in the off-canvas menu is a pill, like
   the other buttons on the site. */
@media (max-width:767px){
  .offcanvas .btn{border-radius:9999px;}
}

/* Honeypot field for the forms (spam protection). */
.as-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* Mobile bar: four buttons (Contact, Offerte, Bellen, WhatsApp). The bar sits a little higher
   above the bottom edge: browser toolbars (which slide in and out while scrolling) otherwise
   swallow taps near the edge. */
@media (max-width:767px){
  .mobile-bar{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateZ(0);touch-action:manipulation;}
  .mobile-bar a,.mobile-bar a:first-child{font-size:11px;letter-spacing:.06em;padding:12px 2px 10px;gap:6px;}
  .site-footer{padding-bottom:calc(44px + 104px);}
}
/* Mobile bar on iPhone/Safari: the browser toolbar slides away while scrolling down, and a bar that is
   fixed to the bottom edge then moves down with it (and ends up under the small toolbar, where taps
   are lost). Position the bar from the SMALL viewport height instead: it then stays on the same
   spot on screen, like when scrolling up. */
@supports (height:100svh){
  @media (max-width:767px){
    .mobile-bar{bottom:auto;top:calc(100svh - 88px);height:88px;box-sizing:border-box;padding-bottom:10px;}
  }
}
/* Mobile header: a taller bar with a bigger logo and an easier Menu button. */
@media (max-width:767px){
  .site-header > div{padding:14px 22px!important;}
  .site-header img{height:24px!important;width:auto!important;}
  .nav-toggle{padding:12px 0;font-size:13px;}
}
/* Footer, Contact column: round photo (links to "Over mij"). */
.footer-me{display:inline-block;margin:0 0 18px;line-height:0;}
.footer-me img{display:block;width:72px;height:72px;border-radius:50%;object-fit:cover;}
/* Buttons: on hover (and keyboard focus) the colours swap for contrast. */
.btn--primary:not(:disabled):hover,.btn--primary:not(:disabled):focus-visible{background:#fff!important;background-image:none!important;color:#142D2D!important;box-shadow:inset 0 0 0 1.5px #142D2D!important;}
.site-header .btn:hover,.site-header .btn:focus-visible{background:#fff!important;background-image:none!important;color:#142D2D!important;border-color:#fff!important;opacity:1!important;}
.offcanvas .btn--light:hover,.offcanvas .btn--light:focus-visible{background:transparent!important;background-image:none!important;color:#fff!important;border-color:#fff!important;}