/* BC Tuinaanleg. THEME LAYER: re-theme by editing only the two token blocks
   below (:root = daylight, [data-mode="evening"] = evening; --deep/--paper are
   constant). data-mode on <html> is set by js/main.js. */
:root{
  --deep:#1E3D2B;            /* brand dark, constant across modes */
  --paper:#E9F1E4;           /* near-white contrast surface, constant */
  --paper-text:#F2F6EC;      /* brightest text on photos and dark bands */
  --caption:#DFEDE2;         /* photo-slot captions */
  --scrim-rgb:15 33 26;      /* photo overlay ink (rgb triplet) */
  --light-rgb:228 238 223;   /* hairlines on dark surfaces (rgb triplet) */
  --band:var(--panel);       /* statement band surface + its palette */
  --band-text:var(--panel-text);
  --band-accent:#CFE3C6;
  --band-accent-soft:#BFD8C4;
  --band-line:rgb(var(--light-rgb) / .25);
  --footer-bg:var(--panel);
  --footer-text:var(--panel-text);
  --footer-soft:#CFE3C6;
  --footer-faint:#BFD8C4;
  --bg:var(--paper);
  --ink:#22301F;
  --line:rgba(30,61,43,.22);
  --button-bg:var(--deep);
  --button-text:var(--paper);
  --panel:var(--deep);
  --panel-text:var(--paper);
  --accent:var(--deep);
  --photo-fallback:linear-gradient(155deg,#2C5A3F 0%,var(--deep) 55%,#152B1E 100%);
  --whatsapp:#25D366;        /* WhatsApp brand green, fixed across themes */
  --whatsapp-ink:#0B3A1F;    /* text on the WhatsApp button */
  --signal:#2F68E0;          /* Signal blue, darkened for AA contrast with --signal-ink */
  --signal-ink:#FFFFFF;
}
:root[data-mode="evening"]{
  --bg:#10241B;
  --ink:#E4EEDF;
  --line:rgba(156,200,164,.30);
  --button-bg:var(--paper);
  --button-text:#10241B;
  --panel:var(--paper);
  --panel-text:#1C3627;
  --accent:#A9CBA9;
  --photo-fallback:linear-gradient(155deg,#234734 0%,#17301F 55%,#0F1F15 100%);
  --scrim-rgb:8 16 12;
  --band:#DCEBD4;
  --band-text:#1C3627;
  --band-accent:#2C5A3F;
  --band-accent-soft:#2C5A3F;
  --band-line:rgba(28,54,39,.25);
  --footer-bg:#0A1812;
  --footer-text:#E4EEDF;
  --footer-soft:#CFE3C6;
  --footer-faint:#9CC8A4;
  --lightline-rgb:28 54 39;  /* hairlines/mixes on light surfaces in evening */
}
/* evening inverts the light-mode logic: what is dark by day turns light.
   Cards, CTA bands, contact panel and dark bands become true light surfaces
   with dark text; the footer flips the other way, to the darkest green anchor. */
[data-mode="evening"] .section-dark .button-solid,
[data-mode="evening"] .section-tint .button-solid{background:var(--deep);color:var(--paper)}
[data-mode="evening"] .section-dark .button-outline,
[data-mode="evening"] .section-tint .button-outline{border-color:var(--deep);color:var(--deep)}
/* evening: dark bands take the light green of the contrast pair, distinct from the near-white CTA tint */
[data-mode="evening"] .route-station{background:var(--button-bg);color:var(--band-text);border-color:rgb(var(--lightline-rgb) / .22)}
[data-mode="evening"] .route-station h3{color:var(--deep)}
[data-mode="evening"] .route-station .step-you{color:var(--band-accent)}
[data-mode="evening"] .route-node{background:var(--button-bg);color:var(--button-text)}
[data-mode="evening"] .service{background:var(--button-bg);color:var(--band-text);border-color:rgb(var(--lightline-rgb) / .22)}
[data-mode="evening"] .service h3,
[data-mode="evening"] .service .check-list li::before{color:var(--deep)}
[data-mode="evening"] .section-tint{background:var(--button-bg);color:var(--band-text)}
[data-mode="evening"] .section-tint .kicker{color:var(--band-accent)}
[data-mode="evening"] .section-tint .card,
[data-mode="evening"] .section-tint .card-link{color:var(--band-text)}
[data-mode="evening"] .section-tint h3,
[data-mode="evening"] .section-tint .materials-bar b{color:var(--deep)}
[data-mode="evening"] .section-tint .materials-bar{background:color-mix(in srgb,var(--deep) 6%,transparent)}
[data-mode="evening"] .quote blockquote{color:var(--button-bg)}
[data-mode="evening"] .site-footer{background:var(--footer-bg);color:var(--footer-text)}
[data-mode="evening"] .footer-list a,[data-mode="evening"] .footer-line,
[data-mode="evening"] .footer-bottom a{color:var(--footer-text)}
[data-mode="evening"] .footer-heading{color:var(--footer-faint)}
[data-mode="evening"] .footer-list a:hover,
[data-mode="evening"] .footer-bottom a:hover{color:var(--footer-soft)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:7rem}
body{background:var(--bg);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;line-height:1.6;
  transition:background-color .8s ease,color .8s ease}
::selection{background:var(--accent);color:var(--bg)}
img{max-width:100%;display:block}

/* ---------- self-hosted font (AVG: no requests to Google) ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/archivo-var.woff2?v=13) format('woff2-variations')}

/* ---------- privacy note ---------- */
.privacy-note{position:fixed;right:1rem;bottom:1rem;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  width:calc(100% - 2rem);max-width:30rem;background:var(--paper);color:var(--deep);border-radius:12px;padding:.9rem 1.1rem;
  box-shadow:0 10px 30px rgb(0 0 0 / .25);font-size:.85rem;line-height:1.5}
.privacy-note[hidden]{display:none}
.privacy-note p{margin:0}
.privacy-note strong{font-weight:600}
.privacy-note a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.privacy-note a:hover,.privacy-note a:focus-visible{text-decoration-thickness:2px}
.privacy-note-close{flex:none;align-self:center;border:none;background:none;color:inherit;cursor:pointer;padding:.2rem;margin:0 -.2rem 0 0;border-radius:4px}
.privacy-note-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;display:block}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip-link{position:fixed;top:.75rem;left:.75rem;z-index:70;padding:.6rem 1.1rem;border-radius:2rem;font-size:.9rem;font-weight:600;
  background:var(--button-bg);color:var(--button-text);text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.section-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--paper)}
