/* -- 1. Pico Override: goZERO Brand ------------------- */
:root {
  --pico-primary:                  #1B4332;
  --pico-primary-background:       #1B4332;
  --pico-primary-border:           #1B4332;
  --pico-primary-underline:        rgba(27, 67, 50, 0.5);
  --pico-primary-hover:            #245740;
  --pico-primary-hover-background: #245740;
  --pico-primary-hover-border:     #245740;
  --pico-primary-hover-underline:  rgba(36, 87, 64, 0.5);
  --pico-primary-focus:            rgba(27, 67, 50, 0.25);
  --pico-primary-inverse:          #ffffff;

  --pico-font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Fallback if Pico scopes under data-theme (v2 sometimes does) */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --pico-primary:                  #1B4332;
  --pico-primary-background:       #1B4332;
  --pico-primary-border:           #1B4332;
  --pico-primary-underline:        rgba(27, 67, 50, 0.5);
  --pico-primary-hover:            #245740;
  --pico-primary-hover-background: #245740;
  --pico-primary-hover-border:     #245740;
  --pico-primary-hover-underline:  rgba(36, 87, 64, 0.5);
  --pico-primary-focus:            rgba(27, 67, 50, 0.25);
  --pico-primary-inverse:          #ffffff;
}

/* -- 2. Project Design Tokens ------------------------- */
:root {
  --color-green-dark:  #1B4332;   /* primary */
  --color-green-mid:   #245740;   /* hover state */
  --color-green-light: #52B788;   /* accent / decorative */
  --color-surface:     #F4F7F5;   /* card backgrounds */
  --color-text:        #1A1A1A;
  --color-muted:       #3A3A3A;   /* body copy on light backgrounds */
  --color-border:      #E3E9E5;   /* card + pill borders */
  --max-width:         1200px;     /* widened from 1120 for a more confident content span */
  --radius:            6px;
  /* Display font (Space Grotesk via Bunny) for headings + big numbers; Inter stays for body */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --radius-card:       16px;      /* service cards */
  --shadow-sm:         0 1px 3px rgba(27, 67, 50, 0.06), 0 1px 2px rgba(27, 67, 50, 0.04);
  --shadow-md:         0 14px 30px rgba(27, 67, 50, 0.13);

  /* v1.2 reference palette (Phase 9 THEME-01) */
  --color-page-bg:      #F5F3EE;   /* warm cream page background sitewide */
  --color-accent:       #F4C430;   /* golden-yellow — TEXT only on dark; decorative marker on light */
  --color-accent-strong:#9A6A00;   /* AA-safe amber TEXT on light (4.73:1 on white) */
  --color-band-deep:    #12352A;   /* deep-green "Opgewekt" band (Phase 10) */
  --color-cta-band:     #F4C430;   /* golden CTA band background (Phase 10) */
  --color-icon-mint:    #DCEBE2;   /* Serviceverzoek icon circle */
  --color-icon-yellow:  #F7E7B0;   /* Betaling & factuur icon circle */
  --color-icon-blue:    #DFE6EA;   /* Uitbreiden icon circle */
  --color-body-green:   #4C5B52;   /* reference grey-green body text on cream (darkened for contrast) */
  --radius-btn:         8px;       /* reference slightly-rounded rectangle button radius */

  /* 8-point spacing scale (Phase 6 DS-01) */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  /* content widths */
  --width-text: 760px;   /* hero copy, about, FAQ text bands */
  --width-form: 680px;   /* contact form band */
  /* section vertical rhythm — increased ~20% for more breathing room between sections */
  --section-y:        53px;   /* desktop/tablet band padding */
  --section-y-mobile: 41px;   /* <=599px band padding */
}

/* -- 3. Web Component Layout -------------------------- */
/* Single-tier reference chrome (v1.2): a cream navbar row (logo w/ golden sun
   dot + links + NL/EN/DE toggle + green CTA) and a light single-row footer.
   Replaces the v1.1 two-tier sticky nav + dark 3-column footer. */

/* Custom elements default to display:inline — force block so their nav/footer
   layout (max-width + margin:auto centering) matches the page content exactly. */
site-nav, site-footer { display: block; }
/* Sticky standard menu bar — stays pinned at the top on scroll */
site-nav { position: sticky; top: 0; z-index: 100; }
/* display:block overrides Pico's `nav { display:flex }` — otherwise .nav-inner
   becomes a flex ITEM that shrinks to its content width (so max-width:1120 +
   margin:auto centered the whole logo+menu group, indenting the logo and making
   it drift with the menu width). Block lets .nav-inner span the full width. */
.site-nav-bar {
  display: block;
  background: var(--color-page-bg);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* On scroll: frosted background + soft shadow so the bar reads as a floating menu bar */
.site-nav-bar.is-scrolled {
  background: rgba(245, 243, 238, 0.85);
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  border-bottom-color: var(--color-border);
  box-shadow: 0 6px 24px rgba(27, 67, 50, 0.08);
}
/* CSS GRID: column 1 (auto) is the logo, column 2 (1fr) is the menu. The logo
   column is sized to the logo ALONE and sits at the content-left edge — it is
   completely independent of the menu width, so it can NEVER shift when the menu
   text changes (NL/EN/DE). This replaces flex, which was mis-positioning it. */
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);   /* 24px inline aligns the logo with the hero/sections below */
}
.nav-logo { grid-column: 1; justify-self: start; position: relative; text-decoration: none; display: inline-flex; }
/* Menu (links + language switcher) lives in column 2 and hugs the right edge. */
.nav-menu { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: var(--space-lg); }
/* Explicit height overrides Pico's `img { height: auto }` (which ignores the
   height attribute). Logo.png is cropped tight to the wordmark. */
.nav-logo img { display: block; height: 38px; width: auto; }
/* golden sun dot accent above the wordmark (decorative, not text) */
.nav-logo::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
}
.nav-links {
  display: flex;
  align-items: center;      /* keep every link on the same vertical centre as the pill + button */
  gap: var(--space-md);     /* tighter so the 4th link (Uitbreiden) + Contact button still fit */
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;           /* natural width; centered by the equal side zones */
  justify-content: center;
}
.nav-links li { display: flex; align-items: center; margin: 0; padding: 0; }
.nav-links a { line-height: 1; }   /* tight box so flex-centring is exact (no leading offset) */
.nav-links a { text-decoration: none; color: var(--color-green-dark); font-weight: 600; }
.nav-links a:hover { text-decoration: underline; }
/* Pico sets `nav ul:first-of-type { margin-left: -8px }` (specificity 0,1,2) which
   pulls the whole menu 8px left of the logo/switcher — most visible as clipped text
   in the mobile dropdown. Override with higher specificity so everything aligns. */
