/* ECOES JV — site styles
   Bright, airy eco look: a sky-to-meadow light in the hero and the page heads, crossed by thin
   column lines on the content grid; white cards with soft corners; deep forest-green ink,
   leaf-green lines and fresh lime for the buttons. The brand red is kept for the € signs.
   Every text box wraps, so the layout holds when the page is translated. Notes in CLAUDE.md. */

:root {
  color-scheme: light;

  /* palette */
  --haze: #f3f6f1;          /* page ground: morning haze */
  --paper: #ffffff;         /* cards, header, panels */
  --sky: #e1ebef;           /* top of the hero light */
  --meadow: #d6e8c1;        /* bottom of the hero light, footer */
  --ink: #14261d;           /* headings, strong text */
  --text: #34443b;          /* body text */
  --muted: #56655c;         /* secondary text */
  --line: #dde5da;          /* hairlines, card edges */
  --line-strong: #c4d0c0;   /* frames of the header controls */
  --field-edge: #84967f;    /* form fields (3:1 on white) */
  --leaf: #256b40;          /* links, numbers, focus ring */
  --sprout: #3f9f5f;        /* drawn lines: hero trace, wires, nodes, markers */
  --lime: #c8e77d;          /* buttons */
  --lime-deep: #b6dc5c;     /* button hover */
  --lime-soft: #e6f3c4;     /* the closing call to action */
  --signal: #e30613;        /* brand red: the € signs, missing data */
  --error: #b42318;
  --grid-line: rgba(20, 38, 29, .08);
  --lift: 0 22px 44px -26px rgba(20, 38, 29, .32);

  /* type */
  --font-display: "Jost", "Futura", "Century Gothic", Arial, sans-serif;
  --font-text: "Geologica", "Segoe UI", Arial, sans-serif;

  /* layout */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 86px;
  --radius: 18px;

  /* layers */
  --z-header: 50;
  --z-skip: 100;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
html.nav-lock,
html.lightbox-open { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: var(--haze);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
a, button { touch-action: manipulation; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: oblique 10deg; }
::selection { background: var(--lime); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--leaf);
  color: var(--paper);
  font-weight: 600;
}
.skip-link:focus { left: 12px; }

/* ---------- Cards: one soft shape for every panel ---------- */

.plate,
.org-jv, .org-card, .bio-photo, .bio-text, .callout,
.office, .figure, .partner-link picture, .sub-nav, .doc-link {
  --edge: var(--line);
  --fill: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--fill);
}

/* ---------- Header and navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--line);
}
/* the blur sits on a pseudo-element so the full-screen menu is not trapped inside the header */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-shrink: 0;
  margin-right: auto;
}
.brand img { height: 62px; width: auto; }

.main-nav { flex: 1 1 auto; min-width: 0; }
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  column-gap: calc(20px * var(--nav-scale, 1));
}
/* centred between the logo and the right-hand group, then moved by main.js (--nav-shift) to
   the middle of the window, as far as the free space allows (the two sides differ in width) */
.main-nav > ul { transform: translateX(var(--nav-shift, 0px)); }
.nav-open .main-nav > ul { transform: none; }
.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: calc(14.5px * var(--nav-scale, 1));
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease-out;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--sprout);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease-out;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--ink); }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--leaf); }

/* "ECOES Conversion" and its two conversion pages: with a mouse the panel slides down on hover,
   the arrow button opens it for touch and keyboard. A green wire drops from the link to the panel,
   which main.js shifts left (--sub-shift) if it would leave the window. */
