/* ==========================================================================
   EEIG – eei-group.com
   One stylesheet for the whole site.

   Contents
     1. Fonts              6. Rows: prose, split, teaser, columns
     2. Colours and sizes  7. Home page
     3. Base and type      8. Contact form
     4. Header and menu    9. "More in …" band and footer
     5. Page head         10. Small screens
   Section 6 also holds the side panel, the grouped headings and the
   "Talk to us" band that closes each service page.
   ========================================================================== */

/* 1. Fonts (self-hosted, no requests to Google) ---------------------------
   Three families, each with one job: EB Garamond for the big titles (it
   echoes the EEIG wordmark), IBM Plex Sans for headings, menus, buttons and
   forms, IBM Plex Serif for running text. Each face comes in two files; the
   browser fetches the "latin-ext" one only when a page uses accented letters
   such as š, č or ő. */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* 2. Colours and sizes ---------------------------------------------------- */
:root {
  --navy: #052746;          /* page heads, home hero, "more in" band */
  --navy-deep: #031a30;     /* footer */
  --blue: #0170b9;          /* links and buttons */
  --sky: #8ccdfa;           /* links on navy */
  --ink: #14212e;           /* headings */
  --text: #2d3a48;          /* body text */
  --muted: #5d6a78;
  --line: #d7dde5;
  --mist: #f1f4f7;          /* pale bands */

  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "EB Garamond", Garamond, Georgia, serif;     /* page titles and the home headline only */

  /* Type sizes: every piece of text on the site uses one of these. */
  --fs-small: 0.875rem;     /* 14px  breadcrumb, copyright line */
  --fs-ui: 1rem;            /* 16px  menu, buttons, forms, footer, small lists */
  --fs-body: 1.0625rem;     /* 17px  running text */
  --fs-lead: 1.25rem;       /* 20px  intro paragraphs, statements */
  --fs-h3: 1.375rem;        /* 22px  sub-headings, pull quote */
  --fs-h2: 1.75rem;         /* 28px  section headings */
  --fs-h1: clamp(2.5rem, 1.4rem + 3.8vw, 4.5rem);       /* page titles, up to 72px */
  --fs-hero: clamp(2.75rem, 1.3rem + 5.2vw, 5.25rem);   /* home page headline, up to 84px */

  --wrap: 1200px;                       /* widest the content gets */
  --gutter: clamp(20px, 4vw, 40px);     /* space at the screen edges */
  --measure: 42rem;                     /* longest comfortable line of text */
  --header-height: 72px;
}

/* 3. Base and type -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: #fff;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--blue);
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
main p a:not([class]),
main dd a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.6em;
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h2 { font-size: var(--fs-h2); }
h3,
.h3 { font-size: var(--fs-h3); }
/* a heading that is the target of a link on its own page: leave room for the sticky header */
:is(h2, h3)[id] { scroll-margin-top: 110px; }

p {
  margin: 0 0 1.3em;
}
ul,
ol {
  margin: 0 0 1.3em;
  padding-left: 1.2em;
}
li {
  margin-bottom: 0.35em;
}
b,
strong {
  font-weight: 700;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: #fff;
}
.skip-link:focus {
  left: 0;
}

/* Jump targets (e.g. /technology/#analytics): leave room for the sticky header */
.anchor {
  display: block;
  height: 0;
  scroll-margin-top: 110px;
}

.button {
  display: inline-block;
  padding: 0.7em 1.6em;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.button:hover,
.button:focus {
  color: #fff;
  background: #015a96;
  text-decoration: none;
}

.more::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.45em;
  border-top: 0.11em solid currentColor;
  border-right: 0.11em solid currentColor;
  transform: translateY(-0.1em) rotate(45deg);
}

/* 4. Header and menu ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s;
}
.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(5, 39, 70, 0.1);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}
.site-logo {
  display: flex;
  align-items: center;
  height: var(--header-height);
}
.site-logo img {
  width: 104px;
}

.main-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav li {
  position: relative;
  margin: 0;
}
.main-nav .menu {
  display: flex;
  gap: 4px;
}
.main-nav a {
  display: block;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: var(--header-height);
  color: var(--ink);
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a:focus {
  color: var(--blue);
  text-decoration: none;
}
/* current page: blue with a bar along the bottom edge of the header */
.main-nav .menu > .is-current > a {
  color: var(--blue);
  box-shadow: inset 0 -3px 0 var(--blue);
}
.main-nav .sub-menu .is-current > a {
  color: var(--blue);
}