.nav-inner .nav-links { margin-left: 0; }
/* Compact green Contact button in the nav (#20) — distinct from the golden page CTAs */
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.45rem 1.05rem;
  background: var(--color-green-dark);
  color: #ffffff;
  border-radius: var(--radius-btn);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.15s ease;
}
.nav-cta:hover { background: var(--color-green-mid); color: #ffffff; transform: translateY(-1px); }
/* Active nav section while scrolling (#22) — coloured + persistent underline */
.nav-links a.is-active { color: var(--color-green-dark); }
.nav-back { color: var(--color-green-dark); font-weight: 600; text-decoration: underline; }

/* Hamburger toggle — hidden on desktop, shown on mobile via the media query below */
.nav-toggle {
  display: none;
  grid-column: 2;
  justify-self: end;
  width: 44px; height: 44px;
  padding: 0;
  flex-direction: column;   /* stack the three bars vertically (was defaulting to row) */
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-btn);
  box-shadow: none;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(27, 67, 50, 0.06); }
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--color-green-dark);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span + span { margin-top: 5px; }
/* Bars morph into an X when the menu is open */
site-nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
site-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
site-nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Compact pill toggle. `width:auto` + `flex:none` override Pico's
   `[role="group"]` full-width/stretch styling that blew this up to a
   full-width segmented bar. */
/* Compact segmented control — one bordered pill, dividers between, exactly-aligned
   rounded outer corners (#25/#27). `width:auto`+`flex:none` defeat Pico's group stretch. */