.main-nav .has-sub { position: relative; display: flex; align-items: center; }
.sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(24px, calc(26px * var(--nav-scale, 1)));
  height: 40px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color .2s ease-out;
}
.sub-toggle svg { width: 12px; height: 12px; transition: transform .2s ease-out; }
.sub-toggle:hover,
.sub-toggle[aria-expanded="true"] { color: var(--leaf); }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.sub-panel {
  --wire: 26px;
  position: absolute;
  top: 100%;
  left: var(--sub-shift, 0px);
  z-index: 3;
  width: max-content;
  max-width: min(580px, calc(100vw - 32px));
  padding-top: var(--wire);          /* part of the panel, so the hover holds on the way down */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;
}
.sub-panel::before {                 /* the wire, from the link's underline to the panel */
  content: "";
  position: absolute;
  top: -5px;
  left: calc(14px - var(--sub-shift, 0px));
  width: 2px;
  height: calc(var(--wire) + 5px);
  background: var(--sprout);
}
.main-nav .has-sub.is-open > a::after { transform: scaleX(1); }
.has-sub.is-open > .sub-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s;
}
@media (hover: hover) {
  .has-sub:hover > .sub-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s;
  }
  .has-sub.is-dismissed:hover > .sub-panel {      /* closed with Escape until the mouse leaves */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
  }
  .has-sub:hover > .sub-toggle { color: var(--leaf); }
  .has-sub:hover > .sub-toggle svg { transform: rotate(180deg); }
  .main-nav .has-sub:hover > a::after { transform: scaleX(1); }
}
.main-nav .sub-nav {                 /* a column, not the row of the links above */
  --radius: 14px;
  display: block;
  margin: 0;
  padding: 6px 0;
  box-shadow: 0 18px 40px -16px rgba(20, 38, 29, .22);
}
.sub-nav li + li { margin: 0 16px; border-top: 1px solid var(--line); }
.sub-nav li + li a { margin: 0 -16px; }
.main-nav .sub-nav a {
  gap: 12px;
  min-height: 48px;
  padding: 10px 24px 10px 18px;
  font-size: 15px;
  line-height: 1.35;
  white-space: normal;
}
.main-nav .sub-nav a::after { content: none; }
.main-nav .sub-nav a::before {       /* the diamond of the lists on the document pages */
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--sprout);
  transform: rotate(45deg);
  transition: background-color .2s ease-out;
}
.main-nav .sub-nav a:hover::before { background: var(--sprout); }
.main-nav .sub-nav a[aria-current="page"]::before { background: var(--leaf); border-color: var(--leaf); }
.main-nav .sub-nav a:focus-visible { outline-offset: -4px; }
/* on the bus & trucks and agro pages the parent link carries the current-page mark */
.main-nav .has-sub.is-current > a { color: var(--ink); }
.main-nav .has-sub.is-current > a::after { transform: scaleX(1); background: var(--leaf); }

/* the header row may use more width than the page content */
.site-header .container { max-width: calc(1700px + 2 * var(--gutter)); }

/* our own Bulgarian wording (links, buttons), shown when the page is translated to Bulgarian (the browser sets lang="bg") */
.l10n-bg { display: none; }
html[lang|="bg"] .l10n-src { display: none; }
html[lang|="bg"] .l10n-bg { display: inline; }

/* small white frames in the header: the menu button (left), the e-mail box and the language switch (right) */
.nav-toggle,
.header-mail,
.lang-switch {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  transition: border-color .2s ease-out;
}

/* the two e-mail addresses, one above the other, left of the language button (client's request).
   It gives way first when the row of links needs the room (main.js adds .mail-off), and on phones. */
.header-mail {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  margin-right: -8px;               /* one group with the language button */
  padding: 0 12px 0 11px;
  font-style: normal;
}
.header-mail-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--sprout); }
.header-mail-list { display: flex; flex-direction: column; }
.header-mail a {
  display: block;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 20px;
  color: var(--text);
  text-decoration: none;
  transition: color .2s ease-out;
}
.header-mail a:hover { color: var(--leaf); }
.header-mail a:focus-visible { outline-offset: -1px; }
.mail-off .header-mail { display: none; }
@media (max-width: 479px) {
  .header-mail { display: none; }
}

/* the menu button: always there, left of the logo, opens every section full-screen */
.nav-toggle {
  display: inline-flex;
  width: 46px;
  height: 46px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s ease-out, border-color .2s ease-out;
}
.nav-toggle:hover { color: var(--leaf); border-color: var(--leaf); }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
  transition: transform .2s ease-out, background-color .2s ease-out;
}
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* language switch, right end of the header: shows the other language (BG on English pages, EN on
   Bulgarian ones) in a frame the size of the menu button, so the row of links keeps its room.
   The link to the current language stays in the markup for main.js but is not shown. */
.lang-switch { display: flex; }
.lang-switch:hover { border-color: var(--leaf); }
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border-radius: 11px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s ease-out;
}
.lang-switch a:hover { color: var(--leaf); }
.lang-switch a[aria-current] { display: none; }

/* main.js scales the row of links down so it stays on one line in any language; below 1024px only the menu button remains */
.nav-inline-off .main-nav { display: none; }

