/* =====================================================================
   GREP design system: "engineered light"
   ---------------------------------------------------------------------
   One stylesheet. Tokens first, then base, primitives, page modules,
   motion, breakpoints. Dark ("night") bands are the canvas; LED white
   and the logo's leaf green are the light. Every colour pair used for
   text passes WCAG AA (tools/contrast.py).
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  --night: #071A0C;
  --night-2: #0E2A14;
  --dark: #0B3D0E;
  --brand: #0C6C07;
  --brand-deep: #095205;
  --leaf: #7CB418;
  --leaf-soft: #DBECB6;
  --lime: #F4F8EE;
  --panel: #E9F1DA;
  --paper: #FFFFFF;
  --ink: #101512;
  --ink-2: #3E463F;
  --mute: #646D66;
  --line: #DCE3D6;
  --on-night: #F2F7EA;
  --on-night-2: rgba(242, 247, 234, .72);
  --on-night-3: rgba(242, 247, 234, .16);
  --sodium: #FFD98A;
  --led: #EAF6FF;
  --alert: #B71313;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 3vw, 40px);
  --r: 20px;
  --r-sm: 12px;
  --rhythm: clamp(72px, 9vw, 140px);
  --nav-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 18px 50px -20px rgba(7, 26, 12, .35);
  --shadow-sm: 0 6px 20px -10px rgba(7, 26, 12, .25);
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand-deep); }
button { font: inherit; color: inherit; }
:where(h1, h2, h3, h4) { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
:where(p, ul, ol) { margin: 0; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--leaf-soft); color: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--leaf); color: var(--night); font-weight: 600; border-radius: 999px; transition: top .2s; }
.skip:focus { top: 16px; }

/* ---------- 3. typography ---------- */
.display-xl { font-size: clamp(2.7rem, 6.2vw, 5.6rem); font-weight: 700; letter-spacing: -.03em; line-height: .98; }
.display-l  { font-size: clamp(2.05rem, 3.8vw, 3.4rem); letter-spacing: -.025em; line-height: 1.04; }
.display-m  { font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -.02em; line-height: 1.12; }
.display-s  { font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: -.015em; line-height: 1.2; }
.lead  { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.small { font-size: .92rem; color: var(--mute); line-height: 1.55; }
.tiny  { font-size: .8rem; color: var(--mute); line-height: 1.5; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(124, 180, 24, .18); }
.num { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.hl { color: var(--leaf); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); margin-top: 2em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose strong { font-weight: 700; color: var(--ink); }

/* ---------- 4. layout ---------- */
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(76ch, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--rhythm); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.band { position: relative; padding-block: var(--rhythm); }
.band--lime { background: var(--lime); }
.band--night { background: var(--night); color: var(--on-night); }
.band--dark { background: var(--dark); color: var(--on-night); }
.band--brand { background: var(--brand); color: var(--on-night); }
.band--night .lead, .band--dark .lead, .band--brand .lead { color: var(--on-night-2); }
.band--night .small, .band--dark .small, .band--night .tiny { color: var(--on-night-2); }
.band--night .eyebrow, .band--dark .eyebrow, .band--brand .eyebrow { color: var(--leaf); }
.band--brand .eyebrow { color: var(--on-night); }
.band--brand .eyebrow::before { background: var(--on-night); box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.band--night a:not(.btn), .band--dark a:not(.btn) { color: var(--on-night); }
.band--night :focus-visible, .band--dark :focus-visible, .band--brand :focus-visible { outline-color: var(--leaf); }
.band--brand :focus-visible { outline-color: var(--on-night); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.head { max-width: 62ch; margin-bottom: clamp(36px, 4.5vw, 64px); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head > .lead { margin-top: 18px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 4.5vw, 64px); }
.split .lead { margin: 0; }

/* decorative light on night bands */
.lightpool { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 55% at 28% -10%, rgba(234, 246, 255, .16), transparent 70%),
    radial-gradient(42% 40% at 82% 108%, rgba(124, 180, 24, .14), transparent 70%); }
.lightpool::before { content: ""; position: absolute; left: 28%; top: 0; width: 1px; height: 26%; background: linear-gradient(rgba(234, 246, 255, .35), transparent); }
.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .055; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.band--night > .wrap, .band--dark > .wrap, .hero > .wrap, .pagehead > .wrap { position: relative; z-index: 1; }

/* ---------- 5. buttons, chips, links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease), color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--leaf); color: var(--night); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--primary:hover { background: #8CC826; color: var(--night); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -14px rgba(124, 180, 24, .9); }
.btn--brand { background: var(--brand); color: var(--on-night); }
.btn--brand:hover { background: var(--brand-deep); color: var(--on-night); }
.btn--light { background: var(--paper); color: var(--brand); }
.btn--light:hover { background: var(--lime); color: var(--brand-deep); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); color: inherit; }
.band--lime .btn--ghost, .section .btn--ghost { color: var(--brand); }
.band--lime .btn--ghost:hover, .section .btn--ghost:hover { background: var(--panel); }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 1.05rem; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--leaf-soft); color: var(--dark); font-size: .9rem; font-weight: 600; line-height: 1.2; }
.chip--check::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat; }
.band--night .chip, .band--dark .chip, .hero .chip { background: rgba(124, 180, 24, .14); color: var(--on-night); border: 1px solid rgba(124, 180, 24, .3); }
.band--night .chip--check::before, .hero .chip--check::before { background-color: var(--leaf); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--brand); }
.textlink svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.textlink:hover svg { transform: translateX(4px); }
.band--night .textlink { color: var(--leaf); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(48px, 6vw, 88px); padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px); border: 1px solid var(--line); border-radius: var(--r); background: var(--lime); font-family: var(--display); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; }
.cta-row .btn { font-family: var(--sans); }

/* ---------- 6. header, nav, menu ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); color: var(--on-night); transition: background-color .25s var(--ease), color .25s, box-shadow .25s; }
.site-header::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: rgba(255, 255, 255, .12); opacity: 0; transition: opacity .25s; }
.site-header.is-scrolled { background: rgba(255, 255, 255, .95); color: var(--ink); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.nav__brand { position: relative; display: block; height: 34px; width: 226px; flex: none; }
.nav__logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; transition: opacity .2s; }
.nav__logo--dark { opacity: 0; }
.is-scrolled .nav__logo--dark { opacity: 1; }
.is-scrolled .nav__logo--light { opacity: 0; }
.nav__links { display: flex; gap: 4px; }
.nav__links a { padding: 10px 14px; border-radius: 999px; color: inherit; text-decoration: none; font-weight: 500; font-size: .98rem; white-space: nowrap; opacity: .86; transition: background-color .2s, opacity .2s; }
.nav__links a:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.is-scrolled .nav__links a:hover { background: var(--lime); }
.nav__links a[aria-current="page"] { opacity: 1; font-weight: 600; box-shadow: inset 0 -2px 0 var(--leaf); border-radius: 0; padding-bottom: 8px; }
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__cta .btn { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.burger { display: none; position: relative; width: 46px; height: 46px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer; }
.burger span { position: absolute; left: 13px; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
body.is-open .burger { color: var(--on-night); }
body.is-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.is-open .burger span:nth-child(2) { opacity: 0; }
body.is-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 40; background: var(--night); color: var(--on-night); padding: calc(var(--nav-h) + 24px) var(--gutter) 40px; overflow: auto; }
.menu[hidden] { display: none; }
.menu__in { display: grid; gap: 36px; max-width: 720px; }
.menu__links { display: grid; gap: 4px; }
.menu__links a { font-family: var(--display); font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; color: var(--on-night); text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--on-night-3); }
.menu__links a[aria-current="page"] { color: var(--leaf); }
.menu__contact { display: grid; gap: 6px; color: var(--on-night-2); }
.menu__contact a { color: var(--on-night); text-decoration: none; font-weight: 600; }
.menu__contact .alert { color: #FF8A8A; }
body.is-open { overflow: hidden; }
body.is-open .site-header { background: transparent; color: var(--on-night); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.is-open .nav__logo--dark { opacity: 0; } body.is-open .nav__logo--light { opacity: 1; }
body.is-open .nav__links, body.is-open .nav__cta .btn { visibility: hidden; }

/* ---------- 7. hero + compare ---------- */
.hero { position: relative; background: var(--night); color: var(--on-night); padding: calc(var(--nav-h) + clamp(48px, 7vw, 96px)) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 14fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { color: var(--on-night); }
.hero .lead { color: var(--on-night-2); margin-top: 22px; max-width: 46ch; }
.hero .lead strong { color: var(--on-night); font-weight: 600; }
.hero .btn-row { margin-top: 32px; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--on-night-3); list-style: none; padding-left: 0; }
.hero .eyebrow { color: var(--leaf); }
.hero :focus-visible { outline-color: var(--leaf); }
.hero__figure { margin: 0; }
.hero__cap { margin-top: 12px; font-size: .85rem; color: var(--on-night-2); display: flex; gap: 10px; align-items: center; }
.hero__cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); flex: none; }

.compare { --pos: 52%; --pos-n: 52; position: relative; margin: 0; }
.compare__stage { position: relative; aspect-ratio: 2 / 1; }
.hero .compare__stage { aspect-ratio: 4 / 3; }
.compare__stage { border-radius: var(--r); overflow: hidden; background: var(--night-2); box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .08); isolation: isolate; }
.compare__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__after { clip-path: inset(0 0 0 var(--pos)); }
.compare__tag { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; padding: 8px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; transition: opacity .25s; }
.compare__tag--before { left: 18px; background: rgba(7, 26, 12, .55); color: var(--sodium); border: 1px solid rgba(255, 217, 138, .4); opacity: clamp(0, (var(--pos-n) - 8) / 10, 1); }
.compare__tag--after { right: 18px; background: rgba(7, 26, 12, .55); color: var(--led); border: 1px solid rgba(234, 246, 255, .4); opacity: clamp(0, (92 - var(--pos-n)) / 10, 1); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -50% 0; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .6); z-index: 2; pointer-events: none; }
.compare__grip { position: absolute; top: 50%; left: var(--pos); z-index: 3; width: clamp(48px, 5vw, 64px); height: clamp(48px, 5vw, 64px); translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; background: rgba(7, 26, 12, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.compare__grip svg { width: 44%; height: 44%; fill: currentColor; }
.compare__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 64px; height: 100%; }
.compare__range::-moz-range-thumb { width: 64px; height: 100%; border: 0; }
.compare__stage:has(.compare__range:focus-visible) .compare__grip { outline: 3px solid var(--leaf); outline-offset: 3px; }
.compare__stage:has(.compare__range:active) .compare__grip { scale: 1.06; }

/* ---------- 8. stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 32px); }
.stat { position: relative; padding: clamp(22px, 2.5vw, 30px) 0 0; border-top: 2px solid var(--line); }
.stat::before { content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 2px; background: var(--leaf); }
.stat__n { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2.5rem, 5vw, 4.4rem); letter-spacing: -.045em; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__c { display: block; margin-top: 12px; color: var(--ink-2); font-size: .98rem; line-height: 1.4; max-width: 22ch; }
.stats__note { margin-top: clamp(24px, 3vw, 36px); }
.band--night .stat, .band--dark .stat { border-top-color: var(--on-night-3); }
.band--night .stat__n, .band--dark .stat__n { color: var(--on-night); }
.band--night .stat__c, .band--dark .stat__c { color: var(--on-night-2); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pagehead .stat, .hero .stat { border-top-color: var(--on-night-3); }
.pagehead .stat__n, .hero .stat__n { color: var(--leaf); font-size: clamp(2rem, 3.1vw, 3rem); }
.pagehead .stat__c, .hero .stat__c { color: var(--on-night-2); font-size: .9rem; }
.stats--stack { grid-template-columns: 1fr; gap: 26px; }

/* ---------- 9. motto ---------- */
.quote { font-family: var(--display); font-size: clamp(1.7rem, 3.6vw, 3.1rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.18; color: var(--ink); }
.quote__sub { margin-top: 22px; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--brand); font-weight: 600; }
.strike { position: relative; white-space: nowrap; background: linear-gradient(var(--leaf), var(--leaf)) no-repeat 0 56% / 0 .1em; transition: background-size .9s var(--ease) .25s; }
.strike.is-in { background-size: 100% .1em; }

/* ---------- 10. ledger (numbered arguments) ---------- */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); list-style: none; padding: 0; margin: 0; }
.ledger__item { display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(18px, 2vw, 28px); padding: clamp(22px, 2.6vw, 34px) 0; border-top: 1px solid var(--line); transition: border-color .25s; }
.ledger__item:hover { border-top-color: var(--leaf); }
.ledger__n { grid-row: 1 / span 2; font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 3.8vw, 3.4rem); letter-spacing: -.04em; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--leaf); transition: color .3s var(--ease); font-variant-numeric: tabular-nums; }
.ledger__item:hover .ledger__n { color: var(--leaf); }
.ledger__t { font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.ledger__d { margin-top: 8px; color: var(--ink-2); line-height: 1.5; }
.ledger--plain .ledger__item { grid-template-columns: 1fr; }
.ledger--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.band--night .ledger__item, .band--dark .ledger__item { border-top-color: var(--on-night-3); }
.band--night .ledger__d { color: var(--on-night-2); }

/* ---------- 11. steps ---------- */
.steps { --n: 5; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 32px); list-style: none; padding: 0; margin: 0; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--line); z-index: 0; }
.step { position: relative; z-index: 1; padding-top: 64px; }
.step__n { position: absolute; top: 0; left: 0; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--leaf); color: var(--night); font-family: var(--display); font-weight: 800; font-size: 1.15rem; box-shadow: 0 0 0 6px var(--paper); }
.band--lime .step__n { box-shadow: 0 0 0 6px var(--lime); }
.step__t { font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.step__d { margin-top: 8px; color: var(--ink-2); line-height: 1.5; font-size: .98rem; }
.steps--v { grid-template-columns: 1fr; gap: 0; }
.steps--v::before { top: 0; bottom: 0; left: 23px; right: auto; width: 1px; height: auto; }
.steps--v .step { padding: 0 0 clamp(28px, 3.5vw, 44px) 76px; }
.steps--v .step:last-child { padding-bottom: 0; }

/* ---------- 12. cards, callout ---------- */
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.8vw, 34px); border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.card:hover { transform: translateY(-2px); border-color: var(--leaf); box-shadow: var(--shadow-sm); }
.card__t { font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.22; }
.card__d { color: var(--ink-2); line-height: 1.5; font-size: .98rem; }
.card__d a { font-weight: 600; }
.card__meta { margin-top: auto; padding-top: 12px; font-size: .85rem; color: var(--mute); font-weight: 600; }
.card__n { font-family: var(--display); font-weight: 800; font-size: 2.2rem; letter-spacing: -.04em; line-height: 1; color: var(--brand); }
.card--hi { background: var(--night); color: var(--on-night); border-color: var(--night); }
.card--hi .card__d { color: var(--on-night-2); }
.card--hi .card__meta { color: var(--leaf); }
.card--hi .card__n { color: var(--leaf); }
.card--cta { background: var(--brand); color: var(--on-night); border-color: var(--brand); justify-content: center; }
.card--cta .card__d { color: rgba(255, 255, 255, .85); }
.card--cta .btn { align-self: flex-start; margin-top: 8px; }
.band--night .card, .band--dark .card { background: var(--night-2); border-color: rgba(255, 255, 255, .08); color: var(--on-night); }
.band--night .card__d { color: var(--on-night-2); }
.band--night .card__n { color: var(--leaf); }
.band--night .card__meta { color: var(--on-night-2); }
.band--night .card:hover { border-color: rgba(124, 180, 24, .6); }
.card--link { text-decoration: none; color: inherit; }
.callout { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: clamp(28px, 3.5vw, 44px); border-radius: var(--r); background: var(--night); color: var(--on-night); margin-top: clamp(40px, 5vw, 72px); position: relative; overflow: hidden; }
.callout > * { position: relative; z-index: 1; }
.callout .display-s, .callout .display-m { color: var(--on-night); }
.callout p { color: var(--on-night-2); margin-top: 8px; max-width: 56ch; }
.callout strong { color: var(--leaf); }
.callout--warn { display: block; background: #FFF6DE; color: #5A4400; border: 1px solid #F0D48A; }
.callout--warn strong { color: #5A4400; }
.callout--warn p { color: #5A4400; }

/* ---------- 13. map ---------- */
.map { position: relative; }
.map__svg { width: 100%; height: auto; display: block; overflow: visible; }
.map__outline { fill: rgba(124, 180, 24, .07); stroke: rgba(124, 180, 24, .6); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.map__county { fill: none; stroke: rgba(242, 247, 234, .16); stroke-width: .8; vector-effect: non-scaling-stroke; }
.map__halo { fill: var(--leaf); opacity: .35; mix-blend-mode: screen; }
.map__dot { fill: var(--leaf); stroke: var(--night); stroke-width: 1.5; cursor: pointer; transition: fill .2s, r .2s; outline: none; }
.map__dot:hover, .map__dot.is-hot { fill: var(--led); }
.map__dot:focus-visible { fill: var(--led); stroke: var(--led); stroke-width: 3; }
.map__tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 16px)); display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: var(--on-night); color: var(--ink); font-size: .9rem; line-height: 1.35; white-space: nowrap; pointer-events: none; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); animation: tip .18s var(--ease); }
.map__tip[hidden] { display: none; }
.map__tip strong { font-family: var(--display); font-size: 1.1rem; letter-spacing: -.01em; color: var(--night); }
.map__tip span { color: var(--ink-2); }
.map__tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: var(--on-night); }
.map__legend { margin-top: 16px; font-size: .82rem; color: var(--on-night-2); }
@keyframes tip { from { opacity: 0; transform: translate(-50%, calc(-100% - 8px)); } }
.map--compact .map__county { stroke-opacity: .7; }
.map-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.map-grid--wide { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
.flagships { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.flagship { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: baseline; padding: 16px 20px; border-radius: var(--r-sm); background: var(--night-2); border: 1px solid rgba(255, 255, 255, .08); }
.flagship__t { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.flagship__n { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--leaf); font-variant-numeric: tabular-nums; }
.flagship__m { grid-column: 1 / -1; font-size: .85rem; color: var(--on-night-2); }

/* ---------- 14. photos ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.photo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo { margin: 0; }
.photo__frame { position: relative; border-radius: var(--r); overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.photo__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); pointer-events: none; }
.photo__frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform .7s var(--ease); }
.photo--tall .photo__frame img { aspect-ratio: 4 / 5; }
.photo:hover .photo__frame img { transform: scale(1.03); }
.photo__cap { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .92rem; color: var(--ink-2); font-weight: 600; }
.photo__cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); flex: none; }
.photo__cap span { color: var(--mute); font-weight: 500; }
.band--night .photo__cap { color: var(--on-night); }
.band--night .photo__cap span { color: var(--on-night-2); }

/* ---------- 15. timeline, bars, year chart ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 32px); position: relative; list-style: none; padding: 0; margin: 0; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.tl { position: relative; padding-top: 30px; }
.tl::before { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 5px var(--paper); }
.tl__y { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -.04em; line-height: 1; color: var(--brand); }
.tl p { margin-top: 10px; color: var(--ink-2); line-height: 1.5; }
.bars { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 160px) 1fr auto; gap: 16px; align-items: center; }
.bar-row__l { font-weight: 600; font-size: .95rem; }
.bar { height: 14px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.bar__fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--leaf)); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease); }
.bar__fill--mute { background: var(--mute); }
.is-in .bar__fill, .bar-row.is-in .bar__fill { transform: scaleX(1); }
.bar-row__v { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1rem; }
.years { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); align-items: end; height: 260px; padding-top: 28px; }
.yr { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: 8px; }
.yr__n { font-family: var(--display); font-weight: 700; font-size: .95rem; align-self: end; font-variant-numeric: tabular-nums; }
.yr__bar { align-self: end; width: 100%; height: var(--h); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--leaf), var(--brand)); transform-origin: bottom; transform: scaleY(0); transition: transform .8s var(--ease); }
.is-in .yr__bar { transform: scaleY(1); }
.yr__y { font-size: .78rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.bignum { font-family: var(--display); font-weight: 800; font-size: clamp(3.6rem, 8vw, 7rem); letter-spacing: -.05em; line-height: .95; color: var(--brand); }
.bignum + .small { margin-top: 10px; max-width: 30ch; }

/* ---------- 16. table, form ---------- */
.table-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.search { position: relative; flex: 1 1 260px; max-width: 380px; }
.search input { width: 100%; min-height: 48px; padding: 0 16px 0 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: inherit; color: var(--ink); }
.search input:focus { outline: 3px solid var(--leaf-soft); border-color: var(--brand); }
.search::before { content: ""; position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646D66' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); -webkit-overflow-scrolling: touch; }
.ref-table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 640px; }
.ref-table th, .ref-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.ref-table thead th { position: sticky; top: 0; background: var(--lime); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.ref-table th[data-sort] { cursor: pointer; user-select: none; }
.ref-table th[data-sort]::after { content: "↕"; margin-left: 6px; opacity: .4; }
.ref-table th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--brand); }
.ref-table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--brand); }
.ref-table tbody th { font-weight: 700; color: var(--ink); }
.ref-table td { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.ref-table tbody tr { transition: background-color .2s; }
.ref-table tbody tr:hover, .ref-table tbody tr.is-hot { background: var(--lime); }
.ref-table tbody tr:last-child th, .ref-table tbody tr:last-child td { border-bottom: 0; }
.table-count { font-size: .9rem; color: var(--mute); }
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .92rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font: inherit; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--leaf-soft); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--alert); }
.check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .92rem; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); }
.form__note { min-height: 1.5em; font-size: .95rem; font-weight: 600; }
.form__note--ok { color: var(--brand); }
.form__note--err { color: var(--alert); }
.contact-block { display: grid; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-block p { display: grid; gap: 2px; }
.contact-block .lbl { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.contact-block a { font-weight: 600; text-decoration: none; }
.contact-block .alert { color: var(--alert); }
.checklist { counter-reset: item; list-style: none; padding: 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 44px; color: var(--ink-2); line-height: 1.45; }
.checklist li::before { counter-increment: item; content: counter(item, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--display); font-weight: 800; color: var(--leaf); font-size: 1.05rem; letter-spacing: -.02em; }

/* ---------- 17. pagehead, cta band, footer ---------- */
.pagehead { position: relative; background: var(--night); color: var(--on-night); padding: calc(var(--nav-h) + clamp(40px, 6vw, 80px)) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.pagehead__crumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; font-size: .88rem; color: var(--on-night-2); }
.pagehead__crumbs a { color: var(--on-night-2); text-decoration: none; }
.pagehead__crumbs a:hover { color: var(--on-night); }
.pagehead__crumbs span[aria-current] { color: var(--on-night); font-weight: 600; }
.pagehead h1 { color: var(--on-night); max-width: 16ch; font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
.pagehead .lead { color: var(--on-night-2); margin-top: 22px; max-width: 58ch; }
.pagehead .lead strong { color: var(--on-night); }
.pagehead__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.cta-band { position: relative; background: var(--brand); color: var(--on-night); padding-block: clamp(64px, 8vw, 110px); overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 85% 50%, rgba(124, 180, 24, .55), transparent 70%); pointer-events: none; }
.cta-band .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; justify-items: start; }
.cta-band h2 { color: var(--on-night); max-width: 20ch; }
.cta-band p { margin-top: 14px; color: rgba(255, 255, 255, .86); max-width: 52ch; font-size: 1.1rem; }
.site-footer { background: var(--night); color: var(--on-night-2); padding: clamp(56px, 7vw, 96px) 0 32px; font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--on-night-3); }
.foot-brand img { width: 200px; height: auto; }
.foot-brand .tagline { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--on-night); letter-spacing: -.01em; }
.foot-brand .tiny { margin-top: 10px; color: var(--on-night-2); }
.foot-col h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-night); margin-bottom: 14px; }
.foot-col h3 + h3, .foot-col .mt { margin-top: 26px; }
.foot-col a { display: block; padding: 5px 0; color: var(--on-night-2); text-decoration: none; transition: color .2s; }
.foot-col a:hover { color: var(--on-night); }
.foot-col a.alert { color: #FF9C9C; font-weight: 600; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding-top: 24px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.badges li { padding: 6px 12px; border: 1px solid var(--on-night-3); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--on-night); letter-spacing: .02em; }
.foot-bottom .tiny { color: var(--on-night-2); }
.partners { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.partners li { display: grid; place-items: center; min-height: 84px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink-2); text-align: center; transition: border-color .25s, color .25s; }
.partners li:hover { border-color: var(--leaf); color: var(--brand); }
.cert-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; list-style: none; padding: 0; }