.main-nav .has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 270px;
  padding: 8px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 24px -8px rgba(5, 39, 70, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}
.main-nav li:last-child > .sub-menu,
.main-nav li:nth-last-child(2) > .sub-menu {
  left: auto;
  right: 0;
}
.main-nav .has-sub:hover > .sub-menu,
.main-nav .has-sub:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
}
.main-nav .sub-menu a {
  padding: 9px 18px;
  line-height: 1.4;
  white-space: normal;
}

/* shown on small screens only (section 10) */
.menu-toggle,
.sub-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}

/* 5. Page head ------------------------------------------------------------ */
/* The same band opens every page except Home: breadcrumb, title, short intro.
   A photo, where the page has one, sits on the right and fades into the navy. */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--navy);
}
.page-head__img {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 64%;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48%);
  mask-image: linear-gradient(to right, transparent, #000 48%);
}
.page-head__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 39, 70, 0.12);
}
/* pages without a photo borrow the line drawing from the home page, faintly */
.page-head--plain .page-head__img {
  opacity: 0.4;
  background-position: right bottom;
}
.page-head__inner {
  padding-block: 22px clamp(44px, 6vw, 76px);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.72);
}
.crumbs li {
  margin: 0;
}
.crumbs li + li::before {
  content: "/";
  margin: 0 0.6em;
  opacity: 0.6;
}
.crumbs a {
  color: inherit;
}
.crumbs a:hover,
.crumbs a:focus {
  color: #fff;
}
.page-head h1 {
  max-width: 18em;
  margin: clamp(36px, 5vw, 64px) 0 0;
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: #fff;
}
.page-head__lead {
  max-width: 34em;
  margin: 20px 0 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: #dbe7f2;
}

/* 6. Rows ----------------------------------------------------------------- */
/* Prose: a heading in the left column, its text in the right. */
.row--prose,
.row--cols,
.row--teaser {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: 48px;
  padding-block: 48px;
  border-top: 1px solid var(--line);
}
.section > * {
  grid-column: 2;
  max-width: var(--measure);
}
.section > .section-title {
  grid-column: 1;
  grid-row: 1 / span 40;
  margin: 0;
  font-size: var(--fs-h2);
}
.section > :last-child {
  margin-bottom: 0;
}
/* the first block under the page head needs no rule above it */
.page-head + .row--prose .section:first-child,
.sectors + .row--prose .section:first-child,
.row--split + .row--prose .section:first-child {
  border-top: 0;
}
.section--untitled > * {
  grid-column: 1 / -1;
}
/* Side panel beside an opening text: the pages of the section, or key facts. */
.section--aside {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: 64px;
}
.section--aside > * {
  grid-column: 1;
}
.section--aside > .aside {
  grid-column: 2;
  grid-row: 1 / span 40;
  align-self: start;
  max-width: none;
}
.aside {
  padding-top: 14px;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: 1.45;
  border-top: 2px solid var(--ink);
}
.aside__title {
  margin: 0 0 14px;
  font-size: var(--fs-ui);
  letter-spacing: 0;
}
.aside__title a {
  color: var(--ink);
}
.aside ul,
.aside dl {
  margin: 0;
  padding: 0;
  list-style: none;
}
.aside li,
.aside dl > div {
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.aside [aria-current] {
  font-weight: 600;
  color: var(--ink);
}
.aside dl > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 12px;
}
.aside dt {
  color: var(--muted);
}
.aside dd {
  margin: 0;
  color: var(--ink);
}

/* A heading that introduces a group of sections (Mining: Cathode Materials). */
.group-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0;
  padding: 0.35em 0 0;
  list-style: none;
  font-family: var(--sans);
  font-size: var(--fs-ui);
}
.group-links li {
  margin: 0;
}
.group-head {
  padding-bottom: 28px;
}
.group-head + .section {
  padding-top: 0;
  border-top: 0;
}
.section > .section-title--sub,
.row--split .section-title--sub {
  font-size: var(--fs-h3);
}

.lead {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink);
}

.pull {
  margin: 0 0 1.6em;
  padding-left: 24px;
  border-left: 3px solid var(--blue);
}
.pull p {
  margin: 0 0 0.5em;
  font-size: var(--fs-h3);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
}
.pull footer {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  color: var(--ink);
}
.pull footer span {
  color: var(--muted);
}