/* full-screen menu */
.nav-open .main-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  overflow-y: auto;
  padding: calc(var(--header-h) + 32px) var(--gutter) 48px;
  background:
    url("../img/deco/landscape.svg") right bottom / auto clamp(150px, 28vw, 380px) no-repeat,
    linear-gradient(180deg, var(--sky) 0%, var(--haze) 45%, #e4efd7 100%);
  visibility: visible;
  animation: menu-in .22s ease-out;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
.nav-open .main-nav ul {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto auto;
}
.nav-open .main-nav li { border-bottom: 1px solid rgba(20, 38, 29, .12); }
.nav-open .main-nav a {
  min-height: 64px;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.2vw, 32px);
  font-weight: 500;
  color: var(--ink);
  white-space: normal;
}
.nav-open .main-nav a::after { bottom: 0; right: auto; width: 56px; }
/* in the full-screen menu the two conversion pages sit under "ECOES Conversion", on a green rail */
.nav-open .main-nav .has-sub { display: block; }
.nav-open .sub-toggle { display: none; }
.nav-open .sub-panel {
  position: static;
  width: auto;
  max-width: none;
  padding: 0 0 16px;
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: none;
}
.nav-open .sub-panel::before { content: none; }
.nav-open .main-nav .sub-nav {
  width: auto;
  margin: 0 0 0 4px;
  padding: 0 0 0 22px;
  border: 0;
  border-left: 2px solid var(--sprout);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.nav-open .main-nav .sub-nav li { margin: 0; border: 0; }
.nav-open .main-nav .sub-nav a {
  margin: 0;
  min-height: 52px;
  padding: 8px 0;
  font-size: clamp(17px, 2.4vw, 24px);
}

/* ---------- The light of the hero and the page heads ----------
   Sky at the top, a sunny haze, meadow green at the bottom; thin column lines on the content grid. */

.hero,
.page-head {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before,
.page-head::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(var(--gutter), calc(50% - var(--container) / 2));
  right: max(var(--gutter), calc(50% - var(--container) / 2));
  border-right: 1px solid var(--grid-line);
  background: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 25% 100%;
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero::before,
  .page-head::before { background-size: 50% 100%; }
}

/* The transparent landscape (assets/img/deco, drawn by tools/landscape.py): misty hills in layers
   of translucent white, a wind farm and a power line. White only, so it lightens the light behind
   the text and never darkens it. Anchored bottom right at the height set per place; the drawing
   continues far to the left, so it covers any width. Also in the menu and, mirrored, the footer.
   Home has its own symmetrical scene (see the hero). */
.hero::after,
.page-head::after,
.site-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("../img/deco/landscape.svg") right bottom / auto 100% no-repeat;
  pointer-events: none;
}
@media (forced-colors: active) {
  .hero::after,
  .page-head::after,
  .site-footer::before { display: none; }
  .nav-open .main-nav { background-image: none; }
}

/* ---------- Home: hero ---------- */

.hero {
  isolation: isolate;   /* layers, back to front: column lines, globe, landscape, then the text */
  background:
    radial-gradient(1100px 640px at 80% 4%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, var(--sky) 0%, #edf3ee 46%, #e3efd5 76%, var(--meadow) 100%);
}
.hero::before {
  z-index: -3;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.hero-globe {
  /* the logo's globe, drawn large and faint, centred behind the slogan as in the logo */
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: min(1100px, 95vw);
  height: auto;
  transform: translate(-50%, -50%);
  color: var(--sprout);
  opacity: .3;
  pointer-events: none;
}
/* a wind farm on each side of the centred slogan, a low valley under the words (no power line);
   the drawing takes the width of the hero (at least 560px, centred) */
.hero::after {
  z-index: -1;
  top: 0;
  background: url("../img/deco/landscape-hero.svg") center bottom / max(100%, 560px) auto no-repeat;
}
/* the text stands centred (client's request): the company name, €CONOMY over €COLOGY at the
   same width, the green line below */
.hero-inner {
  position: relative;
  min-height: clamp(440px, 74vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding-top: clamp(56px, 10vh, 120px);
  padding-bottom: clamp(48px, 8vh, 96px);
}
.hero h1 { margin: 0; font-weight: inherit; }
.hero-name {
  display: block;
  max-width: 46ch;
  margin-inline: auto;
  font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--text);   /* not muted: the globe's lines run behind it */
}
.hero-slogan {
  display: block;
  margin-top: .18em;
  font-family: var(--font-display);
  font-size: clamp(44px, 9vw, 128px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* one word per line. In Jost 600 €CONOMY is 0.41em wider than €COLOGY: tighten the one and open
   the other by the same amount over their six gaps, so both lines start and end flush. The space
   after the last letter is taken back, so the letters themselves are centred. */
.hero-word {
  display: block;
  letter-spacing: var(--track);
  margin-right: calc(-1 * var(--track));
}
.hero-word--economy { --track: -.054em; }
.hero-word--ecology { --track: .014em; }
.eu { color: var(--signal); }
.hero-trace {
  display: block;
  width: min(100%, 1000px);   /* centred under the slogan; the line draws in over 1000px at most */
  height: 28px;
  margin-top: clamp(28px, 4vw, 44px);
  overflow: visible;
}
.hero-trace path {
  fill: none;
  stroke: var(--sprout);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trace-in 1.8s .35s cubic-bezier(.65, 0, .25, 1) forwards;
}
@keyframes trace-in { to { stroke-dashoffset: 0; } }

/* ---------- Home: section tiles ---------- */

.tiles-section { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); }
/* three tiles: one under the other on phones, two with the third centred under them on tablets
   and small laptops, three in a row from 1240px */
.tiles {
  --tiles-gap: clamp(18px, 2.4vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tiles-gap);
}
@media (min-width: 860px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles > .tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--tiles-gap)) / 2);
  }
}
@media (min-width: 1240px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles > .tile:last-child:nth-child(odd) { grid-column: auto; width: auto; }
}

