/* ============================================================
   GET2GROW — shared design system
   Used by: index.html, html/privacy.html, html/terms.html, html/login.html
   Fonts: Playfair Display (serif) + Mulish (sans), loaded per-page.
   ============================================================ */

:root {
  --bg: #0d1e14;
  --bg-2: #0f2117;
  --bg-3: #102619;
  --gold: #c9a45c;
  --gold-soft: #d8bd84;
  --cream: #f3f0e7;
  --body: #93a48d;
  --body-dim: #7e8e79;
  --line: rgba(201, 164, 92, 0.22);
  --line-soft: rgba(243, 240, 231, 0.10);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Mulish", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 56px; }

.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--cream); }

a { color: inherit; text-decoration: none; }

/* ---------- NAV ---------- */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  padding: 30px 0;
}
header.scrolled {
  background: rgba(13, 30, 20, 0.92);
  backdrop-filter: blur(10px);
  padding: 18px 0;
  box-shadow: 0 1px 0 var(--line-soft);
}
.nav { display: flex; align-items: center; justify-content: space-between; }
.logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.36em;
  color: var(--gold);
}
.nav-links { display: flex; gap: 48px; align-items: center; }
.nav-links a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.nav-login {
  color: var(--gold);
  border: 1px solid var(--line);
  padding: 10px 26px;
  margin-left: 8px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.nav-links a.nav-login::after { display: none; }
.nav-links a.nav-login:hover { background: var(--gold); color: #1a1208; border-color: var(--gold); }
.nav-toggle { display: none; background: none; border: none; color: var(--cream); cursor: pointer; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 19px 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.btn-gold { background: var(--gold); color: #1a1208; }
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost { background: transparent; color: var(--cream); border-color: rgba(243,240,231,0.45); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline-gold {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  margin-top: 22px;
}
.btn-outline-gold:hover { background: var(--gold); color: #1a1208; }

/* ---------- SECTION SHELL ---------- */
section { position: relative; }
.section-pad { padding: 130px 0; }

.sec-head { text-align: center; margin-bottom: 30px; }
.sec-head .eyebrow { display: block; margin-bottom: 22px; }
.sec-head h2 { font-size: clamp(46px, 6vw, 84px); line-height: 1; }

/* ---------- HERO (index) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  background: #0a160e;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,30,20,0.60) 0%, rgba(13,30,20,0.50) 35%, rgba(13,30,20,0.55) 70%, rgba(13,30,20,0.96) 100%);
  z-index: 1;
}
.hero > * { position: relative; z-index: 2; }
.hero > .hero-video { position: absolute; z-index: 0; }
.hero > .scroll-ind { position: absolute; z-index: 2; }
.hero .eyebrow { margin-bottom: 28px; letter-spacing: 0.5em; }
.hero h1 {
  font-size: clamp(72px, 12vw, 168px);
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 40px rgba(0,0,0,0.35);
}
.hero p {
  max-width: 620px;
  margin: 34px auto 0;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 300;
  color: rgba(243, 240, 231, 0.9);
  line-height: 1.7;
}
.hero-cta { display: flex; gap: 20px; margin-top: 46px; flex-wrap: wrap; justify-content: center; }

.scroll-ind {
  position: absolute;
  bottom: 38px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.34em;
  color: rgba(243,240,231,0.7);
}
.scroll-ind svg { animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------- DIENSTEN (index) ---------- */
.diensten { background: var(--bg); }
.diensten-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 18px;
}
.diensten-top h2 { font-size: clamp(48px, 6vw, 90px); line-height: 0.98; }
.diensten-top .eyebrow { display: block; margin-bottom: 26px; }
.diensten-top .lead { font-size: 19px; font-weight: 300; color: var(--body); line-height: 1.7; padding-bottom: 10px; }
.rule { height: 1px; background: var(--line-soft); margin: 56px 0; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.service {
  padding: 56px 48px 60px 0;
  border-top: 1px solid var(--line-soft);
}
.services-grid .service:nth-child(-n+3) { border-top: none; }
.service-icon { color: var(--gold); margin-bottom: 38px; }
.service h3 { font-size: 27px; font-weight: 500; margin-bottom: 18px; }
.service p { color: var(--body); font-weight: 300; font-size: 16px; line-height: 1.75; }

/* ---------- AANPAK (index) ---------- */
.aanpak { background: var(--bg-2); }
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-top: 70px;
}
.step {
  padding: 64px 40px 70px 0;
  border-right: 1px solid var(--line-soft);
}
.step:last-child { border-right: none; padding-right: 0; }
.step:not(:first-child) { padding-left: 40px; }
.step .num {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: rgba(201, 164, 92, 0.42);
  margin-bottom: 30px;
}
.step h3 { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.15; margin-bottom: 22px; }
.step p { color: var(--body); font-weight: 300; font-size: 16px; line-height: 1.7; }

/* ---------- HORTIHUB (index) ---------- */

/* The WKK block sits above the three service cards and has to read as the
   headline rather than as a fourth peer — hence the gold rule and the ground
   shift, not a bigger typeface. */
.wkk-feature {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
  margin: 56px 0 8px;
  padding: 44px 44px 46px;
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 4%, transparent);
}
.wkk-feature h3 {
  font-size: 30px;
  font-weight: 500;
  margin: 14px 0 20px;
  text-wrap: balance;
}
.wkk-feature p {
  color: var(--body);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.8;
}
.wkk-feature p + p { margin-top: 16px; }
.wkk-feature strong { color: var(--ink, inherit); font-weight: 600; }

/* Filled in by js/ui/landing-page.js from wkk-public-stats. Hidden by default
   (the `hidden` attribute in the markup) — no fallback text, since a claim we
   cannot back with real data is worse than showing nothing. */
.wkk-feature-stat {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  font-weight: 500;
  font-size: 16px;
}
.wkk-feature-stat strong { color: var(--gold); font-weight: 700; }

.wkk-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  align-self: center;
}
.wkk-feature-list li {
  position: relative;
  padding-left: 26px;
  color: var(--body);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.6;
}
/* A rule, not a tick: these are what the model weighs, not a feature checklist. */
.wkk-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 1px;
  background: var(--gold);
}

@media (max-width: 900px) {
  .wkk-feature {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 26px 34px;
  }
  .wkk-feature h3 { font-size: 25px; }
}

/* Four cards, not three — Climate Advisor, Weather, Labor, Learning. Two per
   row reads better here than four-across: the WKK block above already set a
   wide, spacious rhythm, and four thin columns would feel cramped next to it. */
.hortihub-grid { grid-template-columns: repeat(2, 1fr); }
.hortihub-grid .service:nth-child(-n+3) { border-top: 1px solid var(--line-soft); }
.hortihub-grid .service:nth-child(-n+2) { border-top: none; }

.hortihub-cta { text-align: center; margin-top: 48px; }
.hortihub-cta p { color: var(--body); font-weight: 300; margin-bottom: 26px; }

/* ---------- METHOD (index) ----------
   Three engines, three columns of specifics. Same card grammar as the service
   cards; the list and the closing note are the only additions. */
.method { background: var(--bg-2); }
.method-grid .service:nth-child(-n+3) { border-top: none; }
.method-list { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 12px; }
.method-list li { position: relative; padding-left: 22px; color: var(--body); font-weight: 300; font-size: 15px; line-height: 1.6; }
.method-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 10px; height: 1px; background: var(--gold); }
.method-link { color: var(--gold); text-decoration: none; font-size: 15px; letter-spacing: 0.01em; }
.method-link:hover { text-decoration: underline; }
.method-note { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-soft); color: var(--body); font-weight: 300; font-size: 16px; line-height: 1.75; max-width: 62ch; }

