/* ==========================================================================
   Srikaraya Renewable Energy — Header + Hero
   Layout modelled on the leitwind.com reference:
   inset rounded video card, notched white logo tab, floating green actions.
   ========================================================================== */

/* Brand palette, sampled straight off images/logo.webp: the navy of the
   wordmark, the sky blue of the turbines and panels, the green of the leaf,
   the lime at the light end of the ring, and the orange of the sun. Every
   other colour in this sheet is a tint or shade of one of those five. */
:root {
  --blue: #013077;
  /* wordmark navy */
  --blue-700: #011f4f;
  --blue-900: #01142f;

  --sky: #01a9f4;
  /* turbine and solar-panel blue */
  --sky-600: #0366c4;

  --green: #029d28;
  /* leaf green */
  --green-600: #027a20;
  --green-700: #06651f;
  --green-800: #0a5c24;
  --green-900: #042a10;

  --lime: #9cd01a;
  /* the light end of the ring */
  --lime-200: #c7ef92;
  --lime-100: #d8f3a6;
  --mint: #EBF4F1;

  --sun: #ffa202;
  /* the sun */
  --sun-700: #a15f00;
  /* deep enough for small text on white */
  --sun-100: #ffe6bd;
  --sun-50: #fff6e7;

  --ink: #0d1b26;
  --muted: #b9c0c6;
  --white: #ffffff;

  /* Page frame */
  --inset: 24px;
  --radius: 26px;

  /* Logo tab — visible white block over the video (logo_cover.svg geometry) */
  --tab-w: 300px;
  --tab-h: 92px;
  --notch: 22px;
  --btn-h: 48px;
  /* Breathing room between the action buttons and the capsule around them */
  --actions-pad: 9px;

  --pad: clamp(24px, 3.6vw, 64px);
  --ease: cubic-bezier(.22, .61, .36, 1);

}

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

/* Native smooth scrolling is the fallback for when Lenis hasn't loaded, or
   isn't running because the reader asked for reduced motion. */
html {
  scroll-behavior: smooth;
}

/* Lenis's own stylesheet, inlined rather than pulled as a second render-
   blocking request. The `lenis` class is put on <html> by the library, so
   none of this applies unless it is actually running. */
html.lenis,
html.lenis body {
  height: auto;
}

/* Lenis drives the scroll position itself; the native smoothing above would
   fight it, so it is switched off for as long as Lenis is in charge. */
.lenis {
  scroll-behavior: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

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


/* ==========================================================================
   Scroll reveal

   Every box on the page rises and fades as it is reached. The parked state
   lives behind .js-reveal, which the script adds to <html> only once it is
   running, so a blocked or failed script leaves the page fully visible rather
   than blank. The script skips this entirely under reduced motion, and the
   media query at the foot of this file cuts the durations besides.
   ========================================================================== */

.js-reveal .stat,
.js-reveal .feature-card,
.js-reveal .service-card,
.js-reveal .step,
.js-reveal .perk,
.js-reveal .uses__rail,
.js-reveal .impact-stat,
.js-reveal .vm-card,
.js-reveal .value-card,
.js-reveal .benefit,
.js-reveal .job,
.js-reveal .pillar,
.js-reveal .person,
.js-reveal .trait,
.js-reveal .route-step,
.js-reveal .gain,
.js-reveal .stage,
.js-reveal .boon,
.js-reveal .news-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js-reveal .stat.is-in,
.js-reveal .feature-card.is-in,
.js-reveal .service-card.is-in,
.js-reveal .step.is-in,
.js-reveal .perk.is-in,
.js-reveal .uses__rail.is-in,
.js-reveal .impact-stat.is-in,
.js-reveal .vm-card.is-in,
.js-reveal .value-card.is-in,
.js-reveal .benefit.is-in,
.js-reveal .job.is-in,
.js-reveal .pillar.is-in,
.js-reveal .person.is-in,
.js-reveal .trait.is-in,
.js-reveal .route-step.is-in,
.js-reveal .gain.is-in,
.js-reveal .stage.is-in,
.js-reveal .boon.is-in,
.js-reveal .news-card.is-in {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   Section headings

   One setting for every section title, so the page speaks in one voice
   instead of alternating between condensed uppercase and sentence case.
   Only the colour and the surrounding margins change with the ground each
   heading sits on; those stay with the sections below.

   The hero's own headline is deliberately not in this list — it is the
   banner, not a section heading, and keeps its condensed uppercase setting.
   ========================================================================== */

.about__title,
.mission__title,
.services__title,
.uses__title,
.feedstock__title,
.news__title,
.cta__title,
.cbg__title,
.works__title,
.why__title {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.75rem, 3.1vw, 3.375rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.015em;
  text-transform: none;
  text-wrap: balance;
}

/* ==========================================================================
   Hero shell
   ========================================================================== */

.hero {
  position: relative;
  padding: var(--inset);
}

.hero__card {
  position: relative;
  height: calc(100svh - (var(--inset) * 2));
  min-height: 640px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--blue-700);
  isolation: isolate;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 20, 38, .78) 0%, rgba(0, 20, 38, .46) 30%, rgba(0, 20, 38, .12) 58%, rgba(0, 20, 38, 0) 78%),
    linear-gradient(to right, rgba(0, 20, 38, .32) 0%, rgba(0, 20, 38, 0) 46%);
}

/* The revolving seal. One image turning at a constant 10s, the rate the
   kngscng.com banner uses, parked in the corner the copy block leaves free. */
.hero__spin {
  position: absolute;
  right: var(--pad);
  bottom: var(--pad);
  z-index: 2;
  width: clamp(84px, 10vw, 150px);
  height: auto;
  pointer-events: none;
  animation: hero-spin 10s linear infinite;
}

@keyframes hero-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The copy block, sitting at the foot of the card */
.hero__body {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  padding: var(--pad);
}

.hero__content {
  flex: 1 1 auto;
  min-width: 0;
}

.hero__title {
  margin: 0;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: clamp(2.2rem, 4vw, 4.75rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 30px rgba(0, 20, 38, .35);
}

.hero__caption {
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 18px rgba(0, 20, 38, .4);
}

/* --- Quick-link pills -------------------------------------------------- */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 2.4vw, 34px);
}

.quick-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  padding: 15px 30px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.quick-pill:hover {
  background: rgba(255, 255, 255, .3);
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-2px);
}

/* The primary of the two, so the eye lands on the feedstocks first. */
.quick-pill--solid {
  border-color: var(--green);
  background: var(--green);
  font-weight: 600;
}

.quick-pill--solid:hover {
  border-color: var(--green-600);
  background: var(--green-600);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.site-header>* {
  pointer-events: auto;
}

/* --- Notched white logo tab -------------------------------------------- */

.logo-tab {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 215px;
  height: 155px;
  padding: 15px 5px 15px 15px;
  background: var(--white);
  border-radius: 0 0 15px 0;
}

.logo-tab img {
  width: 100%;
  height: auto;
}

/* Inverse-radius fillets so the video appears to have rounded inner corners
   where it meets the tab — the concave transitions in logo_cover.svg. */
.logo-tab::before,
.logo-tab::after {
  content: '';
  position: absolute;
  width: var(--notch);
  height: var(--notch);
  background: var(--white);
  -webkit-mask: radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000 100%);
  mask: radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000 100%);
  pointer-events: none;
}

/* to the right of the tab */
.logo-tab::before {
  left: 100%;
  top: var(--inset);
}

/* directly beneath the tab */
.logo-tab::after {
  top: 100%;
  left: var(--inset);
}

/* --- Floating action buttons ------------------------------------------- */

/* Fixed, not absolute: the actions ride along over every section, while the
   logo tab scrolls away with the hero — as on the reference site. */
.header-actions {
  position: fixed;
  z-index: 90;
  /* The frosted capsule grows symmetrically around the buttons, so the pad is
     taken back off the top offset and the button row keeps the axis it had —
     level with the middle of the logo tab. */
  top: calc(var(--inset) + ((var(--tab-h) - var(--btn-h)) / 2) - var(--actions-pad));
  right: var(--pad);
  display: flex;
  align-items: center;
  gap: 10px;
  /* The pad is held whether or not the capsule is showing, so switching the
     ground on and off never moves the buttons. */
  padding: var(--actions-pad);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}

/* Bare over the hero, where the buttons already read against the video; the
   frosted capsule fades in once the page is scrolled. The shadow is what
   gives it an edge over the light sections further down, where a translucent
   white fill on its own would be invisible. */
.header-actions.is-scrolled {
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 10px 30px rgba(0, 40, 75, .13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: var(--btn-h);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.pill-btn:hover {
  background: var(--green-600);
  transform: translateY(-2px);
}

.pill-btn--round {
  width: var(--btn-h);
}

.pill-btn--round svg {
  flex: none;
  width: 21px;
  height: 21px;
}

/* --- Phone / email: slide the contact detail out on hover --------------- */

.pill-btn--reveal {
  width: auto;
  gap: 0;
  /* 21px icon + 13.5px each side = the same 48px circle when collapsed */
  padding: 0 13.5px;
  overflow: hidden;
}

.reveal {
  display: grid;
  /* minmax(0, …) is what lets the track actually collapse to zero */
  grid-template-columns: minmax(0, 0fr);
  transition: grid-template-columns .45s var(--ease);
}

.reveal__text {
  min-width: 0;
  padding-left: 12px;
  padding-right: 4px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}

/* The width change is the whole effect — skip the lift the other pills get */
.pill-btn--reveal:hover,
.pill-btn--reveal:focus-visible {
  background: var(--green);
  transform: none;
}

.pill-btn--reveal:hover .reveal,
.pill-btn--reveal:focus-visible .reveal {
  grid-template-columns: minmax(0, 1fr);
}

.pill-btn--reveal:hover .reveal__text,
.pill-btn--reveal:focus-visible .reveal__text {
  opacity: 1;
  transform: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pill-btn--menu {
  padding: 0 24px;
}

.pill-btn__label {
  letter-spacing: .01em;
}

.burger {
  display: grid;
  gap: 5px;
  width: 26px;
}

.burger i {
  height: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.pill-btn--menu[aria-expanded="true"] .burger i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.pill-btn--menu[aria-expanded="true"] .burger i:nth-child(2) {
  opacity: 0;
}

.pill-btn--menu[aria-expanded="true"] .burger i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  position: relative;
  padding: 50px 0;
  background: var(--white);
}

.about__inner {
  position: relative;
  z-index: 1;
  max-width: 1105px;
  margin-inline: auto;
}

/* --- Decorative leaves --------------------------------------------------- */

/* Parked above and transparent; the script adds .is-in when the section comes
   into view and they settle down into place. Without JS the rule below leaves
   them visible and in position rather than never appearing at all. */
/* Inset from the left and right edges rather than hung past them, so the
   section needs no overflow clip and the bottom leaf is free to break past the
   foot into the band below, as the reference does. Each photograph carries its
   own angle, so nothing is rotated here — the float owns the transform on its
   own and the two can't fight over it. */
.about__leaf {
  position: absolute;
  z-index: 0;
  display: block;
  /* width: clamp(96px, 11vw, 190px);
  height: auto; */
  height: 100px;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 10px 22px rgba(20, 60, 20, .22));
  animation: leaf-float 6s ease-in-out infinite;
}

/* Up and down, forever. */
@keyframes leaf-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

.about__leaf--tr {
  top: clamp(10px, 1.6vw, 36px);
  right: clamp(20px, 4.5vw, 110px);
}

.about__leaf--bl {
  /* Breaks past the foot of the section, over whatever follows it */
  bottom: -10px;
  left: 30px;
  /* Off the other leaf's rhythm, so the pair never bob in lockstep */
  animation-duration: 7.6s;
  animation-delay: -2.4s;
}

/* Only the fade is scripted. The float is left to CSS, so the two never write
   to `transform` at the same time — and a blocked script leaves the leaves
   visible and still drifting rather than hidden for good. */
.js-reveal .about__leaf {
  opacity: 0;
  transition: opacity .9s var(--ease);
}

.js-reveal .about__leaf.is-in {
  opacity: 1;
}

.about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 clamp(20px, 2.2vw, 32px);
  padding: 9px 20px 9px 16px;
  border: 1px solid #c7e3c9;
  border-radius: 999px;
  background: #f0f8f1;
  color: #083c14;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about__eyebrow svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--green);
}

.about__title {
  margin: 0 0 clamp(28px, 3.4vw, 52px);
  color: var(--ink);
}

.about__accent {
  color: var(--green);
}

.about__text {
  margin: 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.625rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}

.about__text+.about__text {
  margin-top: clamp(20px, 2.2vw, 34px);
}

.btn-outline.about__cta {
  margin-top: clamp(30px, 3.4vw, 52px);
}

/* --- Headline figures ---------------------------------------------------- */

/* Ruled off from the copy above rather than boxed in a tint — the hairline
   groups the four figures without lifting them off the page. */
.about__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(30px, 3vw, 56px);
  margin: clamp(48px, 5.4vw, 88px) 0 0;
  padding: clamp(34px, 3.6vw, 58px) 0 0;
  border-top: 1px solid #d5e8d7;
  text-align: center;
}

.stat__icon {
  display: inline-grid;
  place-items: center;
  width: clamp(46px, 3.6vw, 58px);
  aspect-ratio: 1;
  border-radius: clamp(11px, 1vw, 15px);
  background: linear-gradient(135deg, var(--lime), var(--green));
  color: var(--white);
}

.stat__icon svg {
  width: 52%;
  height: 52%;
}

.stat__value {
  margin: clamp(14px, 1.4vw, 22px) 0 0;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: clamp(1.75rem, 2.7vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
  /* `color` is the fallback: without background-clip the solid green shows
     rather than nothing at all. */
  color: var(--green);
  background: linear-gradient(100deg, var(--green), var(--green-700));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat__label {
  margin: clamp(8px, .9vw, 14px) 0 0;
  font-size: clamp(.875rem, .95vw, 1rem);
  line-height: 1.45;
  color: #5b6f5e;
}

/* Scroll-driven reveal: words start muted and light up as the section
   travels up the viewport. Applied only once JS has split the text, so
   without JS the copy simply renders fully legible. */
.about__copy.is-split .word {
  color: var(--muted);
  transition: color .35s var(--ease);
}

.about__copy.is-split .word.is-lit {
  color: var(--ink);
}

/* ==========================================================================
   What makes us unique — pinned stage with a horizontally scrolling headline
   ========================================================================== */

/* Overlay covering the first viewport of .mission. Transparent, so the
   mission's own white background shows around the headline. */
.unique {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* A viewport of cover, plus the stage inset and the card's corner radius.
     At exactly 100svh the card stopped one inset short of the fold and a
     strip of the mission content showed underneath it while the wipe was
     still closed; the extra height carries the card's bottom edge, corners
     and all, past the bottom of the screen. */
  height: calc(100svh + var(--inset) + var(--radius));
  /* Above both the mission content (1) and the turbine (2) */
  z-index: 3;
  overflow: hidden;
  /* Nothing here is interactive; never swallow clicks on the content behind */
  pointer-events: none;
}

.unique__stage {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  padding: var(--inset);
}

.unique__marquee {
  position: relative;
  z-index: 2;
  /* Pull the card up so the letters sit across its top edge */
  margin: 0 0 -.3em;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: clamp(4.5rem, 13vw, 13rem);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--blue);
  will-change: transform;
}

.unique__card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--blue-700);
}

.unique__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Mission + capability cards
   ========================================================================== */

.mission {
  position: relative;
  z-index: 1;
  /* Top padding clears the overlaid headline so the content sits below it */
  padding: clamp(150px, 17vw, 330px) var(--pad) clamp(72px, 9vw, 130px);
  background: var(--white);
  /* Contains the turbine, which is deliberately hung past the right edge */
  overflow: hidden;
}

/* Anchored to the "Pretreatment" card so it keeps its relationship to that
   box at every width, rather than to the section as a whole. The z-index
   lifts this card, and the turbine with it, above its siblings. */
.feature-card--turbine {
  position: relative;
  z-index: 2;
}

.mission__turbine {
  position: absolute;
  /* In front of the cards, so the blades read across them */
  z-index: 1;
  /* Escapes the global `img { max-width: 100% }` reset, which would otherwise
     clamp this to the card's width and silently cap every size below. */
  max-width: none;
  /* Sized and offset so the rotor sits in the white band above the grid and
     the foot of the tower lands on the card's top edge.

     The join is pinned in one unit. 'bottom' used to take 4% of the card's
     HEIGHT while 'width' takes 160% of its WIDTH, so the two drifted apart
     as the viewport moved: a narrower card makes a smaller turbine, and its
     title wraps to a second line and makes the card taller, and both push the
     mast down into the copy. It read correctly at 1440 and sank 94px into the
     card by 1101. Anchoring to the card's top edge instead removes the card's
     height from the sum altogether.

     The GIF is 1500 square and does not sit flush in its frame: the mast runs
     out at y=1085 and the 415px below it hold only the tip of the
     down-pointing blade, so 27.67% of the picture is dead space beneath the
     tower. bottom: 100% lands the frame's edge on the card and the margin
     pushes it back down by that dead space, leaving the mast itself on the
     edge. Vertical percentage margins resolve against the container's WIDTH,
     so -44.3% is exactly 27.67% of a picture 160% as wide -- one unit, and
     the join holds at every width. */
  right: -7%;
  bottom: 100%;
  margin-bottom: -44.3%;
  width: 160%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Parked invisible until the scroll fades it in. Applied only under .js-gsap,
   so a blocked CDN leaves it at full strength rather than never appearing. */
.js-gsap .mission__turbine {
  opacity: 0;
}

.mission__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5vw, 84px);
  max-width: 1660px;
  margin-inline: auto;
}