.lang-switcher {
  display: inline-flex;
  gap: 0;
  width: auto; flex: 0 0 auto;
  border: 1px solid var(--color-green-dark);
  border-radius: 999px;
  overflow: hidden;
}
/* The top-bar (mobile) switcher is hidden on desktop; the in-menu one is used there. */
.lang-switcher--top { display: none; }
.lang-switcher button {
  padding: 0.32rem 0.68rem;
  min-height: 32px;
  font-size: 0.82rem;
  background: transparent;
  color: var(--color-text);
  border: none;
  border-radius: 0;
  cursor: pointer;
  width: auto; flex: 0 0 auto;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-switcher button + button { border-left: 1px solid var(--color-green-dark); }
.lang-switcher button:hover:not([aria-pressed="true"]) { background: rgba(27, 67, 50, 0.08); }
/* Active language: dark fill + BOLD weight (status change beyond colour, #26) */
.lang-switcher button[aria-pressed="true"] { background: var(--color-green-dark); color: #ffffff; font-weight: 700; }

/* Desktop (>=1061px): pin the language switcher to the very top-right CORNER of the
   page, flush to the window edge (not the centered 1200px nav container). It is taken
   out of the flow (absolute in the full-width sticky bar) and the nav row reserves
   space on the right so the Contact button never slides under it. nav-cta stays after
   the links. (On mobile the in-menu switcher is hidden and the top-bar one is used.) */
.nav-cta { order: 2; }
@media (min-width: 1061px) {
  .nav-inner { padding-right: 184px; }   /* reserve the corner so the Contact CTA never slides under the switcher */
  .nav-menu .lang-switcher {
    position: absolute;
    top: 50%;
    right: var(--space-lg);
    transform: translateY(-50%);
  }
}

/* Full-bleed dark-green footer — a proper closing piece (3 columns + bottom row).
   The golden top seam bridges the CTA band above into the dark close (#107). */
.site-footer {
  background: var(--color-band-deep);
  color: rgba(255, 255, 255, 0.75);
  border-top: 3px solid var(--color-accent);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-2xl);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.footer-logo { display: block; height: 34px; width: auto; filter: brightness(0) invert(1); }  /* white wordmark on dark green */
.footer-tagline { color: rgba(255, 255, 255, 0.72); margin: 0; font-size: 0.95rem; max-width: 34ch; }
.footer-heading {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
/* Neutralise Pico's built-in <nav> styling (flex row + li padding) inside the footer */
.footer-nav { display: block; }
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.footer-list li { margin: 0; padding: 0; text-align: left; }
.footer-list a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.footer-list a:hover, .footer-list a:focus-visible { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
/* Contact CTA — compact outlined button on dark */
.footer-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-btn);
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.footer-cta:hover, .footer-cta:focus-visible { background: rgba(255, 255, 255, 0.10); border-color: #ffffff; color: #ffffff; }
/* Footer language switcher — light-on-dark segmented variant */
.lang-switcher--footer { margin-top: var(--space-sm); border-color: rgba(255, 255, 255, 0.30); }
.lang-switcher--footer button { color: rgba(255, 255, 255, 0.85); }
.lang-switcher--footer button + button { border-left-color: rgba(255, 255, 255, 0.30); }
.lang-switcher--footer button:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, 0.10); }
.lang-switcher--footer button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-green-dark); font-weight: 700; }
/* Bottom row — secondary copyright, divided from the columns */
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-bottom .footer-copy {
  display: block;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Nav collapses to a hamburger early enough that the 4 links + lang + Contact
   button always keep breathing room (covers tablets + small laptops, up to 1060px). */
@media (max-width: 1060px) {
  /* Row 1: logo (left) + language switcher + hamburger (right). Menu drops into row 2. */
  .nav-inner { grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-sm) var(--space-md); }
  .nav-logo { grid-column: 1; justify-self: start; }
  /* Top-bar language switcher lives between the logo and the hamburger */
  .lang-switcher--top { display: inline-flex; grid-column: 3; align-self: center; }
  .lang-switcher--top button { padding: 0.28rem 0.55rem; min-height: 34px; }
  .nav-toggle { display: inline-flex; grid-column: 4; }
  /* Hide the in-menu switcher on mobile so the open menu doesn't show a duplicate */
  .nav-menu .lang-switcher { display: none; }
  .nav-menu {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    width: 100%;
    /* collapsed by default; expands when site-nav.is-open */
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.32s ease, opacity 0.25s ease, margin-top 0.32s ease;
  }
  site-nav.is-open .nav-menu { max-height: 70vh; opacity: 1; margin-top: var(--space-sm); }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav-links a { display: block; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
  .nav-cta, .nav-back { align-self: flex-start; }
}
/* Footer stacks to one column on small screens only (3 columns still fit on tablet) */
@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* -- 3b. Section Band System (Phase 6 DS-01) ------------ */
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.section--surface { background: var(--color-surface); }   /* #F4F7F5 alt band */
.section--emphasis {                                       /* the ONE dark-green band per page */
  background: var(--color-green-dark);
  color: #ffffff;
}
.section--emphasis h1,
.section--emphasis h2,
.section--emphasis p { color: #ffffff; }
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.section-inner--text { max-width: var(--width-text); }
.section-inner--form { max-width: var(--width-form); }
@media (max-width: 599px) {
  .section {
    padding-top: var(--section-y-mobile);
    padding-bottom: var(--section-y-mobile);
  }
}

/* -- 3c. Typography + Buttons + Cards (Phase 6 DS-01) --- */

/* Sitewide type baseline — Inter, Body role on <body> (400/16/1.6) */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;          /* 16px Body */
  line-height: 1.6;
  color: var(--color-muted);
  background: var(--color-page-bg);
  overflow-wrap: break-word; /* never let a long token (email, hyphen-word) force horizontal overflow */
}
/* .page-wrap is a plain wrapper — nothing overflows horizontally (the dark band is
   a normal full-width section, and decorative shapes are contained at the source),
   so no overflow clip is needed and the sticky navbar + IntersectionObserver work. */
/* Headings: Space Grotesk display, 700 weight, tight tracking, dark text on light */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
h1 { font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.1; }   /* Display, fluid */
h2, h3 { font-size: 1.3rem; line-height: 1.25; }                   /* Heading */
.u-label {                                        /* Label role 14px/400 */
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

/* Pill button system — golden fill, dark-green 700 text, soft shadow + hover lift. */
.btn,
button[type="submit"],
a[role="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px;                 /* touch target */
  padding: 0.85rem 2rem;
  border-radius: var(--radius-btn); /* 8px slightly-rounded rectangle (reference) */
  background: var(--color-accent);  /* golden */
  color: var(--color-green-dark);
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(244,196,48,0.26);   /* softer, less dominant (#13) */
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover,
button[type="submit"]:hover,
a[role="button"]:hover {
  background: #E6B41F;              /* slightly deeper gold */
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(244,196,48,0.34);
  color: var(--color-green-dark);
}
/* Secondary / text link: dark-green text, underline on hover, no fill (no second-color button) */
.btn-text {
  background: none;
  box-shadow: none;
  color: var(--color-green-dark);
  font-weight: 700;
  padding: 0;
  min-height: auto;
  border-radius: 0;
}
.btn-text:hover { background: none; transform: none; box-shadow: none; text-decoration: underline; }

/* Card system — white fill, subtle border, 16px radius, soft shadow, hover lift for interactive */
.card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);   /* 16px */
  padding: var(--space-xl);            /* 32px */
  box-shadow: var(--shadow-sm);
}
.card--interactive { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.card--interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Accent icon badge (56px circle) — the ONLY large use of accent green (reserved item #1) */
.icon-badge {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(82,183,136,0.14);
}
.icon-badge svg { width: 28px; height: 28px; stroke: var(--color-green-dark); }

@media (max-width: 599px) {
  .card { padding: var(--space-lg); }   /* 24px mobile */
}

/* -- 4. Homepage Sections (Phase 7 re-cast) ------------ */

/* Hero — full-width photo banner with white text over a darkened image */
.hero--banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 686px;   /* desktop/tablet hero — +30% taller so the banner takes more vertical space */
  padding: 0;
  overflow: hidden;
  background: var(--color-band-deep);   /* fallback while the image loads */
}
/* Shorter laptops: don't let the hero eat the whole viewport height (#12) */
@media (min-width: 1024px) and (max-height: 800px) {
  .hero--banner { min-height: 600px; }
}
.hero-bg {
  position: absolute;
  /* Vertical overscan (132% tall, centred) gives the parallax room to travel
     without exposing an edge — JS translates this within the ±16% budget. */
  top: -16%;
  left: 0;
  width: 100%;
  height: 132%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  will-change: transform;
}
/* Darkening + left-weighted scrim so white text stays readable */
.hero--banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Lighter on the right so the photo stays natural + lively (#8), still a strong
     left-weighted scrim to keep the white text high-contrast (#9). */
  background:
    linear-gradient(90deg, rgba(11,38,28,0.88) 0%, rgba(11,38,28,0.55) 40%, rgba(11,38,28,0.12) 100%),
    linear-gradient(0deg, rgba(11,38,28,0.45), rgba(11,38,28,0) 52%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}
.hero-copy { text-align: left; max-width: 640px; }
/* Golden eyebrow on the dark banner */
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-accent);
  margin: 0 0 var(--space-md);
}
.hero-eyebrow::before { content: ""; }
/* Big, confident white display headline */
.hero-copy h1 {
  max-width: 16ch;
  margin: 0 0 var(--space-md);
  font-size: clamp(2.4rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  color: #ffffff;
}
.hero-body { color: rgba(255,255,255,0.92); max-width: 46ch; margin: 0 0 var(--space-xl); font-size: 1.0625rem; }
.hero-actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.hero-cta { min-height: 44px; }   /* golden fill inherited from the button system */
/* Secondary CTA as a "ghost" button so it clearly reads as an alternative action
   next to the golden primary (#6/#14) */
.hero-services {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-btn);
  color: #ffffff;
  font-weight: 700;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.hero-services:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); border-color: #ffffff; }
/* Concrete proof strip under the CTAs — "1.100 installaties • actief in 3 landen" */
.hero-proof {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-xl) 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
}
.hero-proof::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-green-light);
  flex: 0 0 auto;
}
/* Cursor-follow warm glow over the photo. z-index 1 = same layer as the scrim,
   but the ::after scrim paints ABOVE it, so the glow only shows through where the
   scrim is light (the right/photo side) and never washes over the left-side text
   (which lives at z-index 2). Position driven by --gx/--gy set in JS. */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 214, 122, 0.28), rgba(255, 214, 122, 0) 62%);
}
.hero--banner.is-glowing .hero-glow { opacity: 1; }

/* Fake-live production chip floating on the photo (bottom-right on desktop) */
.hero-badge {
  position: absolute;
  z-index: 2;
  right: var(--space-xl);
  bottom: var(--space-2xl);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(11, 38, 28, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  color: #ffffff;
  font-size: 0.8rem;                              /* calmer + smaller so it doesn't rival the CTA (#16/#17) */
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.hero-badge-sun { color: var(--color-accent); }
.hero-badge-val { font-variant-numeric: tabular-nums; }
.hero-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: var(--space-sm);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
}
.hero-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-green-light);
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-badge-dot { animation: livePulse 1.9s ease-in-out infinite; }
  @keyframes livePulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(82, 183, 136, 0.55); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(82, 183, 136, 0); }
  }
}