/* Screenshot slideshow — hidden by default in the markup (js/ui/landing-page.js
   un-hides it once real images load), so there is no layout jump reserved for
   content that may not be there yet. */
.hortihub-gallery-wrap { margin-top: 64px; }
.hh-gallery-label { display: block; margin-bottom: 22px; text-align: center; }
.hortihub-gallery {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.slideshow-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.slideshow-img.active { opacity: 1; }
.slideshow-dots {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.slideshow-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.slideshow-dots button:hover { background: rgba(255, 255, 255, 0.7); }
.slideshow-dots button.active { background: #fff; transform: scale(1.2); }

/* ---------- OVER (index) ---------- */
.over { background: var(--bg); }
.over-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 90px;
  align-items: stretch;
}
/* The frame for landing-slideshow.js's #overSlideshow — img.slideshow-img
   elements are injected as children (see js/ui/landing-slideshow.js). The
   background color is only a fallback while the image loads. Stats used to
   overlay this photo directly; they moved to .stats-strip below because
   overlaying a caption on a photo that changes every 5 seconds stops reading
   as one image with a caption. */
.over-figure {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  background: var(--bg-3);
}
.over-body { display: flex; flex-direction: column; justify-content: center; }
.over-body .eyebrow { display: block; margin-bottom: 28px; }
.over-body h2 { font-size: clamp(42px, 4.4vw, 64px); line-height: 1.04; margin-bottom: 36px; }
.over-body p { color: var(--body); font-weight: 300; font-size: 18px; line-height: 1.78; margin-bottom: 24px; }

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 70px;
  border: 1px solid var(--line-soft);
}
.stats-strip .stat { padding: 30px 32px; }
.stats-strip .stat:not(:last-child) { border-right: 1px solid var(--line-soft); }
.stats-strip .stat .figure {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 500;
  color: var(--gold-soft);
  line-height: 1;
  margin-bottom: 12px;
}
.stats-strip .stat .label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body-dim);
}

