:root {
  --navy: #002060;
  --navy-2: #001548;
  --cyan: #00a8e1;
  --cyan-soft: #e6f6fc;
  --paper: #ffffff;
  --mist: #f3f9fc;
  --line: #d5e3ec;
  --muted: #4b5c78;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 80px;
  --radius: 28px;
  --ease: cubic-bezier(.22, .8, .3, 1);     /* the one hover / focus curve (ease-out, no overshoot) */
  --hover: .25s var(--ease);                /* the one hover duration */
  --ring: #00a8e1;                          /* focus ring: cyan on light surfaces, light cyan on dark (below) */
  --lift-shadow: 0 22px 44px -24px rgba(0,32,96,.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { margin: 0; font: 400 16px/1.7 var(--font); color: var(--navy); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* One keyboard focus ring everywhere: 2 px, offset 3 px, never removed */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
a:focus-visible { border-radius: 6px; }
.dark, .benefits, .safety, .contact, .site-header, .site-footer, .hero { --ring: #5fd0f5; }
.form { --ring: #00a8e1; }

h1, h2, h3 { font-weight: 600; line-height: 1.12; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1em; }
h1 i, h2 i { font-style: normal; color: var(--cyan); }

.eyebrow { display: flex; align-items: center; gap: 14px; font: 600 .72rem/1 var(--font); letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); margin-bottom: 22px; }
.eyebrow::before { content: ""; width: 32px; height: 1.5px; background: currentColor; }
.eyebrow.light { color: #5fd0f5; }
.section .eyebrow { line-height: 1.4; }

.section { padding: clamp(64px, 9vw, 120px) 0; }
.dark { background: var(--navy); color: #fff; }

/* Buttons */
.btn { display: inline-block; padding: 15px 30px; font: 600 .78rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 1.5px solid transparent; border-radius: 999px; cursor: pointer; transition: background-color var(--hover), color var(--hover), border-color var(--hover); }
.btn-primary { background: var(--cyan); color: #fff; border-color: var(--cyan); }
.btn-primary:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-outline { color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.form .btn-primary:hover { background: var(--navy); color: #fff; border-color: var(--navy); }   /* same logic on a light surface: cyan fills with the surface's dark colour */

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); background: rgba(0,32,96,.96); backdrop-filter: blur(8px); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 22px; }
.brand { margin-right: auto; display: block; }
.brand img { height: 46px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 20px; }
.main-nav a { white-space: nowrap; position: relative; text-decoration: none; font: 500 .8rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 8px 0; border-bottom: 2px solid transparent; }
.main-nav .nav-cta { background: var(--cyan); padding: 11px 18px; border-radius: 999px; border: 0; transition: background-color var(--hover), color var(--hover); }
.main-nav .nav-cta:hover { background: #fff; color: var(--navy); }
.main-nav .nav-cta.nav-ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }   /* Brochure: outlined, so it differs from the filled Contact */
.main-nav .nav-cta.nav-ghost:hover, .main-nav .nav-cta.nav-ghost[aria-current] { background: #fff; color: var(--navy); box-shadow: none; }
.main-nav .nav-cta[aria-current]:not(.nav-ghost) { box-shadow: 0 0 0 2px #fff; }   /* the page I am on, when it is a pill */
.his-lead { max-width: 62ch; margin: 18px 0 0; color: var(--muted); }

/* Header dropdown: "Financed energy solutions" is a plain link to the section; hovering it (or the chevron) opens Solar / Biogas (nav-dd.js) */
.main-nav:has(.nav-dd) { align-self: stretch; }   /* full header height, so the panel below can hang from the header edge */
.nav-dd { position: static; align-self: stretch; display: flex; align-items: center; gap: 4px; }
.nav-dd-btn { flex: none; display: grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; color: rgba(255,255,255,.72); transition: color .25s; }
.nav-dd-btn:hover, .nav-dd-btn:focus-visible, .nav-dd.open .nav-dd-btn { color: #fff; }
.nav-dd-chev { transition: transform .25s; }
.nav-dd.open .nav-dd-chev { transform: rotate(180deg); }
/* The panel: full width under the header (as on pcl.com), content on the page grid: section link on the left, Solar and Biogas as two tiles */
.nav-dd-menu { position: absolute; left: 0; right: 0; top: 100%; border-top: 1px solid rgba(255,255,255,.1); background: var(--navy); box-shadow: 0 26px 40px rgba(0,16,56,.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s, visibility 0s; }
.nav-dd-grid { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: clamp(24px, 3vw, 48px); align-items: center; padding-block: 30px 34px; }
.main-nav .nav-dd-menu a::after { display: none; }
.main-nav .nav-dd-menu a.nav-dd-head { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; white-space: normal; text-transform: none; letter-spacing: 0; font: 600 1.2rem/1.3 var(--font); color: #fff; }
.main-nav .nav-dd-menu a.nav-dd-head i { font-style: normal; color: #5fd0f5; transition: transform .2s; }
.main-nav .nav-dd-menu a.nav-dd-head:hover i, .main-nav .nav-dd-menu a.nav-dd-head:focus-visible i { transform: translateX(4px); }
.main-nav .nav-dd-menu a.nav-dd-tile { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 6px 24px; border: 0; border-left: 2px solid rgba(255,255,255,.2); white-space: normal; text-transform: none; letter-spacing: 0; font: 400 1rem/1.45 var(--font); color: rgba(255,255,255,.82); transition: border-color .2s, color .2s; }
.main-nav .nav-dd-menu a.nav-dd-tile b { font: 600 .74rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: #5fd0f5; }
.main-nav .nav-dd-menu a.nav-dd-tile:hover, .main-nav .nav-dd-menu a.nav-dd-tile:focus-visible { border-left-color: #5fd0f5; color: #fff; }

.lang-switch { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.4); }
.lang-switch button { background: none; border: 0; padding: 4px 2px; font: 600 .8rem/1 var(--font); letter-spacing: .1em; color: rgba(255,255,255,.6); cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--hover), border-color var(--hover); }
.lang-switch button:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.lang-switch button[aria-pressed="true"] { color: #fff; border-color: var(--cyan); }

.nav-toggle { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: transform var(--hover); }
.nav-toggle span:first-child { top: 18px; }
.nav-toggle span:last-child { top: 26px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Hero */
.hero { position: relative; min-height: min(100svh, 880px); padding-top: var(--header-h); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--navy) url("assets/img/bg-navy.jpg") center / cover no-repeat; overflow: hidden; }
.hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,24,72,.9) 0%, rgba(0,32,96,.62) 48%, rgba(0,32,96,.18) 100%),
    linear-gradient(0deg, rgba(0,24,72,.75) 0%, rgba(0,24,72,0) 32%); }
.hero-inner { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 760px); align-items: center; padding-block: clamp(24px, 5vh, 72px) clamp(20px, 3vh, 48px); }
.hero h1 { max-width: 12ch; font-size: clamp(2.6rem, min(6vw, 9.5vh), 4.8rem); }
.hero-lead { max-width: 50ch; font-size: 1.1rem; color: rgba(255,255,255,.88); margin-bottom: 2em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* About */
.about { background: #fff; }
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.about-grid p:not(.eyebrow) { color: var(--muted); }
blockquote { margin: 28px 0 32px; padding-left: 22px; border-left: 3px solid var(--cyan); font-size: 1.3rem; font-weight: 500; line-height: 1.4; color: var(--navy); }
.stats { display: grid; gap: 34px; }
.stats li { border-left: 3px solid var(--cyan); padding-left: 24px; }
.stats b { display: block; font: 600 clamp(2.8rem, 6vw, 4.5rem)/1.05 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stats li > span { color: var(--muted); font-weight: 500; }

/* Services */
.services { background: var(--mist); padding-block: clamp(48px, 6vw, 84px); }
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 32px; }
.card { grid-column: span 2; background: #fff; padding: 24px 26px 22px; border-radius: var(--radius); border: 1px solid var(--line); transition: transform var(--hover), box-shadow var(--hover), border-color var(--hover); }
.card:nth-child(n+4) { grid-column: span 3; }
.card-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cyan); color: #fff; margin-bottom: 14px; }
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 1.15rem; margin-bottom: .4em; }
.card p { color: var(--muted); margin: 0; font-size: .9rem; line-height: 1.55; }

/* Why */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; margin-top: 48px; }
.why-grid li { min-width: 0; padding: 26px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.why-grid li::before { content: ""; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain; grid-row: span 2; }
.why-grid h3 { margin: 0 0 4px; overflow-wrap: anywhere; }
.why-grid p { margin: 0; color: var(--muted); font-size: .94rem; overflow-wrap: anywhere; }

/* Benefits */
.benefits { background: var(--navy) url("assets/img/bg-navy.jpg") center / cover; position: relative; }
.benefits::before { content: ""; position: absolute; inset: 0; background: rgba(0,24,72,.78); }
.benefits .wrap { position: relative; }
.benefits { padding-block: clamp(40px, 7vh, 96px); }
.benefits h2 { max-width: none; font-size: clamp(1.9rem, 3.1vw, 2.6rem); margin-bottom: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 32px; margin: clamp(24px, 4vh, 44px) 0 clamp(20px, 3.5vh, 40px); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 8px; font: 500 1rem/1.2 var(--font); color: rgba(255,255,255,.65); cursor: pointer; transition: color var(--hover), border-color var(--hover); }
.tabs button:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.tabs button[aria-selected="true"] { color: #fff; border-color: var(--cyan); }
.panel { display: none; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; min-height: clamp(220px, 30vh, 320px); }
.panel.active { display: grid; }
.panel p { font-size: 1.2rem; max-width: 46ch; margin: 0; color: rgba(255,255,255,.9); }
.big-stat b { display: block; padding-bottom: .12em; font: 600 clamp(3.6rem, 8vw, 6.2rem)/1.05 var(--font); font-variant-numeric: tabular-nums; color: #5fd0f5; }
.big-stat > span { color: rgba(255,255,255,.75); }

/* Benefits panel 1: owner, one contract, one team leader, the end-to-end team behind them */
.chain { display: grid; grid-template-columns: auto minmax(70px, 1fr) auto; align-items: center; row-gap: 14px; max-width: 480px; }
.chain .ch-node { padding: 9px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; font-size: .88rem; font-weight: 500; color: #fff; white-space: nowrap; }
.chain .ch-client { padding: 14px 28px; border: 0; background: #d6e4f3; color: var(--navy); font-size: 1.1rem; font-weight: 600; box-shadow: none; }
.chain .ch-hot { background: rgba(0,168,225,.16); border-color: rgba(0,168,225,.6); font-weight: 600; box-shadow: 0 16px 36px -22px rgba(0,168,225,.9); }
.chain .ch-link { position: relative; height: 2px; margin-inline: 10px 4px; background: linear-gradient(90deg, rgba(95,208,245,.2), #29c0ff); }
.chain .ch-link em { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: #5fd0f5; }
.ch-team { grid-column: 3; justify-self: start; margin: 0 0 0 22px; padding: 0 0 0 18px; list-style: none; display: grid; gap: 8px; }
.ch-team li { position: relative; font-size: .86rem; color: rgba(255,255,255,.85); }
.ch-team li::before { content: ""; position: absolute; left: -18px; top: 50%; width: 12px; border-top: 1px solid rgba(95,208,245,.6); }
.ch-team li::after { content: ""; position: absolute; left: -18px; top: 0; bottom: 0; border-left: 1px solid rgba(95,208,245,.6); }
.ch-team li:first-child::after { top: 50%; }
.ch-team li:last-child::after { bottom: 50%; }
.panel.active .ch-node, .panel.active .ch-link, .panel.active .ch-team li { animation: ov-fade .5s var(--sx-ease, cubic-bezier(.22,.8,.3,1)) var(--d, 0s) backwards; }
@keyframes ov-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel.active .ch-node, .panel.active .ch-link, .panel.active .ch-team li { animation: none; } }

/* Benefits panel 2: design and early works run in parallel (bars grow in when the panel opens) */
.overlap, .sched { max-width: 460px; }
.ov-cap { display: block; margin-left: 19px; }
.sc-board { position: relative; padding-bottom: 26px; }
.panel .sc-h { max-width: none; margin: 0 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); line-height: 1.3; }
.sc-set { margin-bottom: 10px; }
.sc-grp { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sc-grp li { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; font-size: .82rem; color: rgba(255,255,255,.85); }
.sc-track { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); }
.sc-set:not(.sc-hot) .sc-h { color: rgba(255,255,255,.45); }
.sc-set:not(.sc-hot) .sc-grp li { color: rgba(255,255,255,.55); }
.sc-set:not(.sc-hot) .ov-bar { background: rgba(255,255,255,.32); }
.sc-set:not(.sc-hot) .ov-bar.ov-design { background: rgba(255,255,255,.5); }
.sc-hot { margin-inline: -12px; padding: 10px 12px 12px; border: 1px solid rgba(0,168,225,.5); border-radius: 24px; background: rgba(0,168,225,.12); box-shadow: 0 20px 44px -26px rgba(0,168,225,.8); }
.panel .sc-hot .sc-h { color: #fff; font-size: .8rem; }
.sc-hot .ov-bar:not(.ov-design) { background: #29c0ff; box-shadow: 0 0 14px rgba(41,192,255,.55); }
.sc-end { position: absolute; top: 0; bottom: 26px; left: calc(106px + (100% - 106px) * .72); border-left: 1px dashed rgba(95,208,245,.75); }
.sc-end span { position: absolute; top: 100%; margin-top: 8px; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: .75rem; font-weight: 600; font-style: normal; letter-spacing: .06em; color: #5fd0f5; }
.panel .ov-day { max-width: none; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #5fd0f5; }
.ov-day i { width: 10px; height: 10px; border-radius: 50%; background: #5fd0f5; box-shadow: 0 0 0 5px rgba(95,208,245,.22); }
.ov-rows { display: grid; gap: 14px; margin: 0 0 16px; padding: 0; list-style: none; border-left: 1px solid rgba(95,208,245,.5); padding-left: 14px; margin-left: 4px; }
.ov-rows li { position: relative; display: grid; gap: 6px; height: auto; font-size: .85rem; color: rgba(255,255,255,.85); }
.ov-rows li::after { content: ""; grid-row: 2; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); }
.ov-bar { position: absolute; left: var(--a); width: calc(var(--b) - var(--a)); bottom: 0; height: 8px; border-radius: 4px; background: #00a8e1; transform-origin: 0 50%; }
.ov-bar.ov-design { background: #fff; }
.panel.active .ov-bar { animation: ov-grow .7s var(--sx-ease, cubic-bezier(.22,.8,.3,1)) var(--d, 0s) backwards; }
@keyframes ov-grow { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel.active .ov-bar { animation: none; } }
.chips-h { margin: clamp(24px, 5vh, 56px) 0 10px; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #5fd0f5; }
.chips { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.18); list-style: none; }
.chips li { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 500; color: rgba(255,255,255,.9); }
.chips li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain; }

/* References */
.references { background: var(--mist); }
.section-head h2 { max-width: 22ch; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 36px; }
.filters button { font: 500 .85rem/1 var(--font); padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; transition: background-color var(--hover), color var(--hover), border-color var(--hover); }
.filters button:hover { background: var(--cyan-soft); border-color: var(--cyan); }
.filters button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.project { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform var(--hover), box-shadow var(--hover), border-color var(--hover); }
.project.hide { display: none; }
.project-img { overflow: hidden; aspect-ratio: 16/10; }   /* frame: the photo zooms inside it on hover */
.project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hover); }
.project-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.tag { font: 600 .68rem/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.project h3 { font-size: 1.3rem; margin-bottom: 4px; }
.loc { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.project-body > p { color: var(--muted); font-size: .92rem; margin-bottom: 20px; }
.facts { margin-top: auto; display: flex; gap: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.facts div { display: flex; flex-direction: column; }
.facts b { font-weight: 600; font-size: .98rem; }
.facts span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Financing */
.fin-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 100px); align-items: end; }
.fin-head p:not(.eyebrow) { color: var(--muted); margin: 0; }
.fin-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 56px 0 72px; position: relative; }
.fin-grid::before { content: ""; position: absolute; left: 12px; right: calc(20% - 12px); top: 22px; height: 1px; background: var(--line); transform-origin: left center; }
.fin-grid li { position: relative; padding: 52px 20px 0 0; display: flex; flex-direction: column; gap: 6px; }
.fin-grid li::before { content: ""; position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--cyan); border: 6px solid #fff; box-shadow: 0 0 0 1px var(--cyan); }
.fin-grid b { font-size: 1.15rem; }
.fin-grid span { color: var(--muted); font-size: .9rem; }
.biogas, .solar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin: 72px 0 0; }
.bio-img { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); }
.bio-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-body h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: .5em; }
.bio-body > p:not(.eyebrow) { color: var(--muted); margin: 0 0 22px; }
.bio-list { display: grid; gap: 14px; margin: 0 0 26px; padding: 0; list-style: none; }
.bio-list li { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; border-left: 3px solid var(--cyan); }
.bio-list b { font-size: 1rem; }
.bio-list span { color: var(--muted); font-size: .9rem; }
.sustain { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 80px); background: var(--mist); border-radius: var(--radius); padding: clamp(28px, 5vw, 56px); align-items: center; }
.sustain h3 { font-size: 1.7rem; }
.sustain p { color: var(--muted); margin: 0; }
.sustain ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sustain li { background: #fff; border-radius: 28px; padding: 22px 18px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 0 0 1px rgba(0,168,225,0), 0 22px 44px -24px rgba(0,32,96,0); transition: transform var(--hover), box-shadow var(--hover); }   /* the 1 px "border" is a ring in the shadow, so the tile keeps its size */
.sustain li b { font-size: .98rem; }
.sustain li span { font-size: .85rem; color: var(--muted); }

/* Safety */
.safety { background: var(--navy-2); }
.safety-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 100px); align-items: start; }
.safety-top p { color: rgba(255,255,255,.8); }
.pillars { counter-reset: p; display: grid; gap: 18px; }
.pillars li { counter-increment: p; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; color: rgba(255,255,255,.9); }
.pillars li::before { content: counter(p); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--cyan); color: #5fd0f5; font-weight: 600; }
.sub { margin: 56px 0 20px; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: #5fd0f5; }
.safety-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 clamp(32px, 4vw, 56px); align-items: start; }
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rules li { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 26px; font-size: .88rem; font-weight: 500; line-height: 1.35; transition: transform var(--hover), box-shadow var(--hover), border-color var(--hover); }
.rules li img { width: 44px; height: 44px; flex: none; display: block; }

/* Our Code: compass with six values on spokes (desktop); a compass plus a plain grid below 900px */
.code-map { position: relative; }
.cm-art { display: block; width: 100%; height: auto; }
.cm-mini { display: none; width: 150px; height: 150px; margin: 0 auto 24px; }
.cm-lines line { stroke: rgba(95,208,245,.55); stroke-width: 1.2; }
.cm-dots circle { fill: #00a8e1; }
.cm-dots .halo { fill: rgba(0,168,225,.28); }
.code-map ul { margin: 0; padding: 0; list-style: none; }
.code-map li { position: absolute; left: var(--x); top: var(--y); width: max-content; max-width: 190px; padding: 10px 14px; font-size: .86rem; font-weight: 600; line-height: 1.35; color: #fff; background: rgba(0,168,225,.16); border: 1px solid rgba(0,168,225,.5); box-shadow: 0 18px 40px -24px rgba(0,168,225,.7); }
.code-map li.cm-r { max-width: min(190px, calc(100% - var(--x) - 16px)); margin-left: 16px; translate: 0 -50%; border-radius: 4px 18px 18px 18px; }
.code-map li.cm-l { max-width: min(190px, calc(var(--x) - 16px)); margin-left: -16px; translate: -100% -50%; text-align: right; border-radius: 18px 4px 18px 18px; }

/* History */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 56px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--line); transform-origin: left center; }
.timeline li { position: relative; padding: 48px 22px 0 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--cyan); }
.timeline li.now::before { background: var(--cyan); box-shadow: 0 0 0 6px var(--cyan-soft); }
.timeline time { display: inline-block; font-weight: 600; font-size: .95rem; padding: 4px 14px; border-radius: 999px; background: var(--cyan); color: #fff; margin-bottom: 14px; }
.timeline h3 { font-size: 1.02rem; margin-bottom: 8px; }
.timeline p { color: var(--muted); font-size: .88rem; margin: 0; }

/* Contact */
.contact { background: var(--navy) url("assets/img/bg-navy.jpg") center / cover; color: #fff; position: relative; }
.contact::before { content: ""; position: absolute; inset: 0; background: rgba(0,24,72,.55); }
.contact .wrap { position: relative; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.contact h2 { max-width: 14ch; }
.contact-list { margin-top: 36px; display: grid; gap: 20px; }
.contact-list li { display: grid; gap: 4px; }
.contact-list span { font: 600 .7rem/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: #5fd0f5; }
.contact-list a, .contact-list em { font-style: normal; font-size: 1.05rem; text-decoration: none; }
.contact-list a { position: relative; justify-self: start; transition: color var(--hover); }
.contact-list a:hover { color: #5fd0f5; }
.form { display: grid; gap: 18px; background: #fff; color: var(--navy); padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); }
.form label { display: grid; gap: 8px; }
.form label span { font: 600 .7rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.form input, .form textarea { font: inherit; color: var(--navy); background: var(--mist); border: 1px solid var(--line); padding: 13px 16px; border-radius: 14px; transition: border-color var(--hover), background-color var(--hover); }
.form input:hover, .form textarea:hover { border-color: var(--cyan); }
.form input:focus, .form textarea:focus { border-color: var(--cyan); background: #fff; }
.form .btn { justify-self: start; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot: bots fill it, people never see it */
.form .consent { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.form .consent input { width: 20px; height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--navy); }
.form .consent span { font: 400 .86rem/1.5 var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.form .consent a { color: var(--navy); text-decoration-color: var(--cyan); text-underline-offset: 3px; }
.form-note { margin: 0; min-height: 1.4em; font-size: .92rem; color: var(--navy); font-weight: 500; }

/* Footer */
.site-footer { background: var(--navy-2); color: rgba(255,255,255,.75); padding: 40px 0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer-inner .brand { margin: 0; }
.footer-inner nav { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-inner nav a { position: relative; text-decoration: none; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; transition: color var(--hover); }
.footer-inner nav a:hover { color: #5fd0f5; }
.copy { margin: 0; font-size: .82rem; color: rgba(255,255,255,.5); }
.footer-meta { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.social-link { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.3); transition: color var(--hover), border-color var(--hover), background-color var(--hover); }
.social-link:hover, .social-link:focus-visible { color: #5fd0f5; border-color: #5fd0f5; }
.ft-privacy { margin-right: auto; font-size: .82rem; color: rgba(255,255,255,.75); text-underline-offset: 3px; }
.ft-privacy:hover, .ft-privacy:focus-visible { color: #5fd0f5; }

/* Text links: a line grows from the left (transform only), arrows nudge 3 px. Hover only on pointer devices; keyboard focus always */
.main-nav a:not(.nav-cta)::after, .footer-inner nav a::after, .contact-list a::after, .more::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left center; transition: transform var(--hover); }
.main-nav a:not(.nav-cta)::after { background: #fff; }   /* hover underline is white; the active language underline stays cyan */
.main-nav a:not(.nav-cta) { color: rgba(255,255,255,.72); transition: color .25s; }
.main-nav a:not(.nav-cta):hover, .main-nav a:not(.nav-cta):focus-visible, .main-nav a[aria-current]:not(.nav-cta) { color: #fff; }
.main-nav a[aria-current]:not(.nav-cta)::after { background: var(--cyan); transform: scaleX(1); }   /* where I am: stays on, cyan */
.footer-inner nav a::after, .contact-list a::after { height: 1.5px; background: #5fd0f5; }
.main-nav a:not(.nav-cta):focus-visible::after, .footer-inner nav a:focus-visible::after, .contact-list a:focus-visible::after, .more:focus-visible::after { transform: scaleX(1); }
.more { position: relative; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.more .arrow { transition: transform var(--hover); }

/* Cards and tiles: lift 4 px, cyan border, soft shadow (no sticky lifts on touch screens) */
@media (hover: hover) {
  .main-nav a:not(.nav-cta):hover::after, .footer-inner nav a:hover::after, .contact-list a:hover::after, .more:hover::after { transform: scaleX(1); }
  .more:hover .arrow { transform: translateX(3px); }
  .project:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: var(--lift-shadow); }
  .project:hover .project-img img { transform: scale(1.04); }
}

/* Section entrance motion lives in sections.css */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* no movement on hover or focus: colours and borders still change, lines appear at once */
  .project:hover, .project:hover .project-img img, .more:hover .arrow { transform: none; }
  .main-nav a::after, .footer-inner nav a::after, .contact-list a::after, .more::after, .more .arrow, .project-img img, .nav-dd-chev, .nav-dd-menu { transition: none; }
}

/* Responsive */
@media (max-width: 1180px) {
  .main-nav { gap: 14px; }
  .main-nav a { white-space: nowrap; }
}
@media (max-width: 1080px) {
  .main-nav { gap: 14px; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .safety-duo { grid-template-columns: 1fr; }
  .code-map { max-width: 640px; margin-inline: auto; }
  .fin-grid { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .fin-grid::before { display: none; }
  .timeline { display: flex; flex-direction: column-reverse; gap: 32px; margin-top: 48px; }
  .timeline::before { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .timeline li { padding: 0 0 0 40px; }
  .timeline li::before { left: 0; top: 3px; }
  .sustain, .biogas, .solar { grid-template-columns: 1fr; }
}
@media (max-width: 1140px) {
  .nav-toggle { display: block; }
  .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy); padding: 12px var(--gutter) 28px; transform: translateY(-120%); visibility: hidden; transition: transform .25s, visibility .25s; border-bottom: 1px solid rgba(255,255,255,.1); }
  .main-nav.open { transform: none; visibility: visible; }
  .main-nav a { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .main-nav a:not(.nav-cta)::after { bottom: -1px; }
  .main-nav .nav-cta { margin-top: 16px; text-align: center; border-bottom: 0; }
  .nav-dd { flex-wrap: wrap; gap: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav-dd > .nav-dd-link { flex: 1; border-bottom: 0; }
  .nav-dd-btn { width: 44px; height: 44px; border-radius: 0; }
  .nav-dd-menu { position: static; display: none; flex-basis: 100%; width: auto; padding: 0 0 8px 14px; border: 0; background: none; backdrop-filter: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-dd.open .nav-dd-menu { display: block; }
  .nav-dd-grid { display: block; width: auto; max-width: none; margin: 0; padding: 0; }
  .main-nav .nav-dd-menu a.nav-dd-head { display: none; }
  .main-nav .nav-dd-menu a.nav-dd-tile { padding: 13px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .main-nav .nav-dd-menu a.nav-dd-tile:last-child { border-bottom: 0; }
  .main-nav .nav-dd-menu a.nav-dd-tile span { display: none; }
  .main-nav .nav-dd-menu a.nav-dd-tile b { font: 500 .76rem/1 var(--font); letter-spacing: .08em; color: rgba(255,255,255,.92); }
  .main-nav .nav-dd-menu a.nav-dd-tile:hover b, .main-nav .nav-dd-menu a.nav-dd-tile:focus-visible b { color: #5fd0f5; }
}
/* The header with the "Financed energy solutions" dropdown has the longest labels (above all in Hungarian), so it collapses into the
   hamburger menu earlier, up to 1260 px. Same rules as above, scoped to that header; the other pages' short menus keep 1140 px. */
@media (min-width: 1141px) and (max-width: 1260px) {
  .site-header:has(.nav-dd) .nav-toggle { display: block; }
  .site-header:has(.nav-dd) .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy); padding: 12px var(--gutter) 28px; transform: translateY(-120%); visibility: hidden; transition: transform .25s, visibility .25s; border-bottom: 1px solid rgba(255,255,255,.1); }
  .site-header:has(.nav-dd) .main-nav.open { transform: none; visibility: visible; }
  .site-header:has(.nav-dd) .main-nav a { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .site-header:has(.nav-dd) .main-nav a:not(.nav-cta)::after { bottom: -1px; }
  .site-header:has(.nav-dd) .main-nav .nav-cta { margin-top: 16px; text-align: center; border-bottom: 0; }
  .site-header:has(.nav-dd) .nav-dd { flex-wrap: wrap; gap: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .site-header:has(.nav-dd) .nav-dd > .nav-dd-link { flex: 1; border-bottom: 0; }
  .site-header:has(.nav-dd) .nav-dd-btn { width: 44px; height: 44px; border-radius: 0; }
  .site-header:has(.nav-dd) .nav-dd-menu { position: static; display: none; flex-basis: 100%; width: auto; padding: 0 0 8px 14px; border: 0; background: none; backdrop-filter: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .site-header:has(.nav-dd) .nav-dd.open .nav-dd-menu { display: block; }
  .site-header:has(.nav-dd) .nav-dd-grid { display: block; width: auto; max-width: none; margin: 0; padding: 0; }
  .site-header:has(.nav-dd) .main-nav .nav-dd-menu a.nav-dd-head { display: none; }
  .site-header:has(.nav-dd) .main-nav .nav-dd-menu a.nav-dd-tile { padding: 13px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .site-header:has(.nav-dd) .main-nav .nav-dd-menu a.nav-dd-tile:last-child { border-bottom: 0; }
  .site-header:has(.nav-dd) .main-nav .nav-dd-menu a.nav-dd-tile span { display: none; }
  .site-header:has(.nav-dd) .main-nav .nav-dd-menu a.nav-dd-tile b { font: 500 .76rem/1 var(--font); letter-spacing: .08em; color: rgba(255,255,255,.92); }
  .site-header:has(.nav-dd) .main-nav .nav-dd-menu a.nav-dd-tile:hover b, .site-header:has(.nav-dd) .main-nav .nav-dd-menu a.nav-dd-tile:focus-visible b { color: #5fd0f5; }
}
/* Wide screens, Hungarian: the long dropdown label wraps onto two lines and the gaps tighten so the logo keeps its size */
@media (min-width: 1261px) {
  html[lang="hu"] .main-nav:has(.nav-dd) { gap: 16px; }
  html[lang="hu"] .main-nav .nav-dd-link { width: 200px; white-space: normal; line-height: 1.3; }
}
@media (max-width: 900px) {
  .about-grid, .fin-head, .contact-grid, .safety-top, .panel.active { grid-template-columns: 1fr; }
  .panel { min-height: 0; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card, .card:nth-child(n+4) { grid-column: auto; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-art { display: none; }
  .cm-mini { display: block; }
  .code-map ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .code-map li, .code-map li.cm-r, .code-map li.cm-l { position: static; translate: none; margin: 0; width: auto; max-width: none; text-align: left; border-radius: 22px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .cards, .project-grid, .sustain ul, .stats { grid-template-columns: 1fr; }
  .fin-grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 28px; }
  .fin-grid li { padding: 0 0 0 34px; }
  .fin-grid li::before { top: 3px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; }
  .code-map ul { grid-template-columns: repeat(2, 1fr); }
  .rules { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rules li { gap: 10px; padding: 10px 12px 10px 10px; font-size: .8rem; }
  .rules li img { width: 32px; height: 32px; }
  .brand img { height: 38px; }
  .header-inner { gap: 12px; }
  .timeline li { padding-right: 0; }
}

/* Contact: brochure download under the contact list */
.contact .bk-dl { margin-top: 28px; }

/* Faded B&W reference imagery behind the white sections (Who we are, Our values, Our
   history, Financed energy solutions): echoes the hero video's muted, desaturated look. Each white
   section carries one of the three signature references (BD greenfield, P&G roof change,
   MARS Petcare) as a very light grayscale texture (tone band ~200–255). */
#about, #why, #history, #financing {
  background-color: #fff;
}
#about {
  background:
    linear-gradient(to right, #fff 0%, #fff 30%, rgba(255,255,255,0) 100%) no-repeat,
    url("assets/img/card-bd.jpg?v=2") center / cover no-repeat;
}
#why {
  background:
    linear-gradient(to right, #fff 0%, #fff 30%, rgba(255,255,255,0) 100%) no-repeat,
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)),
    url("assets/img/why-bg.jpg?v=3") center 92% / cover no-repeat;
}
#history {
  background:
    linear-gradient(to right, #fff 0%, #fff 30%, rgba(255,255,255,0) 100%) no-repeat,
    url("assets/img/card-mars.jpg?v=2") center / cover no-repeat;
}
#financing {
  background:
    linear-gradient(to right, #fff 0%, #fff 30%, rgba(255,255,255,0) 100%) no-repeat,
    linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)),
    url("assets/img/fin-bg.jpg?v=1") center / cover no-repeat;
}