/* Column layout so the button can be pushed to the foot of the card grid */
.mission__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mission__title {
  margin: 0 0 clamp(22px, 2.4vw, 36px);
  color: var(--ink);
}

.mission__accent {
  color: var(--green);
}

.mission__text {
  margin: 0 0 clamp(26px, 2.8vw, 40px);
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  line-height: 1.62;
  color: #2c3a44;
}

/* Labels the cards beside it rather than heading the column, so it is set
   small and tracked out rather than as a second title. */
.mission__sub {
  margin: 0 0 clamp(30px, 3.4vw, 48px);
  font-size: clamp(.8125rem, .9vw, .9375rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-600);
}

/* Outlined pill. `margin-top: auto` drops it to the foot of the column so it
   lines up with the bottom of the card grid; the paragraph's margin keeps a
   sensible gap once the grid collapses to one column and there's no slack. */
.btn-outline {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 21px 38px;
  border: 2px solid var(--green);
  border-radius: 999px;
  color: var(--green-600);
  font-size: 1.0625rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.btn-outline svg {
  width: 22px;
  height: 22px;
  transition: transform .3s var(--ease);
}

.btn-outline:hover {
  background: var(--green);
  color: var(--white);
}

.btn-outline:hover svg {
  transform: translateX(4px);
}

/* --- Cards -------------------------------------------------------------- */

/* An <ol>, since the four cards are the steps of one process in order. The
   list reset upstream only covers <ul>, so the numbering and the UA indent
   are cleared here. */
.mission__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Same notch-and-curve language as the services grid and the route cards: the
   icon becomes a badge dropped into a bite at the corner. Cut in white, the
   colour of the panel these sit on. */
.feature-card {
  --card-cut: var(--white);
  --badge-size: clamp(46px, 3.6vw, 66px);
  --notch-pad: clamp(8px, .7vw, 13px);
  --notch-flare: clamp(9px, .8vw, 15px);

  position: relative;
  padding: clamp(24px, 2vw, 34px);
  /* Room at the head for the badge in the corner */
  padding-right: calc(var(--badge-size) + clamp(22px, 2.2vw, 44px));
  border-radius: clamp(14px, 1.3vw, 20px);
  background: var(--mint);
}

/* No overflow clip here, unlike the service cards — the turbine on the second
   card is deliberately hung past its edge. The bite needs none: what spills
   past the corner lands on the white it is painted in. Kept at z-index 0 so
   the turbine, one layer up, still reads across it. */
.feature-card::after {
  content: '';
  position: absolute;
  top: calc(var(--notch-pad) * -1);
  right: calc(var(--notch-pad) * -1);
  z-index: 0;
  width: calc(var(--badge-size) + var(--notch-pad) * 2);
  height: calc(var(--badge-size) + var(--notch-pad) * 2);
  border-radius: 0 0 0 calc(var(--badge-size) * .72);
  background: var(--card-cut);
}

.feature-card__icon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--badge-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--white);
}

.feature-card__icon svg {
  width: 52%;
  height: 52%;
}

/* The pair of fillets easing the bite into the card's top and right edges */
.feature-card__icon::before,
.feature-card__icon::after {
  content: '';
  position: absolute;
  width: var(--notch-flare);
  height: var(--notch-flare);
  background:
    radial-gradient(circle at bottom left,
      transparent 0 var(--notch-flare),
      var(--card-cut) calc(var(--notch-flare) + .5px));
}

.feature-card__icon::before {
  top: 0;
  right: calc(100% + var(--notch-pad));
}

.feature-card__icon::after {
  top: calc(100% + var(--notch-pad));
  right: 0;
}

.feature-card__title {
  margin: 0 0 clamp(10px, .9vw, 14px);
  font-size: clamp(1.125rem, 1.35vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.3;
  color: #083c14;
}

.feature-card__text {
  margin: 0;
  font-size: clamp(.9375rem, 1vw, 1.0625rem);
  line-height: 1.7;
  color: #5b6f5e;
}

/* Parked for the zoom-in reveal. Only applied once JS confirms GSAP loaded,
   so a blocked CDN leaves the section perfectly visible. */
.js-gsap .mission__inner {
  will-change: transform;
}

/* ==========================================================================
   Our services — dark panel over a twelve-column grid of photo cards. Each
   card is a photo with a badge pinned to its top corner and a tinted caption
   block anchored to its foot; the spans alternate 5/7 then 7/5 down the rows
   so no two rows break in the same place.
   ========================================================================== */

.services {
  /* Kept local to the section — the page palette is blue-and-green on white,
     and none of this deep-green set is wanted anywhere else. */
  --svc-panel: var(--green-900);
  --svc-card: var(--green-800);
  --svc-badge: var(--lime-100);
  --svc-accent: var(--lime-200);
  --svc-text: #dcefdc;

  padding: 0 30px;
  background: var(--white);
}

.services__panel {
  max-width: 1660px;
  margin-inline: auto;
  padding: clamp(44px, 5vw, 88px) clamp(22px, 3.2vw, 56px) clamp(46px, 5vw, 84px);
  border-radius: var(--radius);
  background: #052D21;
}

/* --- Masthead ----------------------------------------------------------- */

.services__masthead {
  max-width: 64rem;
  margin: 0 auto clamp(32px, 3.6vw, 56px);
  text-align: center;
}

.services__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px 9px 16px;
  border-radius: 999px;
  background: rgba(185, 232, 148, .14);
  color: var(--svc-accent);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.services__eyebrow svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.services__title {
  margin: clamp(18px, 1.8vw, 28px) 0 0;
  color: var(--white);
}

.services__accent {
  color: var(--svc-accent);
}

.services__lead {
  margin: clamp(14px, 1.5vw, 22px) auto 0;
  max-width: 72ch;
  font-size: clamp(1rem, 1.05vw, 1.0625rem);
  line-height: 1.62;
  color: rgba(223, 238, 228, .82);
}

/* --- The card grid ------------------------------------------------------ */

/* Twelve columns rather than two, so the pair in each row can be split 5/7 or
   7/5 — one grid template can't hold two different column ratios, but spans
   set per card can. */
.services__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 2.2vw, 36px) clamp(18px, 1.4vw, 24px);
  margin: 0;
}

.service-card:nth-child(4n + 1),
.service-card:nth-child(4n + 4) {
  grid-column: span 5;
}

.service-card:nth-child(4n + 2),
.service-card:nth-child(4n + 3) {
  grid-column: span 7;
}

.service-card {
  /* Shared by the badge and by the bite the card cuts for it */
  --badge-size: clamp(52px, 4vw, 76px);
  --notch-pad: clamp(9px, .75vw, 14px);
  --notch-flare: clamp(10px, .85vw, 16px);
  /* Same idea at the foot, holding the photo off the caption */
  --cut-gap: clamp(4px, .4vw, 7px);
  --cut-flare: clamp(14px, 1.5vw, 28px);

  position: relative;
  /* The caption is the one thing in flow, held at the foot; the photo is
     behind it and fills the card. The head padding is the band of photo the
     caption is never allowed to reach, so a card whose copy runs long grows
     taller rather than swallowing its own picture. */
  display: flex;
  align-items: flex-end;
  min-height: clamp(285px, 28vw, 500px);
  padding-top: clamp(140px, 16vw, 250px);
  border-radius: 16px;
  /* Clips the photo's hover scale, and rounds the caption's outer corner to
     the card's own radius where the two meet. */
  overflow: hidden;
}

.service-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.service-card:hover .service-card__photo {
  transform: scale(1.05);
}

/* The bite out of the photo's top corner: a panel-coloured block, rounded only
   on the one corner that faces back into the picture. What overshoots the top
   and right of the card is clipped, and lands on the panel it matches anyway.
   It sits above the photo and below the badge that drops into it. */
.service-card::after {
  content: '';
  position: absolute;
  top: calc(var(--notch-pad) * -1);
  right: calc(var(--notch-pad) * -1);
  z-index: 1;
  width: calc(var(--badge-size) + var(--notch-pad) * 2);
  height: calc(var(--badge-size) + var(--notch-pad) * 2);
  /* Measured off the badge rather than set flat: the corner has to sweep wide
     enough to clear the circle sitting in it, or the bite reads as a square
     step instead of a curve. */
  border-radius: 0 0 0 calc(var(--badge-size) * .72);
  background: var(--svc-panel);
}

/* The two fillets that ease the bite back into the photo's top and right
   edges. Each is a square with a quarter disc lifted out of the corner facing
   away from its junction, so the picture curves into the bite rather than
   meeting it at a right angle. Hung off the badge because it is the one thing
   already anchored to the corner both of them are measured from. */
.service-card__badge::before,
.service-card__badge::after {
  content: '';
  position: absolute;
  width: var(--notch-flare);
  height: var(--notch-flare);
  background:
    radial-gradient(circle at bottom left,
      transparent 0 var(--notch-flare),
      var(--svc-panel) calc(var(--notch-flare) + .5px));
}

/* Against the top edge, just clear of the bite's left side */
.service-card__badge::before {
  top: 0;
  right: calc(100% + var(--notch-pad));
}

/* Against the right edge, just below the bite's foot */
.service-card__badge::after {
  top: calc(100% + var(--notch-pad));
  right: 0;
}

/* Sits hard in the corner of the photo, inside the bite above. */
.service-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--badge-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #DFFFBB;
  color: var(--green-700);
}

.service-card__badge svg {
  width: 54%;
  height: 54%;
}

.service-card__body {
  /* Positioned only so it paints over the photo, which is out of flow and
     would otherwise cover it */
  position: relative;
  z-index: 1;
  /* Narrow enough that a good part of the photo is still read as a photo */
  width: min(62%, 27rem);
  /* Flush into the card's foot corner, and ringed in the panel colour so the
     photo is held off it — the same bite the badge sits in, at the other end
     of the card. The half of the ring that falls outside the card is clipped,
     and lands on the panel it matches anyway. */
  padding: clamp(16px, 1.3vw, 24px) clamp(16px, 1.4vw, 26px) clamp(18px, 1.4vw, 26px);
  border-radius: clamp(12px, 1.05vw, 18px);
  background: #1A785D;
  box-shadow: 0 0 0 var(--cut-gap) var(--svc-panel);
}

/* The fillets that ease the ring back into the card's left and bottom edges,
   the same pair the badge has at its bite. Each is a square with a quarter
   disc lifted out of the corner facing away from its junction, so the picture
   rounds off into the gap instead of ending square against it. */
.service-card__body::before,
.service-card__body::after {
  content: '';
  position: absolute;
  width: var(--cut-flare);
  height: var(--cut-flare);
  background:
    radial-gradient(circle at top right,
      transparent 0 var(--cut-flare),
      var(--svc-panel) calc(var(--cut-flare) + .5px));
}

/* Butted to the caption's own edge, not the ring's. At the card's boundary the
   ring has already curved back in around the caption's corner, so offsetting
   these by the gap leaves a sliver of photo showing through between the two. */
.service-card__body::before {
  left: 0;
  bottom: 100%;
}

.service-card__body::after {
  bottom: 0;
  left: 100%;
}

/* Both are set airier than the rest of the page: the caption is a block of
   type sitting on a photograph, and it needs the leading to hold together
   against what is behind it. */
.service-card__title {
  /* Barely any: the space under the title is the line-height's, not a margin's */
  margin: 0 0 clamp(2px, .3vw, 5px);
  font-size: clamp(1.125rem, 1.45vw, 1.75rem);
  font-weight: 500;
  line-height: 1.5;
  color: #DDFFB8;
}

.service-card__text {
  margin: 0;
  font-size: clamp(.9375rem, 1.02vw, 1.1875rem);
  line-height: 1.78;
  color: #E3E6F0;
}

/* The card's own way out. Set as a bare arrow link rather than the green pill
   the Industries lanes carry — the caption block is already a tinted plate
   inside its ring, and a filled button inside it would read as a second card.
   The lime is the title's, so the link and the heading close the block in one
   colour. */
.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(10px, .9vw, 16px);
  color: var(--svc-accent);
  font-size: clamp(.875rem, .95vw, 1rem);
  font-weight: 600;
  transition: color .3s var(--ease), gap .3s var(--ease);
}

.service-card__more svg {
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform .3s var(--ease);
}

/* The gap opens as the arrow travels, so the two move together rather than
   the arrow sliding out from under the word. */
.service-card__more:hover,
.service-card__more:focus-visible {
  gap: 12px;
  color: var(--svc-badge);
}

.service-card__more:hover svg,
.service-card__more:focus-visible svg {
  transform: translateX(3px);
}

/* ==========================================================================
   Industries we serve — a centred masthead over a rail of photo lanes, one
   per sector.

   The rail rests with all five lanes closed, each down to a spine with its
   number and title set on its side and read from the foot upwards. Hovering
   one opens it — it takes most of the rail and carries its copy over a
   darkened photograph — and leaving the rail closes it again. Only flex-grow
   is animated, so the five lanes always fill the rail exactly and nothing
   reflows around them.
   ========================================================================== */

.uses {
  --lane-ink: #f3f7f2;
  --lane-text: rgba(255, 255, 255, .78);
  --lane-radius: clamp(10px, .8vw, 14px);

  /* How much wider the open lane is than a closed one. Seven lanes at these
     weights put the open one at 48% of the rail and the other six at 8.7%. */
  --lane-grow: 5.5;

  /* One screen, never more: the section is a column that fills the viewport,
     the masthead takes what it needs at the head of it, and the rail below
     is given whatever is left. Nothing here scrolls past the fold. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 6.4vw, 40px) clamp(24px, 9vw, 180px);
  background: var(--white);
}

/* Held well inside the page edges, so the rail reads as a plate laid on the
   white rather than a band running off both sides of it. */
.uses__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* Lets the rail below shrink out of its content rather than forcing the
     column past the viewport. */
  min-height: 0;
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  justify-content: center;
}

/* --- Masthead ------------------------------------------------------------ */

.uses__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  margin: 0 auto clamp(16px, 1.8vw, 30px);
  text-align: center;
}

.uses__eyebrow {
  color: var(--green-600);
  font-size: clamp(.75rem, .8vw, .8125rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.uses__title {
  margin: clamp(10px, 1.1vw, 18px) 0 0;
  /* Set on one line, as the reference has it. Released back to wrapping in
     the stacked layout at the foot of this sheet, where it can't hold. */
  max-width: none;
  white-space: nowrap;
  color: var(--ink);
}

.uses__lead {
  margin: clamp(10px, 1vw, 16px) 0 0;
  /* Sized so the sentence falls on three even lines under the heading */
  max-width: 68ch;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.6;
  color: #5b6f5e;
}

/* --- The rail ------------------------------------------------------------ */

.uses__rail {
  display: flex;
  gap: clamp(6px, .55vw, 10px);
  /* Takes whatever the masthead leaves of the screen. The floor is there for
     short landscape viewports, where a share of the height would be nothing. */
  flex: 1 1 auto;
  min-height: min(340px, 46vh);
  /* Keeps the lanes tall-and-narrow on a big screen rather than letting them
     grow into squares once there is a lot of height to hand out. */
  max-height: 900px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lane {
  position: relative;
  flex: 1 1 0;
  /* Enough that a closed lane still holds its spine comfortably; the grow
     factor decides everything above it. */
  min-width: clamp(64px, 6vw, 104px);
  border-radius: var(--lane-radius);
  overflow: hidden;
  background: #0c1c12;
  isolation: isolate;
  /* The one property the open/closed state animates. Widths stay out of it,
     so the five lanes always add up to the rail exactly. */
  transition: flex-grow .8s var(--ease);
}

.lane.is-open {
  flex-grow: var(--lane-grow);
}

.lane__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Held a little over size while closed, so opening settles the photograph
     back rather than snapping a new crop into place. */
  transform: scale(1.08);
  transition: transform 1.1s var(--ease);
}

.lane.is-open .lane__photo {
  transform: none;
}

/* The wash the spine is read against — kept off the top two thirds so a
   closed lane still shows its photograph rather than a dark slab. */
.lane::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(4, 22, 11, .84) 0%,
      rgba(4, 22, 11, .42) 24%,
      rgba(4, 22, 11, .1) 50%,
      rgba(4, 22, 11, 0) 76%);
  transition: background .6s var(--ease);
}

/* An open lane carries a number, a heading and three lines of copy over its
   photograph, so the wash is taken further up and deepened to hold them. */
.lane.is-open::after {
  background:
    linear-gradient(to top,
      rgba(4, 22, 11, .92) 0%,
      rgba(4, 22, 11, .62) 32%,
      rgba(4, 22, 11, .26) 62%,
      rgba(4, 22, 11, 0) 92%);
}

/* The hit area. Covers the whole lane and sits under the copy, which takes no
   clicks of its own — anywhere on the lane opens it. */
.lane__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.lane__hit:focus-visible {
  outline: 2px solid var(--lime-200);
  outline-offset: -6px;
}

/* --- Closed: the spine --------------------------------------------------- */

.lane__spine {
  position: absolute;
  /* Hard to the left edge and the foot, the same corner the open lane sets
     its heading in — so the title never appears to move when a lane opens. */
  left: clamp(16px, 1.4vw, 24px);
  bottom: clamp(16px, 1.4vw, 26px);
  z-index: 3;
  /* Set on its side, reading from the foot of the lane upwards */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--white);
  font-size: clamp(.9375rem, 1.05vw, 1.125rem);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

.lane.is-open .lane__spine {
  opacity: 0;
  transition-duration: .2s;
}

/* --- Open: the copy ------------------------------------------------------ */

.lane__body {
  position: absolute;
  left: clamp(16px, 1.4vw, 24px);
  bottom: clamp(16px, 1.4vw, 26px);
  z-index: 3;
  /* A fixed measure, so the copy doesn't reflow line by line while the lane
     is still widening — it is simply clipped until there is room for it. */
  width: clamp(240px, 26vw, 420px);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}