.hero :focus-visible{outline-color:var(--paper)}

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

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:1rem clamp(1.25rem,4vw,3rem);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:block;line-height:0;text-decoration:none}
.brand img{height:42px;width:auto;display:block}
.brand .logo-night{display:none}
[data-mode="evening"] .brand .logo-day{display:none}
[data-mode="evening"] .brand .logo-night{display:block}
nav{display:flex;gap:1.6rem;align-items:center;margin-left:auto}
nav a{color:var(--ink);text-decoration:none;font-size:.85rem;font-weight:500;border-bottom:1px solid transparent;padding-bottom:.15rem}
nav a:hover,nav a[data-active]{color:var(--accent);border-color:var(--accent)}
#theme-toggle,.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:50%;color:var(--accent);cursor:pointer;background:none}
#theme-toggle{transition:transform .4s}
#theme-toggle[data-auto]{border-style:dashed}
#theme-toggle:hover{transform:rotate(30deg)}
#theme-toggle svg,.nav-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
:root:not([data-mode="evening"]) #icon-moon{display:none}
[data-mode="evening"] #icon-sun{display:none}
.nav-toggle{display:none}
@media(max-width:820px){
  #theme-toggle{margin-left:auto}
  .nav-toggle{display:inline-flex}
  nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:1.1rem;
    padding:1.2rem clamp(1.25rem,4vw,3rem) 1.5rem;
    background:var(--bg);
    border-bottom:1px solid var(--line)}
  nav.open{display:flex}
  nav a{font-size:1rem;display:block;width:100%;padding:.35rem 0}
}