@media (max-width: 599px) {
  .hero--banner { min-height: 480px; }
  .hero-inner { padding: var(--space-2xl) var(--space-md); }
  /* Keep the live chip on mobile too — tuck it top-right in the photo area,
     above the (left-aligned) copy so it never overlaps the text. */
  .hero-badge {
    top: var(--space-md);
    right: var(--space-md);
    bottom: auto;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    gap: 6px;
  }
}

/* Shared section lead paragraph (centered intro under an h2) */
.section > .section-inner > h2 { margin: 0 0 var(--space-md); }
.section-lead {
  max-width: var(--width-text);
  margin: 0 0 var(--space-2xl);
  color: var(--color-muted);
}

/* Shared eyebrow (golden, uppercase, dash prefix) — reused by all reference sections.
   AA-safe: TEXT uses --color-accent-strong on cream; the dash uses --color-accent.
   On the dark band the golden text IS AA-safe, so --on-dark uses --color-accent. */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-accent-strong);
  margin: 0 0 var(--space-md);
}
.eyebrow::before { content: ""; }
.eyebrow--on-dark { color: var(--color-accent); }
/* On the golden CTA band, eyebrow text is dark green (AA on gold) */
.eyebrow--on-gold { color: var(--color-green-dark); }

/* -- 4b. About goZERO (company intro under the hero) --------------- */
.section.about { background: var(--color-page-bg); }
.about-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.about-copy h2 {
  margin: 0 0 var(--space-md);
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--color-green-dark);
  max-width: 18ch;
}
.about-body { margin: 0; color: var(--color-body-green); max-width: 60ch; font-size: 1.0625rem; }
.about-figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-left: var(--space-xl);
  border-left: 2px solid var(--color-border);
}
.about-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.about-figure-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-green-dark);
}
.about-figure-label { font-size: 0.9375rem; color: var(--color-body-green); }
@media (max-width: 820px) {
  .about-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .about-figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    padding-left: 0;
    padding-top: var(--space-lg);
    border-left: 0;
    border-top: 2px solid var(--color-border);
  }
  .about-figure-num { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .about-figures { grid-template-columns: 1fr; }
}

/* -- 4c. Office addresses (footer row + contact page) ------------- */
/* Address values carry literal "\n" line breaks from the locale JSON. */
.office-addr { white-space: pre-line; }
.office-name { font-weight: 700; }
.office-line { text-decoration: none; }
.office-line:hover { text-decoration: underline; }

/* Contact page offices */
.contact-offices { margin-top: var(--space-2xl); }
.offices-heading {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin: 0 0 var(--space-lg);
}
.offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.contact-offices .office {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-style: normal;
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-body-green);
  line-height: 1.5;
}
.contact-offices .office-name { color: var(--color-green-dark); }
.contact-offices .office-line { color: var(--color-green-dark); font-weight: 600; }
@media (max-width: 700px) {
  .offices-grid { grid-template-columns: 1fr; }
}