.lane.is-open .lane__body {
  opacity: 1;
  transform: none;
  /* Delayed so the copy arrives into a lane that has already made room */
  transition-delay: .18s;
}

/* The step number, set above the heading in the same lime the eyebrow uses */
.lane__step {
  display: block;
  margin: 0 0 clamp(6px, .6vw, 10px);
  color: var(--lime-200);
  font-size: clamp(.75rem, .85vw, .875rem);
  font-weight: 700;
  letter-spacing: .16em;
}

.lane__title {
  margin: 0;
  color: var(--lane-ink);
  font-size: clamp(1.125rem, 1.5vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
}

.lane__text {
  margin: clamp(10px, .9vw, 15px) 0 0;
  color: var(--lane-text);
  font-size: clamp(.875rem, .95vw, 1rem);
  line-height: 1.65;
}

/* The one thing in an open lane that takes a click of its own — the body
   around it stays transparent to the pointer so the whole lane still opens. */
.lane__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(14px, 1.3vw, 20px);
  /* The same green pill the panels elsewhere use, sized down to sit inside a
     lane rather than under a full-width block of copy. */
  padding: clamp(11px, 1vw, 15px) clamp(20px, 1.7vw, 28px);
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: clamp(.875rem, .95vw, 1rem);
  font-weight: 600;
  pointer-events: auto;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.lane__more svg {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform .3s var(--ease);
}

.lane__more:hover {
  background: var(--green-600);
  transform: translateY(-2px);
}

.lane__more:hover svg {
  transform: translateX(5px);
}


/* ==========================================================================
   How it works — the section copy beside the anaerobic digestion flow
   diagram, on the mint ground.
   ========================================================================== */

.feedstock {
  /* Set for the mint ground the section now carries */
  --stock-accent: var(--green-600);
  --stock-ink: var(--ink);

  padding: 50px 0;
  background: var(--mint);
}

.feedstock__inner {
  max-width: 1400px;
  margin-inline: auto;
  /* Copy on the left, the diagram beside it. The diagram takes the larger
     share — it carries eleven labelled boxes and stops being readable long
     before the three lines of copy do. */
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(32px, 4vw, 76px);
}

/* --- Masthead ------------------------------------------------------------ */

.feedstock__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  text-align: left;
}

.feedstock__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 22px 9px 18px;
  border: 1px solid rgba(2, 157, 40, .22);
  border-radius: 999px;
  background: rgba(2, 157, 40, .08);
  color: var(--stock-accent);
  font-size: clamp(.8125rem, .85vw, .9375rem);
  font-weight: 600;
}

.feedstock__eyebrow svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* Held back from the full-width size it carried as a centred masthead — it
   now sets in a column beside the diagram. */
.feedstock__title {
  margin: clamp(16px, 1.8vw, 30px) 0 0;
  font-size: clamp(1.875rem, 2.9vw, 3.25rem);
  color: var(--stock-ink);
}

.feedstock__lead {
  margin: clamp(14px, 1.4vw, 24px) 0 0;
  max-width: 48ch;
  font-size: clamp(1rem, 1.05vw, 1.1875rem);
  line-height: 1.62;
  color: #5b6f5e;
}

/* --- The flow diagram ---------------------------------------------------- */

/* The diagram is drawn on its own near-white ground, so the frame is just a
   thin ring and a little white to lift it off the mint. */
.feedstock__flow {
  margin: 0;
  padding: clamp(10px, 1vw, 18px);
  border: 1px solid rgba(13, 27, 38, .07);
  border-radius: clamp(16px, 1.6vw, 26px);
  background: rgba(255, 255, 255, .55);
}

.feedstock__flow-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(8px, .9vw, 14px);
  background: var(--white);
}


/* ==========================================================================
   What we deliver — a pair of tall photographs beside the
   capability list. The two photographs are one grid of their own so they
   always finish level with each other and with the copy beside them, however
   long the list runs.
   ========================================================================== */

.solutions {
  --sol-ink: #10301b;
  --sol-accent: #189a3c;
  --sol-text: #55605a;

  padding: clamp(56px, 6vw, 104px) clamp(24px, 4vw, 72px);
  /* background: #eef4ed; */
}

.solutions__inner {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  /* Stretch, not centre: the photographs take their height from the copy
     beside them, so the pair always finishes level with the last bullet. */
  align-items: stretch;
  gap: clamp(32px, 4vw, 72px);
  max-width: 1660px;
  margin-inline: auto;
}

/* --- The photographs ----------------------------------------------------- */

.solutions__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 18px);
  /* One row that takes the whole stretched height rather than sizing to the
     photographs — without it they keep their own aspect ratio and overflow. */
  grid-template-rows: minmax(0, 1fr);
  /* Only a floor, for a copy column that runs unusually short. What normally
     sets the height is the copy beside it. */
  min-height: clamp(280px, 26vw, 420px);
}

.solutions__media img {
  width: 100%;
  height: 100%;
  border-radius: clamp(12px, 1.1vw, 18px);
  object-fit: cover;
}

/* Centred within the stretched row, so a copy column shorter than the floor
   above sits level with the photographs rather than riding their top edge. */
.solutions__copy {
  align-self: center;
}

/* --- The copy ------------------------------------------------------------ */

.solutions__eyebrow {
  display: block;
  color: var(--green-800);
  font-size: clamp(.8125rem, .85vw, .9375rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Two colours in one headline: the first two lines carry the sentence, the
   <em> carries the point of it. */
.solutions__title {
  margin: clamp(14px, 1.5vw, 24px) 0 0;
  padding-bottom: clamp(18px, 1.9vw, 30px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.75rem, 2.9vw, 3.25rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--sol-ink);
}

.solutions__title em {
  color: var(--sol-accent);
  font-style: normal;
}

/* The short rule under the headline, set to the headline's own left edge */
.solutions__title::after {
  content: '';
  display: block;
  width: clamp(46px, 4vw, 70px);
  height: 3px;
  margin-top: clamp(18px, 1.9vw, 30px);
  border-radius: 2px;
  background: #a9d5a2;
}

.solutions__lead {
  margin: 0;
  /* max-width: 52ch; */
  font-size: clamp(.9375rem, 1.02vw, 1.0625rem);
  line-height: 1.65;
  color: var(--sol-text);
}

/* --- The capability list -------------------------------------------------- */

.solutions__list {
  margin: clamp(22px, 2.4vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.solutions__list li {
  position: relative;
  padding: 0 0 0 clamp(32px, 2.6vw, 42px);
  font-size: clamp(.9375rem, 1.02vw, 1.0625rem);
  line-height: 1.5;
  color: var(--sol-ink);
}

.solutions__list li+li {
  margin-top: clamp(12px, 1.2vw, 19px);
}

/* The filled disc, with the tick drawn as a rotated corner over it so the
   two always centre on each other whatever the copy is scaled to. */
.solutions__list li::before,
.solutions__list li::after {
  content: '';
  position: absolute;
}

.solutions__list li::before {
  left: 0;
  top: .08em;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: var(--sol-accent);
}

.solutions__list li::after {
  left: .5em;
  top: .38em;
  width: .3em;
  height: .58em;
  border: solid #fff;
  border-width: 0 .13em .13em 0;
  transform: rotate(45deg);
}


/* ==========================================================================
   Latest news — condensed masthead over a row of linked article cards
   ========================================================================== */

.news {
  padding: 60px 50px;
  /* The sun's tint — the third logo colour, carrying its own band of the page */
  background: #EBF4F1;
}

.news__inner {
  max-width: 1660px;
  margin-inline: auto;
}

.news__title {
  /* Right padding keeps the masthead clear of the fixed action pills, which
     ride over every section at the same top offset. */
  margin: 0 0 clamp(32px, 4vw, 62px);
  padding-right: clamp(0px, 26vw, 420px);
  color: var(--ink);
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 34px);
}

/* --- Card --------------------------------------------------------------- */

.news-card {
  display: flex;
}

/* The whole card is one link, so there's a single tab stop per article and
   the entire surface is clickable rather than just the "Read more" text. */
.news-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.news-card__link:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 65, 120, .12);
}

.news-card__media {
  margin: 0;
  overflow: hidden;
}

.news-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.news-card__link:hover .news-card__media img {
  transform: scale(1.04);
}

.news-card__body {
  /* Column so the foot can be pushed down and the three cards' "Read more"
     rows line up even when the headings run to different depths. */
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 1.8vw, 30px) clamp(20px, 1.8vw, 30px) clamp(18px, 1.6vw, 26px);
}

.news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  font-size: .9375rem;
  color: #5a6a75;
}

.news-card__tag {
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--sun-100);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.news-card__heading {
  margin: 0 0 clamp(24px, 2.4vw, 36px);
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.32;
  text-transform: uppercase;
  color: var(--ink);
}

.news-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Pins the row to the foot of the card whatever the heading's depth */
  margin: auto 0 0;
  padding-top: 4px;
  font-size: .9375rem;
}

.news-card__read {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #2c3a44;
}

.news-card__read svg {
  flex: none;
  width: 19px;
  height: 19px;
}

.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--green-600);
}

.news-card__more svg {
  flex: none;
  width: 19px;
  height: 19px;
  transition: transform .3s var(--ease);
}

.news-card__link:hover .news-card__more svg {
  transform: translateX(4px);
}

/* --- Foot --------------------------------------------------------------- */

.news__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(34px, 3.6vw, 58px);
}

/* ==========================================================================
   Call to action + footer — one closing block. The section and the footer
   share a ground, so the photograph reads as a card laid over the footer
   rather than as a band of its own.
   ========================================================================== */

.cta {
  padding: clamp(38px, 4.4vw, 72px) var(--pad) 0;
  background: var(--blue-900);
}

.cta__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3.4vw, 64px);
  min-height: clamp(250px, 24vw, 380px);
  max-width: 1660px;
  margin-inline: auto;
  padding: clamp(32px, 3.8vw, 68px);
  border-radius: clamp(14px, 1.4vw, 22px);
  overflow: hidden;
  isolation: isolate;
}

.cta__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deep enough on the left for the headline to hold, easing off to the right
   where the plant is worth seeing. */
.cta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* background:
    linear-gradient(to right, rgba(1, 20, 47, .78) 0%, rgba(1, 20, 47, .42) 62%, rgba(1, 20, 47, .3) 100%); */
}

.cta__title {
  margin: 0;
  color: var(--white);
  text-shadow: 0 2px 26px rgba(1, 20, 47, .45);
}

.cta__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cta__text {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 16px rgba(1, 20, 47, .4);
}

.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 2.2vw, 32px);
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.cta__btn svg {
  width: 20px;
  height: 20px;
  transition: transform .3s var(--ease);
}

.cta__btn:hover {
  background: var(--green-600);
  transform: translateY(-2px);
}

.cta__btn:hover svg {
  transform: translateX(4px);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  padding: clamp(40px, 4.4vw, 72px) var(--pad) clamp(20px, 2.2vw, 32px);
  background: var(--blue-900);
  color: var(--white);
}

.site-footer__inner {
  max-width: 1660px;
  margin-inline: auto;
}

/* Logo, the two contact lines and the social row, all on one line */
.footer__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding-bottom: clamp(30px, 3.4vw, 56px);
}

.footer__logo {
  display: block;
  width: clamp(150px, 13vw, 200px);
}

.footer__logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .95;
}

.footer__contact {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
}

.footer__contact a {
  transition: color .3s var(--ease);
}

.footer__contact a:hover {
  color: var(--lime-200);
}

.footer__social {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Outlined rather than filled, as the reference has them */
.footer__social a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: var(--white);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.footer__social svg {
  width: 19px;
  height: 19px;
}

.footer__social a:hover {
  border-color: var(--green);
  background: var(--green);
  transform: translateY(-2px);
}

/* --- Address beside the link columns -------------------------------------- */

/* Address, then the menu split across three columns beside it */
.footer__links {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px);
  padding-bottom: clamp(26px, 3vw, 46px);
}

.footer__address {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .8);
}

.footer-col__title {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime-200);
}

.footer-col__list li+li {
  margin-top: 11px;
}

.footer-col__list a {
  display: block;
  font-size: clamp(.9375rem, 1vw, 1.0625rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
  transition: color .3s var(--ease);
}

.footer-col__list a:hover {
  color: var(--lime-200);
}

/* --- Base bar ------------------------------------------------------------ */

.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: clamp(18px, 2vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .6);
}

.footer__legal,
.footer__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(18px, 2vw, 34px);
  margin: 0;
}

.footer__legal a:hover,
.footer__top-link:hover {
  color: var(--white);
}

.footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: color .3s var(--ease);
}

.footer__top-link svg {
  width: 18px;
  height: 18px;
  transition: transform .3s var(--ease);
}

.footer__top-link:hover svg {
  transform: translateY(-3px);
}

/* ==========================================================================
   Overlay navigation — full-bleed light ground carrying a white card of
   links, two action pills and a newsletter panel
   ========================================================================== */

.overlay-nav {
  position: fixed;
  inset: 0;
  /* Under .header-actions (90), so the close button stays reachable */
  z-index: 80;
  background: #eef2f6;
  opacity: 0;
  visibility: hidden;
  transform: scale(.99);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
}

/* The attribute is kept for assistive tech; the transition needs the element
   to stay in the box tree, so `visibility` does the actual hiding. */
.overlay-nav[hidden] {
  display: block;
}

.overlay-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.overlay-nav__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
  overflow-y: auto;
}

.overlay-nav__logo {
  flex: none;
  /* The mark is 3:2, not the wide lockup the old markup declared, so the box
     is sized on width and the image keeps its own height. */
  width: clamp(120px, 11vw, 130px);
  margin-bottom: clamp(24px, 3vw, 48px);
}

.overlay-nav__logo img {
  width: 100%;
  height: auto;
}

.overlay-nav__grid {
  flex: 1;
  display: grid;
  /* card + pills | newsletter panel, which spans both rows */
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(14px, 1.4vw, 24px);
  min-height: 0;
}

/* --- Link card ----------------------------------------------------------- */

.overlay-nav__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 2.6vw, 44px);
  padding: clamp(28px, 3.4vw, 64px) clamp(28px, 3.4vw, 60px);
  border-radius: var(--radius);
  background: var(--white);
}

/* The nine sitemap links run down two columns — five then four — rather than
   one tall stack that would push the card past the overlay. */
.overlay-nav__list {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  /* Even columns, so the two halves of the sitemap sit across the card rather
     than bunching against its left edge. */
  grid-auto-columns: minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: clamp(10px, 1.4vw, 22px);
}

.overlay-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  font-size: clamp(1.375rem, 2.1vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--blue);
  transition: color .3s var(--ease), transform .3s var(--ease);
}

/* One item now — the quote CTA, set under the sitemap rather than in a
   column of its own, with a rule to part it from the links. */
.overlay-nav__list--sub {
  grid-template-rows: auto;
  padding-top: clamp(18px, 2vw, 32px);
  border-top: 1px solid rgba(13, 27, 38, .08);
}

.overlay-nav__list--sub a {
  font-size: clamp(1.125rem, 1.55vw, 1.5rem);
}

.overlay-nav__list a:hover {
  color: var(--green-600);
  transform: translateX(6px);
}

.overlay-nav__accent {
  color: var(--green-600);
}

.overlay-nav__accent svg {
  width: 24px;
  height: 24px;
  transition: transform .3s var(--ease);
}

.overlay-nav__accent:hover svg {
  transform: translateX(5px);
}

/* --- Action pills -------------------------------------------------------- */

.overlay-nav__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 1.7vw, 26px) clamp(22px, 2vw, 32px);
  border: 1.5px solid rgba(0, 65, 120, .3);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue);
  font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
  font-weight: 500;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.nav-pill__icon svg {
  width: 24px;
  height: 24px;
}

.nav-pill__label {
  /* Takes the slack so the arrow is pinned to the right edge */
  flex: 1;
}

.nav-pill__arrow {
  flex: none;
  width: 22px;
  height: 22px;
  transition: transform .3s var(--ease);
}

.nav-pill:hover {
  border-color: var(--blue);
  background: #f7fafc;
}

.nav-pill:hover .nav-pill__arrow {
  transform: translateX(5px);
}

/* --- Newsletter panel ---------------------------------------------------- */

.overlay-nav__promo {
  position: relative;
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--blue-700);
  isolation: isolate;
}

.overlay-nav__promo-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Weighted to the foot, where the copy sits, rather than dipping in the middle
   and leaving the photograph to compete with the text over it. */
.overlay-nav__promo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(1, 20, 47, .22) 0%,
      rgba(1, 20, 47, .42) 40%,
      rgba(1, 20, 47, .9) 100%);
}

/* Heading, copy and button as one block at the foot. Previously the button was
   pushed to the bottom on its own, which left a dead gap down the middle of a
   panel this tall. */
.overlay-nav__promo-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  padding: clamp(26px, 2.6vw, 44px);
}