/* ---------- hero ---------- */
.hero{position:relative;height:88vh;min-height:min(560px,90vh);overflow:hidden;display:flex;align-items:flex-end}
.hero-image{position:absolute;inset:0;background-size:cover;background-position:center 62%;
  background-image:url(../images/hero-home.jpg?v=13),var(--photo-fallback)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgb(var(--scrim-rgb) / .45) 55%,rgb(var(--scrim-rgb) / .72))}
.hero-content{position:relative;z-index:2;width:min(1180px,100% - clamp(2.5rem,8vw,6rem));margin:0 auto;padding-bottom:4rem}
.hero-content .kicker{color:var(--paper-text);text-shadow:0 1px 2px rgb(var(--scrim-rgb) / .85),0 0 12px rgb(var(--scrim-rgb) / .55)}
.hero-content h1,.hero-content p.lead{color:var(--paper-text);text-shadow:0 1px 24px rgb(var(--scrim-rgb) / .35)}
.hero-content p.lead{opacity:.9}
.hero .button-solid{background:var(--paper);color:var(--deep)}
[data-mode="evening"] .hero .button-solid{background:var(--paper);color:var(--bg)}
.hero .button-outline{border:1.5px solid var(--paper);color:var(--paper-text)}

/* ---------- page hero (subpages): own photo, green fallback ---------- */
.page-hero{position:relative;height:58vh;min-height:min(420px,90vh);overflow:hidden;display:flex;align-items:flex-end;
  background-size:cover;background-position:center 55%}
.page-hero.short{height:44vh;min-height:min(340px,90vh)}
.page-hero .hero-overlay{background:linear-gradient(transparent 28%,rgb(var(--scrim-rgb) / .8))}
[data-mode="evening"] .page-hero .hero-overlay{background:linear-gradient(transparent 18%,rgb(var(--scrim-rgb) / .88))}
.page-hero .hero-content{padding-bottom:3rem}
.page-hero-diensten{background-image:url(../images/page-diensten.jpg?v=13),var(--photo-fallback)}
.page-hero-impressie{background-image:url(../images/page-impressie.jpg?v=13),var(--photo-fallback)}
.page-hero-werkwijze{background-image:url(../images/page-werkwijze.jpg?v=13),var(--photo-fallback)}
.page-hero-contact{background-image:url(../images/page-contact.jpg?v=13),var(--photo-fallback)}
.page-hero-404{background-image:url(../images/page-404.jpg?v=13),var(--photo-fallback);background-position:center}
@media(max-width:820px){
  .page-hero-diensten{background-image:url(../images/page-diensten-m.jpg?v=13),var(--photo-fallback)}
  .page-hero-impressie{background-image:url(../images/page-impressie-m.jpg?v=13),var(--photo-fallback)}
  .page-hero-werkwijze{background-image:url(../images/page-werkwijze-m.jpg?v=13),var(--photo-fallback)}
  .page-hero-contact{background-image:url(../images/page-contact-m.jpg?v=13),var(--photo-fallback)}
  .page-hero-404{background-image:url(../images/page-404-m.jpg?v=13),var(--photo-fallback)}
  .page-hero{background-position:center}
}
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .hero-image{background-image:url(../images/hero-home-t.jpg?v=13),var(--photo-fallback);background-position:center}
}
@media(max-width:600px){
  .hero-image{background-image:url(../images/hero-home-m.jpg?v=13),var(--photo-fallback);background-position:center}
}