.principles {
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.principles li {
  margin: 0;
  padding: 16px 0;
  font-family: var(--sans);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.principles li:last-child {
  border-bottom: 1px solid var(--line);
}

/* Split: a photo fills one half, text sits in the other, on a pale band. */
.row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--mist);
}
.row--split .cell--media .widget,
.row--split .cell--media {
  height: 100%;
}
.row--split .cell--media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  max-height: 560px;
  object-fit: cover;
}
.row--split .cell--text {
  align-self: center;
  max-width: calc(var(--wrap) / 2 + var(--gutter));
  padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px);
}
.row--split.row--flip .cell--media {
  order: 2;
}
.row--split.row--flip .cell--text {
  justify-self: end;
  padding: clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px) var(--gutter);
}
.row--split .section-title {
  font-size: var(--fs-h2);
}
.row--split .widget > :last-child {
  margin-bottom: 0;
}

/* Teaser: a smaller picture beside a short text (overview pages). */
.row--teaser {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  padding-block: 32px;
}
.row--teaser .cell--media img {
  width: 100%;
  border-radius: 4px;
}
.row--teaser .widget + .widget {
  margin-top: 28px;
}

/* Columns: two blocks of text or a text and a form side by side. */
.row--cols {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px;
  padding-block: 48px;
}
.row--cols .section {
  display: block;
  padding: 0;
  border: 0;
}
.row--cols .section-title,
.row--teaser .section-title {
  margin-bottom: 0.6em;
  font-size: var(--fs-h3);
}

/* Drawings (Nuclear Power): two figures side by side on a pale band. The numbers in a
   drawing match the numbered list under it. */
.figures {
  background: var(--mist);
}
.figures__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
  padding-block: clamp(40px, 5vw, 64px);
}
.fig {
  margin: 0;
}
.fig svg {
  display: block;
  width: 100%;
  height: auto;
}
.fig__title {
  margin: 0 0 20px;
  font-size: var(--fs-h3);
}
.fig figcaption p {
  max-width: var(--measure);
  margin: 0 0 1em;
}
.fig figcaption p:last-child {
  margin-bottom: 0;
}
.fig__key {
  columns: 2;
  column-gap: 32px;
  margin: 20px 0 24px;
  padding-left: 1.5em;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: 1.45;
}
.fig__key li {
  margin: 0 0 6px;
  padding-left: 0.2em;
  break-inside: avoid;
}
.fig__key li::marker {
  font-weight: 600;
  color: var(--navy);
}
/* drawing styles */
.fig svg * {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fig .wall,
.fig .vessel {
  fill: #fff;
}
.fig .water {
  fill: #d9eaf6;
}
.fig .pool {
  fill: #e6f1f9;
  stroke: none;
}
.fig .earth {
  fill: #e2e8ee;
  stroke: none;
}
.fig .core {
  fill: var(--navy);
  stroke: none;
}
.fig .core + .thin {
  stroke: #fff;
}
.fig .thin,
.fig .rod,
.fig .lead {
  stroke-width: 1.5;
}
.fig .thinner {
  stroke-width: 2;
}
.fig .ground {
  stroke-width: 2;
  stroke: var(--muted);
}
.fig .primary,
.fig .pump {
  stroke: var(--blue);
}
.fig .primary:not(.thinner) {
  stroke-width: 5;
}
.fig .pump {
  fill: #fff;
}
.fig .steam {
  stroke-width: 3;
}
.fig .feed,
.fig .cool {
  stroke: #5aa9de;
  stroke-width: 3;
}
.fig .later {
  stroke: var(--muted);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}
.fig .dot {
  fill: var(--navy);
  stroke: var(--mist);
  stroke-width: 2;
}
.fig .num {
  fill: #fff;
  stroke: none;
  font: 600 13px var(--sans);
  text-anchor: middle;
  dominant-baseline: central;
}

/* "Talk to us" band: closes each service page, above the "More in" band. */
.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 48px;
  align-items: center;
  padding-bottom: 56px;
}
/* a rule above, like the one between sections ... */
.cta__inner::before {
  content: "";
  grid-column: 1 / -1;
  margin-bottom: 48px;
  border-top: 1px solid var(--line);
}
/* ... except straight after a photo band */
:is(.row--split, .figures) + .cta .cta__inner {
  padding-top: 56px;
}
:is(.row--split, .figures) + .cta .cta__inner::before {
  display: none;
}
.cta__title {
  margin: 0 0 6px;
  font-size: var(--fs-h2);
}
.cta p {
  margin: 0;
}
.cta + .more-in {
  margin-top: 0;
}