/* ---------- 18. motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-words] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.js [data-words] .w > span { display: inline-block; transform: translateY(110%); animation: rise .7s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms + .05s); }
@keyframes rise { to { transform: none; } }
.js .hero .lead, .js .hero .btn-row, .js .hero__proof { animation: fadeUp .7s var(--ease) both; }
.js .hero .lead { animation-delay: .35s; } .js .hero .btn-row { animation-delay: .45s; } .js .hero__proof { animation-delay: .55s; }
.js .hero__figure { animation: frame .9s var(--ease) both; animation-delay: .2s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes frame { from { opacity: 0; transform: scale(.975); } }
.js .compare__grip { animation: nudge 1.4s ease-in-out 1.2s 2; }
@keyframes nudge { 50% { box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 10px rgba(255, 255, 255, .18); } }
.map__halos circle:nth-child(-n+6) { animation: pulse 3.2s ease-in-out infinite; }
.map__halos circle:nth-child(2) { animation-delay: .6s; } .map__halos circle:nth-child(3) { animation-delay: 1.2s; }
.map__halos circle:nth-child(4) { animation-delay: 1.8s; } .map__halos circle:nth-child(5) { animation-delay: 2.4s; } .map__halos circle:nth-child(6) { animation-delay: 3s; }
@keyframes pulse { 50% { opacity: .65; } }
.js .map__dot { opacity: 0; animation: pop .5s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1ms + .2s); }
@keyframes pop { from { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; } to { opacity: 1; } }

/* ---------- 19. breakpoints ---------- */
@media (max-width: 1440px) {
  .nav { gap: 16px; }
  .nav__links { gap: 0; }
  .nav__links a { padding: 10px 10px; font-size: .93rem; }
  .nav__cta .btn { padding-inline: 15px; }
}
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .nav__cta .btn { display: none; }
}
@media (max-width: 1024px) {
  .steps { --n: 5; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .steps::before { display: none; }
  .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .map-grid, .map-grid--wide { grid-template-columns: 1fr; }
  .split, .pagehead__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero .lead { max-width: 60ch; }
}
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger, .ledger--3 { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .timeline::before { display: none; }
  .callout { grid-template-columns: 1fr; }
  .cta-band .wrap { grid-template-columns: 1fr; }
  .years { height: 220px; }
  .photo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --nav-h: 68px; }
  .nav__brand { width: 180px; height: 28px; }
  .grid-2, .grid-3, .grid-4, .form__row, .photo-grid, .photo-grid--3, .stats, .stats--3, .timeline { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before { display: block; top: 0; bottom: 0; left: 23px; right: auto; width: 1px; height: auto; }
  .step { padding: 0 0 32px 68px; }
  .step:last-child { padding-bottom: 0; }
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr auto; grid-template-areas: "l v" "b b"; gap: 6px 12px; }
  .bar-row__l { grid-area: l; }
  .bar-row__v { grid-area: v; }
  .bar-row .bar { grid-area: b; }
  .years { gap: 4px; height: 190px; }
  .yr__n { font-size: .75rem; }
  .yr__y { font-size: .62rem; }
  .cta-row { justify-content: center; text-align: center; }
  .cta-row .btn { width: 100%; }
  .hero .btn-row .btn { width: 100%; }
  .compare__tag { top: 16px; translate: none; }
  .ledger__n { font-size: 2.1rem; }
  .table-tools { align-items: stretch; }
  .search { max-width: none; }
}
@media (max-width: 480px) {
  .stat__n { font-size: 2.4rem; }
  .pagehead h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* ---------- 20. reduced motion & no-js ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js [data-words] .w > span { transform: none; animation: none; }
  .js .hero .lead, .js .hero .btn-row, .js .hero__proof, .js .hero__figure, .js .compare__grip, .js .map__dot { animation: none; opacity: 1; }
  .strike { background-size: 100% .1em; transition: none; }
  .bar__fill, .yr__bar { transform: none; transition: none; }
  .map__halos circle { animation: none; }
  .btn, .card, .photo__frame img { transition: none; }
}
@media print {
  .site-header, .menu, .cta-band, .compare__range { display: none; }
  .hero, .pagehead, .band--night, .site-footer { background: #fff; color: #000; }
}

/* ---------- 21. map controls, replay, fullscreen ---------- */
.map__stage { position: relative; }
.map__ctrl { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; gap: 6px; }
.map__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(14, 42, 20, .86); color: var(--on-night); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .2s, color .2s, background-color .2s; }
.map__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map__btn:hover { border-color: var(--leaf); color: var(--leaf); }
.map__btn:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.map__btn--play { padding: 0 14px 0 10px; font-weight: 600; font-size: .85rem; }
.map.is-playing .map__btn--play { color: var(--leaf); border-color: var(--leaf); }
.map__close { display: none; position: absolute; top: 14px; right: 14px; z-index: 7; }
.map.is-full .map__stage, .map__stage:fullscreen { position: fixed; inset: 0; z-index: 90; background: var(--night); display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.map.is-full .map__stage .map__svg, .map__stage:fullscreen .map__svg { width: 100%; max-height: 100%; }
.map.is-full .map__close, .map__stage:fullscreen .map__close { display: inline-flex; }
.map.is-zoomed .map__svg { cursor: grab; }
.map__svg.is-dragging { cursor: grabbing; }
.map__county { transition: fill .25s; }
.map__county.is-hot { fill: rgba(124, 180, 24, .16); stroke: rgba(124, 180, 24, .5); }
.map__dot, .map__halo { transform-box: fill-box; transform-origin: center; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.map__dot.is-off, .map__halo.is-off { opacity: 0; transform: scale(.2); pointer-events: none; }
.map__counter { position: absolute; left: 12px; top: 12px; z-index: 6; display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: rgba(14, 42, 20, .86); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.map__counter[hidden] { display: none; }
.map__year { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--leaf); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.map__sum { font-size: .82rem; color: var(--on-night-2); white-space: nowrap; }
.js .map__dot { animation: none; opacity: 1; }
@media (max-width: 720px) { .map__btn--play span { display: none; } .map__btn--play { padding: 0; } .map__counter { padding: 8px 10px; } .map__year { font-size: 1.4rem; } .map__sum { font-size: .72rem; } }

/* ---------- 22. motto on the real night photo ---------- */
.motto { overflow: hidden; }
.motto__photo { position: absolute; inset: 0; z-index: 0; }
.motto__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: brightness(.85) saturate(1.05); transform: scale(1.04); }
.motto__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 26, 12, .9) 0%, rgba(7, 26, 12, .72) 42%, rgba(7, 26, 12, 0) 100%), linear-gradient(180deg, rgba(7, 26, 12, .45), transparent 30%, transparent 70%, rgba(7, 26, 12, .55)); }
.motto__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.band--night .quote { color: var(--on-night); }
.band--night .quote__sub { color: var(--leaf); }
.motto__cap { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--on-night-2); }
.motto__cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }
@media (max-width: 900px) { .motto__grid { grid-template-columns: 1fr; } .motto__photo::after { background: linear-gradient(180deg, rgba(7, 26, 12, .92), rgba(7, 26, 12, .78)); } }