/* Footer offices row (dark band) */
.footer-offices {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-xl);
}
.footer-offices .footer-heading { margin-bottom: var(--space-md); }
.footer-offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
.footer-office {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}
.footer-office .office-name { color: #ffffff; }
.footer-office .office-line { color: rgba(255, 255, 255, 0.85); }
.footer-office .office-line:hover { color: #ffffff; }
@media (max-width: 600px) {
  .footer-offices-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* -- 5. Homepage reference sections (Phase 10 HV-01/02/03) -- */

/* Scroll anchoring so sticky-less nav jumps land below the top edge */
html { scroll-behavior: smooth; }
#over, #diensten, #zo-werkt-het, #uitbreiden, #faq { scroll-margin-top: 88px; }   /* clear the sticky navbar */

/* (A) Service cards — "Waarmee kunnen we u helpen?" */
.section.help { background: var(--color-page-bg); }   /* blends with the page (no separate band) */
.help-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: end;
  margin-bottom: var(--space-xl);
}
.help-head h2 { margin: 0; font-size: 1.75rem; line-height: 1.15; color: var(--color-green-dark); }
.help-intro { margin: 0; color: var(--color-body-green); }
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.help-card {
  position: relative;                 /* anchor for the stretched whole-card link */
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--accent, var(--color-green-light));   /* per-card accent bar */
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Per-card accent hue (drives the top bar + icon circle + arrow) */
/* Accents harmonised to the brand palette (#36/#116): brand green, brand gold,
   and a muted brand-leaning teal instead of the off-palette bright blue. */
.help-card:nth-child(1) { --accent: #2E8B62; }   /* service — brand green */
.help-card:nth-child(2) { --accent: #C79212; }   /* payment — brand gold (ties to --color-accent) */
.help-card:nth-child(3) { --accent: #3F8489; }   /* expand — muted teal (brand-leaning) */
.help-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Primary card (Serviceverzoek) — white fill, stronger shadow for presence */
.help-card--primary { background: #ffffff; box-shadow: 0 10px 26px rgba(27,67,50,0.12); }
.help-card h3 { margin: var(--space-lg) 0 var(--space-sm); color: var(--color-green-dark); }
.help-card p { margin: 0 0 var(--space-lg); color: var(--color-body-green); }
.icon-circle {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.18s ease;
}
.help-card:hover .icon-circle { transform: scale(1.08); }
.icon-circle svg { width: 28px; height: 28px; stroke: var(--accent, var(--color-green-dark)); }
.icon-circle--mint   { background: var(--color-icon-mint); }
.icon-circle--yellow { background: var(--color-icon-yellow); }
.icon-circle--blue   { background: var(--color-icon-blue); }
.help-link {
  margin-top: auto;
  color: var(--color-green-dark);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.help-link span[aria-hidden] { color: var(--accent, var(--color-green-dark)); transition: transform 0.18s ease; }
.help-card:hover .help-link span[aria-hidden] { transform: translateX(4px); }
/* Stretched link: the whole card is clickable, no nested anchors */
.help-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

/* (B) Dark monitoring band — "Opgewekt. Gemonitord. Geregeld." */
/* The dark band spans full width naturally — <main> has no horizontal padding, so
   a normal section already reaches both edges. (The old width:100vw hack caused a
   scrollbar-gutter overflow and forced overflow-x:hidden, which broke sticky nav.) */
/* Faint line-grid over the deep green adds texture (cat 3) without new assets */
.section--monitor {
  background-color: var(--color-band-deep);
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  color: #ffffff;
}
.monitor-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  margin-bottom: var(--space-xl);
}
.monitor-intro { display: flex; flex-direction: column; gap: var(--space-lg); }
.monitor-title { margin: 0; color: #ffffff; font-size: 2rem; line-height: 1.1; }
.monitor-title span { display: block; }
.monitor-lead { margin: 0; color: rgba(255, 255, 255, 0.88); }   /* higher contrast on dark (#43) */

/* Interface fragment — live-performance graph + anomaly alert (cat 5) */
.monitor-panel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}
.panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.panel-title { font-weight: 700; color: #ffffff; font-size: 0.95rem; }
/* "7d" is a static range label, not an interactive filter — de-emphasise it (#46) */
.panel-range {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}
.panel-chart { width: 100%; height: auto; display: block; }
.panel-alert {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.alert-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(244, 196, 48, 0.18);
  flex: 0 0 auto;
}
.alert-text { color: rgba(255, 255, 255, 0.88); font-size: 0.875rem; font-weight: 600; }
.alert-status {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-accent);
  border: 1px solid rgba(244, 196, 48, 0.4);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.monitor-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
/* Process connectors — reads as Monitoring -> detected -> action */
.monitor-step { position: relative; }
.monitor-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 0;
  right: calc(var(--space-2xl) / -2);
  transform: translateX(50%);
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.monitor-step .step-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;                 /* more prominent step numbers (#50) */
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.monitor-step h3 { margin: 0 0 var(--space-xs); color: #ffffff; }
.monitor-step p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  text-align: center;
  padding-top: var(--space-xl);
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
}
.stat-label {
  display: block;
  margin-top: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

/* (B1) Upsell showcase — "meer uit uw energie" (heat pump / battery / charger / energy mgmt) */
.section.upsell { background: var(--color-page-bg); }   /* blends with the page (no separate band) */
.upsell-head { max-width: var(--width-text); margin: 0 auto var(--space-xl); text-align: center; }
.upsell-head h2 { margin: 0 0 var(--space-sm); font-size: 1.75rem; line-height: 1.15; color: var(--color-green-dark); }
.upsell-lead { margin: 0; color: var(--color-body-green); }

/* Stage: soft rounded panel that groups the illustration + its floating product
   labels into ONE coherent block (#61/#70). Tighter + bigger art = less empty
   space and more visual weight (#59/#60). */
.upsell-stage {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  min-height: 408px;
  /* Day: a soft radial ground-glow, NOT a top→bottom linear wash. Two things kill
     any visible transition line: (1) only TWO low-contrast stops, so there is no
     bright "core" whose edge draws an arc; (2) the centre sits BELOW the stage
     (at 50% 128%), so the iso-colour contours flatten into gentle, imperceptible
     curves across the visible area. Ground melts up into the sky as one scene.
     Top padding opens a clear sky band for the sun/moon arc, above the pills. */
  background: radial-gradient(150% 130% at 50% 128%, #E7F3EC 0%, #CFE6F3 100%);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  padding: 46px var(--space-lg) var(--space-lg);
  overflow: hidden;
  transition: background 1s ease;
}
/* Night: same soft two-stop ground-glow. Sky kept a hair teal (#0F2833, not pure
   navy) so the green→sky shift is a gentle value change, not a blue↔green hue flip.
   No separate ::before halo any more — a second radial's soft edge landed right at
   the sun/moon-band height and drew exactly the arc we were trying to remove. */
.upsell.is-night .upsell-stage { background: radial-gradient(150% 130% at 50% 128%, #164029 0%, #0F2833 100%); }
.upsell-art { position: relative; z-index: 1; display: block; width: 500px; max-width: 80%; height: auto; margin: 0 auto; }

/* Sun/moon ride a rotating "sky disk": the pivot sits at the horizon (bottom of the
   sky band); the sun is 62px up the arc, the moon 62px down (below the horizon,
   clipped). Turning the disk 180° sweeps the sun down-and-out while the moon rises
   along the same arc to the peak. Lives in a dedicated top sky band, above the
   pills, so it is never hidden. */
.celestial {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 66px;
  overflow: hidden;        /* clip whichever orb dips below the horizon */
  z-index: 2;
  pointer-events: none;
}
.celestial-disk {
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 0;
  transform: rotate(0deg);
  transition: transform 1s cubic-bezier(0.45, 0, 0.2, 1);
}
.celestial-orb { position: absolute; left: -26px; width: 52px; height: 52px; }
.celestial-orb--sun  { bottom: 44px; }
.celestial-orb--moon { bottom: -44px; }
.celestial-orb svg { width: 100%; height: 100%; display: block; transition: transform 1s cubic-bezier(0.45, 0, 0.2, 1); }
.upsell.is-night .celestial-disk    { transform: rotate(180deg); }
.upsell.is-night .celestial-orb svg { transform: rotate(-180deg); }   /* keep glyphs upright */

/* Smooth transitions for the day↔night flip (JS toggles .is-night on the section) */
.upsell-art .scene { transition: filter 0.9s ease; }
.upsell-art .night-lights { opacity: 0; transition: opacity 0.9s ease; }
.upsell-pill { transition: background-color 0.9s ease, border-color 0.9s ease; }
.pill-title, .pill-save { transition: color 0.9s ease; }

/* Night state */
.upsell-clouds { transition: opacity 0.9s ease; }
.upsell.is-night .upsell-clouds    { opacity: 0; }   /* clouds are a daytime thing */
.upsell.is-night .scene            { filter: brightness(0.62) saturate(0.82); }
.upsell.is-night .night-lights     { opacity: 1; }   /* battery / window / charger light up */
.upsell.is-night .upsell-pill      { background: #173A2C; border-color: #255140; }
.upsell.is-night .pill-title       { color: #ffffff; }
.upsell.is-night .pill-save        { color: #8FE0B4; }

/* Heat-pump fan — slow continuous spin around the hub where the blades meet.
   The three blades form a "Y", so the group's bounding-box centre is NOT the hub
   (it sits ~3px too high). Rotating around the exact view-box point (105,314)
   keeps the axis dead still instead of letting it orbit/wobble. */
.upsell-fan { transform-box: view-box; transform-origin: 105px 314px; animation: fanSpin 9s linear infinite; }
@keyframes fanSpin { to { transform: rotate(360deg); } }

/* Twinkling stars — invisible by day; fade in + gentle twinkle when .is-night */
.upsell-stars { opacity: 0; transition: opacity 1.1s ease; }
.upsell-stars circle { transform-box: fill-box; transform-origin: center; }
.upsell.is-night .upsell-stars { opacity: 1; }
.upsell.is-night .upsell-stars circle { animation: twinkle 3.2s ease-in-out infinite; }
.upsell.is-night .upsell-stars circle:nth-child(2) { animation-delay: 0.5s; }
.upsell.is-night .upsell-stars circle:nth-child(3) { animation-delay: 1.1s; }
.upsell.is-night .upsell-stars circle:nth-child(4) { animation-delay: 1.7s; }
.upsell.is-night .upsell-stars circle:nth-child(5) { animation-delay: 0.8s; }
.upsell.is-night .upsell-stars circle:nth-child(6) { animation-delay: 2.2s; }
.upsell.is-night .upsell-stars circle:nth-child(7) { animation-delay: 1.4s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* EV charge pulse — a short bright dash travels up the cable (night only) */
.upsell-charge { stroke-dasharray: 4 80; stroke-dashoffset: 84; opacity: 0; }
.upsell.is-night .upsell-charge { opacity: 1; animation: chargeFlow 1.8s linear infinite; }
@keyframes chargeFlow { from { stroke-dashoffset: 84; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .upsell-art .scene, .upsell-art .night-lights, .celestial-disk, .celestial-orb svg, .upsell-clouds, .upsell-stage, .upsell-pill, .pill-title, .pill-save { transition: none; }
  /* Settle the delight loops: fan stops, stars show without twinkle, no charge pulse */
  .upsell-fan, .upsell-stars circle { animation: none; }
  .upsell-stars { transition: none; }
  .upsell.is-night .upsell-charge { animation: none; opacity: 0; }
}   /* JS crossfades sun→moon as you scroll */

.upsell-pill {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* Uniform width for all four labels (#58) — wide enough that the longest label
     in any language (German "Bis zu €700/Jahr sparen") still fits on ONE line, so
     nothing breaks (min-width:0 + overflow-wrap stay as the ultimate safety net). */
  width: 296px;
  max-width: 44%;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
  box-shadow: var(--shadow-md);
}
.upsell-pill .icon-circle { width: 44px; height: 44px; flex: 0 0 auto; }
.upsell-pill .icon-circle svg { width: 22px; height: 22px; }
/* min-width:0 lets the text column shrink below its longest word, and
   overflow-wrap/hyphens let a long compound word (e.g. "Energiemanagement",
   "Ladestation") break instead of spilling out — so NO language ever overflows. */
.pill-body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pill-title { font-weight: 700; color: var(--color-green-dark); font-size: 0.95rem; overflow-wrap: break-word; hyphens: auto; }
/* Savings is clearly SECONDARY to the product name (#64/#65) — smaller, lighter, muted */
.pill-save { font-size: 0.8rem; font-weight: 500; color: var(--color-body-green); overflow-wrap: break-word; }
/* corner placement (desktop) — tucked closer to the illustration inside the panel */
.upsell-pill--tl { top: 62px;  left: 2px; }
.upsell-pill--tr { top: 52px;  right: 2px; }
/* Bottom pills sit low in the empty ground band so they clear the heat-pump (left)
   and charging-post (right) illustrations instead of covering them (#... night view). */
.upsell-pill--bl { bottom: 6px; left: 8px; }
.upsell-pill--br { bottom: 6px; right: 12px; }

/* 3-step process — pulled closer to the illustration so the section reads as one unit (#66/#70) */
.upsell-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.upsell-step { position: relative; }
.upsell-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 0; right: calc(var(--space-2xl) / -2);
  transform: translateX(50%);
  color: var(--color-green-light);
  font-weight: 700;
  font-size: 1.25rem;
}
.upsell-step .step-num {
  display: block;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--color-accent-strong);
  margin-bottom: var(--space-sm);
}
.upsell-step h3 { margin: 0 0 var(--space-xs); color: var(--color-green-dark); }
.upsell-step p { margin: 0; color: var(--color-body-green); font-size: 0.95rem; }

/* footer row: certified-partners note + CTA */
.upsell-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}
/* Certified-partners note styled as a trust chip (#69) */
.upsell-partners {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  margin: 0; padding: 0.4rem 0.9rem;
  background: rgba(82, 183, 136, 0.10);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-green-dark); font-weight: 600; font-size: 0.9rem;
}
.upsell-partners svg { width: 18px; height: 18px; stroke: var(--color-green-light); flex: 0 0 auto; }
.upsell-cta { min-height: 44px; }

@media (max-width: 768px) {
  /* pills reflow into a grid below a smaller illustration */
  .upsell-stage { min-height: 0; }
  /* Taller sky band so the WHOLE sun (not just its lower half) clears the stage
     top edge — the orb hangs a fixed distance above the horizon pivot, so growing
     the band drops the pivot and brings the full sun/moon down into view. */
  .celestial { height: 100px; }
  .upsell-art { width: 320px; margin-bottom: var(--space-xl); }
  .upsell-pills { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .upsell-pill { position: static; width: auto; max-width: none; min-width: 0; }
  .pill-body { min-width: 0; }   /* allow long titles to wrap instead of overflowing the grid cell */
  .upsell-steps { grid-template-columns: 1fr; gap: var(--space-lg); }
  .upsell-step:not(:last-child)::after { display: none; }
  .upsell-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .upsell-pills { grid-template-columns: 1fr; }   /* one column when 2-up gets too tight */
}

/* (B2) Testimonial — human content (cat 9) with a soft shape + overlapping quote mark (cat 3) */
/* Grounded on a soft surface band so the card no longer floats in empty white (#71/#80) */
.testimonial { position: relative; overflow: hidden; background: var(--color-surface); }
.quote-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-md);
}
/* Soft color shape behind the card (cat 3) */
.quote-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -28px;
  right: -28px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,196,48,0.28), rgba(244,196,48,0) 70%);
  pointer-events: none;
}
/* Quotation mark — smaller, subtler accent tucked in the corner (#75) */
.quote-mark {
  position: absolute;
  top: 6px;
  left: 22px;
  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--color-green-light);
  opacity: 0.45;
}
/* 5 gold stars — reads immediately as a real review (social proof, #72) */
.quote-stars {
  display: block;
  color: var(--color-accent);
  font-size: 1.05rem;
  letter-spacing: 4px;
  margin-bottom: var(--space-md);
}
.quote-text {
  margin: 0 0 var(--space-lg);
  font-size: 1.2rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-text);
}
.quote-person { display: flex; align-items: center; gap: var(--space-md); }
/* Refined initials-avatar: gradient fill + soft mint ring (#74) — a clear place a
   real customer photo can drop in later (just swap the background for an <img>). */
.quote-avatar {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-green-light), var(--color-green-dark));
  box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.22);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.quote-meta { display: flex; flex-direction: column; gap: 2px; }
.quote-name { font-weight: 700; font-size: 1.05rem; color: var(--color-green-dark); }
.quote-role { font-size: 0.85rem; color: var(--color-body-green); }

/* (C) FAQ — intro stacked ABOVE the accordion (no more empty left column) */
.faq-split {
  display: block;
  max-width: 900px;          /* a touch wider on large screens (#81) */
  margin: 0 auto;
}
.faq-intro-col { margin-bottom: var(--space-xl); }
.faq-intro-col h2 { margin: 0 0 var(--space-sm); font-size: 1.75rem; line-height: 1.15; color: var(--color-green-dark); }
.faq-lead { margin: 0; color: var(--color-body-green); max-width: 60ch; }

/* FAQ accordion — shared by homepage .faq .faq-list AND the FAQ page .faq-list */
.faq-list details {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  padding: 0 1.25rem;
  box-shadow: var(--shadow-sm);
}
.faq-list summary {
  font-size: 1rem;
  font-weight: 700;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.faq-list summary::-webkit-details-marker { display: none; }
/* Chevron affordance: points down when closed, rotates up when open */
.faq-list summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-green-dark);
  border-bottom: 2px solid var(--color-green-dark);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
  margin-left: var(--space-md);
}
.faq-list details[open] summary { color: var(--color-green-dark); }
.faq-list details[open] summary::after { transform: rotate(-135deg); }
.faq-list details > p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0 0 1rem;
  max-width: 66ch;   /* shorter, more readable line length */
}

/* (D) Golden CTA — contained rounded block on cream (no longer a full-width slab) */
.section--cta { background: transparent; }
.cta-inner {
  position: relative;
  overflow: hidden;
  max-width: 980px;                    /* narrower than the 1200 content span */
  /* Soft diagonal gradient adds depth so the block feels less like a flat slab (#92/#93) */
  background: linear-gradient(120deg, #F8D453 0%, var(--color-cta-band) 55%, #EEBB22 100%);
  border-radius: 24px;                 /* rounded to match the card language */
  padding: var(--space-xl) var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
}
/* Soft sun glow, top-right — subtle energy visual */
.cta-inner::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -50px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.45), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.cta-copy, .cta-inner > a { position: relative; z-index: 1; }
.cta-copy h2 { margin: 0 0 var(--space-sm); color: var(--color-green-dark); font-size: 1.75rem; line-height: 1.15; }
.cta-body { margin: 0; color: var(--color-green-dark); max-width: 52ch; }
/* On the golden CTA band the button is dark-green (a golden button would vanish).
   Scoped selector (0,2,0) so it wins over the global golden a[role="button"]. */
.section--cta .cta-btn {
  background: var(--color-green-dark);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(18, 53, 42, 0.28);
  white-space: nowrap;
}
.section--cta .cta-btn:hover { background: var(--color-green-mid); color: #ffffff; }

/* Responsive: reference sections stack on mobile */
@media (max-width: 768px) {
  .help-head { grid-template-columns: 1fr; gap: var(--space-md); }
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .monitor-head { grid-template-columns: 1fr; gap: var(--space-md); }
  .monitor-lead { align-self: start; }
  .faq-split { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .help-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .monitor-steps { grid-template-columns: 1fr; gap: var(--space-lg); }
  .monitor-step:not(:last-child)::after { display: none; }   /* no horizontal arrows when stacked */
  .stats-row { grid-template-columns: 1fr; gap: var(--space-lg); }
  .cta-inner { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg); }
}

/* -- 6. FAQ Page (Phase 8 re-cast) ------------------- */
.faq-page { text-align: left; }
.faq-page h1 { margin: 0 0 0.75rem; }        /* Display from 3c */
.faq-intro {
  font-size: 1rem;                            /* Body */
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0 0 2rem;
}
.faq-list { margin: 0; }

/* -- 7. Contact Page (Phase 8 re-cast) --------------- */
.contact-page { text-align: left; }
.contact-page h1 { margin: 0 0 0.75rem; }    /* Display from 3c */
.contact-intro {
  font-size: 1rem;                            /* Body */
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0 0 2rem;
}

/* Form — inherits .card (fill/border/16px radius/shadow) from 3c; add field rhythm */
.contact-form { margin: 0; }
.contact-form label {
  font-weight: 600;
  font-size: 0.95rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea { margin-bottom: 1rem; }
.contact-form textarea { resize: vertical; }

.contact-response-time {
  font-size: 0.875rem;                        /* Label */
  color: var(--color-muted);
  margin: 0 0 1rem;
}
.contact-submit { width: auto; }              /* pill button, not full-width */

/* Off-screen custom honeypot — NOT display:none (RESEARCH pitfall 5) */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Success / error panels — reuse card tokens */
.form-panel {
  border-radius: var(--radius-card);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  margin-top: 1.5rem;
}
.form-panel p { margin: 0; font-size: 1rem; line-height: 1.6; }
.form-panel--success {
  background: var(--color-surface);
  border-color: var(--color-green-light);
  color: var(--color-green-dark);
}
.form-panel--error {
  background: #ffffff;
  border-color: #C0392B;                      /* single one-off error color (no token exists) */
  color: #C0392B;
}
[hidden] { display: none !important; }        /* assert hidden over Pico */

@media (max-width: 599px) {
  .contact-form { padding: 24px; }
}

/* -- 8. Motion — scroll reveal + micro-interactions ---- */
/* All gated by html.js (set in the head IIFE) so no-JS users always see content,
   and by prefers-reduced-motion so we never animate for users who opt out. */
@media (prefers-reduced-motion: no-preference) {
  html.js :is(
    .hero-copy > *, .hero-art,
    .help-head, .help-card,
    .monitor-intro, .monitor-panel, .monitor-step, .stat,
    .upsell-head, .upsell-pill, .upsell-step, .upsell-foot,
    .quote-card,
    .faq-intro-col, .faq-list details,
    .cta-inner
  ) {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  html.js .is-visible { opacity: 1 !important; transform: none !important; }

  /* Stagger within groups for a livelier cascade */
  .hero-copy > *:nth-child(2) { transition-delay: 0.06s; }
  .hero-copy > *:nth-child(3) { transition-delay: 0.12s; }
  .hero-copy > *:nth-child(4) { transition-delay: 0.18s; }
  .hero-copy > *:nth-child(5) { transition-delay: 0.24s; }
  .help-card:nth-child(2) { transition-delay: 0.08s; }
  .help-card:nth-child(3) { transition-delay: 0.16s; }
  .monitor-step:nth-child(2) { transition-delay: 0.08s; }
  .monitor-step:nth-child(3) { transition-delay: 0.16s; }
  .stat:nth-child(2) { transition-delay: 0.08s; }
  .stat:nth-child(3) { transition-delay: 0.16s; }

  /* Gentle float on the hero illustration */
  .hero-art svg { animation: floaty 6s ease-in-out infinite; }
  @keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }

  /* Service-card icons react on hover: wrench cocks, euro bobs, plus turns.
     The svg is the rendered lucide icon inside .icon-circle; the circle itself
     still scales (rule in §5) — these add per-icon character on top. */
  .help-card .icon-circle svg { transition: transform 0.25s ease; }
  .help-card:nth-child(1):hover .icon-circle svg { transform: rotate(-20deg); }   /* wrench */
  .help-card:nth-child(3):hover .icon-circle svg { transform: rotate(90deg); }    /* plus */
  .help-card:nth-child(2):hover .icon-circle svg { animation: euroBob 0.9s ease-in-out infinite; }  /* euro */
  @keyframes euroBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }
}

/* Touch parity — devices without hover can't trigger the icon reactions or the
   magnetic buttons, so give them equivalents: each card's icon plays its reaction
   ONCE as the card scrolls into view, and primary buttons give a quick press dip. */
@media (prefers-reduced-motion: no-preference) and (hover: none) {
  .help-card.is-visible:nth-child(1) .icon-circle svg { animation: iconWrenchPeek 0.9s ease 0.35s 1; }
  .help-card.is-visible:nth-child(2) .icon-circle svg { animation: euroBob 0.9s ease 0.35s 1; }
  .help-card.is-visible:nth-child(3) .icon-circle svg { animation: iconPlusPeek 0.9s ease 0.35s 1; }
  @keyframes iconWrenchPeek { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-20deg); } }
  @keyframes iconPlusPeek   { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }
}
@media (hover: none) {
  .btn:active,
  button[type="submit"]:active,
  a[role="button"]:active { transform: scale(0.96); }
}

/* -- 9. Monitoring panel choreography (playful v21) ------ */
/* On reveal the production line draws L→R, the area fills in behind it, the amber
   anomaly marker starts pulsing, and the alert row "arrives" with a tiny shake —
   reinforcing the monitor → detect → act story. All keyed on the panel's reveal
   class (.is-visible) and the initial hidden states are scoped to html.js so no-JS
   users see the finished panel. The whole block is no-preference, so reduced-motion
   users get the final, static panel (line drawn, area shown, no pulse/shake). */
@media (prefers-reduced-motion: no-preference) {
  html.js .panel-line { stroke-dasharray: 420; stroke-dashoffset: 420; }
  html.js .panel-area { opacity: 0; }
  html.js .monitor-panel.is-visible .panel-line { animation: drawLine 1.4s ease-out 0.15s forwards; }
  html.js .monitor-panel.is-visible .panel-area { animation: fadeArea 0.7s ease 1.25s forwards; }
  @keyframes drawLine { to { stroke-dashoffset: 0; } }
  @keyframes fadeArea { to { opacity: 1; } }

  .panel-anomaly { transform-box: fill-box; transform-origin: center; }
  html.js .monitor-panel.is-visible .panel-anomaly { animation: anomalyPulse 1.8s ease-in-out 1.6s infinite; }
  @keyframes anomalyPulse {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.28); opacity: 1; }
  }

  html.js .monitor-panel.is-visible .panel-alert { animation: alertIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.7s both; }
  @keyframes alertIn {
    0%   { opacity: 0; transform: translateY(12px); }
    55%  { opacity: 1; transform: translateY(-2px); }
    70%  { transform: translateX(-3px); }
    82%  { transform: translateX(3px); }
    100% { opacity: 1; transform: translate(0, 0); }
  }
}