/* 7. Home page ------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--navy) url("../img/energymainbanner.png") center bottom / cover no-repeat;
}
/* keeps the words readable over the drawing */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(5, 39, 70, 0.94) 0%, rgba(5, 39, 70, 0.8) 42%, rgba(5, 39, 70, 0) 78%);
}
.hero__inner {
  padding-block: clamp(64px, 10vw, 132px);
}
.hero h1 {
  max-width: 11.5em;
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: #fff;
}
.hero__lead {
  max-width: 32em;
  margin: 24px 0 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: #dbe7f2;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin: 32px 0 0;
}
.hero__link {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 600;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.45);
}
.hero__link:hover,
.hero__link:focus {
  text-decoration: none;
  border-bottom-color: #fff;
}

.sectors {
  padding-block: clamp(40px, 6vw, 72px) 8px;
}
.sectors__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.sector__media {
  display: block;
  overflow: hidden;
  border-radius: 4px;
}
.sector__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.4s;
}
.sector:hover .sector__media img {
  transform: scale(1.04);
}
.sector__title {
  margin: 18px 0 10px;
  font-size: var(--fs-h3);
}
.sector__title a {
  color: var(--ink);
}
.sector__title a:hover,
.sector__title a:focus {
  color: var(--blue);
  text-decoration: none;
}
.sector ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: 1.45;
}
.sector li {
  margin: 0;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.active-in {
  margin-top: 24px;
  color: #fff;
  background: var(--navy);
}
.active-in__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px;
  align-items: center;
  padding-block: clamp(48px, 7vw, 88px);
}
.active-in h2 {
  margin-bottom: 20px;
  font-size: var(--fs-h2);
  color: #fff;
}
.active-in ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.4;
}
.active-in li {
  margin: 0;
  padding: 9px 0 9px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: radial-gradient(circle at 5px 50%, #ff2a2a 0 5px, transparent 5.5px);
}

/* 8. Contact form --------------------------------------------------------- */
.contact-form p {
  margin-bottom: 18px;
}
.contact-form label {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  color: var(--ink);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 0.7em 0.8em;
  font: var(--fs-ui) / 1.5 var(--sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid #b9c2cd;
  border-radius: 4px;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 0;
  border-color: var(--blue);
}
.contact-form textarea {
  display: block;
  resize: vertical;
}
.contact-form button {
  padding: 0.7em 2.2em;
  font: 600 var(--fs-ui) / 1.4 var(--sans);
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.contact-form button:hover,
.contact-form button:focus {
  background: #015a96;
}
.contact-form button[disabled] {
  opacity: 0.6;
  cursor: wait;
}
/* spam trap: real visitors never see or fill this field */
.contact-form .form-extra {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}
.form-status {
  display: none;
  padding: 0.6em 1em;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  border-left: 4px solid;
  background: var(--mist);
}
.form-status.is-ok,
.form-status.is-error {
  display: block;
}
.form-status.is-ok { border-color: #1f9d55; }
.form-status.is-error { border-color: #d92d20; }

/* 9. "More in …" band and footer ------------------------------------------ */
.more-in {
  margin-top: 24px;
  color: #fff;
  background: var(--navy);
}
.more-in__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px;
  align-items: baseline;
  padding-block: 56px;
}
.more-in__title {
  margin: 0;
  font-size: var(--fs-h2);
  color: #fff;
}
.more-in ul {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.more-in li {
  margin: 0;
}
.more-in a {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 600;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}
.more-in a:hover,
.more-in a:focus {
  text-decoration: none;
  border-bottom-color: #fff;
}
.more-in a[aria-current] {
  color: rgba(255, 255, 255, 0.6);
  border-bottom-color: transparent;
}

.site-footer {
  font-size: var(--fs-ui);
  color: #c9d6e3;
  background: var(--navy-deep);
}
.more-in + .site-footer,
main:has(> .more-in:last-child) + .site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-main {
  padding: 64px 0 56px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1fr 1fr;
  gap: 48px;
}
.footer-col img {
  width: 132px;
}
.footer-col p:last-child {
  margin-bottom: 0;
}
.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
}
.footer-col a {
  font-family: var(--sans);
  color: var(--sky);
}
.footer-col a:hover,
.footer-col a:focus {
  color: #fff;
}
.footer-title {
  margin-bottom: 14px;
  font-size: var(--fs-ui);
  letter-spacing: 0;
  color: #fff;
}
.footer-bottom {
  padding: 22px 0;
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: #9fb1c4;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* 10. Small screens ------------------------------------------------------- */
@media (max-width: 1040px) {
  .header-inner {
    flex-wrap: wrap;
  }
  .menu-toggle {
    display: block;
    height: var(--header-height);
    padding: 0 0 0 20px;
  }
  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }
  .menu-toggle span {
    position: relative;
  }
  .menu-toggle span::before,
  .menu-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .menu-toggle span::before { top: -7px; }
  .menu-toggle span::after { top: 7px; }

  .main-nav {
    display: none;
    flex: 0 0 calc(100% + 2 * var(--gutter));
    max-height: calc(100vh - var(--header-height));
    margin: 0 calc(-1 * var(--gutter));
    overflow-y: auto;
    border-top: 1px solid var(--line);
  }
  .main-nav.is-open {
    display: block;
  }
  .main-nav .menu {
    display: block;
  }
  .main-nav li {
    border-bottom: 1px solid var(--line);
  }
  .main-nav li:last-child {
    border-bottom: 0;
  }
  .main-nav a {
    padding: 0 var(--gutter);
    line-height: 3.2;
    white-space: normal;
  }
  .main-nav .menu > .is-current > a {
    box-shadow: inset 3px 0 0 var(--blue);
  }
  .main-nav .has-sub > a {
    margin-right: 56px;
  }
  .main-nav .has-sub > a::after {
    display: none;
  }
  .sub-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 52px;
  }
  .sub-toggle::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s;
  }
  .sub-toggle[aria-expanded="true"]::before {
    transform: translateY(2px) rotate(-135deg);
  }
  .main-nav .sub-menu,
  .main-nav li:last-child > .sub-menu,
  .main-nav li:nth-last-child(2) > .sub-menu {
    position: static;
    display: none;
    width: auto;
    padding: 0;
    opacity: 1;
    visibility: visible;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    background: var(--mist);
  }
  .main-nav .sub-menu.is-open {
    display: block;
  }
  .main-nav .sub-menu a {
    padding: 0 var(--gutter) 0 calc(var(--gutter) + 18px);
    line-height: 3;
  }

  .sectors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  :root {
    --fs-lead: 1.125rem;    /* 18px */
    --fs-h3: 1.25rem;       /* 20px */
    --fs-h2: 1.5rem;        /* 24px */
  }
  .section,
  .row--cols,
  .row--teaser,
  .more-in__inner,
  .active-in__inner,
  .cta__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .cta__inner {
    padding-bottom: 40px;
  }
  .cta__inner::before {
    margin-bottom: 16px;
  }
  :is(.row--split, .figures) + .cta .cta__inner {
    padding-top: 36px;
  }
  .figures__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the drawings are smaller here, so their number markers are drawn larger */
  .fig .dot {
    r: 14px;
  }
  .fig .num {
    font-size: 17px;
  }
  .section {
    padding-block: 36px;
    row-gap: 0;             /* paragraphs keep their own spacing */
  }
  .section > *,
  .section > .section-title,
  .section--aside > .aside {
    grid-column: 1;
    grid-row: auto;
  }
  /* the section's pages are in the menu and at the foot of the page; the facts stay */
  .aside--nav {
    display: none;
  }

  .section > .section-title {
    margin-bottom: 0.8em;
  }
  .section--aside > .aside--facts {
    margin-top: 28px;
  }
  .row--split {
    grid-template-columns: minmax(0, 1fr);
  }
  .row--split.row--flip .cell--media {
    order: 0;
  }
  .row--split .cell--media img {
    min-height: 0;
    max-height: 320px;
  }
  .row--split .cell--text,
  .row--split.row--flip .cell--text {
    max-width: none;
    padding: 32px var(--gutter) 40px;
  }
  .page-head__img {
    width: 100%;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
    mask-image: linear-gradient(to bottom, #000, transparent);
  }
  .page-head--plain .page-head__img {
    opacity: 0.25;
  }
  .hero::before {
    background: rgba(5, 39, 70, 0.82);
  }
}

@media (max-width: 560px) {
  .sectors__grid,
  .footer-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .sector__media img {
    transition: none;
  }
}