/* ---------- 23. partner marquee, steps progress, hero breathing ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); padding-block: 8px; }
.marquee__track { display: flex; width: max-content; animation: marquee 72s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; list-style: none; padding: 0; margin: 0; }
.marquee__item { display: flex; align-items: center; gap: clamp(24px, 3vw, 44px); padding-right: clamp(24px, 3vw, 44px); font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -.02em; color: var(--ink-2); white-space: nowrap; transition: color .25s; }
.marquee__item::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); flex: none; }
.marquee__item:hover { color: var(--brand); }
@keyframes marquee { to { transform: translateX(-50%); } }
.steps::after { content: ""; position: absolute; left: 0; top: 23px; width: calc(100% - 100% / var(--n) + 46px); height: 2px; z-index: 0; background: linear-gradient(90deg, var(--brand), var(--leaf)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) .3s; }
.steps.is-in::after { transform: scaleX(1); }
@media (max-width: 1024px) { .steps::after { display: none; } }
.hero .lightpool { animation: breathe 7s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .steps::after { transform: none; transition: none; } .hero .lightpool { animation: none; } .is-in .lamp__light { animation: none; } .map__dot, .map__halo { transition: none; } }

/* ---------- 24. hero: one clean first screen on desktop ---------- */
.hero { min-height: 100svh; display: grid; align-items: center; padding-top: calc(var(--nav-h) + clamp(28px, 4vh, 56px)); padding-bottom: clamp(56px, 8vh, 88px); }
.hero > .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); }
.hero .display-xl { font-size: clamp(2.6rem, 5.5vw, 5rem); }
.hero .lead { margin-top: 20px; }
.hero .btn-row { margin-top: 28px; }
.hero .btn-row .btn { min-height: 54px; padding: 0 24px; font-size: 1rem; }
.hero__proof { margin-top: 26px; padding-top: 22px; }
.hero__scroll { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; width: 1px; height: 44px; background: linear-gradient(var(--leaf), transparent); overflow: hidden; opacity: .8; }
.hero__scroll::after { content: ""; position: absolute; inset: 0; background: var(--night); animation: scrollcue 2.2s var(--ease) infinite; }
@keyframes scrollcue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (max-width: 1024px) { .hero { min-height: 0; display: block; } .hero__scroll { display: none; } }
@media (max-height: 760px) and (min-width: 1025px) { .hero .display-xl { font-size: clamp(2.4rem, 4.6vw, 4rem); } .hero__proof { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll::after { animation: none; } }

/* ---------- 25. research pass: map hit targets, photo grading ---------- */
.map__hit { fill: transparent; stroke: none; cursor: pointer; outline: none; }
.map__hit:focus-visible { fill: rgba(234, 246, 255, .18); stroke: var(--led); stroke-width: 2; }
.map__dot { cursor: default; }
.compare__stage img:first-child { filter: sepia(.14) saturate(1.08); }
.compare__after { filter: saturate(1.04) contrast(1.05); }

/* ---------- 26. real street map (Leaflet) ---------- */
.map__stage--real { height: clamp(380px, 52vw, 640px); border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: #0b1410; box-shadow: var(--shadow); isolation: isolate; }
.map--compact .map__stage--real { height: clamp(340px, 42vw, 540px); }
.map__stage--real .leaflet-container { width: 100%; height: 100%; background: #0b1410; font-family: var(--sans); }
.map__stage--real .map__tiles { filter: invert(1) hue-rotate(180deg) grayscale(.55) brightness(.62) contrast(1.08) sepia(.45) hue-rotate(50deg) saturate(1.15); }
.map__stage--real .leaflet-control-zoom { border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; overflow: hidden; box-shadow: none; }
.map__stage--real .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; background: rgba(14, 42, 20, .9); color: var(--on-night); border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 20px; }
.map__stage--real .leaflet-control-zoom a:hover { background: var(--night-2); color: var(--leaf); }
.map__stage--real .leaflet-control-attribution { background: rgba(7, 26, 12, .75); color: var(--on-night-2); font-size: 10px; padding: 2px 8px; border-radius: 8px 0 0 0; }
.map__stage--real .leaflet-control-attribution a { color: var(--on-night); }
.map__ldot { cursor: pointer; }
.map__ldot:focus-visible { outline: none; stroke: var(--led) !important; stroke-width: 3; }

.map__label { background: rgba(7, 26, 12, .78); color: var(--on-night); border: 1px solid rgba(124, 180, 24, .35); border-radius: 8px; padding: 3px 8px; font-size: .78rem; font-weight: 600; box-shadow: none; display: none; }
.map__label::before { display: none; }
.is-labels .map__label { display: block; }
.map__home { position: absolute; z-index: 800; right: 12px; top: 12px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(14, 42, 20, .9); color: var(--on-night); font-weight: 600; font-size: .85rem; cursor: pointer; }
.map__home:hover { color: var(--leaf); border-color: var(--leaf); }
.map__stage--real .map__tip { z-index: 900; }
.map__tip-county { font-size: .78rem; color: var(--mute); }
.map__stage--real::after { content: attr(data-hint); position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 800; padding: 6px 12px; border-radius: 999px; background: rgba(7, 26, 12, .75); color: var(--on-night-2); font-size: .76rem; pointer-events: none; transition: opacity .3s; }
.map__stage--real.is-active::after { opacity: 0; }
@media (max-width: 720px) { .map__stage--real::after { display: none; } .map__home { font-size: .78rem; height: 34px; } }

.map__lcounty { transition: fill-opacity .25s; }
.map__stage--real.is-streets .map__lcounty { stroke-opacity: .5; }
.motto[data-reveal] { opacity: 1; transform: none; }

/* ---------- 28. review pass ---------- */
.field__err { display: none; font-size: .85rem; font-weight: 600; color: var(--alert); }
.field.is-invalid .field__err { display: block; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--alert); box-shadow: 0 0 0 4px rgba(183, 19, 19, .12); }
.check.is-invalid { color: var(--alert); }
.band--tight-top { padding-top: clamp(40px, 5vw, 72px); }
.hero__lamps { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__lamps span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 10px 3px rgba(124, 180, 24, .55); opacity: 0; animation: lampflick 9s ease-in-out infinite; }
.hero__lamps span:nth-child(1) { left: 6%; top: 22%; animation-delay: 0s; }
.hero__lamps span:nth-child(2) { left: 46%; top: 12%; animation-delay: 3s; transform: scale(.7); }
.hero__lamps span:nth-child(3) { left: 63%; top: 86%; animation-delay: 5.5s; }
.hero__lamps span:nth-child(4) { left: 92%; top: 30%; animation-delay: 1.5s; transform: scale(.8); }
.hero__lamps span:nth-child(5) { left: 30%; top: 92%; animation-delay: 7s; transform: scale(.6); }
@keyframes lampflick { 0%, 8% { opacity: 0; } 10% { opacity: .9; } 12% { opacity: .2; } 14%, 60% { opacity: .85; } 70%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__lamps span { animation: none; opacity: .6; } }
.pagehead__stats .stat__n { white-space: normal; font-size: clamp(1.7rem, 2.5vw, 2.5rem); line-height: 1.05; }

/* ---------- 29. feedback pass ---------- */
.ref-table.is-collapsed tbody tr:nth-child(n+11) { display: none; }
.table-more { display: flex; justify-content: center; margin-top: 16px; }
.tech-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(40px, 5vw, 72px); padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .tech-top { grid-template-columns: 1fr; } }
.ledger--3.ledger--plain .ledger__item { border-top: 1px solid var(--line); }