/* ---------- CONTACT (index) ---------- */
.contact { background: var(--bg-2); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 100px;
  margin-top: 20px;
}
.contact-intro { font-size: 21px; font-weight: 300; color: var(--body); line-height: 1.7; margin-bottom: 64px; }
.contact-item { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 44px; }
.contact-item svg { color: var(--gold); flex-shrink: 0; margin-top: 4px; }
.contact-item .ci-label { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.contact-item .ci-value { font-size: 20px; font-weight: 300; color: var(--cream); }

.field { margin-bottom: 36px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 16px;
}
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 300;
  padding: 6px 0 16px;
  transition: border-color 0.3s ease;
}
.field textarea { resize: vertical; min-height: 70px; }
.field input::placeholder, .field textarea::placeholder { color: var(--body-dim); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.form .btn-gold { width: 100%; margin-top: 14px; }

/* ---------- FOOTER ---------- */
footer {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding: 40px 0;
}
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-row .copy { font-size: 15px; color: var(--body-dim); font-weight: 300; }
.footer-links { display: flex; gap: 44px; }
.footer-links a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--body); transition: color 0.3s ease;
}
.footer-links a:hover { color: var(--gold); }

/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   INNER PAGES (privacy, terms, login)
   Header is always solid (no hero behind it).
   ============================================================ */
body.page-inner { min-height: 100vh; display: flex; flex-direction: column; }
body.page-inner main { flex: 1 0 auto; }
body.page-inner header {
  background: rgba(13, 30, 20, 0.92);
  backdrop-filter: blur(10px);
  padding: 18px 0;
  box-shadow: 0 1px 0 var(--line-soft);
}

.page-top { padding: 132px 0 8px; }
.page-top .eyebrow { display: block; margin-bottom: 18px; }
.page-top h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.03; }