.tile {
  --radius: 22px;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease-out, border-color .2s ease-out;
}
.tile-media {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 10px 0;
  padding: 14px 14px 10px;
  border-radius: 14px;
  background: var(--paper);
}
.tile-media > picture,
.tile-media > .collage { margin-top: auto; }
.tile-media img {
  width: 100%;
  height: auto;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--line);
}
.tile-foot h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
.tile-go {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--lime);
  transition: background-color .2s ease-out, color .2s ease-out;
}
.tile-go svg { width: 20px; height: 20px; transition: transform .2s ease-out; }
.tile:hover, .tile:focus-visible { --edge: var(--line-strong); box-shadow: var(--lift); transform: translateY(-3px); }
.tile:hover .tile-media img { transform: scale(1.03); }
.tile:hover .tile-go, .tile:focus-visible .tile-go { background: var(--ink); color: var(--lime); }
.tile:hover .tile-go svg { transform: translateX(3px); }

/* labels that belong to a photo: they wrap instead of sitting on top of it */
.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li:not(.collage-label),
.collage-label > span {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  background: #edf3e7;
}

/* The Electrical Conversion photo (Home tile, ECOES Electric Conversion): as in the client's PDF,
   its two labels sit in the photo's empty corners once it is at least 520px wide: "Electrical
   Conversion" right above the chassis, with a green wire down to it, and the long label in the
   white top right. Narrower, or when a label does not fit its corner (main.js; e.g. a long
   translation), they stay above the photo as chips. Positions are shares of the photo. */