.overlay-nav__promo-title {
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: clamp(1.75rem, 2.7vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

.overlay-nav__promo-text {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(.9375rem, 1vw, 1.0625rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}

/* The panel now carries the latest blog rather than a newsletter pitch: the
   card's own meta row, headline and read time, set light over the photograph. */
.overlay-nav__promo-body {
  text-decoration: none;
}

.overlay-nav__promo-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .78);
}

.overlay-nav__promo-tag {
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--sun-100);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

/* Set below the newsletter headline's size — a blog title runs long where
   "Subscribe" did not, and would otherwise crowd the panel. */
.overlay-nav__promo-title--blog {
  margin-bottom: clamp(14px, 1.4vw, 20px);
  font-size: clamp(1.375rem, 1.95vw, 2rem);
  line-height: 1.15;
}

.overlay-nav__promo-read {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(.9375rem, 1vw, 1.0625rem);
  color: rgba(255, 255, 255, .88);
}

.overlay-nav__promo-read svg {
  flex: none;
  width: 19px;
  height: 19px;
}

/* The whole panel is the link, so the button answers a hover anywhere on it */
.overlay-nav__promo-body:hover .btn-navy {
  background: var(--green-600);
  transform: translateY(-2px);
}

.overlay-nav__promo-body:hover .btn-navy svg {
  transform: translateX(5px);
}

/* Solid counterpart to .btn-outline, for use on the darkened photograph */
.btn-navy {
  /* Sits with the copy, not adrift at the foot of the panel */
  margin-top: clamp(20px, 2vw, 30px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 34px;
  border-radius: 999px;
  /* Green, not navy: the panel behind it is a blue-grey photograph, and a navy
     button on top of that disappears into it. */
  background: var(--green);
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 600;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.btn-navy svg {
  width: 22px;
  height: 22px;
  transition: transform .3s var(--ease);
}

.btn-navy:hover {
  background: var(--green-600);
  transform: translateY(-2px);
}

.btn-navy:hover svg {
  transform: translateX(5px);
}

body.nav-open {
  overflow: hidden;
}

/* ==========================================================================
   Business page — inner banner

   The frame is the home page's hero frame and so is the copy pattern: the
   same inset and radius, so the notched white logo tab bites into this card
   exactly as it bites into the video, and the words sit at the foot of the
   card over the scrim rather than on a plate of their own. Only what fills
   the card changes — a photograph instead of the loop, and a page title and
   breadcrumb instead of the banner headline and its pills.
   ========================================================================== */

.innerbanner {
  /* Positioned, because .site-header and the overlay nav are absolute
     children of it — the same job .hero does on the home page. */
  position: relative;
  padding: var(--inset);
}

.innerbanner__card {
  position: relative;
  height: clamp(340px, 38vw, 520px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--green-800);
  isolation: isolate;
}

.innerbanner__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The hero's own scrim, in the greens the banner photographs are shot in:
   the title sits straight on the picture here, so it has the same work to do
   — hold the foot of the card dark enough for white type. */
.innerbanner__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(4, 42, 16, .76) 0%, rgba(4, 42, 16, .44) 32%, rgba(4, 42, 16, .10) 60%, rgba(4, 42, 16, 0) 80%),
    linear-gradient(to right, rgba(4, 42, 16, .34) 0%, rgba(4, 42, 16, 0) 48%);
}

/* The copy block, sitting at the foot of the card — .hero__body's job and
   its geometry, so the two banners line their words up on the same edge. */
.innerbanner__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: var(--pad);
}

.innerbanner__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* The hero headline's setting, one step down in size: this names a page
   rather than opening the site, but it is still the banner's own words and
   keeps the condensed uppercase they are set in. */
.innerbanner__title {
  margin: 0;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: clamp(2rem, 3.6vw, 4.25rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 30px rgba(0, 20, 38, .35);
}

/* A headline rather than a page name: it runs to two or three lines, so it is
   set a step down and held clear of the revolving seal in the right-hand
   corner, which a full-width line would otherwise run straight into. */
.innerbanner__title--post {
  max-width: 24ch;
  font-size: clamp(1.625rem, 2.6vw, 3rem);
  line-height: 1.04;
}

/* Above the title, not under it: the trail says where the reader is before
   the heading names it, which is the order a breadcrumb is read in. */
.innerbanner__crumbs {
  margin: 0 0 clamp(12px, 1.3vw, 20px);
}

/* The hero caption's setting, held to two lines at the sizes the banner is
   read at — it introduces the page rather than carrying its argument. */
.innerbanner__caption {
  margin: clamp(14px, 1.4vw, 22px) 0 0;
  max-width: 58ch;
  font-size: clamp(.9375rem, 1.05vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 18px rgba(0, 20, 38, .4);
}

.innerbanner__crumbs ol {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(.875rem, .95vw, 1rem);
  /* The caption's shadow on the home page: the trail sits straight on the
     photograph now, not on a plate. */
  text-shadow: 0 1px 18px rgba(0, 20, 38, .4);
}

.innerbanner__crumbs a {
  color: rgba(255, 255, 255, .92);
  transition: color .3s var(--ease);
}

.innerbanner__crumbs a:hover {
  color: var(--lime-100);
}

/* The page itself, and the only step in the trail that isn't a link */
.innerbanner__crumbs [aria-current] {
  color: var(--lime-100);
}

/* The chevron between the two, drawn rather than typed so it keeps its
   weight against the label and stays out of the accessible name. */
.innerbanner__crumbs li+li::before {
  content: '';
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-right: 10px;
  border: solid rgba(255, 255, 255, .72);
  border-width: 1.6px 1.6px 0 0;
  transform: translateY(-1px) rotate(45deg);
}


/* ==========================================================================
   CBG production — the photograph and the definition beside it

   The two share an edge rather than sitting apart: a grid with no gap, the
   card centred against a taller photograph so the picture runs past it top
   and bottom. The leaf seal drops into a bite cut out of the photograph's
   top corner — the same badge-in-a-notch the service cards carry, with the
   white page standing in for the dark panel there.
   ========================================================================== */

/* Tight top and bottom. The banner above already carries the page frame's
   inset and the dark panel below brings its own padding, so the section only
   needs enough to keep the photograph off both — not a full band of white. */
.cbg {
  /* The page frame's own inset for the sides, not the wider section gutter:
     it puts the photograph on the same left and right edges as the banner
     card above it and the dark panel below. */
  padding: clamp(24px, 2.6vw, 44px) var(--inset) clamp(26px, 2.8vw, 48px);
  background: var(--white);
}

.cbg__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center;
  max-width: 1560px;
  margin: 0 auto;
}

.cbg__media {
  /* Shared by the badge and by the bite the photograph cuts for it */
  --badge-size: clamp(58px, 4.6vw, 88px);
  --notch-pad: clamp(9px, .8vw, 15px);
  --notch-flare: clamp(11px, .95vw, 18px);
  /* The ground the bite and its fillets are painted in */
  --notch-panel: var(--white);

  position: relative;
  margin: 0;
  border-radius: clamp(20px, 2vw, 36px);
  overflow: hidden;
}

.cbg__photo {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4.6;
  object-fit: cover;
}

/* The bite: a page-coloured block rounded only on the corner facing back
   into the picture. What overshoots the top and right is clipped, and lands
   on the page it matches anyway. */
.cbg__media::after {
  content: '';
  position: absolute;
  top: calc(var(--notch-pad) * -1);
  right: calc(var(--notch-pad) * -1);
  z-index: 1;
  width: calc(var(--badge-size) + var(--notch-pad) * 2);
  height: calc(var(--badge-size) + var(--notch-pad) * 2);
  border-radius: 0 0 0 calc(var(--badge-size) * .72);
  background: var(--notch-panel);
}

.cbg__badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--badge-size);
  aspect-ratio: 1;
  border-radius: 50%;
  /* The deep teal the mark is set in on the design — darker than the plate
     greens, so the white sprout inside it reads at this size. */
  background: #0A545C;
  color: var(--white);
}

.cbg__badge svg {
  width: 64%;
  height: 64%;
}

/* The pair of fillets easing the bite back into the photograph's top and
   right edges */
.cbg__badge::before,
.cbg__badge::after {
  content: '';
  position: absolute;
  width: var(--notch-flare);
  height: var(--notch-flare);
  background:
    radial-gradient(circle at bottom left,
      transparent 0 var(--notch-flare),
      var(--notch-panel) calc(var(--notch-flare) + .5px));
}

.cbg__badge::before {
  top: 0;
  right: calc(100% + var(--notch-pad));
}

.cbg__badge::after {
  top: calc(100% + var(--notch-pad));
  right: 0;
}

/* Hairline rather than a tint: the card is the page's own white, and the rule
   is only there to say where the photograph stops and the copy starts. */
.cbg__card {
  padding: clamp(28px, 3.2vw, 60px) clamp(24px, 2.8vw, 54px);
  border: 1px solid rgba(13, 27, 38, .12);
  background: var(--white);
}

.cbg__title {
  margin: 0 0 clamp(16px, 1.8vw, 28px);
  /* A step down from a section heading — it titles a definition, not a
     section of the site. */
  font-size: clamp(1.5rem, 2.35vw, 2.5rem);
  color: var(--green-800);
}

.cbg__text {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-size: clamp(.9375rem, 1vw, 1.125rem);
  line-height: 1.72;
  color: rgba(13, 27, 38, .82);
}

.cbg__text:last-child {
  margin-bottom: 0;
}

.cbg__text strong {
  font-weight: 700;
  color: var(--ink);
}


/* ==========================================================================
   How it works — the four stages on the dark panel

   Photograph and masthead share the top of the panel; the stages run four
   across beneath. Each is a plate in the same mid green the service captions
   carry, with its number dropped into a bite cut out of its top corner so
   the panel behind shows through the gap.
   ========================================================================== */

/* Sides only. The panel below it opens with its own top padding, so a bottom
   band here would only double it up. */
.works {
  padding: 0 var(--inset);
  background: var(--white);
}

.works__panel {
  --works-panel: var(--green-900);

  padding: clamp(36px, 4.4vw, 84px) clamp(24px, 3.2vw, 64px);
  border-radius: var(--radius);
  background: var(--works-panel);
}

.works__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(28px, 3.4vw, 64px);
  margin-bottom: clamp(32px, 3.6vw, 60px);
}

.works__media {
  margin: 0;
  border-radius: clamp(14px, 1.2vw, 20px);
  overflow: hidden;
}

.works__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

/* The diagram is drawn on white and carries labels out to its own edges, so
   it sits on a white plate and is fitted whole rather than cropped to fill —
   a cover crop would cut the callouts off. */
.works__media--diagram {
  padding: clamp(14px, 1.6vw, 26px);
  background: var(--white);
}

.works__media--diagram img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.works__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px 9px 16px;
  border-radius: 999px;
  background: rgba(185, 232, 148, .14);
  color: var(--lime-100);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.works__eyebrow svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.works__title {
  margin: clamp(18px, 1.8vw, 30px) 0 0;
  color: var(--white);
}

/* Set on its own line in the design, so the accent reads as the second half
   of the sentence rather than a highlighted phrase inside it. */
.works__accent {
  display: block;
  color: var(--lime-100);
}

.works__lead {
  margin: clamp(16px, 1.6vw, 26px) 0 0;
  max-width: 62ch;
  font-size: clamp(.9375rem, .98vw, 1.0625rem);
  line-height: 1.7;
  color: rgba(223, 238, 228, .78);
}

.works__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  /* Shared by the number and by the bite the plate cuts for it */
  --badge-size: clamp(40px, 3vw, 54px);
  --notch-pad: clamp(7px, .6vw, 11px);
  --notch-flare: clamp(9px, .75vw, 14px);
  --notch-panel: var(--works-panel);

  position: relative;
  /* The head padding is the band the copy is never allowed to reach, so the
     number always has its corner to itself however short the plate runs. */
  padding: clamp(26px, 2.4vw, 40px) clamp(18px, 1.5vw, 26px) clamp(22px, 2vw, 32px);
  border-radius: clamp(12px, 1.05vw, 18px);
  background: #1A785D;
  overflow: hidden;
}

.step::after {
  content: '';
  position: absolute;
  top: calc(var(--notch-pad) * -1);
  right: calc(var(--notch-pad) * -1);
  z-index: 1;
  width: calc(var(--badge-size) + var(--notch-pad) * 2);
  height: calc(var(--badge-size) + var(--notch-pad) * 2);
  border-radius: 0 0 0 calc(var(--badge-size) * .72);
  background: var(--notch-panel);
}

.step__num {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--badge-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #DFFFBB;
  color: var(--green-700);
  font-size: clamp(.875rem, .95vw, 1.0625rem);
  font-weight: 600;
}

.step__num::before,
.step__num::after {
  content: '';
  position: absolute;
  width: var(--notch-flare);
  height: var(--notch-flare);
  background:
    radial-gradient(circle at bottom left,
      transparent 0 var(--notch-flare),
      var(--notch-panel) calc(var(--notch-flare) + .5px));
}

.step__num::before {
  top: 0;
  right: calc(100% + var(--notch-pad));
}

.step__num::after {
  top: calc(100% + var(--notch-pad));
  right: 0;
}

.step__title {
  /* Held clear of the number's corner, so a two-word title wraps under it
     rather than running into the bite. */
  max-width: calc(100% - var(--badge-size));
  margin: 0 0 clamp(8px, .8vw, 14px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.35;
  color: #DDFFB8;
}

.step__text {
  margin: 0;
  font-size: clamp(.8125rem, .88vw, .9375rem);
  line-height: 1.68;
  color: #E3E6F0;
}


/* ==========================================================================
   Why choose us — masthead beside its lead, over a two-by-two of plates

   The same badge-in-a-bite as the stages above, inverted: a deep green disc
   dropped into a notch cut out of a mint plate, with the white page showing
   through the gap instead of the dark panel.
   ========================================================================== */

/* Same reasoning as .cbg above: the dark panel over it and the footer under
   it both bring their own edge, so the white here is a gap rather than a band. */
.why {
  padding: clamp(30px, 3.2vw, 54px) var(--pad) clamp(32px, 3.4vw, 58px);
  background: var(--white);
}

.why__inner {
  max-width: 1560px;
  margin: 0 auto;
}

/* The heading takes the left half and the lead the right, set against the
   heading's last line rather than its first — the arrangement in the design,
   and it keeps the lead clear of a heading that wraps to three. */
.why__masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 3vw, 56px);
  margin-bottom: clamp(34px, 3.8vw, 62px);
}

.why__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  background: #F4FFEA;
  color: var(--green-600);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.why__eyebrow svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.why__title {
  margin: clamp(16px, 1.6vw, 26px) 0 0;
  color: var(--green-800);
}

.why__lead {
  margin: 0;
  font-size: clamp(.9375rem, .98vw, 1.0625rem);
  line-height: 1.72;
  color: rgba(13, 27, 38, .62);
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.perk {
  --badge-size: clamp(48px, 3.6vw, 66px);
  --notch-pad: clamp(7px, .65vw, 12px);
  --notch-flare: clamp(9px, .8vw, 15px);
  --notch-panel: var(--white);

  position: relative;
  padding: clamp(24px, 2.2vw, 36px) clamp(20px, 1.9vw, 34px) clamp(28px, 2.6vw, 46px);
  border-radius: clamp(12px, 1.05vw, 18px);
  background: var(--mint);
  overflow: hidden;
}

.perk::after {
  content: '';
  position: absolute;
  top: calc(var(--notch-pad) * -1);
  right: calc(var(--notch-pad) * -1);
  z-index: 1;
  width: calc(var(--badge-size) + var(--notch-pad) * 2);
  height: calc(var(--badge-size) + var(--notch-pad) * 2);
  border-radius: 0 0 0 calc(var(--badge-size) * .72);
  background: var(--notch-panel);
}

.perk__badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--badge-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1A785D;
  color: var(--white);
}

.perk__badge svg {
  width: 58%;
  height: 58%;
}

.perk__badge::before,
.perk__badge::after {
  content: '';
  position: absolute;
  width: var(--notch-flare);
  height: var(--notch-flare);
  background:
    radial-gradient(circle at bottom left,
      transparent 0 var(--notch-flare),
      var(--notch-panel) calc(var(--notch-flare) + .5px));
}

.perk__badge::before {
  top: 0;
  right: calc(100% + var(--notch-pad));
}

.perk__badge::after {
  top: calc(100% + var(--notch-pad));
  right: 0;
}

.perk__title {
  max-width: calc(100% - var(--badge-size));
  margin: 0 0 clamp(8px, .8vw, 14px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.0625rem, 1.25vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.perk__text {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(.875rem, .93vw, 1rem);
  line-height: 1.7;
  color: rgba(13, 27, 38, .62);
}

/* ==========================================================================
   About page — about our company

   Collage on the left, statement on the right. The three photographs sit on
   a two-column grid inside the collage: a tall plate down the left with the
   years-of-experience figure under it, and two square plates stacked beside
   it. The copy is centred against the collage rather than hung from its top,
   which is what puts the eyebrow level with the fold between the two
   stacked photographs on the design.
   ========================================================================== */

/* The page frame's inset for the sides, as .cbg uses on the business page:
   it puts the collage on the same left and right edges as the banner card
   above it. */
.company {
  padding: clamp(34px, 4vw, 76px) var(--inset) clamp(28px, 3.2vw, 54px);
  background: var(--white);
}

.company__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 4.4vw, 84px);
  max-width: 1560px;
  margin: 0 auto;
}

/* Two columns, each stacking its own plates. The splits down the two sides
   don't line up — photograph and figure on the left against two photographs
   on the right — so this is a pair of columns rather than one grid of cells.
   The right column carries the crops, and so sets the height; the left one
   stretches to meet it. That is what gives the collage its straight foot. */
.company__collage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(10px, 1.1vw, 18px);
  align-items: stretch;
}

.company__col {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 18px);
  min-width: 0;
}

.company__tile {
  margin: 0;
  border-radius: clamp(14px, 1.4vw, 24px);
  overflow: hidden;
  background: var(--mint);
}

.company__tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3.6;
  object-fit: cover;
}

/* The tall plate takes whatever the column has left once the figure under it
   is laid out, rather than holding a crop of its own — so its foot lands on
   the foot of the two plates beside it however tall those come out. The
   min-height is only there for the case where they are still loading and the
   column has nothing to measure. */