.check .field__err { grid-column: 1 / -1; }
.check.is-invalid input { outline: 2px solid var(--alert); outline-offset: 2px; border-radius: 4px; }
.table-shell { position: relative; }
.table-hint { display: none; margin-top: 10px; font-size: .82rem; color: var(--mute); }
@media (max-width: 720px) {
  .table-shell::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none; border-radius: 0 var(--r) var(--r) 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .92)); }
  .table-hint { display: block; }
}
.table-note { font-size: .85rem; color: var(--mute); }

.ledger__item--wide { grid-column: 1 / -1; }
.grid--start { align-items: start; }
.pagehead__stats .stat__c { min-height: 2.9em; }

.cols-even .display-s { min-height: 2.6em; }
.cols-even .card__t { min-height: 2.5em; }
.prose h2 { padding-left: 16px; border-left: 3px solid var(--leaf); counter-increment: legal; }
.prose h2::before { content: counter(legal) ". "; color: var(--brand); }
.prose { counter-reset: legal; }
.compare-section .compare__stage { aspect-ratio: 2 / 1; }

.ref-table th:not(:first-child), .ref-table td { text-align: right; }
.ref-table th[data-sort]:not(:first-child)::after, .ref-table th:not(:first-child)::after { margin-left: 6px; }

/* ---------- 24. partner logos in the marquee ---------- */
.marquee__item { height: 84px; }
.marquee__logo { display: block; height: clamp(30px, 3vw, 40px); width: auto; max-width: none; transition: transform .3s; }
.marquee__logo--philips { height: clamp(22px, 2.2vw, 28px); }
.marquee__logo--otp-bank { height: clamp(30px, 3vw, 38px); }
.marquee__logo--osram { height: clamp(24px, 2.4vw, 32px); }
.marquee__logo--schreder { height: clamp(36px, 3.6vw, 46px); }
.marquee__logo--tungsram { height: clamp(30px, 3vw, 38px); border-radius: 3px; }
.marquee__logo--fbn-h { height: clamp(40px, 4vw, 52px); }
.marquee__logo--transparense { height: clamp(52px, 5.2vw, 66px); }
.marquee__logo--ebrd { height: clamp(54px, 5.4vw, 70px); }
.marquee__logo--hofeka { height: clamp(60px, 6vw, 76px); }
.marquee__logo--mbh { height: clamp(48px, 4.8vw, 62px); }
.marquee__logo--schreder, .marquee__logo--fbn-h, .marquee__logo--transparense, .marquee__logo--hofeka { mix-blend-mode: multiply; }
.marquee__item:hover .marquee__logo { transform: scale(1.06); }