/* ---------- typography & layout ---------- */
.kicker{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:1.1rem}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1.04;font-weight:700;letter-spacing:-.022em}
h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;font-weight:700;letter-spacing:-.018em}
h3{font-weight:600}
p.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);opacity:.85}
.section{padding:clamp(5rem,10vh,8rem) 0}
.container{width:min(1180px,100% - clamp(2.5rem,8vw,6rem));margin:0 auto}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@media (scripting:none){.reveal{opacity:1;transform:none}}
.page-top{padding-top:9rem}
.page-top h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.legal{margin-top:3rem;display:grid;gap:2.2rem}
.legal h2{font-size:1.25rem;line-height:1.3;letter-spacing:0;color:var(--accent);margin-bottom:.5rem}
.legal p+p,.legal ul+p,.legal p+ul{margin-top:.7rem}
.legal ul{padding-left:1.2rem;display:grid;gap:.35rem}
.legal a{color:var(--accent)}
/* vertical rhythm */
.section .lead{margin-top:1rem}
.hero-content .lead{margin-top:1rem}
.section-dark .check-list{margin-top:2rem}
.section-tight{padding-top:0}
.section-note{margin-top:1.2rem;opacity:.85}

/* ---------- home cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.card{border:1px solid var(--line);border-radius:16px;padding:1.6rem;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:.6rem;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card-number{font-size:2.6rem;font-weight:700;color:var(--accent);opacity:.16;line-height:1}
.card h3{font-size:1.2rem;color:var(--accent)}
.card p{font-size:.92rem;opacity:.8;flex:1}
.card-link{font-size:.82rem;font-weight:600;color:var(--accent)}
.card-link::after{content:"";display:inline-block;width:1em;height:1em;margin-left:.3em;vertical-align:-.15em;
  background:currentColor;mask:url(../images/icon-pijl.svg) center/contain no-repeat}
@media(max-width:1020px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.card-grid{grid-template-columns:1fr}}

/* ---------- photo slots ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-top:3rem}
.photo-slot{border-radius:14px;min-height:0;position:relative;overflow:hidden;
  background:var(--photo-fallback),radial-gradient(120% 90% at 20% 15%,rgba(255,255,255,.14),transparent 55%)}
a.photo-slot{display:block;text-decoration:none}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.photo-slot span{position:absolute;left:0;right:0;bottom:0;padding:.8rem 1rem;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--caption);background:linear-gradient(transparent,rgb(var(--scrim-rgb) / .6))}
.photo-slot.small{grid-column:span 2;aspect-ratio:4/3.4}
@media(max-width:820px){.photo-slot.small{grid-column:span 3}}
@media(max-width:540px){.photo-slot.small{grid-column:span 6}}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.services .service:last-child:nth-child(odd){grid-column:1/-1}
.service{border:1px solid var(--line);border-radius:16px;padding:1.7rem 1.8rem}
.service h3{font-size:1.15rem;color:var(--accent);margin-bottom:.4rem}
.service h3 a{color:inherit;text-decoration:none}
.service h3 a:hover{text-decoration:underline}
.service p{font-size:.95rem;opacity:.85}
.materials-bar{margin-top:1.5rem;padding:1.2rem 1.6rem;border-radius:12px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:.9rem;display:flex;gap:2rem;flex-wrap:wrap}
.materials-bar b{color:var(--accent)}
@media(max-width:820px){.services{grid-template-columns:1fr}}

/* ---------- process steps ---------- */
.steps{margin-top:3rem;border-left:1.5px solid var(--line);padding-left:1.8rem;display:grid;gap:2.4rem}
.step h3{font-size:1.3rem;color:var(--accent);margin:.2rem 0 .4rem}
.step p{opacity:.85;font-size:.98rem}
.step-number{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:600}
.step-you{margin-top:.7rem;font-size:.9rem;font-weight:600;color:var(--accent)}

/* ---------- route steps (werkwijze) ---------- */
.route-flow{position:relative;margin-top:3.5rem}
.route-line{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:140px;height:100%}
.route-line path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-dasharray:.5 13;stroke-linecap:round;opacity:.55}
/* stations share tracks (span 2) so consecutive steps overlap half a step:
   two walkers side by side, swapping sides of the path */