.collage {
  container: collage / inline-size;
  position: relative;
}
.collage picture { display: block; }
.collage-labels { margin-bottom: 10px; }
.collage-label > span { display: block; }
@container collage (min-width: 520px) {
  .collage:not(.collage--stacked) .collage-labels {
    position: absolute;
    inset: 0;
    margin: 0;
    display: block;
    pointer-events: none;
  }
  .collage:not(.collage--stacked) .collage-label {
    position: absolute;
    display: flex;
  }
  .collage:not(.collage--stacked) .collage-label > span {
    position: relative;
    padding: .4em .85em;
    font-size: clamp(13px, 1.9cqw, 17px);
  }
  .collage:not(.collage--stacked) .collage-label--main {   /* the white band above the chassis */
    left: 16%;
    top: 2%;
    width: 43%;
    height: 12.5%;
    align-items: flex-end;
    justify-content: center;
  }
  .collage:not(.collage--stacked) .collage-label--main > span::after {   /* the wire to the chassis */
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - 3.5px);
    width: 7px;
    height: 3.6cqw;
    background:
      linear-gradient(var(--sprout), var(--sprout)) center top / 2px calc(100% - 5px) no-repeat,
      radial-gradient(circle, var(--sprout) 3px, transparent 3.5px) center bottom / 7px 7px no-repeat;
  }
  .collage:not(.collage--stacked) .collage-label--aside {   /* the white top right */
    left: 61%;
    top: 3%;
    width: 37.5%;
    height: 31%;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .collage:not(.collage--stacked) .collage-label--aside > span { border-radius: 14px; }
  /* the Home tile's photo grows a little on hover: the labels grow with it, so they stay in place */
  .collage:not(.collage--stacked) .collage-labels { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .tile:hover .collage:not(.collage--stacked) .collage-labels { transform: scale(1.03); }
}
@media (forced-colors: active) {
  .collage-label--main > span::after { display: none; }
}

/* ---------- Inner pages ---------- */

.page-head {
  background:
    radial-gradient(900px 480px at 85% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 65%),
    linear-gradient(180deg, var(--sky) 0%, #edf3ee 58%, #e3efd6 100%);
}
.page-head::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
          mask-image: linear-gradient(to bottom, transparent, #000 30%);
}
.page-head .container {
  position: relative;
  z-index: 1;
  padding-top: clamp(48px, 8vw, 104px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
/* the landscape beside the title, fading out towards the text on the left; never taller than the
   head, so short heads keep the turbines whole. Below 1024px the text takes the full width, so
   the landscape gets a band of its own under the button. */
.page-head::after {
  height: min(26vw, 400px, 100% - 28px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 40%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 40%, #000 70%);
}
@media (max-width: 1023px) {
  .page-head { --land-h: clamp(130px, 20vw, 196px); }
  .page-head .container { padding-bottom: calc(var(--land-h) + 12px); }
  .page-head::after {
    height: var(--land-h);
    -webkit-mask-image: none;
            mask-image: none;
  }
}
.page-head h1 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(36px, 6.4vw, 80px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1;
  color: var(--ink);
  text-wrap: balance;
}
.page-head .h1-long {
  max-width: 28ch;
  font-size: clamp(30px, 4.8vw, 62px);
  line-height: 1.04;
}
.page-head h1::after {
  /* a short green line under every page title */
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: .45em;
  border-radius: 3px;
  background: var(--sprout);
}
.page-lead {
  margin: 24px 0 0;
  max-width: 62ch;
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}

.page-body { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 120px); }
/* zero-specificity defaults, so component rules below always win */
.page-body :where(section + section) { margin-top: clamp(48px, 6vw, 88px); }
.page-body :where(h2) {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
.page-body :where(p) { margin: 0 0 1em; max-width: 68ch; }
.page-body :where(p:last-child) { margin-bottom: 0; }

.text-link {
  color: var(--leaf);
  text-decoration: underline;
  text-decoration-color: var(--sprout);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .2s ease-out;
}
.text-link:hover { color: var(--ink); }

.flag {
  display: block;
  width: auto;
  height: 30px;
  box-shadow: 0 0 0 1px rgba(20, 38, 29, .14);
}

/* photo collage on a white card */
.figure {
  --radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 960px;
  margin: 0;
  padding: 16px 16px 12px;
}
.figure img { width: 100%; height: auto; }

/* long documents: ruled sections with a green node, heading column + text column on wide screens */
.doc-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.doc-section::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sprout);
}
.figure + .doc-section { margin-top: clamp(40px, 5vw, 64px); }
.doc-section > h2 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
}
@media (min-width: 1024px) {
  .doc-section {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 56px;
  }
  .doc-section > h2 {
    position: sticky;
    top: calc(var(--header-h) + 28px);
    align-self: start;
  }
}
.num { color: var(--leaf); }
.doc-body { max-width: 70ch; }
.doc-body h3 {
  margin: 36px 0 12px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.doc-body h3:first-child { margin-top: 0; }

.doc-list {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}
.doc-list > li {
  position: relative;
  padding-left: 26px;
}
.doc-list > li + li { margin-top: 14px; }
.doc-list > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .72em;
  width: 7px;
  height: 7px;
  background: var(--sprout);
  transform: rotate(45deg);
}
.doc-list li p { margin: 0 0 .6em; }
.doc-list li p:last-child { margin-bottom: 0; }

.callout {
  --edge: #d3e6b0;
  --fill: #f2f8e6;
  --radius: 14px;
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.callout p { margin: 0; }
.callout p + p { margin-top: 6px; }

/* product pages: the collage stays in view beside the text on wide screens */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
}
@media (min-width: 1024px) {
  .product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .product > .figure {
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }
}
.flow { max-width: 70ch; }
.flow-block + .flow-block {
  position: relative;
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.flow-block + .flow-block::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sprout);
}

/* closing statement: the one loud element of a document page */
.statement {
  max-width: 30ch;
  margin: clamp(64px, 8vw, 112px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 54px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}
.statement::before {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-bottom: .6em;
  border-radius: 3px;
  background: var(--sprout);
}
.page-body .statement { max-width: 30ch; }

/* ---------- About us ---------- */

.org-jv {
  --radius: 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px clamp(20px, 3vw, 44px);
  padding: clamp(22px, 3vw, 36px);
}
.org-jv img { width: clamp(130px, 15vw, 190px); height: auto; }
.org-jv h2 { margin-bottom: 8px; }
@media (max-width: 640px) {
  .org-jv { grid-template-columns: minmax(0, 1fr); }
}

/* the joint venture wired to its three companies; wires live on the list items, cards inside them */
.org-members {
  --drop: 30px;
  --gap: clamp(16px, 2vw, 24px);
  position: relative;
  list-style: none;
  margin: 0;
  padding: calc(var(--drop) * 2) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.org-members::before,
.org-members::after,
.org-member::after {
  content: "";
  position: absolute;
  background: var(--sprout);
}
.org-members::before {   /* trunk */
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: calc(var(--drop) + 2px);
}
.org-members::after {    /* bus */
  top: var(--drop);
  left: calc((100% - 2 * var(--gap)) / 6);
  right: calc((100% - 2 * var(--gap)) / 6);
  height: 2px;
}
.org-member { position: relative; display: flex; }
.org-member::after {     /* drop */
  top: calc(-1 * var(--drop));
  left: calc(50% - 1px);
  width: 2px;
  height: var(--drop);
}
.org-card {
  --radius: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px clamp(16px, 2vw, 24px) 24px;
}
.org-card .flag { height: 44px; align-self: flex-start; }
.org-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.org-card p {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--muted);
}

@media (max-width: 767px) {
  .org-members {
    --rail: 14px;
    --reach: 26px;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--drop) 0 0 calc(var(--rail) + var(--reach));
  }
  .org-members::before,
  .org-members::after { display: none; }
  .org-member::before {  /* rail down the left, one segment per company */
    content: "";
    position: absolute;
    left: calc(-1 * var(--reach));
    top: calc(-1 * var(--gap));
    bottom: 0;
    width: 2px;
    background: var(--sprout);
  }
  .org-member:first-child::before { top: calc(-1 * var(--drop)); }
  .org-member:last-child::before { bottom: auto; height: calc(var(--gap) + 38px); }
  .org-card {
    flex-direction: row;
    align-items: center;
    padding: 20px 16px;
  }
  .org-card .flag { height: 30px; flex-shrink: 0; align-self: center; }
  .org-member::after {   /* tick from the rail */
    top: 36px;
    left: calc(-1 * var(--reach));
    width: var(--reach);
    height: 2px;
  }
}

.ceo-lead {
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.bio {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2.5vw, 32px);
  max-width: 1040px;
}
.bio-photo { --radius: 18px; --fill: #9ea3ab; overflow: hidden; padding: 0; }
.bio-photo img { width: 100%; height: auto; }
.bio-text { --radius: 20px; padding: clamp(22px, 3vw, 36px); }
.bio-text ul { margin: 0 0 1em; padding-left: 1.25em; }
.bio-text li + li { margin-top: .25em; }
.bio-text li::marker { color: var(--sprout); }
@media (max-width: 767px) {
  .bio { grid-template-columns: minmax(0, 1fr); }
  .bio-photo { width: 264px; max-width: 100%; }
}

.roles {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 880px;
}
.role {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.role:last-child { border-bottom: 1px solid var(--line); }
.role .flag { height: 24px; margin-top: 5px; }

.partner-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 8px 0 28px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.partner-link picture {
  --radius: 12px;
  display: block;
  padding: 10px 14px;
}
.partner-link img { width: clamp(180px, 22vw, 260px); height: auto; }
.partner-link > span {
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--sprout);
  text-underline-offset: 4px;
}
.partner-link:hover > span { color: var(--leaf); }
.partner-link--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 24px;
}

/* HISTORY: "* * *" before it as in the client's PDF, the text, then the documents as thumbnails
   that open full size (gallery.js) */
.asterism {
  height: auto;
  margin: clamp(48px, 6vw, 88px) 0 0;
  border: 0;
  overflow: visible;
  text-align: center;
  color: var(--sprout);
}
.asterism::after {
  content: "*\2003*\2003*";
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}
.history { margin-top: clamp(28px, 3.5vw, 48px); }
.docs {
  list-style: none;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
}
@media (max-width: 479px) {
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.doc-link {
  --radius: 14px;
  display: block;
  padding: 10px;
  cursor: zoom-in;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease-out, border-color .2s ease-out;
}
.doc-link:hover,
.doc-link:focus-visible { --edge: var(--line-strong); box-shadow: var(--lift); transform: translateY(-3px); }
.doc-link img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);   /* the edge of the paper */
  border-radius: 4px;
  background: #fff;
}
.docs .doc-link img {
  aspect-ratio: 300 / 424;   /* one page shape for all, so the captions line up */
  object-fit: contain;
}
.page-body .doc-title {
  margin: 12px 4px 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.doc-detail {
  display: block;
  margin-top: 2px;
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: balance;
}

/* awards: each certificate with its own text under it, side by side on wide screens */
.awards {
  list-style: none;
  margin: clamp(44px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(40px, 4.5vw, 56px) clamp(24px, 3vw, 40px);
  align-items: start;
}
.award .doc-link { max-width: 340px; }   /* each certificate in its own shape (from its width and height) */
/* side by side, the cards take the height of the tallest certificate (the paper centred in it), so
   the labels and the texts start on one line */
@supports (grid-template-rows: subgrid) {
  .award {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .award .doc-link {
    align-self: stretch;
    display: grid;
    align-content: center;
  }
}
.page-body .award .doc-title { margin-top: 16px; font-size: 18px; }
.page-body .award p { margin: 10px 4px 0; }

/* a document full size: the page dims to ink, the document on its white paper, caption and
   previous / next below */
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(20, 38, 29, .95);
  color: #fff;
  overscroll-behavior: contain;
}
.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: lightbox-in .2s ease-out;
}
@keyframes lightbox-in { from { opacity: 0; } }
.lightbox::backdrop { background: transparent; }
.lightbox :focus-visible { outline-color: var(--lime); }
.lightbox-top,
.lightbox-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
}
.lightbox-count {
  margin: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .78);
}
.lightbox-stage {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* a fixed box, so the document can fit it */
  place-items: center;
  min-height: 0;
  padding: 0 var(--gutter);
}
.lightbox-stage picture { display: contents; }
.lightbox-img {
  grid-area: 1 / 1;   /* the <source> next to it must not take the cell */
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}
.lightbox-caption {
  flex: 1;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.lightbox .doc-detail { font-size: 14px; color: rgba(255, 255, 255, .78); }
.lightbox-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s ease-out;
}
.lightbox-btn:hover { background: var(--lime); }
.lightbox-btn svg { width: 22px; height: 22px; }
.lightbox-btn[hidden] { display: none; }