/* ---------- 25. footer social icons ---------- */
.social { display: flex; gap: 10px; list-style: none; padding: 0; margin: 18px 0 0; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(244,248,238,.18); color: var(--on-night); transition: border-color .25s, background .25s, transform .25s; }
.social a:hover, .social a:focus-visible { border-color: var(--leaf); background: rgba(124,180,24,.16); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }

/* ---------- 26. builder A: news, fault reporting ---------- */
.news + .news { margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.news .display-m { margin: 10px 0 18px; }
.news__links { margin-top: 18px; }
.press { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.press a { display: flex; gap: 14px; align-items: baseline; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; transition: border-color .25s, background .25s; }
.press a:hover { border-color: var(--leaf); background: var(--lime); }
.press__src { flex: none; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); min-width: 9em; }
@media (max-width: 640px) { .press a { flex-direction: column; gap: 4px; } }

.hotline { margin: 34px auto 0; max-width: 720px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r); background: rgba(183, 19, 19, .14); border: 1px solid rgba(255, 156, 156, .35); display: grid; justify-items: center; gap: 12px; }
.hotline__num { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.02em; color: #FF9C9C; text-decoration: none; font-variant-numeric: tabular-nums; }
.hotline__num:hover { color: #fff; }
.hotline__l { color: var(--on-night-2); }
.hotline .btn { margin-top: 6px; }

.news blockquote.quote { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.4; padding-left: 20px; border-left: 3px solid var(--leaf); }
.news blockquote.quote .quote__sub { margin-top: 12px; font-size: .95rem; }
.news .photo__frame img { aspect-ratio: 1000 / 1066; }

/* ---------- 27. builder B: network model, products, about ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 44px 18px 0; font-family: var(--display); font-weight: 600; font-size: 1.12rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 20px; color: var(--ink-2); max-width: 62ch; }
.timeline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.press__dead { display: flex; gap: 14px; align-items: baseline; padding: 12px 16px; border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--ink-2); }
@media (max-width: 640px) { .press__dead { flex-direction: column; gap: 4px; } }

/* 28. trust badges (hero proof row, partners band) */
.badge { display: block; height: clamp(84px, 7vw, 104px); width: auto; }
.hero__proof { align-items: center; gap: 18px 22px; }
.hero__proof li { display: flex; align-items: center; }
.hero__proof-text { flex-direction: column; align-items: flex-start; gap: 4px; font-size: .85rem; color: var(--on-night-2); line-height: 1.35; }
.hero__proof-text strong { color: var(--on-night); font-weight: 600; letter-spacing: .01em; }
.cert-badges { display: flex; justify-content: center; align-items: center; gap: clamp(20px, 3vw, 36px); margin-top: clamp(30px, 4vw, 44px); }
.cert-badges .badge { height: clamp(112px, 10vw, 148px); }
@media (max-width: 640px) { .badge { height: 84px; } .cert-badges .badge { height: 104px; } .hero__proof-text { flex-basis: 100%; } }
.certs__note { text-align: center; margin-top: 22px; max-width: 70ch; margin-inline: auto; }
.photo--wide .photo__frame img { aspect-ratio: 2.4 / 1; width: 100%; object-fit: cover; }
.photo-pair { margin-bottom: clamp(32px, 4vw, 56px); }
.photo-pair .photo__frame img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
@media (max-width: 640px) { .photo--wide .photo__frame img { aspect-ratio: 16 / 10; } }

/* 29. language switcher */
.lang { display: flex; align-items: center; gap: 2px; font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.lang a { padding: 6px 7px; border-radius: 999px; color: inherit; opacity: .7; text-decoration: none; transition: opacity .2s, background .2s; }
.lang a:hover { opacity: 1; }
.lang a[aria-current] { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.menu .lang { margin-top: 18px; font-size: .9rem; }
@media (max-width: 1180px) { .nav .lang { display: none; } }
@media (max-width: 1320px) { html[lang="hu"] .nav .lang { display: none; } }
.cert-badges .badge--seal { height: clamp(132px, 12vw, 168px); filter: drop-shadow(0 6px 18px rgba(12, 108, 7, .12)); }

/* 30. multilingual alignment fixes */
.nowrap { white-space: nowrap; }
.cols-even .display-s { display: flex; align-items: flex-end; }
.timeline + .lead { margin-top: clamp(36px, 4vw, 56px); }
.tl p { font-size: .95rem; }

/* 31. compact language dropdown in the header */
.lang--compact { position: relative; }
.lang--compact summary { list-style: none; cursor: pointer; padding: 7px 26px 7px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); position: relative; user-select: none; }
.lang--compact summary::-webkit-details-marker { display: none; }
.lang--compact summary::after { content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .75; }
.lang--compact[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.lang__menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 0; padding: 4px; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06); z-index: 30; }
.lang__menu a { display: block; text-align: center; padding: 7px 8px; border-radius: 8px; color: var(--ink); opacity: 1; font-size: .78rem; }
.lang__menu a span { font-family: var(--sans); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.lang__menu a:hover { background: var(--panel); }

/* 32. no decorative vertical lines in the light pool */
.lightpool::before, .lightpool::after { display: none; }
.hero__scroll { display: none; }

/* 33. map clusters */
.map__cluster { background: rgba(124, 180, 24, .92); border: 2px solid #071A0C; border-radius: 50%; box-shadow: 0 0 0 4px rgba(124, 180, 24, .22), 0 0 18px rgba(124, 180, 24, .45); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; color: #071A0C; font-size: .95rem; letter-spacing: -.02em; transition: transform .2s; }
.map__cluster:hover { transform: scale(1.08); }
.map__dot-l { filter: drop-shadow(0 0 5px rgba(124, 180, 24, .55)); }

/* 34. background photos behind page heads and the CTA band: dark brand overlay, slow scroll parallax */
.bgphoto { position: absolute; inset: -14% 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bgphoto img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.82) saturate(1.05); transform: scale(1.06); }
.bgphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 26, 12, .94) 0%, rgba(7, 26, 12, .8) 44%, rgba(7, 26, 12, .38) 100%), linear-gradient(180deg, rgba(7, 26, 12, .55), transparent 32%, transparent 68%, rgba(7, 26, 12, .78)); }
.pagehead--center .bgphoto::after { background: radial-gradient(70% 80% at 50% 45%, rgba(7, 26, 12, .9), rgba(7, 26, 12, .66) 60%, rgba(7, 26, 12, .4)), linear-gradient(180deg, rgba(7, 26, 12, .6), transparent 30%, transparent 70%, rgba(7, 26, 12, .8)); }
.pagehead .lightpool { z-index: 0; }
.cta-band { isolation: isolate; }
.cta-band .bgphoto { z-index: -1; }
.cta-band .bgphoto img { filter: brightness(.78) saturate(.95); object-position: center top; }
.cta-band .bgphoto::after { background: linear-gradient(90deg, rgba(12, 108, 7, .94) 0%, rgba(12, 108, 7, .8) 40%, rgba(12, 108, 7, .42) 72%, rgba(12, 108, 7, .22) 100%); }
.cta-band::before { z-index: 0; }
.cta-band .wrap { z-index: 1; }
@supports (animation-timeline: view()) {
  .bgphoto img { animation: bgdrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
@keyframes bgdrift { from { transform: translateY(-7%) scale(1.06); } to { transform: translateY(7%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .bgphoto img { animation: none; transform: scale(1.06); } }

/* 35. certificate cards: certification body mark + standard, the pattern European EPC companies use */
.cert-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); list-style: none; padding: 0; margin: clamp(30px, 4vw, 44px) 0 0; }
.cert { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(22px, 2.4vw, 30px) clamp(16px, 1.8vw, 22px); background: #fff; border: 1px solid var(--line); border-radius: var(--r); text-align: center; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.cert:hover { transform: translateY(-4px); border-color: rgba(124, 180, 24, .6); box-shadow: 0 16px 36px rgba(12, 108, 7, .12); }
.cert img { height: 84px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 14px; }
.cert--seal img { height: 104px; margin-bottom: 4px; }
.cert__std { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink); }
.cert__d { font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.cert__by { margin-top: auto; padding-top: 12px; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
@media (max-width: 1100px) { .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cert:last-child:nth-child(odd) { grid-column: span 2; } .cert { padding: 18px 12px; } .cert img { height: 64px; } .cert--seal img { height: 80px; } }

/* 36. a wide figure directly under the page head: close to the header, the next section keeps the normal rhythm */
.section--media { padding-top: clamp(36px, 4.5vw, 64px); padding-bottom: 0; }
.photo-pair .photo__cap { font-weight: 600; }

/* 37. two-line photo notes overlaid on the bottom of a figure */
.photo--wide, .pagehead__media, .photo-pair .photo { position: relative; }
.photo__note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; padding: clamp(44px, 5vw, 72px) clamp(18px, 2.4vw, 32px) clamp(18px, 2vw, 26px); border-radius: 0 0 var(--r) var(--r); background: linear-gradient(180deg, transparent, rgba(7, 26, 12, .82)); color: #fff; pointer-events: none; }
.photo__note strong { font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.2rem); letter-spacing: -.01em; }
.photo__note span { font-size: .92rem; line-height: 1.4; max-width: 64ch; color: rgba(255, 255, 255, .84); }
.photo-pair .photo__note { padding-top: 40px; }
.photo-pair .photo__note strong { font-size: 1rem; }
.photo-pair .photo__note span { font-size: .85rem; }
@media (max-width: 640px) { .photo__note { padding: 30px 14px 14px; gap: 2px; } .photo__note span { font-size: .8rem; } }

/* 39. small certification chips under the partner logos */
.cert-row--partners { margin-top: clamp(28px, 3.5vw, 44px); gap: 10px 12px; }

/* 40. A two-column card grid with an odd count: the last card takes the full row */
.grid-2--fill > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 41. featured project card (Kandó): dark card, copy left, photo right */
.section--feature { padding-block: clamp(48px, 6vw, 96px); }
.feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); border-radius: var(--r); overflow: hidden; background: var(--night); color: var(--on-night); box-shadow: 0 34px 70px -44px rgba(7, 26, 12, .7); }
.feature__body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(28px, 4.5vw, 64px); }
.feature .eyebrow { color: var(--leaf); margin: 0; }
.feature h2 { color: var(--on-night); margin: 0; }
.feature__lead { margin: 0; max-width: 58ch; color: var(--on-night-2); font-size: 1.06rem; line-height: 1.6; }
.feature__note { margin: 0; color: var(--on-night-2); font-size: .92rem; }
.feature .btn-row { margin-top: 10px; gap: 14px 24px; }
.feature .textlink { color: var(--leaf); }
.feature__media { position: relative; min-height: 340px; }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; transition: transform .8s var(--ease); }
.feature__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--night) 0%, rgba(7, 26, 12, .35) 28%, rgba(7, 26, 12, 0) 60%); pointer-events: none; }
.feature:hover .feature__media img { transform: scale(1.03); }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature__media { order: -1; min-height: 220px; }
  .feature__media::before { background: linear-gradient(0deg, var(--night) 0%, rgba(7, 26, 12, 0) 55%); }
}
@media (prefers-reduced-motion: reduce) { .feature__media img { transition: none; } .feature:hover .feature__media img { transform: none; } }
.section + .section--feature { padding-top: 0; }