.route-steps{position:relative;display:grid;grid-template-columns:1fr 140px 1fr;grid-template-rows:repeat(5,auto);row-gap:2.4rem}
.route-steps > :nth-child(1),.route-steps > :nth-child(2){grid-row:1/3}
.route-steps > :nth-child(3),.route-steps > :nth-child(4){grid-row:2/4}
.route-steps > :nth-child(5),.route-steps > :nth-child(6){grid-row:3/5}
.route-steps > :nth-child(7),.route-steps > :nth-child(8){grid-row:4/6}
.route-station{align-self:center;padding:1.2rem 1.4rem;border-radius:14px;
  background:color-mix(in srgb,var(--accent) 5%,var(--bg));
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--bg))}
.route-station.route-left{grid-column:1;text-align:right;justify-self:end}
.route-station.route-right{grid-column:3;text-align:left;justify-self:start}
.route-station h3{font-size:1.08rem;color:var(--accent);margin-bottom:.35rem}
.route-station p{opacity:.85;font-size:.98rem}
.route-node{grid-column:2;justify-self:center;align-self:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:var(--bg);display:grid;place-items:center;
  font-size:.82rem;font-weight:700;box-shadow:0 0 0 8px var(--bg)}
@media(max-width:979.98px){
  .route-line{width:56px;left:0;transform:none}
  .route-steps{grid-template-columns:56px 1fr;grid-template-rows:auto;row-gap:2rem;grid-auto-flow:row dense}
  .route-steps > :nth-child(n){grid-row:auto}
  .route-station,.route-station.route-left,.route-station.route-right{grid-column:2;text-align:left;justify-self:start}
  .route-node{grid-column:1;justify-self:center}
}