/* ---------- LEGAL (privacy / terms) ---------- */
.legal { max-width: 760px; padding: 26px 0 120px; }
.legal-meta { color: var(--body-dim); font-size: 14px; margin-bottom: 40px; }
.legal-meta a { color: var(--gold); text-decoration: underline; }
.legal h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold-soft);
  margin: 44px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.legal p { color: var(--body); font-weight: 300; font-size: 17px; line-height: 1.78; margin-bottom: 16px; }
.legal ul { color: var(--body); font-weight: 300; font-size: 17px; line-height: 1.78; margin: 0 0 18px 1.25rem; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--gold); }
.legal a { color: var(--gold); text-decoration: underline; }
.legal strong { color: var(--cream); font-weight: 600; }
.legal-contact-box {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 24px 28px;
  margin-top: 18px;
}
.legal-contact-box p { margin: 0; }

/* ============================================================
   AUTH / LOGIN CARD
   Class names + IDs are consumed by auth JS — keep them stable.
   ============================================================ */
.auth-wrap {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140px 20px 60px;
}

.login-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
}

.login-header {
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
  padding: 38px 32px 30px;
  text-align: center;
}
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.login-logo-text {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.36em;
  color: var(--gold);
}
.login-subtitle {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body);
}

.tab-nav {
  display: flex;
  border-bottom: 1px solid var(--line-soft);
}
.tab-btn {
  flex: 1;
  padding: 16px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body);
  cursor: pointer;
  transition: color 0.2s, border-bottom-color 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--cream); }
.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.tab-panel { display: none; padding: 30px 32px 34px; }
.tab-panel.active { display: block; }

.form-group { margin-bottom: 20px; }

.login-card label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 8px;
}

.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"],
.login-card textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  font-size: 0.95rem;
  color: var(--cream);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
  font-family: var(--sans);
}
.login-card input::placeholder, .login-card textarea::placeholder { color: var(--body-dim); }

/* Override Chrome's yellow autofill background on dark theme. */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--bg-3) inset;
  -webkit-text-fill-color: var(--cream);
  caret-color: var(--cream);
}

.login-card textarea { resize: vertical; min-height: 80px; }

.login-card input[type="email"]:focus,
.login-card input[type="password"]:focus,
.login-card input[type="text"]:focus,
.login-card textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.18);
  background: var(--bg-2);
}

.submit-btn {
  width: 100%;
  padding: 15px;
  background: var(--gold);
  color: #1a1208;
  border: none;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 6px;
}
.submit-btn:hover { background: var(--gold-soft); }
.submit-btn:active { transform: scale(0.99); }
.submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-message {
  margin-top: 16px;
  padding: 11px 14px;
  font-size: 0.85rem;
  display: none;
}
.auth-message.error {
  background: rgba(239, 68, 68, 0.10);
  color: #f4a3a3;
  border: 1px solid rgba(239, 68, 68, 0.30);
  display: block;
}
.auth-message.success {
  background: rgba(201, 164, 92, 0.10);
  color: var(--gold-soft);
  border: 1px solid var(--line);
  display: block;
}

.forgot-link {
  display: block;
  text-align: right;
  font-size: 0.78rem;
  color: var(--gold);
  cursor: pointer;
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  text-decoration: underline;
}
.forgot-link:hover { color: var(--gold-soft); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--gold);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 20px;
  font-family: var(--sans);
  text-decoration: underline;
}
.back-link:hover { color: var(--gold-soft); }

.confirm-box {
  background: rgba(201, 164, 92, 0.08);
  border: 1px solid var(--line);
  padding: 26px;
  text-align: center;
}
.confirm-box .confirm-icon { font-size: 2rem; margin-bottom: 12px; }
.confirm-box h3 { color: var(--gold-soft); margin-bottom: 8px; font-size: 1.1rem; font-weight: 600; }
.confirm-box p { color: var(--body); font-weight: 300; font-size: 0.9rem; line-height: 1.6; }