.company__tile--tall {
  position: relative;
  flex: 1 1 auto;
  /* Only a floor for the case where the column beside it has nothing to
     measure yet — in the ordinary run the two plates opposite set the height
     and this never comes into play. */
  min-height: clamp(300px, 30vw, 500px);
}

/* Taken out of the flow: left in it, a percentage height against an
   auto-height figure resolves to auto and the photograph reverts to its own
   4:7 crop, which is deeper than the column has to give and pushes the foot
   of the collage past the plates opposite. */
.company__tile--tall img {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* Slightly deeper than the pair of engineers above it, as the design has it */
.company__col .company__tile:last-child img {
  aspect-ratio: 4 / 3.7;
}

/* Under the tall plate, on the same column — pale rather than white, so it
   reads as part of the collage and not as a card floating over it. */
.company__stat {
  position: relative;
  flex: 0 0 auto;
  padding: clamp(16px, 1.6vw, 26px) clamp(18px, 1.8vw, 30px) clamp(18px, 1.8vw, 28px);
  border-radius: clamp(14px, 1.4vw, 24px);
  background: #F3F8F1;
  overflow: hidden;
}

.company__stat-icon {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: clamp(34px, 2.7vw, 46px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #E1F0DC;
  color: var(--green-700);
  vertical-align: middle;
}

.company__stat-icon svg {
  width: 58%;
  height: 58%;
}

/* The figure sits beside its own icon rather than under it: both are inline,
   so the value pulls up level with the disc. */
.company__stat-value {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 0 clamp(10px, 1vw, 16px);
  font-size: clamp(1.75rem, 2.9vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--green-800);
  vertical-align: middle;
}

.company__stat-label {
  position: relative;
  z-index: 1;
  margin: clamp(8px, .9vw, 14px) 0 0;
  font-size: clamp(.875rem, .95vw, 1.0625rem);
  font-weight: 500;
  color: rgba(13, 27, 38, .72);
}

/* Ghosted into the corner of the plate, and clipped by it */
.company__stat-leaf {
  position: absolute;
  right: -6%;
  bottom: -22%;
  width: clamp(90px, 9vw, 150px);
  height: auto;
  color: #DCEBD4;
  pointer-events: none;
}

/* --- The statement beside it --------------------------------------------- */

/* Not the pill the home page's sections open with: a plain line of small
   caps ruled off underneath, which is what the design carries here. */
.company__eyebrow {
  margin: 0 0 clamp(18px, 2vw, 32px);
  font-size: clamp(.8125rem, .92vw, 1rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-800);
}

.company__eyebrow::after {
  content: '';
  display: block;
  width: clamp(48px, 4.4vw, 74px);
  height: 3px;
  margin-top: clamp(10px, 1vw, 16px);
  border-radius: 2px;
  background: var(--green-600);
}

.company__title {
  margin: 0 0 clamp(18px, 2vw, 30px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.625rem, 2.9vw, 3.125rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--ink);
}

.company__lead {
  margin: 0;
  /* max-width: 40ch; */
  font-size: clamp(1rem, 1.15vw, 1.3125rem);
  line-height: 1.68;
  color: rgba(13, 27, 38, .7);
}


/* ==========================================================================
   About page — our impact

   One card, not two. The photograph fills it and a mint wash is laid over
   the left, fading out across the middle, so the copy has a ground to sit
   on without the plate ever showing a seam between picture and panel.
   ========================================================================== */

.impact {
  padding: clamp(26px, 3vw, 52px) var(--inset);
  background: var(--white);
}

.impact__card {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  border-radius: clamp(16px, 1.6vw, 28px);
  overflow: hidden;
  background: #F1F8EE;
  isolation: isolate;
}

.impact__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Opaque at the left edge and gone by the middle, so the words never sit on
   the photograph and the photograph is never cut by a hard edge. */
.impact__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      #EEF7EA 0%,
      #EEF7EA 30%,
      rgba(238, 247, 234, .92) 40%,
      rgba(238, 247, 234, .55) 50%,
      rgba(238, 247, 234, 0) 62%);
}

.impact__body {
  position: relative;
  z-index: 1;
  width: min(62%, 760px);
  padding: clamp(28px, 3.4vw, 62px) clamp(24px, 3vw, 56px);
}

.impact__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(12px, 1.4vw, 22px);
  font-size: clamp(.75rem, .85vw, .9375rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #4a5b4c;
}

.impact__rule {
  display: block;
  width: clamp(24px, 2.4vw, 40px);
  height: 2px;
  border-radius: 2px;
  background: var(--green-600);
}

.impact__title {
  margin: 0 0 clamp(12px, 1.3vw, 20px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.5rem, 2.9vw, 3.125rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--ink);
}

.impact__accent {
  display: block;
  color: #35A72B;
}

.impact__lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(.9375rem, 1vw, 1.125rem);
  line-height: 1.62;
  color: rgba(13, 27, 38, .72);
}

/* Four across and left-ranged rather than centred: they read as a line of
   figures under the paragraph, not as a row of tiles. */
.impact__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: clamp(18px, 2.6vw, 46px);
  margin: clamp(26px, 3vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.impact-stat__icon {
  display: grid;
  place-items: center;
  width: clamp(38px, 3.2vw, 54px);
  aspect-ratio: 1;
  border-radius: clamp(9px, .9vw, 14px);
  background: linear-gradient(150deg, #57C22B, #1E8A2B);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(30, 138, 43, .22);
}

.impact-stat__icon svg {
  width: 54%;
  height: 54%;
}

.impact-stat__value {
  margin: clamp(12px, 1.3vw, 20px) 0 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.625rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--green-800);
}

.impact-stat__label {
  margin: clamp(4px, .5vw, 8px) 0 0;
  font-size: clamp(.75rem, .82vw, .9375rem);
  line-height: 1.45;
  color: rgba(13, 27, 38, .62);
}


/* ==========================================================================
   About page — vision and mission

   A photograph and the two statements on one row. The photograph carries the
   growth arc in its corner; each statement is a white card with the outline
   drawing running along its foot, drawn in a tint pale enough to sit under
   the copy without competing with it.
   ========================================================================== */

.vm {
  padding: clamp(26px, 3vw, 52px) var(--inset) clamp(34px, 4vw, 70px);
  background: var(--white);
}

.vm__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 1.5vw, 26px);
  align-items: stretch;
  max-width: 1560px;
  margin: 0 auto;
}

.vm__media {
  position: relative;
  margin: 0;
  border-radius: clamp(16px, 1.6vw, 28px);
  overflow: hidden;
  background: var(--mint);
}

.vm__media img {
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 26vw, 440px);
  object-fit: cover;
}

/* Bottom-right of the picture, clear of the card's own corner radius so the
   sprout in the disc is never cut by it. */
.vm__arc {
  position: absolute;
  right: clamp(10px, 1.4vw, 24px);
  bottom: clamp(10px, 1.4vw, 24px);
  width: clamp(96px, 11vw, 172px);
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(10, 60, 20, .18));
  pointer-events: none;
}

/* Hairline and a soft lift rather than the mint plates the business page
   uses: these two sit on white and the drawing at their foot needs a ground
   of its own to read against. */
.vm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 38px) clamp(20px, 2vw, 34px) clamp(84px, 8.5vw, 140px);
  border: 1px solid rgba(13, 27, 38, .08);
  border-radius: clamp(16px, 1.6vw, 28px);
  background: var(--white);
  box-shadow: 0 10px 30px rgba(13, 40, 20, .05);
  overflow: hidden;
}

.vm-card__icon {
  display: grid;
  place-items: center;
  width: clamp(44px, 3.6vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #EFF6E8;
  color: var(--green-800);
}

.vm-card__icon svg {
  width: 54%;
  height: 54%;
}

/* Ruled off underneath in the same green as the eyebrow above the collage,
   so the statements on this page all carry one mark. */
.vm-card__title {
  margin: clamp(18px, 2vw, 32px) 0 clamp(12px, 1.2vw, 20px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.0625rem, 1.25vw, 1.375rem);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.vm-card__title::after {
  content: '';
  display: block;
  width: clamp(34px, 3.2vw, 54px);
  height: 3px;
  margin-top: clamp(10px, 1vw, 16px);
  border-radius: 2px;
  background: var(--green-600);
}

.vm-card__text {
  margin: 0;
  font-size: clamp(.9375rem, 1vw, 1.0625rem);
  line-height: 1.72;
  color: rgba(13, 27, 38, .74);
}

/* Along the foot of the card and hung off its bottom edge, so the ground the
   drawing stands on is the card's own edge rather than a line inside it. */
.vm-card__scene {
  position: absolute;
  left: clamp(14px, 1.4vw, 26px);
  right: clamp(14px, 1.4vw, 26px);
  bottom: -1px;
  width: auto;
  height: clamp(66px, 6.6vw, 108px);
  color: #CFE7BE;
  pointer-events: none;
}


/* ==========================================================================
   About page — our core values

   Six plates under a centred masthead. The site's sprout stands over the
   heading rather than sitting in a pill beside it — the one place on the
   site the eyebrow is centred — and each plate puts its disc down the left
   with the words beside it.
   ========================================================================== */

.values {
  padding: clamp(30px, 3.6vw, 60px) var(--pad) clamp(40px, 4.6vw, 80px);
  background: var(--white);
}

.values__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.values__head {
  margin: 0 auto clamp(28px, 3.4vw, 56px);
  max-width: 46rem;
  text-align: center;
}

.values__mark {
  width: clamp(34px, 3vw, 50px);
  height: auto;
  margin: 0 auto clamp(10px, 1vw, 16px);
  color: var(--green);
}

.values__title {
  margin: 0;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.625rem, 3vw, 3.125rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* The rule belongs to the heading, not to the line that follows it */
.values__title::after {
  content: '';
  display: block;
  width: clamp(96px, 9vw, 150px);
  height: 3px;
  margin: clamp(12px, 1.2vw, 20px) auto 0;
  border-radius: 2px;
  background: #A7D45F;
}

.values__lead {
  margin: clamp(12px, 1.2vw, 20px) 0 0;
  font-size: clamp(.9375rem, 1vw, 1.125rem);
  line-height: 1.6;
  color: rgba(13, 27, 38, .62);
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.value-card {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.5vw, 24px);
  padding: clamp(20px, 2vw, 34px) clamp(18px, 1.9vw, 32px);
  border: 1px solid rgba(13, 27, 38, .07);
  border-radius: clamp(12px, 1.1vw, 18px);
  background: #FCFDFB;
  box-shadow: 0 8px 24px rgba(13, 40, 20, .04);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.value-card:hover {
  transform: translateY(-4px);
  border-color: rgba(2, 157, 40, .28);
  box-shadow: 0 16px 36px rgba(13, 40, 20, .1);
}

/* The pale ring is a spread shadow rather than a border, so the disc keeps
   its size whatever weight the ring is given. */
.value-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(48px, 4vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, #6FBF3E, #2E8B2B);
  color: var(--white);
  box-shadow: 0 0 0 3px #E7F2DF, 0 6px 16px rgba(30, 120, 43, .2);
}

.value-card__icon svg {
  width: 52%;
  height: 52%;
}

.value-card__body {
  min-width: 0;
}

.value-card__title {
  margin: 0 0 clamp(6px, .7vw, 12px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.value-card__text {
  margin: 0;
  font-size: clamp(.8125rem, .88vw, .9375rem);
  line-height: 1.65;
  color: rgba(13, 27, 38, .6);
}


/* ==========================================================================
   Inner pages — shared masthead type

   The eyebrow, heading and lead the careers, contact, leadership, news and
   technology pages open their sections with. A plain line of green small
   caps rather than the pill the home page uses, which is what those designs
   carry; the --ruled variant puts a short rule in front of it.
   ========================================================================== */

.page-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(12px, 1.3vw, 20px);
  font-size: clamp(.75rem, .85vw, .9375rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-600);
}

.page-eyebrow--ruled::before {
  content: '';
  flex: none;
  width: clamp(28px, 2.6vw, 44px);
  height: 2px;
  border-radius: 2px;
  background: var(--green-600);
}

.page-title {
  margin: 0;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.625rem, 2.9vw, 3.125rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* The about page's accent green, so the pages share one second colour */
.page-title__accent {
  color: #35A72B;
}

.page-lead {
  margin: clamp(14px, 1.5vw, 24px) 0 0;
  max-width: 54ch;
  font-size: clamp(.9375rem, 1.02vw, 1.125rem);
  line-height: 1.68;
  color: rgba(13, 27, 38, .66);
}


/* ==========================================================================
   Careers page — why join us

   Copy on the left, the team photograph on the right. The three benefits
   each put a pale icon tile down the left with the words beside it, the
   arrangement the core values on the about page use, set lighter here
   because they sit inside a column rather than making up a grid.
   ========================================================================== */

.join {
  padding: clamp(34px, 4vw, 76px) var(--inset) clamp(28px, 3.2vw, 54px);
  background: var(--white);
}

.join__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(30px, 4.4vw, 84px);
  max-width: 1560px;
  margin: 0 auto;
  padding-left: clamp(0px, 2.4vw, 44px);
}

.benefits {
  display: grid;
  gap: clamp(18px, 2vw, 30px);
  margin: clamp(26px, 3vw, 46px) 0 0;
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.5vw, 24px);
}

.benefit__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(50px, 4.2vw, 68px);
  aspect-ratio: 1;
  border-radius: clamp(10px, 1vw, 16px);
  background: #EAF4E4;
  color: var(--green-700);
}

.benefit__icon svg {
  width: 56%;
  height: 56%;
}

.benefit__body {
  min-width: 0;
}

.benefit__title {
  margin: 0 0 clamp(4px, .5vw, 8px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.0625rem, 1.2vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.benefit__text {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(.875rem, .95vw, 1rem);
  line-height: 1.65;
  color: rgba(13, 27, 38, .62);
}

/* The engineers stand in the lower half of a portrait frame, so the crop is
   held low to keep them in it rather than the columns above them. */
.join__media {
  margin: 0;
  border-radius: clamp(16px, 1.6vw, 28px);
  overflow: hidden;
  background: var(--mint);
}

.join__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 4.1;
  object-fit: cover;
  object-position: 50% 78%;
}


/* ==========================================================================
   Careers page — build a better future

   One wide photograph with a frosted panel over its right-hand side. A
   shade is laid in from the right under the panel, so the glass reads
   against the bright sky in the picture and the white type holds.
   ========================================================================== */

.future {
  padding: clamp(10px, 1.4vw, 24px) var(--inset) clamp(34px, 4vw, 70px);
  background: var(--white);
}

.future__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 1560px;
  min-height: clamp(420px, 40vw, 640px);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 72px);
  border-radius: clamp(16px, 1.6vw, 28px);
  overflow: hidden;
  background: var(--green-900);
  isolation: isolate;
}

.future__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 50%;
}

.future__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to left, rgba(4, 42, 16, .62) 0%, rgba(4, 42, 16, .3) 42%, rgba(4, 42, 16, 0) 68%);
}

.future__panel {
  width: min(100%, 540px);
  padding: clamp(24px, 2.8vw, 48px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: clamp(14px, 1.4vw, 24px);
  background: rgba(10, 58, 28, .58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--white);
}

.future__title {
  margin: 0;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.625rem, 2.8vw, 3rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
}

.future__accent {
  display: block;
  color: #8BDB5E;
}

.future__title::after {
  content: '';
  display: block;
  width: clamp(40px, 3.6vw, 60px);
  height: 3px;
  margin-top: clamp(16px, 1.6vw, 26px);
  border-radius: 2px;
  background: var(--lime);
}

.future__text {
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  font-size: clamp(.9375rem, 1.05vw, 1.125rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .88);
}

.future__motto {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(20px, 2.2vw, 34px) 0 0;
  font-size: clamp(.875rem, .95vw, 1rem);
}

.future__motto-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border: 1.5px solid var(--lime);
  border-radius: 50%;
  color: var(--lime);
}

.future__motto-icon svg {
  width: 55%;
  height: 55%;
}

.future__motto em {
  font-style: normal;
  color: #9FE07A;
}


/* ==========================================================================
   Careers page — open positions

   A centred masthead, a row of filter chips and the openings as a stack of
   white rows. The chips are the shared filter the leadership page uses too;
   they arrive hidden and the script shows them, so there is never a row of
   buttons on the page that does nothing.
   ========================================================================== */

.jobs {
  padding: clamp(34px, 4vw, 70px) var(--pad) clamp(44px, 5vw, 88px);
  background: #F7FAF6;
}

.jobs__inner {
  max-width: 1140px;
  margin: 0 auto;
}

.jobs__head {
  max-width: 46rem;
  margin: 0 auto clamp(22px, 2.6vw, 40px);
  text-align: center;
}

.jobs__head .page-eyebrow {
  justify-content: center;
}

.jobs__head .page-lead {
  max-width: 62ch;
  margin-inline: auto;
}

/* --- Filter chips (shared) ----------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(24px, 2.8vw, 44px);
}

/* Written out, because the flex display above would otherwise beat the
   attribute and show the chips before the script is there to drive them. */
.chips[hidden] {
  display: none;
}

.chip {
  padding: 9px 20px;
  border: 1px solid rgba(13, 27, 38, .1);
  border-radius: 999px;
  background: var(--white);
  color: rgba(13, 27, 38, .78);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}

.chip:hover {
  border-color: rgba(2, 157, 40, .4);
  color: var(--green-700);
}

.chip[aria-pressed="true"] {
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
}

/* --- Openings ------------------------------------------------------------ */

.jobs__list {
  display: grid;
  gap: clamp(12px, 1.2vw, 18px);
}

.job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 1.8vw, 28px) clamp(20px, 2.2vw, 36px);
  border: 1px solid rgba(13, 27, 38, .07);
  border-radius: clamp(12px, 1.1vw, 18px);
  background: var(--white);
  box-shadow: 0 8px 24px rgba(13, 40, 20, .04);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.job[hidden] {
  display: none;
}