/* ---------- Contact ---------- */

.offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.office {
  --radius: 20px;
  padding: clamp(22px, 2.5vw, 30px);
  font-style: normal;
}
/* line the parts of neighbouring cards up with each other */
@supports (grid-template-rows: subgrid) {
  .office {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
.office .flag { height: 40px; margin-bottom: 20px; }
.office h2 { margin: 0; font-size: 21px; }
.office-kind { margin: 2px 0 0; color: var(--muted); }
.office-lines {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.office-lines li + li { margin-top: 4px; }
.office-address {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.line-label { color: var(--muted); }
.tbd { color: var(--signal); }


/* ---------- Calls to action ---------- */

/* lime pill with the arrow in a dark round chip */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 8px 9px 8px 24px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  color: var(--ink);
  background: var(--lime);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease-out;
}
.btn svg {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  color: var(--lime);
  background: var(--ink);
  transition: transform .2s ease-out;
}
.btn:hover { background: var(--lime-deep); }
.btn:hover svg { transform: translateX(2px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.page-head .btn { margin-top: 28px; }

/* a large link at the end of each page */
.cta {
  --radius: 26px;
  --edge: #cfe3a1;
  --fill: var(--lime-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(24px, 3.5vw, 40px) clamp(22px, 3.5vw, 44px);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .2s ease-out, border-color .2s ease-out;
}
.cta-text {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}
.cta-go {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--lime);
  background: var(--ink);
}
.cta-go svg { width: 24px; height: 24px; transition: transform .2s ease-out; }
.cta:hover, .cta:focus-visible { --edge: #bcd98a; --fill: #dcefae; }
.cta:hover .cta-go svg, .cta:focus-visible .cta-go svg { transform: translateX(4px); }
.tiles-section .cta { margin-top: clamp(28px, 3vw, 40px); }

/* ---------- Contact form ---------- */

.contact-form-section { margin-top: clamp(48px, 6vw, 80px); scroll-margin-top: calc(var(--header-h) + 16px); }
.form-plate {
  --radius: 24px;
  max-width: 980px;
  padding: clamp(24px, 3.5vw, 44px);
}
.form-plate h2 { margin-bottom: 24px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px 20px;
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.req { color: var(--leaf); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field-edge);
  border-radius: 10px;
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(63, 159, 95, .25);
}
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { margin: 0; font-size: 14px; color: var(--error); }
.field--check { flex-direction: row; align-items: flex-start; gap: 12px; }
.field--check input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--leaf);
}
.field--check label { flex: 1; min-width: 0; font-weight: 400; line-height: 1.55; }
.field--check .field-error { flex-basis: 100%; }
.field--check { flex-wrap: wrap; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 26px; }
.form-status { margin: 22px 0 0; padding: 14px 18px; border-left: 3px solid var(--sprout); border-radius: 0 10px 10px 0; background: #edf6e6; color: var(--ink); }
.form-status.is-error { border-left-color: var(--error); background: #fdeeec; }
.form-status a { color: inherit; }
.form-detail { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }

/* ---------- Footer: offices on every page, on the meadow ---------- */

.site-footer {
  --land-h: clamp(120px, 13vw, 190px);
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #edf3e8 0%, #e2eed6 60%, var(--meadow) 100%);
  padding: clamp(44px, 6vw, 72px) 0 calc(var(--land-h) + 16px);
}
/* the landscape in a band of its own under the last line, mirrored: the wind farm on the left,
   the power line running off to the right */
.site-footer::before {
  z-index: -1;
  height: var(--land-h);
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
          mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.footer-offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 28px 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(20, 38, 29, .12);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  font-style: normal;
}
.footer-office .flag { height: 22px; margin-bottom: 12px; }
.footer-office h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.footer-office p { margin: 2px 0 0; }
.footer-office p + p { margin-top: 10px; }
.footer-office a { color: var(--text); text-decoration-color: rgba(20, 38, 29, .3); text-underline-offset: 3px; }
.footer-office a:hover { color: var(--leaf); }
.footer-office .btn { margin-top: 16px; font-size: 15.5px; min-height: 46px; padding: 6px 7px 6px 20px; }
.footer-office .btn svg { width: 32px; height: 32px; padding: 7px; }
.footer-office .btn,
.footer-office .btn:hover { color: var(--ink); }   /* not the footer link colours */
.footer-copy { margin: 0; font-size: 14px; color: var(--muted); }

/* BULFIRE: a small card with the client's sentence and the link to the BULFIRE site, under the
   offices in every footer and at the end of About us */
.footer-bulfire {
  padding: 24px 0;
  border-bottom: 1px solid rgba(20, 38, 29, .12);
}
.bulfire-link {
  --radius: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo body go";
  align-items: center;
  gap: 12px 20px;
  max-width: 720px;
  padding: 14px 14px 14px 20px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s ease-out;
}
.bulfire-link--page { margin-top: clamp(40px, 5vw, 64px); }
.bulfire-logo {   /* the client's logo, background made transparent, small; a hairline beside it */
  grid-area: logo;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 20px;
  border-right: 1px solid var(--line);
}
.bulfire-logo img { display: block; width: auto; height: 40px; }
.bulfire-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bulfire-text { font-size: 14.5px; line-height: 1.5; }
.bulfire-url {
  align-self: flex-start;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--sprout);
  text-underline-offset: 4px;
  transition: color .2s ease-out;
}
.bulfire-go {   /* the round arrow chip, as on the tiles; diagonal: it opens another site */
  grid-area: go;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--lime);
  transition: background-color .2s ease-out, color .2s ease-out;
}
.bulfire-go svg { width: 18px; height: 18px; }
.bulfire-link:hover, .bulfire-link:focus-visible { --edge: var(--line-strong); }
.bulfire-link:hover .bulfire-url { color: var(--leaf); }
.bulfire-link:hover .bulfire-go, .bulfire-link:focus-visible .bulfire-go { background: var(--ink); color: var(--lime); }
@media (max-width: 560px) {   /* phones: the logo and the arrow on top, the text under them */
  .bulfire-link {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo go" "body body";
    padding: 14px 14px 16px 18px;
  }
  .bulfire-logo { padding-right: 0; border-right: 0; }
  .bulfire-logo img { height: 34px; }
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding-top: 26px;
}
.footer-brand { display: inline-flex; }
.footer-brand img { height: 58px; width: auto; }
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 24px;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease-out;
}
.footer-nav a:hover { color: var(--ink); }

@media (max-width: 480px) {
  .brand img { height: 44px; }
  .tile-go { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero-trace path { stroke-dashoffset: 0; }
}