.panel-desc {
  font-size: 0.9rem;
  color: var(--body);
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 22px;
}
.setpw-heading {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 8px;
}
.optional-label { font-weight: 400; color: var(--body-dim); text-transform: none; letter-spacing: 0; }

.auth-foot {
  text-align: center;
  margin-top: 26px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--body);
}
.auth-foot a { color: var(--gold); text-decoration: underline; }
.auth-foot a:hover { color: var(--gold-soft); }
.lang-toggle {
  display: inline-flex;
  margin-left: 8px;
  background: rgba(243, 240, 231, 0.06);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.lang-toggle button {
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--body);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-toggle button:hover { color: var(--gold); }
.lang-toggle button.active { background: var(--gold); color: #1a1208; }

/* In the header nav specifically (index.html only — the login page's own
   .auth-foot .lang-toggle keeps the boxed pill style above): a bordered
   box matching .nav-login's own treatment (same border color/weight), so
   the toggle reads as clearly as the Login button next to it instead of
   relying on subtle text-color contrast against the busy hero video. The
   active language gets a solid fill (see the .active rule below for why
   --gold-soft, not --gold) since a filled block stays legible over the
   video in a way a bare color change does not (6 Sept follow-up: it
   wasn't). */
.nav-links .lang-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  /* background: none, not inherited from the base .lang-toggle pill (whose
     --hh-subtle fill is near-white): over the hero, modern-neutral.css
     colors the inactive button's text near-white too, so a light fill
     here would wash it out completely — the same invisibility this fix
     exists to solve. */
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
}
.nav-links .lang-toggle button {
  background: none;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}
.nav-links .lang-toggle button:hover { background: rgba(201, 164, 92, 0.18); }
/* !important: modern-neutral.css's scroll-aware nav-link color rules (added
   alongside this feature, matching .nav-links a's own pattern) are more
   specific than this class selector and would otherwise win regardless of
   scroll state, silently erasing which language is active. Same reasoning
   as this file's .hero h1 rule. */
.nav-links .lang-toggle button.active {
  /* --gold-soft, not --gold: modern-neutral.css remaps --gold to a dark
     green (hh-green-800) for this theme, which #1a1208 text would sit on
     at ~2.6:1 contrast — fine for .nav-login's hover blip, not for a
     state that's visible at all times. --gold-soft remaps to the bright
     hh-green-500 instead, where #1a1208 reads at a comfortable ~8:1. */
  background: var(--gold-soft) !important;
  color: #1a1208 !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .wrap { padding: 0 32px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .diensten-top { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .services-grid .service:nth-child(-n+3) { border-top: 1px solid var(--line-soft); }
  .services-grid .service:nth-child(-n+2) { border-top: none; }
  .service { padding-right: 32px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step { border-bottom: 1px solid var(--line-soft); }
  .step:nth-child(2n) { border-right: none; }
  .step:not(:first-child) { padding-left: 0; }
  .step:nth-child(2n) { padding-left: 40px; border-left: 1px solid var(--line-soft); }
  .over-grid { grid-template-columns: 1fr; gap: 48px; }
  .over-figure { min-height: 460px; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .stats-strip .stat:nth-child(even) { border-right: none; }
  .stats-strip .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 22px; }
  .section-pad { padding: 84px 0; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service { border-top: 1px solid var(--line-soft) !important; padding-right: 0; }
  .services-grid .service:first-child { border-top: none !important; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; padding-left: 0 !important; border-left: none !important; padding: 44px 0; }
  .stats-strip { grid-template-columns: 1fr; }
  .stats-strip .stat { padding: 22px 22px; border-right: none !important; }
  .stats-strip .stat:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
  .stats-strip .stat .figure { font-size: 36px; }
  .footer-row { flex-direction: column; text-align: center; }
  .hero-cta { width: 100%; }
  .btn { flex: 1; }
  .page-top { padding: 116px 0 6px; }
  .auth-wrap { padding: 116px 16px 48px; }
}