.job:hover {
  border-color: rgba(2, 157, 40, .28);
  box-shadow: 0 14px 32px rgba(13, 40, 20, .08);
}

.job__body {
  min-width: 0;
}

.job__title {
  margin: 0;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.0625rem, 1.3vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.job__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  margin: 8px 0 0;
  font-size: .875rem;
  color: rgba(13, 27, 38, .6);
}

.job__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.job__meta svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--green-600);
}

.job__apply {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 24px;
  border: 1.5px solid var(--green);
  border-radius: 999px;
  color: var(--green-600);
  font-size: .9375rem;
  font-weight: 600;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.job__apply svg {
  width: 17px;
  height: 17px;
  transition: transform .3s var(--ease);
}

.job__apply:hover {
  background: var(--green);
  color: var(--white);
}

.job__apply:hover svg {
  transform: translateX(3px);
}

.jobs__empty {
  margin: 0;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px dashed rgba(13, 27, 38, .16);
  border-radius: clamp(12px, 1.1vw, 18px);
  text-align: center;
  color: rgba(13, 27, 38, .66);
}

.jobs__empty a {
  font-weight: 600;
  color: var(--green-600);
}


/* ==========================================================================
   Contact page — send us a message

   The form takes the left and the contact card the right, hung from the
   same top edge. The card is the dark green plate of the design.
   ========================================================================== */

.contact {
  padding: clamp(34px, 4vw, 76px) var(--inset) clamp(34px, 4vw, 70px);
  background: var(--white);
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: start;
  gap: clamp(30px, 4.4vw, 84px);
  max-width: 1400px;
  margin: 0 auto;
  padding-left: clamp(0px, 2.4vw, 44px);
}

/* --- Form ---------------------------------------------------------------- */

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px) clamp(14px, 1.6vw, 26px);
  margin: clamp(24px, 2.8vw, 40px) 0 0;
}

.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}

.field__input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(13, 27, 38, .14);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.field__input::placeholder {
  color: rgba(13, 27, 38, .42);
}

/* A ring in place of the site's outline: it follows the field's radius,
   and is every bit as visible. */
.field__input:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(2, 157, 40, .18);
}

textarea.field__input {
  min-height: 140px;
  resize: vertical;
}

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 4px;
}

.btn-send {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.btn-send svg {
  width: 18px;
  height: 18px;
}

.btn-send:hover {
  background: var(--green-600);
  transform: translateY(-2px);
}

.form__status {
  margin: 0;
  font-size: .9375rem;
  color: var(--green-700);
}

/* ==========================================================================
   Job description page — the role, and the form under it

   The description takes the wide column and a summary card sits beside it on
   the contact page's sticky pattern. Only one .role__doc is ever shown; the
   rest are hidden by the page's own script, which picks the one named in the
   address bar.
   ========================================================================== */

.role {
  padding: clamp(34px, 4vw, 76px) var(--pad) clamp(28px, 3.2vw, 54px);
  background: var(--white);
}

.role__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr);
  align-items: start;
  gap: clamp(30px, 4vw, 72px);
  max-width: 1300px;
  margin: 0 auto;
}

.role__main {
  min-width: 0;
}

/* Ranged right at the head of the summary column. Flex rather than
   inline-flex so the box is block-level and the auto left margin can push it
   across; fit-content keeps it the width of its own label. The arrow draws
   back a little further on hover, which is the only movement the link makes —
   the label itself stays put. */
.role__back {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 clamp(14px, 1.4vw, 20px) auto;
  padding: 10px 20px 10px 16px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(2, 157, 40, .22);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.role__back svg {
  width: 17px;
  height: 17px;
  transition: transform .3s var(--ease);
}

.role__back:hover {
  background: var(--green-600);
  transform: translateY(-2px);
}

.role__back:hover svg {
  transform: translateX(-3px);
}

.role__doc[hidden] {
  display: none;
}

.role__doc .page-title {
  margin-bottom: clamp(16px, 1.8vw, 26px);
}

.role__lead {
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.1875rem);
  line-height: 1.7;
  color: rgba(13, 27, 38, .74);
}

.role__sub {
  margin: clamp(28px, 3vw, 46px) 0 clamp(12px, 1.2vw, 18px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* The markers are drawn rather than listed, so they keep the site's green
   and stay put against a line that wraps. */
.role__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(10px, 1vw, 15px);
}

.role__list li {
  position: relative;
  padding-left: 30px;
  font-size: clamp(.9375rem, 1vw, 1.0625rem);
  line-height: 1.65;
  color: rgba(13, 27, 38, .72);
}

.role__list li::before {
  content: '';
  position: absolute;
  top: .62em;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #E1F0DC;
}

.role__list li::after {
  content: '';
  position: absolute;
  top: calc(.62em + 5px);
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.role__missing {
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--sun-50);
  font-size: .9375rem;
  color: var(--sun-700);
}

.role__missing a {
  color: inherit;
}

/* --- The summary card beside it ------------------------------------------ */

/* The column sticks rather than the card, so the way back rides down the page
   alongside the summary instead of scrolling off the top of it. The offset
   clears the floating header pills, which ride over the page at that height.
   Released at 1100px, where the column stacks under the description. */
.role__side {
  position: sticky;
  top: calc(var(--btn-h) + var(--actions-pad) * 2 + 40px);
}

.role-card {
  padding: clamp(22px, 2.4vw, 36px) clamp(22px, 2.4vw, 34px) clamp(24px, 2.6vw, 38px);
  border: 1px solid rgba(13, 27, 38, .09);
  border-radius: clamp(16px, 1.6vw, 26px);
  background: #F7FAF6;
}

.role-card__eyebrow {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-800);
}

.role-card__list {
  margin: 0;
  display: grid;
  gap: 0;
}

/* Ruled between rows rather than around them, so the card reads as one block
   of details and not as a stack of small cards. */
.role-card__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 10px 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(13, 27, 38, .08);
}

.role-card__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.role-card__row dt {
  font-size: .875rem;
  color: rgba(13, 27, 38, .58);
}

.role-card__row dd {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
}

.role-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: clamp(18px, 2vw, 26px);
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: .9375rem;
  font-weight: 600;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.role-card__btn svg {
  width: 18px;
  height: 18px;
}

.role-card__btn:hover {
  background: var(--green-600);
  transform: translateY(-2px);
}

.role-card__note {
  margin: clamp(14px, 1.5vw, 20px) 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(13, 27, 38, .6);
}

.role-card__note a {
  color: var(--green-700);
  font-weight: 600;
}

/* --- The form under it --------------------------------------------------- */

.apply {
  padding: clamp(34px, 4vw, 70px) var(--pad) clamp(44px, 5vw, 88px);
  background: #F7FAF6;
}

.apply__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.apply__head {
  max-width: 46rem;
  margin: 0 auto clamp(8px, 1vw, 16px);
  text-align: center;
}

.apply__head .page-eyebrow {
  justify-content: center;
}

.apply__head .page-lead {
  max-width: 60ch;
  margin-inline: auto;
}

/* On its own plate, so the fields are not sitting straight on the section's
   own pale ground with nothing to hold them. */
.apply__form {
  padding: clamp(24px, 2.8vw, 46px);
  border: 1px solid rgba(13, 27, 38, .08);
  border-radius: clamp(16px, 1.8vw, 28px);
  background: var(--white);
}

.apply__form input[readonly] {
  background: #F4F8F2;
  color: rgba(13, 27, 38, .74);
  cursor: default;
}

.apply__note {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--sun-50);
  color: var(--sun-700);
}

.apply__note svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.apply__note p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
}


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

/* Sticky on desktop, so the details stay in view while the form is filled
   in. The top offset clears the floating header pills, which ride over the
   page at the same height. Released below 1100px, where the card stacks. */
.reach {
  position: sticky;
  top: calc(var(--btn-h) + var(--actions-pad) * 2 + 40px);
  padding: clamp(22px, 2.6vw, 46px) clamp(22px, 2.8vw, 48px) clamp(26px, 3vw, 50px);
  border-radius: clamp(18px, 1.8vw, 30px);
  background: linear-gradient(160deg, #1D6E2E 0%, #0B4A1C 100%);
  color: var(--white);
}

.reach__eyebrow {
  margin: 0 0 12px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.reach__title {
  margin: 0;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}

/* Keeps "Go Green." on one line, so the break falls after "You" the way the
   design sets it rather than stranding "Go" at the end of the line above. */
.reach__go {
  display: inline-block;
}

.reach__accent {
  color: #8BDB5E;
}

.reach__list {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  padding: clamp(22px, 2.4vw, 34px) 0;
  border-block: 1px solid rgba(255, 255, 255, .16);
}

.reach__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 22px);
}

.reach__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(48px, 3.8vw, 60px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  color: var(--green-600);
}

.reach__icon svg {
  width: 46%;
  height: 46%;
}

.reach__label {
  margin: 0 0 4px;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.1875rem);
  font-weight: 600;
  color: #8BDB5E;
}

.reach__text {
  margin: 0;
  font-size: clamp(.9375rem, 1vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

.reach__text a {
  transition: color .3s var(--ease);
}

.reach__text a:hover {
  color: var(--lime-100);
}

.reach__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: clamp(20px, 2.2vw, 30px) 0 0;
}

.reach__social-label {
  margin: 0;
  font-size: clamp(1.0625rem, 1.2vw, 1.3125rem);
  font-weight: 600;
}

.reach__social ul {
  display: flex;
  gap: 10px;
}

.reach__social a {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3E9E1C;
  color: var(--white);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.reach__social a:hover {
  background: var(--lime);
  color: var(--green-900);
  transform: translateY(-2px);
}

.reach__social svg {
  width: 19px;
  height: 19px;
}

/* --- Map ----------------------------------------------------------------- */

.map {
  padding: 0 var(--inset) clamp(34px, 4vw, 70px);
  background: var(--white);
}

.map__frame {
  display: block;
  width: 100%;
  max-width: 1560px;
  height: clamp(300px, 30vw, 460px);
  margin: 0 auto;
  border: 0;
  border-radius: clamp(16px, 1.6vw, 28px);
  background: var(--mint);
}


/* ==========================================================================
   Leadership page — guided by expertise

   The statement on the left, the four principles on the right as a
   two-by-two split by hairlines rather than boxed into cards.
   ========================================================================== */

.guided {
  padding: clamp(34px, 4vw, 76px) var(--inset) clamp(34px, 4vw, 70px);
  background: var(--white);
}

.guided__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(30px, 4.4vw, 84px);
  max-width: 1400px;
  margin: 0 auto;
  padding-left: clamp(0px, 2.4vw, 44px);
}

.guided .page-lead {
  max-width: 62ch;
}

.guided .btn-navy {
  margin-top: clamp(22px, 2.4vw, 34px);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pillar {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 22px);
  padding: clamp(20px, 2.2vw, 36px) clamp(16px, 1.8vw, 30px);
}

.pillar:nth-child(odd) {
  border-right: 1px solid rgba(13, 27, 38, .09);
}

.pillar:nth-child(-n+2) {
  border-bottom: 1px solid rgba(13, 27, 38, .09);
}

.pillar__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(54px, 4.4vw, 72px);
  aspect-ratio: 1;
  border-radius: clamp(12px, 1.1vw, 18px);
  background: #F1F6EF;
  color: var(--green-700);
  box-shadow: 0 6px 18px rgba(13, 40, 20, .06);
}

.pillar__icon svg {
  width: 52%;
  height: 52%;
}

.pillar__title {
  margin: 0 0 6px;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.pillar__text {
  margin: 0;
  font-size: clamp(.8125rem, .9vw, .9375rem);
  line-height: 1.55;
  color: rgba(13, 27, 38, .58);
}


/* ==========================================================================
   Leadership page — executives and the wider team

   One card for both grids: a plate where the portrait goes, then the name
   and role beside the LinkedIn mark. Until real portraits are supplied the
   plate carries initials (executives) or the function's mark (team), set
   in the same pale green so the grid still reads as a row of faces.
   ========================================================================== */

.execs {
  padding: clamp(40px, 4.6vw, 80px) var(--pad);
  background: var(--mint);
}

.team {
  padding: clamp(40px, 4.6vw, 80px) var(--pad) clamp(44px, 5vw, 88px);
  background: var(--white);
}

.execs__inner,
.team__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.execs__head,
.team__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(24px, 2.8vw, 44px);
}

/* Beside a left-ranged heading, so the row starts on its own edge */
.chips--start {
  justify-content: flex-start;
  margin: 0;
}

.btn-ghost {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid rgba(13, 27, 38, .12);
  border-radius: 10px;
  background: var(--white);
  color: var(--green-700);
  font-size: .9375rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(13, 40, 20, .06);
  transition: border-color .3s var(--ease);
}

.btn-ghost svg {
  width: 17px;
  height: 17px;
  transition: transform .3s var(--ease);
}

.btn-ghost:hover {
  border-color: var(--green);
}

.btn-ghost:hover svg {
  transform: translateY(3px);
}

.people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
}

.person {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: clamp(12px, 1.1vw, 18px);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(13, 40, 20, .07);
  transition: box-shadow .4s var(--ease);
}

.person[hidden] {
  display: none;
}

.person:hover {
  box-shadow: 0 18px 40px rgba(13, 40, 20, .13);
}

/* The team grid sits on white, so its cards take a hairline the mint band
   above doesn't need. */
.team .person {
  border: 1px solid rgba(13, 27, 38, .07);
}

.person__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3.4;
  background: radial-gradient(circle at 30% 20%, #F6FBF2 0%, #DCEFD0 100%);
}

.person__initials {
  font-size: clamp(2.5rem, 4.4vw, 4.25rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(10, 92, 36, .5);
}

.person__media--mark svg {
  width: 30%;
  height: auto;
  color: rgba(10, 92, 36, .55);
}

/* A portrait fills its plate rather than sitting on it, and is anchored to the
   top: a centre crop on a 5:6 headshot cuts the forehead. */
.person__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

.person__body {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.6vw, 24px) clamp(16px, 1.6vw, 24px);
}

.person__name {
  margin: 0;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.person__role {
  margin: 4px 0 0;
  font-size: clamp(.8125rem, .9vw, .9375rem);
  color: var(--green-600);
}

.person__link {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 6px;
  background: #0A66C2;
  color: var(--white);
  transition: background-color .3s var(--ease);
}

.person__link svg {
  width: 16px;
  height: 16px;
}

.person__link:hover {
  background: #004182;
}

/* --- Opening the profile -------------------------------------------------- */

/* Laid over the whole card rather than sitting in it, so a click anywhere on
   the plate or the name opens the profile. The LinkedIn button is lifted above
   it below, which is what keeps that one click doing its own job. */
.person__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.person__link {
  position: relative;
  z-index: 2;
}

/* The cue that the card opens something. It sits on the plate rather than at
   the foot of the card, where it would crowd the LinkedIn button, and rides in
   from below on hover. Shown outright whenever the card's own button has
   keyboard focus too, so it is never the pointer alone that reveals it. */
.person__media {
  position: relative;
}

.person__media::after {
  content: 'View profile';
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 1.2vw, 20px);
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(2, 157, 40, .3);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

/* :has(), because the button that takes the focus is the last child of the
   card and so sits after the plate it has to reveal the cue on. */
.person:hover .person__media::after,
.person:has(.person__open:focus-visible) .person__media::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* The outline follows the card, since the button is the size of it */
.person__open:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -3px;
  border-radius: inherit;
}


/* ==========================================================================
   Leadership — the profile dialog

   One panel for the whole page, filled from the card that opened it. A native
   <dialog>, so everything here is presentation: the browser draws the backdrop
   and holds the focus.
   ========================================================================== */

.bio {
  width: min(820px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  padding: 0;
  border: 0;
  border-radius: clamp(16px, 1.8vw, 26px);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(6, 40, 18, .3);
  overflow: visible;
}

.bio::backdrop {
  background: rgba(4, 30, 14, .55);
  backdrop-filter: blur(3px);
}

.bio__inner {
  max-height: inherit;
  padding: clamp(26px, 3.2vw, 52px);
  overflow-y: auto;
  border-radius: inherit;
}

.bio__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 27, 38, .06);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.bio__close svg {
  width: 18px;
  height: 18px;
}

.bio__close:hover {
  background: var(--green);
  color: var(--white);
}

.bio__head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(18px, 2vw, 26px);
  padding-right: 42px;
}

/* The card's plate, at the size a dialog wants it: square rather than the
   4:3.4 the grid gives it, so it reads as a portrait beside the name. */