/* -- 10. Sitewide sparkle / reward (playful v23) -------- */
/* Scroll-progress "sunbeam" — fixed above the sticky nav; fills L→R as you scroll.
   Fixed + pointer-events:none, so it never disturbs the sticky nav or layout. */
.scroll-beam {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 200;                 /* above the sticky nav (z 100) */
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #F4C430, #E6B41F 55%, #F6D67A);
  box-shadow: 0 0 8px rgba(244, 196, 48, 0.55);
  pointer-events: none;
}

/* Floating light motes — faint golden particles drifting slowly upward (JS-injected;
   skipped for reduced-motion). z-index 1 keeps them above section backgrounds but
   below the sticky nav (100) and scroll-beam (200). */
.motes { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mote {
  position: absolute;
  bottom: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, #F4C430 0%, rgba(244, 196, 48, 0.85) 38%, rgba(244, 196, 48, 0) 78%);
  animation-name: moteDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes moteDrift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(14px, -55vh); }
  100% { transform: translate(-8px, -110vh); }
}

/* Confetti overlay canvas (contact form success sun-burst) */
.confetti-canvas { position: fixed; inset: 0; z-index: 300; pointer-events: none; }

/* Animated underline for the desktop nav links (replaces the plain underline) */
@media (min-width: 1061px) {
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: var(--color-green-dark);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }
  .nav-links a:hover { text-decoration: none; }
  .nav-links a:hover::after,
  .nav-links a.is-active::after { transform: scaleX(1); }
}