/* ---------- contact ---------- */
.contact-panel{background:var(--panel);color:var(--panel-text);border-radius:26px;padding:clamp(2.5rem,6vw,4.5rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.contact-panel .kicker{color:var(--band-accent-soft)}
.contact-panel p.lead{opacity:.8}
.contact-panel .lead{margin-top:1.2rem}
.contact-panel .step p{opacity:.8}
.contact-panel .buttons{margin-top:1.6rem}
.contact-panel .step h3{color:var(--band-accent)}
.contact-panel .steps{margin-top:1.6rem;border-color:var(--band-line);padding-left:1.6rem;gap:1.8rem}
@media(max-width:820px){.contact-panel{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.buttons{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.button{display:inline-block;padding:.8rem 1.5rem;border-radius:2rem;text-decoration:none;font-weight:600;
  font-size:.9rem;transition:transform .2s;border:none;cursor:pointer}
.button-solid{background:var(--button-bg);color:var(--button-text)}
.button-outline{border:1.5px solid var(--accent);color:var(--accent)}
.button:hover{transform:translateY(-2px)}
.button-mail,.button-whatsapp,.button-signal{display:inline-flex;align-items:center;gap:.55rem}
.button-mail svg,.button-whatsapp svg,.button-signal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.button-whatsapp{background:var(--whatsapp);color:var(--whatsapp-ink)}

/* ---------- checklist ---------- */
.check-list{list-style:none;display:grid;gap:.6rem;margin-top:1.5rem}
.check-list li{position:relative;padding-left:1.9rem}
.check-list li::before{content:"";position:absolute;left:0;top:0;width:.8em;height:1.6em;color:var(--accent);
  background:currentColor;mask:url(../images/icon-vink.svg) center/contain no-repeat}
.section-dark .check-list li::before{color:var(--band-accent-soft)}

/* ---------- section rhythm ---------- */
.section-tint{background:color-mix(in srgb,var(--accent) 5%,var(--bg))}

/* ---------- dark band section ---------- */
.section-dark{background:var(--band);color:var(--band-text)}
.section-dark .kicker{color:var(--band-accent-soft)}
.section-dark h2,.section-dark h3{color:inherit}
.section-dark p.lead{opacity:.8}
.section-dark .button-solid{background:var(--paper);color:var(--deep)}
.section-dark .button-outline{border:1.5px solid var(--paper);color:var(--paper-text)}
.section-dark .step-number{color:var(--band-accent-soft)}
.section-dark .steps{border-color:var(--band-line)}
.note{border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.5rem;margin-top:2rem}
.section-dark .note{border-color:var(--band-line)}
.note h3{font-size:1rem;color:var(--accent);font-weight:700}
.section-dark .note h3{color:var(--band-accent)}
.note p{margin-top:.5rem;font-size:.95rem;opacity:.85}

/* ---------- material cards ---------- */
.service .check-list{margin-top:1rem;font-size:.92rem}
.service .check-list li{padding-left:1.6rem}
.material-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
.material{display:grid;gap:.7rem;align-content:start}
.material .photo-slot{aspect-ratio:4/3;min-height:0;position:relative}
.material h3{font-size:1.05rem;color:var(--accent)}
.material p{font-size:.92rem;opacity:.85}
@media(max-width:820px){.material-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.8rem;margin-top:2.5rem}
.faq details{border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.4rem}
.faq summary{cursor:pointer;font-weight:600;color:var(--accent);list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1;transition:transform .3s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.8rem;opacity:.85}

/* ---------- quote ---------- */
.quote{padding:clamp(4rem,8vh,6rem) 0;text-align:center}
.quote blockquote{font-size:clamp(1.4rem,3vw,2rem);font-weight:600;letter-spacing:-.01em;color:var(--accent)}

/* ---------- footer ---------- */
.site-footer{background:var(--panel);color:var(--panel-text);margin-top:2rem;padding:3.5rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer-chip{display:inline-block;background:var(--paper);border-radius:14px;padding:1rem 1.25rem;box-shadow:0 8px 24px rgb(0 0 0 / .18)}
.footer-chip img{height:48px;width:auto;display:block}
.footer-tagline{margin-top:.6rem;font-size:.92rem;opacity:.75;max-width:24em}
.footer-heading{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--footer-faint);font-weight:600;margin-bottom:.9rem}
.footer-list{list-style:none;display:grid;gap:.45rem;font-size:.92rem}
.footer-list a,.footer-line{color:var(--panel-text);text-decoration:none;opacity:.85;transition:opacity .2s ease,color .2s ease}
.footer-list a:hover{opacity:1;color:var(--footer-soft)}
.footer-bottom a{color:var(--panel-text);text-decoration:none;transition:color .2s ease}
.footer-bottom a:hover{color:var(--footer-soft)}
.footer-bottom{margin-top:2.8rem;padding-top:1.3rem;border-top:1px solid rgb(var(--light-rgb) / .16);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem;opacity:.6}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.footer-grid{grid-template-columns:1fr}}
/* ---------- projects (impressie) ---------- */
.projects{display:grid;gap:clamp(3.5rem,8vw,6rem);margin-top:clamp(2.5rem,6vw,4rem)}
.project{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.project-flip{grid-template-columns:1fr 1.35fr}
.project-flip .project-media{order:2}
.project-media{display:grid;gap:.7rem;min-width:0}
.project-lead,.project-thumb{display:block;position:relative;padding:0;border:none;cursor:zoom-in;overflow:hidden;
  border-radius:14px;background:var(--photo-fallback);width:100%}
.project-lead{aspect-ratio:4/3}
.project-lead img,.project-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.project-lead:hover img,.project-thumb:hover img{transform:scale(1.04)}
.project-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.7rem}
.project-thumb{aspect-ratio:1}
.project-thumbs:has(> :nth-child(2):last-child) .project-thumb{aspect-ratio:3/2}
.project-count{position:absolute;right:.8rem;bottom:.8rem;padding:.3rem .8rem;border-radius:999px;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--paper-text);background:rgb(var(--scrim-rgb) / .62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.project-text h3{font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.2;letter-spacing:-.01em;color:var(--accent);margin-bottom:.7rem}
.project-text > p:not(.kicker){opacity:.85}
.project-text .kicker{margin-bottom:.7rem}
.section-dark .project-text h3{color:var(--band-accent)}
@media(max-width:820px){
  .project,.project-flip{grid-template-columns:1fr}
  .project-flip .project-media{order:0}
}

/* ---------- reviews ---------- */
.review{margin-top:1.6rem;padding:1.3rem 1.5rem 1.3rem 1.6rem;border-radius:14px;position:relative;
  background:color-mix(in srgb,var(--accent) 7%,transparent);border-left:3px solid var(--accent)}
.review blockquote p{font-size:.98rem;line-height:1.65;font-style:italic}
.review figcaption{margin-top:.8rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.section-dark .review{background:rgb(var(--light-rgb) / .08);border-left-color:var(--band-accent)}
.section-dark .review figcaption,
[data-mode="evening"] .section-tint .review figcaption{color:var(--band-accent)}
[data-mode="evening"] .section-dark .review{background:color-mix(in srgb,var(--deep) 7%,transparent)}
.reviews{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem}
.reviews .review{margin-top:0}
@media(max-width:820px){.reviews{grid-template-columns:1fr}}

/* ---------- lightbox ---------- */
.lightbox{border:none;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;
  background:rgb(var(--scrim-rgb) / .94);color:var(--paper-text)}
.lightbox::backdrop{background:rgb(var(--scrim-rgb) / .6)}
.lightbox[open]{display:grid;place-items:center}
.lightbox-figure{display:grid;gap:.9rem;justify-items:center;padding:4.5rem 4.5rem 2rem}
.lightbox-img{max-width:min(92vw,1600px);max-height:calc(100dvh - 9rem);width:auto;height:auto;object-fit:contain;
  border-radius:10px;touch-action:pan-y;user-select:none}
.lightbox-caption{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8;text-align:center}
.lightbox-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgb(var(--light-rgb) / .35);
  background:rgb(var(--scrim-rgb) / .5);color:var(--paper-text);cursor:pointer;display:grid;place-items:center}
.lightbox-btn:hover{border-color:var(--paper-text)}
.lightbox-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lightbox-prev{left:1rem;top:50%;transform:translateY(-50%)}
.lightbox-next{right:1rem;top:50%;transform:translateY(-50%)}
.lightbox-close{right:1rem;top:1rem}
.lightbox :focus-visible{outline-color:var(--paper)}
@media(max-width:640px){
  .lightbox-figure{padding:4rem .8rem 5.5rem}
  .lightbox-prev,.lightbox-next{top:auto;bottom:1.2rem;transform:none}
  .lightbox-prev{left:calc(50% - 60px)}
  .lightbox-next{right:calc(50% - 60px)}
}

/* ---------- contact order: mail first, then apps, then phone ---------- */
.contact-panel .button-mail{background:var(--panel-text);color:var(--panel);padding:.95rem 1.8rem;font-size:1rem}
.buttons-mail{align-items:center;column-gap:1.4rem}
.contact-address{font-size:.95rem;color:var(--panel-text);text-decoration:none;border-bottom:1px solid rgb(var(--light-rgb) / .35)}
.contact-sub{margin-top:2.2rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--band-accent-soft)}
.contact-panel .buttons-apps{margin-top:.9rem}
.buttons-apps .button{font-size:.85rem;padding:.65rem 1.25rem}
.button-signal{background:var(--signal);color:var(--signal-ink)}
.contact-call{margin-top:2rem;font-size:.9rem;opacity:.75}
.contact-call a{color:var(--panel-text);text-decoration:none;border-bottom:1px solid rgb(var(--light-rgb) / .35)}
[data-mode="evening"] .contact-sub{color:var(--band-accent)}
[data-mode="evening"] .contact-address,[data-mode="evening"] .contact-call a{border-bottom-color:rgb(var(--lightline-rgb) / .35)}
@page{size:A4;margin:18mm}
@media print{
  .site-header,.site-footer,.privacy-note{display:none!important}
  body{background:#fff;color:#000}
  .page-top{padding-top:0}
  .section{padding:0}
  .container{width:100%}
  .legal{gap:1.1rem;margin-top:1.4rem}
  .legal>div{break-inside:avoid}
  .legal a{color:#000;text-decoration:none}
  .legal h2,.kicker{color:var(--deep)}
}