.bio__media {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(80px, 9vw, 116px);
  aspect-ratio: 1;
  border-radius: clamp(12px, 1.2vw, 18px);
  background: radial-gradient(circle at 30% 20%, #F6FBF2 0%, #DCEFD0 100%);
  overflow: hidden;
}

.bio__media .person__initials {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.bio__media svg {
  width: 44%;
  height: auto;
  color: rgba(10, 92, 36, .55);
}

/* The card's portrait, cloned in: square here rather than the 4:3.4 the grid
   gives it, and anchored high for the same reason. */
.bio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

.bio__name {
  margin: 0;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.bio__role {
  margin: 6px 0 0;
  font-size: clamp(.875rem, 1vw, 1rem);
  font-weight: 600;
  color: var(--green-600);
}

.bio__text {
  margin: 0;
  font-size: clamp(.9375rem, 1vw, 1.0625rem);
  line-height: 1.7;
  color: rgba(13, 27, 38, .74);
}

.bio__focus {
  margin-top: clamp(20px, 2.2vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(13, 27, 38, .1);
}

.bio__focus[hidden] {
  display: none;
}

.bio__focus-label {
  margin: 0 0 12px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-800);
}

.bio__focus-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bio__focus-list li {
  padding: 7px 14px;
  border-radius: 999px;
  background: #EFF7EB;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--green-800);
}


/* ==========================================================================
   News page — the article grid

   The home page's news cards, three across on a pale ground so the white
   cards stand off it. Headings are set in sentence case here rather than
   the home page's capitals, since they run to two lines, and each card
   carries the design's excerpt, a green date pill and a byline.
   ========================================================================== */

.newsroom {
  padding: clamp(34px, 4vw, 76px) var(--pad) clamp(44px, 5vw, 88px);
  background: #F7FAF6;
}

.newsroom__inner {
  max-width: 1560px;
  margin: 0 auto;
}

.newsroom .news-card__link {
  border: 1px solid rgba(13, 27, 38, .06);
  box-shadow: 0 8px 24px rgba(13, 40, 20, .05);
}

.newsroom .news-card__heading {
  margin-bottom: clamp(10px, 1vw, 14px);
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  line-height: 1.3;
  text-transform: none;
  color: var(--green-900);
}

.news-card__meta--byline {
  justify-content: flex-start;
  gap: 16px;
}

.news-card__date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 7px;
  background: var(--green-700);
  color: var(--white);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.news-card__date svg {
  width: 14px;
  height: 14px;
}

.news-card__author {
  font-size: .875rem;
  color: #5a6a75;
}

.news-card__excerpt {
  margin: 0 0 clamp(18px, 1.8vw, 26px);
  font-size: clamp(.9375rem, .98vw, 1.0625rem);
  line-height: 1.65;
  color: rgba(13, 27, 38, .7);
}

.newsroom .news-card__more {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green-700);
}


/* ==========================================================================
   News article page

   One column, held to a reading measure rather than the page's full width —
   a body of text is read, not scanned, and a line that runs the width of the
   frame is hard work. Only one .post__doc is ever shown; the rest are hidden
   by the page's own script, which picks the one named in the address bar.
   ========================================================================== */

.post {
  padding: clamp(30px, 3.6vw, 64px) var(--pad) clamp(34px, 4vw, 70px);
  background: var(--white);
}

/* The page's own width, split between the article and a rail. The article
   column still lands near a comfortable measure at this width, so the text is
   readable without the page looking like a narrow strip on a wide screen. */
.post__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .36fr);
  align-items: start;
  gap: clamp(30px, 4vw, 72px);
  max-width: 1400px;
  margin: 0 auto;
}

.post__main {
  min-width: 0;
}

/* The banner already carries the headline, so this is set smaller than a page
   title: it names the piece again at the head of the text for anyone who
   arrived past the banner, and gives the article its own outline. */
.post__headline {
  margin: 0 0 clamp(20px, 2.2vw, 30px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--green-900);
}

/* The rail travels down with the article rather than scrolling off the top of
   it. The offset clears the floating header pills, which ride over the page at
   that height. Released at 1100px, where the rail stacks under the article. */
.post__side {
  position: sticky;
  top: calc(var(--btn-h) + var(--actions-pad) * 2 + 40px);
}

.post__back {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 clamp(20px, 2.2vw, 30px) auto;
  padding: 10px 20px 10px 16px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(2, 157, 40, .22);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.post__back svg {
  width: 17px;
  height: 17px;
  transition: transform .3s var(--ease);
}

.post__back:hover {
  background: var(--green-600);
  transform: translateY(-2px);
}

.post__back:hover svg {
  transform: translateX(-3px);
}

.post__missing {
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--sun-50);
  font-size: .9375rem;
  color: var(--sun-700);
}

.post__missing a {
  color: inherit;
}

.post__doc[hidden] {
  display: none;
}

/* The grid's own date pill and byline, carried onto the article so the two
   read as the same piece of writing. */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(14px, 1.5vw, 20px);
}

.post__date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 7px;
  background: var(--green-700);
  color: var(--white);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.post__date svg {
  width: 14px;
  height: 14px;
}

.post__author {
  font-size: .875rem;
  color: #5a6a75;
}

.post__media {
  margin: 0 0 clamp(22px, 2.6vw, 38px);
  border-radius: clamp(14px, 1.4vw, 22px);
  overflow: hidden;
}

/* A banner across the article rather than a picture that fills the screen:
   the piece is the text, and a 16:9 plate at this column width pushed the
   opening paragraph below the fold. */
.post__media img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 8;
  max-height: 380px;
  object-fit: cover;
}

.post__body p {
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.75;
  color: rgba(13, 27, 38, .76);
}

/* The opening paragraph carries the piece, so it is set a step larger and
   darker than the body that follows it. */
.post__body .post__lead {
  font-size: clamp(1.0625rem, 1.2vw, 1.3125rem);
  line-height: 1.7;
  color: rgba(13, 27, 38, .84);
}

.post__body h3 {
  margin: clamp(28px, 3vw, 44px) 0 clamp(12px, 1.2vw, 18px);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* The markers are drawn rather than listed, so they keep the site's green and
   stay put against a point that wraps. */
.post__points {
  display: grid;
  gap: clamp(10px, 1vw, 15px);
  margin: 0 0 clamp(18px, 2vw, 28px);
  padding: 0;
  list-style: none;
}

.post__points li {
  position: relative;
  padding-left: 30px;
  font-size: clamp(.9375rem, 1vw, 1.0625rem);
  line-height: 1.65;
  color: rgba(13, 27, 38, .76);
}

.post__points li::before {
  content: '';
  position: absolute;
  top: .62em;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #E1F0DC;
}

.post__points li::after {
  content: '';
  position: absolute;
  top: calc(.62em + 5px);
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.post__points strong {
  font-weight: 600;
  color: var(--ink);
}

/* --- More from the newsroom ---------------------------------------------- */

/* On its own plate in the rail, so it reads as a sidebar rather than as more
   article. */
.post__more {
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 26px) clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(13, 27, 38, .08);
  border-radius: clamp(14px, 1.4vw, 22px);
  background: #F7FAF6;
}

.post__more[hidden] {
  display: none;
}

.post__more-title {
  margin: 0 0 clamp(14px, 1.5vw, 20px);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-800);
}

.post__more-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ruled between the rows rather than around each one: a stack of bordered
   cards inside a bordered plate is one border too many. */
.post-more-card + .post-more-card {
  border-top: 1px solid rgba(13, 27, 38, .09);
}

.post-more-card__link {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

.post-more-card:first-child .post-more-card__link {
  padding-top: 0;
}

.post-more-card:last-child .post-more-card__link {
  padding-bottom: 0;
}

.post-more-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
}

.post-more-card__body {
  display: block;
  min-width: 0;
}

.post-more-card__date {
  display: block;
  margin-bottom: 4px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--green-600);
}

.post-more-card__title {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--green-900);
  transition: color .3s var(--ease);
}

.post-more-card__link:hover .post-more-card__title {
  color: var(--green);
}


/* ==========================================================================
   Technology page — advanced technology

   The statement beside the plant photograph, with a white card riding over
   the photograph's right edge listing the plant's three flows. The figure
   gives up a strip of its own width on the right for the card to hang
   into, so the card overlaps the picture without leaving the column.
   ========================================================================== */

.tech-intro {
  padding: clamp(34px, 4vw, 76px) var(--inset) clamp(30px, 3.4vw, 60px);
  background: var(--white);
}

.tech-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(30px, 4.4vw, 84px);
  max-width: 1400px;
  margin: 0 auto;
  padding-left: clamp(0px, 2.4vw, 44px);
}

.tech-intro .btn-navy,
.smart .btn-navy {
  margin-top: clamp(22px, 2.4vw, 34px);
}

.tech-intro__media {
  position: relative;
  margin: 0;
  padding-right: clamp(0px, 5vw, 90px);
}

.tech-intro__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: clamp(16px, 1.6vw, 28px);
}

.flow {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  width: clamp(190px, 16vw, 250px);
  padding: 4px clamp(14px, 1.2vw, 20px);
  border-radius: clamp(12px, 1.1vw, 18px);
  background: var(--white);
  box-shadow: 0 18px 44px rgba(13, 40, 20, .16);
  transform: translateY(-50%);
}

.flow__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(12px, 1.1vw, 16px) 0;
}

.flow__item+.flow__item {
  border-top: 1px solid rgba(13, 27, 38, .08);
}

.flow__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #EAF4E4;
  color: var(--green-700);
}

.flow__icon svg {
  width: 55%;
  height: 55%;
}

.flow__label {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.flow__label span {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-600);
}


/* ==========================================================================
   Technology page — traits strip, highlights
   ========================================================================== */

.traits {
  padding: 0 var(--inset);
  background: var(--white);
}

.traits__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(22px, 2.4vw, 38px) clamp(12px, 2vw, 40px);
  border-radius: clamp(16px, 1.6vw, 28px);
  background: var(--mint);
}

.trait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  text-align: center;
}

.trait+.trait {
  border-left: 1px solid rgba(13, 27, 38, .1);
}

.trait__icon {
  display: grid;
  place-items: center;
  width: clamp(50px, 4vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  color: var(--green-700);
  box-shadow: 0 6px 16px rgba(13, 40, 20, .08);
}

.trait__icon svg {
  width: 52%;
  height: 52%;
}

.trait__label {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(.9375rem, 1.1vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.highlights {
  padding: clamp(34px, 4vw, 76px) var(--inset);
  background: var(--white);
}

.highlights__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 4.4vw, 84px);
  max-width: 1560px;
  margin: 0 auto;
}

.highlights__media {
  margin: 0;
  border-radius: clamp(16px, 1.6vw, 28px);
  overflow: hidden;
}

.highlights__media img,
.highlights__media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 38% 50%;
}

.checks {
  display: grid;
  gap: clamp(10px, 1vw, 16px);
  margin: clamp(20px, 2.2vw, 32px) 0 0;
}

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(.9375rem, 1.02vw, 1.0625rem);
  color: rgba(13, 27, 38, .8);
}

.check__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2E8B2B;
  color: var(--white);
}

.check__mark svg {
  width: 62%;
  height: 62%;
}


/* ==========================================================================
   Technology page — our approach

   The four stages on the dark panel, each a gradient disc with its number,
   title and line centred under it. The arrow between two stages is drawn
   off the later one: a rule from the earlier disc's edge to its own, with a
   chevron at the tip. Both lengths are worked from the same two custom
   properties as the grid, so they meet the discs whatever the width.
   ========================================================================== */

.route {
  padding: 0 var(--inset);
  background: var(--white);
}

.route__panel {
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(36px, 4.4vw, 80px) clamp(24px, 3.2vw, 64px);
  border-radius: var(--radius);
  background: var(--green-900);
}

.route .page-eyebrow {
  color: var(--lime);
}

.route .page-title {
  color: var(--white);
}

.route .page-lead {
  max-width: 82ch;
  color: rgba(223, 238, 228, .78);
}

.route__steps {
  --icon: clamp(64px, 5.4vw, 84px);
  --gap: clamp(20px, 2.6vw, 48px);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin: clamp(30px, 3.4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
}

.route-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.route-step+.route-step::before,
.route-step+.route-step::after {
  content: '';
  position: absolute;
  right: calc(50% + var(--icon) / 2 + 14px);
}

.route-step+.route-step::before {
  top: calc(var(--icon) / 2 - 1px);
  width: calc(100% + var(--gap) - var(--icon) - 28px);
  height: 2px;
  background: rgba(199, 239, 146, .5);
}

.route-step+.route-step::after {
  top: calc(var(--icon) / 2 - 5px);
  width: 10px;
  height: 10px;
  border: solid rgba(199, 239, 146, .8);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.route-step__icon {
  display: grid;
  place-items: center;
  width: var(--icon);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, #57C22B, #1E8A2B);
  color: var(--white);
  box-shadow: 0 0 0 6px rgba(87, 194, 43, .16);
}

.route-step__icon svg {
  width: 48%;
  height: 48%;
}

.route-step__num {
  margin: clamp(16px, 1.6vw, 22px) 0 2px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--lime-200);
}

.route-step__title {
  margin: 0 0 8px;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.0625rem, 1.2vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
}

.route-step__text {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(.875rem, .95vw, 1rem);
  line-height: 1.6;
  color: rgba(227, 230, 240, .82);
}


/* ==========================================================================
   Technology page — why our technology
   ========================================================================== */

.smart {
  padding: clamp(34px, 4vw, 76px) var(--inset) clamp(40px, 4.6vw, 80px);
  background: var(--white);
}

.smart__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 4.4vw, 84px);
  max-width: 1400px;
  margin: 0 auto;
  padding-left: clamp(0px, 2.4vw, 44px);
}

.gains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
}

.gain {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(18px, 1.8vw, 28px) clamp(16px, 1.6vw, 24px);
  border-radius: clamp(12px, 1.1vw, 18px);
  background: #F4F8F2;
}

.gain__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(46px, 3.6vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  color: var(--green-700);
  box-shadow: 0 6px 16px rgba(13, 40, 20, .08);
}

.gain__icon svg {
  width: 54%;
  height: 54%;
}

.gain__label {
  margin: 0;
  font-size: clamp(.9375rem, 1.05vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}


/* ==========================================================================
   Industry page — the banner's call to action

   The one inner banner that asks for something: a solid pill under the
   caption, in the deep green the banner's scrim is tinted with.
   ========================================================================== */

.innerbanner__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(16px, 1.6vw, 26px);
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--green-800);
  color: var(--white);
  font-size: clamp(.875rem, .95vw, 1rem);
  font-weight: 600;
  transition: background-color .3s var(--ease);
}

.innerbanner__btn svg {
  width: 18px;
  height: 18px;
  transition: transform .3s var(--ease);
}

.innerbanner__btn:hover {
  background: var(--green-600);
}

.innerbanner__btn:hover svg {
  transform: translateX(4px);
}


/* ==========================================================================
   Industry page — overview

   The definition beside a photograph that carries the fuel's four
   qualities in white capitals over a scrim darkened from the left.
   ========================================================================== */

.fuel {
  padding: clamp(28px, 3.2vw, 56px) var(--pad);
  background: var(--white);
}

.fuel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.fuel__text {
  margin: clamp(14px, 1.5vw, 24px) 0 0;
  max-width: 60ch;
  font-size: clamp(.9375rem, 1.02vw, 1.125rem);
  line-height: 1.72;
  color: rgba(13, 27, 38, .72);
}

.fuel__media {
  position: relative;
  margin: 0;
  border-radius: clamp(18px, 1.8vw, 30px);
  overflow: hidden;
  isolation: isolate;
}

.fuel__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
  object-position: 60% 60%;
}

.fuel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(4, 42, 16, .62) 0%, rgba(4, 42, 16, .28) 38%, rgba(4, 42, 16, 0) 62%);
}

.fuel__traits {
  position: absolute;
  left: clamp(20px, 2.6vw, 44px);
  bottom: clamp(20px, 2.6vw, 44px);
  z-index: 1;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: clamp(1.25rem, 1.9vw, 2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0, 20, 38, .35);
}


/* ==========================================================================
   Industry page — our process

   Five stages on the mint band: a round icon, the step number, the
   name beneath. The arrow between two stages hangs off the front of each
   stage after the first, centred on the disc's middle.
   ========================================================================== */

.stages {
  padding: clamp(48px, 6vw, 110px) var(--pad);
  background: var(--mint);
}

.stages__inner {
  max-width: 1400px;
  margin: 0 auto;
}

.stages__head {
  max-width: 760px;
  margin: 0 auto clamp(36px, 4.4vw, 72px);
  text-align: center;
}

/* Rules on both sides here, where the masthead is centred */
.stages__eyebrow {
  justify-content: center;
}

.stages__eyebrow::before,
.stages__eyebrow::after {
  content: '';
  width: clamp(28px, 2.6vw, 44px);
  height: 2px;
  border-radius: 2px;
  background: var(--green-600);
}

.stages__lead {
  margin-left: auto;
  margin-right: auto;
}

.stages__list {
  --disc: clamp(96px, 8.4vw, 140px);
  --arrow-gap: clamp(28px, 3.4vw, 64px);

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--arrow-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* A white disc with the stage drawn in green. On hover the disc fills with
   the deep green and the drawing turns white. */
.stage__icon {
  display: grid;
  place-items: center;
  width: var(--disc);
  max-width: 100%;
  aspect-ratio: 1;
  border: 1.5px solid rgba(2, 122, 32, .22);
  border-radius: 50%;
  background: var(--white);
  color: var(--green-600);
  box-shadow: 0 14px 34px rgba(4, 42, 16, .10);
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}

.stage__icon svg {
  width: 44%;
  height: 44%;
}

.stage:hover .stage__icon {
  background: var(--green-800);
  color: var(--white);
  transform: translateY(-4px);
}

/* The arrow from the stage before, drawn in the gap between the two */
.stage+.stage::before {
  content: '';
  position: absolute;
  top: calc(var(--disc) / 2);
  left: calc(var(--arrow-gap) / -2);
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: var(--green-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.stage__num {
  margin-top: clamp(14px, 1.4vw, 22px);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--green-600);
}

.stage__title {
  margin: 6px 0 0;
  max-width: 14ch;
  font-size: clamp(.9375rem, 1.1vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}


/* ==========================================================================
   Industry page — key benefits

   A photograph run to the page's left edge with its line of copy over the
   scrim, beside the masthead and a two-by-two of benefits. Each benefit
   leads with an outlined round icon, the number above its title.
   ========================================================================== */

.boons {
  padding: clamp(48px, 6vw, 110px) var(--pad);
  background: var(--white);
}

.boons__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.boons__media {
  position: relative;
  align-self: stretch;
  min-height: clamp(360px, 38vw, 620px);
  margin: 0;
  border-radius: clamp(18px, 1.8vw, 30px);
  overflow: hidden;
  isolation: isolate;
}

.boons__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.boons__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(4, 42, 16, .58) 0%, rgba(4, 42, 16, .22) 30%, rgba(4, 42, 16, 0) 55%);
}

.boons__caption {
  position: absolute;
  top: clamp(22px, 2.6vw, 44px);
  left: clamp(22px, 2.6vw, 44px);
  right: clamp(22px, 2.6vw, 44px);
  z-index: 1;
  max-width: 14ch;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0, 20, 38, .35);
}