/* 42. home: Kandó as a one-line link bar between the hero and the partners band */
.kando-bar { background: var(--brand); color: var(--on-night); }
.kando-bar__link { display: flex; align-items: center; gap: 14px 22px; min-height: 64px; padding-block: 12px; color: inherit; text-decoration: none; }
.kando-bar__tag { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(7, 26, 12, .28); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--leaf-soft); }
.kando-bar__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px rgba(124, 180, 24, .3); }
.kando-bar__t { flex: 1 1 auto; font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.kando-bar__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(242, 247, 234, .45); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.kando-bar__cta svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.kando-bar__link:hover .kando-bar__cta { text-decoration-color: currentColor; }
.kando-bar__link:hover .kando-bar__cta svg { transform: translate(2px, -2px); }
.kando-bar__link:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 760px) {
  .kando-bar__link { flex-wrap: wrap; gap: 8px 12px; padding-block: 16px; }
  .kando-bar__t { flex-basis: 100%; order: 1; }
  .kando-bar__cta { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .kando-bar__cta svg { transition: none; } }
/* the bar sits at the bottom of the hero, inside the first screen */
.hero > .kando-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.hero:has(> .kando-bar) { padding-bottom: calc(64px + clamp(32px, 5vh, 64px)); }
@media (max-width: 1024px) {
  .hero > .kando-bar { position: relative; margin-top: clamp(36px, 6vw, 56px); }
  .hero:has(> .kando-bar) { padding-bottom: 0; }
}

.hero__copy { min-width: 0; }
@media (max-width: 640px) { .hero .btn--lg { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; } }

/* 43. contact form: trap field for spam bots, never shown */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 44. before/after slider driven by pointer events (site.js): the photo takes touch and mouse, the range keeps the keyboard */
.compare--pointer .compare__stage { touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.compare--pointer .compare__stage img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.compare--pointer .compare__range { pointer-events: none; }

/* 45. touch screens: a tap leaves :hover stuck until the next tap elsewhere, so hover-only effects are off there.
   Above all the partner strip, which would freeze after a tap. */
@media (hover: none) {
  .marquee:hover .marquee__track { animation-play-state: running; }
  .marquee__item:hover .marquee__logo, .card:hover, .cert:hover, .social a:hover, .btn--primary:hover,
  .photo:hover .photo__frame img, .feature:hover .feature__media img, .map__cluster:hover { transform: none; }
}
/* phones: the partner strip moves a little faster so it does not feel stalled on a narrow screen */
@media (max-width: 640px) { .marquee__track { animation-duration: 40s; } }

/* 46. layout safety nets found by the overlap check */
/* the vertical step list stays one column at every width (the 1024px rule for .steps used to override it) */
.steps.steps--v { grid-template-columns: 1fr; gap: 0; }
.steps.steps--v::before { display: block; }
/* long words in headings (Slovak, Hungarian compounds) break instead of running past the edge */
h1, h2, h3, .display-s, .card__t, .step__t { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
/* on phones a long button label wraps onto two lines instead of sticking out */
@media (max-width: 640px) { .btn { white-space: normal; text-align: center; line-height: 1.25; height: auto; padding-block: 12px; max-width: 100%; } }