/* -- 11. Interaction consistency (batch 5) --------------- */
/* One consistent keyboard-focus ring on EVERY interactive element (#28/#89/#121) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
/* Service cards are fully clickable (stretched link). Keyboard-focusing that link
   lifts + rings the WHOLE card, matching the hover affordance (#5/#30/#121). */
.help-link:focus-visible { outline: none; }
.help-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  outline: 2px solid var(--color-green-light);
  outline-offset: 3px;
}
/* Consistent card shadow — the one-off primary-card shadow now matches the token */
.help-card--primary { box-shadow: var(--shadow-md); }
/* Open FAQ items get a clearer surface + the chevron always rotates (#84/#85) */
.faq-list details[open] { background: var(--color-surface); border-color: var(--color-green-light); }
/* FAQ question hover (#89) */
.faq-list summary:hover { color: var(--color-green-dark); }

/* -- 12. Batch-10 completeness details ------------------- */
/* Badge monitoring-context icon (#19) — a tiny live-signal glyph so the chip
   clearly reads as a monitoring view, not just a number. */
.hero-badge-mon { width: 14px; height: 14px; color: var(--color-green-light); flex: 0 0 auto; }
/* Small mail icon on the bottom CTA button (#97) */
.cta-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* Consistent hero-copy rhythm between intro, title, body, buttons, proof (#15) */
.hero-eyebrow { margin: 0 0 var(--space-sm); }
.hero-copy h1 { margin: 0 0 var(--space-md); }
.hero-body { margin: 0 0 var(--space-lg); }
.hero-proof { margin: var(--space-lg) 0 0; }

@media (max-width: 599px) {
  /* Compacter service cards on mobile (#40) */
  .help-card { padding: var(--space-lg); }
}