.boons__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 52px) clamp(24px, 2.8vw, 48px);
  margin-top: clamp(28px, 3.2vw, 52px);
}

.boon {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 20px);
}

.boon__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(50px, 4vw, 62px);
  aspect-ratio: 1;
  border: 1.5px solid rgba(2, 122, 32, .35);
  border-radius: 50%;
  color: var(--green-600);
}

.boon__icon svg {
  width: 50%;
  height: 50%;
}

.boon__num {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--green-600);
}

.boon__title {
  margin: 4px 0 0;
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.boon__text {
  margin: 8px 0 0;
  font-size: clamp(.875rem, .95vw, 1rem);
  line-height: 1.65;
  color: rgba(13, 27, 38, .66);
}


/* --- Industry page at the narrower widths --------------------------------- */

@media (max-width: 1100px) {

  /* The banner with a button runs a line taller than the others, and at
     these widths a fixed card height pushes the breadcrumb and title up
     under the logo tab. It takes the phone banner's approach sooner: the card
     grows to fit its copy, with top padding that clears the tab. */
  .innerbanner__card.innerbanner__card--cta {
    display: flex;
    align-items: flex-end;
    height: auto;
    min-height: clamp(300px, 46vw, 420px);
  }

  .innerbanner__card--cta .innerbanner__body {
    position: relative;
    inset: auto;
    width: 100%;
    padding-top: calc(155px + var(--pad));
  }

  /* Full width now, so a wider crop keeps it from filling the screen */
  .fuel__photo {
    aspect-ratio: 16 / 10;
  }

  .fuel__inner,
  .boons__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .boons__media {
    min-height: clamp(300px, 56vw, 480px);
  }

  /* Three and two, the arrows only between neighbours on the same row */
  .stages__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: clamp(32px, 4vw, 48px);
  }

  .stage {
    grid-column: span 2;
  }

  .stage:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .stage:nth-child(4)::before {
    display: none;
  }
}

@media (max-width: 560px) {

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

  .stage,
  .stage:nth-child(4) {
    grid-column: auto;
  }

  .stage:nth-child(4)::before {
    display: block;
  }

  .stage:nth-child(odd)::before {
    display: none;
  }

  .stage:last-child {
    grid-column: 1 / -1;
  }

  .boons__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {

  /* The diagram can no longer hold a column of its own beside the copy */
  .feedstock__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 44px);
  }

  /* Photographs above the copy once the two can no longer sit side by side */
  .solutions__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 44px);
  }

  .solutions__media {
    height: clamp(300px, 46vw, 460px);
  }

  .solutions__lead {
    max-width: none;
  }

  .mission__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mission__text {
    max-width: none;
  }

  /* Both cards in a row go even — the alternating 5/7 rhythm would squeeze
     the narrow one's caption into a column of single words. */
  .service-card:nth-child(n) {
    grid-column: span 6;
  }

  .service-card__body {
    width: min(76%, 24rem);
  }

  /* Stood on the top edge of the same card it is hung on. Above 1100px the
     intro and the card grid sit side by side, so the tower rises the full
     160% through the right-hand column and never meets any copy. Below it the
     two stack, putting the paragraph directly above the card, so the rotor is
     brought down into the band between them.

     The GIF is 1500 square and does not sit flush in its frame: the mast runs
     out at y=1085, and the 415px below it hold nothing but the tip of the
     down-pointing blade, 3-16px wide. So 27.67% of the picture is dead space
     under the tower. bottom: 100% lands the frame's edge on the card, and the
     margin pushes it down by that dead space so the mast itself meets the
     edge -- the same join the desktop rule makes. Vertical percentage margins
     resolve against the container's WIDTH, so -15.2% of the card width is
     exactly 27.67% of a picture 55% as wide.

     Only the 72.33% above the mast has to clear the paragraph, which is what
     affords 55%: that puts 40% of the card width above the card, against the
     42-55% of clear room there is between 768px and 1100px. */
  .mission__turbine {
    width: 55%;
    margin-bottom: -15.2%;
  }

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

  /* The photograph's copy stacks under its headline rather than beside it */
  .cta__card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  /* Logo above, contact and social sharing the row beneath it */
  .footer__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .footer__logo {
    grid-column: 1 / -1;
  }

  /* Address takes the full width above the three menu columns */
  .footer__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-col--address {
    grid-column: 1 / -1;
  }


  /* The newsletter panel drops below the card rather than squeezing it */
  .overlay-nav__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .overlay-nav__promo {
    grid-column: 1;
    grid-row: 3;
    min-height: 340px;
  }

  /* --- Business page ---------------------------------------------------- */

  /* Photograph above the definition once the two can no longer share a row.
     The card keeps its hairline, so the pair still reads as one plate. */
  .cbg__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cbg__photo {
    aspect-ratio: 16 / 10;
  }

  .works__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .works__media {
    order: -1;
  }

  /* Two by two rather than four across, which at this width leaves each
     stage too narrow to hold its title beside the number. */
  .works__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why__masthead {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  /* --- About page ------------------------------------------------------- */

  /* The statement can no longer hold a column beside the collage */
  .company__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 44px);
  }

  .company__lead {
    max-width: none;
  }

  /* The photograph loses the right third of the card to the copy, so the
     wash is pulled further across to keep the figures on a clean ground. */
  .impact__body {
    width: min(74%, 640px);
  }

  .impact__wash {
    background:
      linear-gradient(to right,
        #EEF7EA 0%,
        #EEF7EA 44%,
        rgba(238, 247, 234, .9) 56%,
        rgba(238, 247, 234, .5) 68%,
        rgba(238, 247, 234, 0) 82%);
  }

  /* The photograph takes the full width and the two statements go side by
     side underneath it — three across is too narrow to set the copy in. */
  .vm__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vm__media {
    grid-column: 1 / -1;
  }

  .vm__media img {
    min-height: clamp(240px, 34vw, 360px);
  }

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

  /* --- Careers page ----------------------------------------------------- */

  /* Photograph under the benefits once the two can no longer share a row,
     and cut wide so it doesn't become a second screen of its own. */
  .join__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }

  .join__media img {
    aspect-ratio: 16 / 10;
  }

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

  /* The card follows the form rather than squeezing it, and stops sticking
     now that there is no column beside it to travel down. */
  .contact__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }

  .reach {
    position: static;
  }

  /* --- News article page ------------------------------------------------- */

  /* The rail follows the article rather than squeezing it, and stops sticking
     now that there is no column beside it to travel down. The back button goes
     to the head of the page, where it is the first thing on the article. */
  .post__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .post__side {
    position: static;
    display: contents;
  }

  .post__back {
    order: -1;
    margin-bottom: clamp(18px, 2vw, 26px);
  }

  .post__more {
    margin-top: clamp(30px, 3.4vw, 48px);
  }

  /* Two across, now that the list has the page's full width */
  .post__more-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(18px, 2.4vw, 32px);
  }

  .post-more-card:nth-child(2) {
    border-top: 0;
  }

  .post-more-card:nth-child(2) .post-more-card__link {
    padding-top: 0;
  }

  /* --- Job description page --------------------------------------------- */

  /* Same move: the summary card drops under the description and stops
     sticking, since there is no longer a column beside it to travel down. */
  .role__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .role__side {
    position: static;
  }

  /* --- Leadership page -------------------------------------------------- */

  .guided__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }

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

  /* --- Technology page -------------------------------------------------- */

  .tech-intro__inner,
  .highlights__inner,
  .smart__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }

  /* Two by two. Each pair's rule is the only one left, on the second */
  .traits__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  }

  .trait+.trait {
    border-left: 0;
  }

  .trait:nth-child(even) {
    border-left: 1px solid rgba(13, 27, 38, .1);
  }

  /* Two by two as well, so the arrows would point across a row break */
  .route__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(30px, 4vw, 44px);
  }

  .route-step+.route-step::before,
  .route-step+.route-step::after {
    display: none;
  }
}

@media (max-width: 860px) {

  /* Two by two, so each label keeps its own line rather than wrapping to
     three or four across a narrow column. */
  .about__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root {
    --inset: 14px;
    --radius: 20px;
    --tab-w: 208px;
    --tab-h: 66px;
    --notch: 16px;
    --btn-h: 42px;
    --actions-pad: 7px;
  }

  /* The authored break belongs to the wide layout; on a narrow column the
     headline reads better wrapping wherever it lands. */
  .hero__title br {
    display: none;
  }

  .logo-tab {
    padding: var(--inset) 18px 0 calc(var(--inset) + 18px);
  }


  /* No room for five lanes side by side. The section gives up its single-screen
     frame, the rail becomes a stack, the spines are dropped and every lane
     carries its copy at once — there is nothing left for the open/closed
     distinction to do at this width. */
  .uses {
    display: block;
    min-height: 0;
  }

  .uses__title {
    white-space: normal;
    max-width: 20ch;
  }

  .uses__rail {
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 14px;
  }

  .lane {
    flex: none;
    min-height: clamp(300px, 52vw, 400px);
  }

  .lane__hit,
  .lane__spine {
    display: none;
  }

  .lane__photo {
    transform: none;
  }

  /* Every lane carries its copy here, so each takes the deeper wash the open
     lane uses on the rail rather than the light one a closed spine needs. */
  .lane::after {
    background:
      linear-gradient(to top,
        rgba(4, 22, 11, .94) 0%,
        rgba(4, 22, 11, .8) 44%,
        rgba(4, 22, 11, .46) 72%,
        rgba(4, 22, 11, .12) 100%);
  }

  .lane__body {
    right: clamp(16px, 1.4vw, 24px);
    width: auto;
    opacity: 1;
    transform: none;
  }


  /* One card per row, and the caption widened to suit the shorter frame */
  .service-card:nth-child(n) {
    grid-column: span 12;
  }

  .service-card__body {
    width: min(86%, 30rem);
  }

  .header-actions {
    gap: 8px;
  }

  /* Keep only the address pin + menu on small screens, as the reference does */
  .header-actions .pill-btn--round:not(.pill-btn--place) {
    display: none;
  }

  .pill-btn--menu {
    padding: 0 18px;
    gap: 10px;
  }

  .burger {
    width: 20px;
    gap: 4px;
  }

  /* --- Business page ---------------------------------------------------- */

  .innerbanner__card {
    height: clamp(300px, 46vw, 420px);
  }

  /* One column. The plates are wide enough to hold their copy, and the
     alternative is a two-column grid of very tall thin cards. */
  .why__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- About page ------------------------------------------------------- */

  /* The copy needs the whole card at this width, so the photograph goes
     under it rather than beside it: the picture keeps a band at the foot and
     the wash covers everything above. */
  .impact__body {
    width: 100%;
  }

  .impact__card {
    padding-bottom: clamp(120px, 26vw, 200px);
  }

  .impact__wash {
    background:
      linear-gradient(to bottom,
        #EEF7EA 0%,
        #EEF7EA 62%,
        rgba(238, 247, 234, .82) 74%,
        rgba(238, 247, 234, 0) 88%);
  }

  /* Two figures a row rather than four in a line */
  .impact__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* One statement at a time, as with every other card grid at this width */
  .vm__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .values__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- Careers page ----------------------------------------------------- */

  /* The panel needs the whole card at this width, so the picture keeps a
     band at the top and the panel sits across the foot of it. */
  .future__card {
    align-items: flex-end;
    justify-content: stretch;
    padding-top: clamp(300px, 80vw, 420px);
  }

  /* A band across the top of the card rather than the whole of it, held a
     little deeper than the head pad so the engineer's head and shoulders
     clear the panel. Faded out at its foot into the card's own green. */
  .future__photo {
    height: calc(clamp(300px, 80vw, 420px) + 60px);
    object-position: 16% 50%;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
  }

  .future__card::before {
    display: none;
  }

  .future__panel {
    width: 100%;
  }
}

@media (max-width: 560px) {

  /* The seal and the two buttons want the same corner on a phone. The
     buttons win. */
  .hero__spin {
    display: none;
  }

  .feedstock {
    padding-inline: var(--pad);
  }

  /* The section itself carries no side padding — its gutter comes from
     .about__inner's max-width, which stops holding once the viewport is
     narrower than it. Put the gutter back so the copy clears the edge. */
  .about {
    padding-inline: var(--pad);
  }

  /* Faded back on phones. There is no clear margin left for them to sit in
     at this width, so they land on the copy — held light enough to read as a
     watermark behind the text rather than hiding it. Both selectors are
     listed because the reveal sets opacity on .is-in, which would otherwise
     out-specify a plain .about__leaf rule and snap it back to full. */
  .about__leaf,
  .js-reveal .about__leaf.is-in {
    opacity: .3;
  }

  /* 50px of each edge is a lot to give up on a phone — pulled back to the
     same token About, the CTA and the footer use, so the whole page keeps one
     gutter at this width. */
  .uses,
  .news {
    padding-inline: var(--pad);
  }

  /* Dropped on phones: at this width the rotor lands square on the first two
     cards instead of the white band beside them, and 160% of a single-column
     card is far wider than the screen. */
  .mission__turbine {
    display: none;
  }

  /* Nothing left to hold beside the caption, so it runs the whole width of
     the frame. */
  .service-card__body {
    flex: 1;
    width: auto;
  }


  /* Headline, caption and two buttons need more room than a phone viewport
     gives, so the card is allowed to grow past it and the body goes back into
     the flow rather than being pinned to the bottom. */
  .hero__card {
    display: flex;
    align-items: flex-end;
    height: auto;
    min-height: calc(100svh - (var(--inset) * 2));
  }

  .hero__body {
    position: relative;
    inset: auto;
    width: 100%;
    padding-top: calc(var(--tab-h) + var(--pad));
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-pill {
    padding: 13px 22px;
  }

  .mission__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .news__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .news__actions {
    justify-content: stretch;
  }

  .news__actions .btn-outline {
    flex: 1;
    justify-content: center;
  }

  .footer__links {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Everything on its own line once there is no room to pair anything up */
  .footer__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__social {
    justify-content: flex-start;
  }

  .footer__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .overlay-nav__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  /* No room for two columns of links — the sitemap goes back to one stack */
  .overlay-nav__list {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-auto-columns: auto;
  }

  /* The logo tab is hidden behind the overlay at this width, so the overlay's
     own mark is the only one showing — keep it clear of the close button. */
  .overlay-nav__logo {
    width: 110px;
  }

  .pill-btn__label {
    display: none;
  }

  .pill-btn--menu {
    padding: 0 12px;
  }


  /* --- Business page ---------------------------------------------------- */

  /* Same move the hero makes at this width, and for the same reason: the
     logo tab is a fixed 155px and the banner is no longer tall enough to
     keep the copy clear of it. The card grows to its content instead of
     holding a height, and the copy goes back into the flow under a head
     pad that clears the tab. */
  .innerbanner__card {
    display: flex;
    align-items: flex-end;
    height: auto;
    min-height: 300px;
  }

  .innerbanner__body {
    position: relative;
    inset: auto;
    width: 100%;
    padding-top: calc(155px + var(--pad));
  }

  /* One stage at a time, as with every other card grid on the site here */
  .works__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- About page ------------------------------------------------------- */

  /* The collage goes to a single column on a phone: two plates side by side
     leaves each of them too small to read as a photograph. The two columns
     fall under one another and the tall plate is let back into a crop of its
     own, since there is no longer a column beside it to match. */
  .company__collage {
    grid-template-columns: minmax(0, 1fr);
  }

  .company__tile--tall {
    flex: 0 0 auto;
    min-height: 0;
  }

  .company__tile--tall img {
    position: static;
    aspect-ratio: 4 / 3.4;
  }

  /* Stacked, so the label is never squeezed against the figure */
  .impact__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 5vw, 26px);
  }

  /* --- Careers page ----------------------------------------------------- */

  /* The button drops under the title rather than squeezing it */
  .job {
    flex-direction: column;
    align-items: flex-start;
  }

  /* --- News article page ------------------------------------------------- */

  /* One to a row on a phone, where a pair of thumbnails is too small to tell
     one story from another — so the second row goes back to being ruled off
     from the first, as every row below it is. */
  .post__more-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-more-card:nth-child(2) {
    border-top: 1px solid rgba(13, 27, 38, .09);
  }

  .post-more-card:nth-child(2) .post-more-card__link {
    padding-top: 14px;
  }

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

  /* One field to a row; paired, each is too narrow for its placeholder */
  .form {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- Leadership page -------------------------------------------------- */

  /* The principles stack, each ruled off from the next */
  .pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .pillar:nth-child(n) {
    border-right: 0;
    border-bottom: 1px solid rgba(13, 27, 38, .09);
  }

  .pillar:last-child {
    border-bottom: 0;
  }

  /* Two cards a row leaves no room for the LinkedIn mark beside a name, so
     it drops underneath instead of squeezing the name onto two lines. */
  .person__body {
    flex-direction: column;
    gap: 10px;
  }

  /* --- Technology page -------------------------------------------------- */

  /* The flows card can no longer hang off the photograph's edge, so it
     drops under it and laps up over its foot instead. */
  .tech-intro__media {
    padding-right: 0;
  }

  .flow {
    position: relative;
    top: auto;
    width: calc(100% - 32px);
    margin: -36px auto 0;
    transform: none;
  }

  .route__steps,
  .gains {
    grid-template-columns: minmax(0, 1fr);
  }
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}