/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/jost-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/space-grotesk-500.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/space-grotesk-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  /* Dark ink ground throughout the site now, rather than a light page with
     dark accent sections -- --ink is the foreground (text) color that sits
     on it. --green is unchanged: the same brand accent the diagrams already
     key off. --bg-alt is the panel color: a shade lighter than the page, so
     the bands down the homepage alternate and read as distinct sections.
     Figure cards fill with --bg so they sit as darker cards on a panel. */
  --bg: #05070a;
  --bg-alt: #0a0e12;
  --ink: #eef2ec;
  /* body copy: the foreground at 80%, so paragraphs read as text rather
     than a grey slab; labels and captions stay in --ink-soft */
  --ink-body: rgba(238, 242, 236, 0.8);
  --ink-soft: #8b968a;
  --rule: rgba(255, 255, 255, 0.08);
  --green: #6AAB2A;
  --green-dark: #8ec94e;
  /* only the homepage hero uses it: the colour of time being wrong */
  --red: #ff4438;
  --font: "IBM Plex Sans", "Century Gothic", "Futura", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background-color: var(--bg);
}

h1, h2, h3 {
  font-family: var(--font-display);
}

.mono-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Navbar */
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: rgba(9, 13, 11, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  border-bottom: 1px solid var(--rule);
}

.nav-brand {
  display: flex;
  align-items: center;
}

.nav-brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo {
  /* Sized by height so the green mark is as tall as the old header mark
     was (39px). The mark is 193 of the lockup's 293px, so 60px overall.
     Width follows from the image. */
  height: 60px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Six links beside a 410px lockup: tracked a touch tighter than the other
   mono labels so the row holds one line down to a small laptop window */
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-links a.current {
  color: var(--green);
}

.nav-links a:hover {
  color: var(--green);
}

/* Hero stage: one viewport-tall box holding the animated hero and the text
   hero stacked on top of each other. Sits in normal document flow -- the
   page scrolls straight from here into Why It Matters. */
.hero-stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

/* Background layer: the drifting starfield. Sits at the back of the stack.
   Dark while the opening sequence plays -- its black stretches are meant to
   be black -- and fades up once the brand lands. */
.hero-anim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  z-index: 0;
}

.hero-anim::before,
.hero-anim::after {
  content: "";
  position: absolute;
  inset: -20% -20%;
  background-repeat: repeat;
  pointer-events: none;
  will-change: transform;
}

.hero-anim::before {
  background-image:
    radial-gradient(1.6px 1.6px at 40px 60px, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 110px 20px, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.8px 1.8px at 180px 110px, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 240px 50px, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1.4px 1.4px at 20px 140px, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.6px 1.6px at 150px 170px, rgba(255, 255, 255, 0.8), transparent 100%);
  background-size: 260px 200px;
  animation: hero-starfield-drift 45s linear infinite;
}

.hero-anim::after {
  background-image:
    radial-gradient(1px 1px at 60px 30px, rgba(106, 171, 42, 0.55), transparent 100%),
    radial-gradient(1.4px 1.4px at 200px 90px, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 320px 160px, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1.2px 1.2px at 90px 190px, rgba(255, 255, 255, 0.4), transparent 100%);
  background-size: 380px 280px;
  opacity: 0.7;
  animation: hero-starfield-drift 75s linear infinite reverse;
}

@keyframes hero-starfield-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-260px, -200px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim::before,
  .hero-anim::after {
    animation: none;
  }
}

/* Text hero: the brand, sitting on top of the starfield in the same box. Its
   own background is transparent so the stars stay visible around the text.
   It is also the final phase of the opening sequence, so it takes the same
   .hero-phase visibility rules as the rest of it. */
.hero-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5.5rem 2rem 4rem;
  color: var(--ink);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

/* Opening sequence
   ----------------
   .hero-stage carries one of three states. None: JavaScript never ran, so
   the sequence layer is display: none and the brand simply sits there.
   .is-playing: the script owns the box, every phase is hidden except the one
   it has marked .is-active, and the starfield is held dark. .is-done: the
   sequence has ended (or was skipped for reduced motion), the sequence layer
   is gone again, and the brand plays its entrance. Phases are hidden with
   visibility as well as opacity so an inactive one is neither seen nor
   focusable nor counted as visible by a test. */
.hero-seq {
  display: none;
}

.hero-stage.is-playing .hero-seq {
  display: block;
}

.hero-stage.is-playing .hero-phase {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.hero-stage.is-playing .hero-phase.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

/* the clock cuts straight in; only the readout and the lines fade */
.hero-stage.is-playing .hero-phase-clock {
  transition: none;
}

.hero-stage.is-playing .hero-anim {
  opacity: 0;
}

.hero-stage.is-done .hero-anim {
  animation: hero-fade-in 2.4s ease-out both;
}

.hero-phase {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5.5rem 2rem 4rem;
}

/* A single red pulse across the whole box at the moment the clock goes
   wrong. */
.hero-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 68, 56, 0.5), rgba(255, 68, 56, 0) 70%);
}

.hero-flash.is-on {
  animation: hero-flash 0.8s ease-out both;
}

/* Phase 1: a digital world clock, one city at a time, all in sync -- until
   the last one lands 37 minutes off and turns red. */
.hero-phase-clock {
  gap: 1.1rem;
}

.hero-clock-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--green);
}

.hero-clock {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(2rem, 9vw, 8.25rem);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--green);
  text-shadow: 0 0 28px rgba(106, 171, 42, 0.42);
}

.hero-clock-status {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  min-height: 1.3em;
  white-space: pre;
  opacity: 0;
}

.hero-phase-clock.is-switching .hero-clock {
  animation: hero-clock-switch 0.22s steps(2, end) both;
}

.hero-phase-clock.is-wrong .hero-clock-label {
  color: var(--red);
}

.hero-phase-clock.is-wrong .hero-clock {
  color: var(--red);
  text-shadow: 0 0 32px rgba(255, 68, 56, 0.55);
  animation: hero-clock-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.hero-phase-clock.is-wrong .hero-clock-status {
  opacity: 1;
  animation: hero-blink 0.7s steps(2, end) infinite;
}

/* Phase 2: a status readout. Seven lines stack up, each a system in the
   foreground, a dotted leader and a status in the diagrams' red, then the
   whole stack fades. */
.hero-phase-readout {
  justify-content: center;
}

.hero-readout {
  list-style: none;
  width: min(100%, 36rem);
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.78rem, 1.5vw, 1rem);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-align: left;
}

.hero-readout li {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  padding: 0.42em 0;
  opacity: 0;
}

/* each line lands with the same digital corruption as before: a dip, a
   shove sideways and a red/green split that settles in half a second */
.hero-readout li.is-on {
  opacity: 1;
  animation: hero-glitch 0.5s steps(1, end) both;
}

.hero-readout-system {
  color: var(--ink);
  white-space: nowrap;
}

.hero-readout-leader {
  flex: 1;
  min-width: 1.5em;
  border-bottom: 2px dotted rgba(238, 242, 236, 0.3);
  transform: translateY(-0.3em);
}

.hero-readout-status {
  color: var(--red);
  white-space: nowrap;
}

@keyframes hero-glitch {
  0% {
    opacity: 0.55;
    transform: translate(-7px, 0);
    text-shadow: 4px 0 var(--red), -4px 0 var(--green);
  }
  35% {
    opacity: 1;
    transform: translate(5px, -2px);
    text-shadow: -3px 0 var(--red), 3px 0 var(--green);
  }
  65% {
    transform: translate(-2px, 1px);
    text-shadow: 1px 0 var(--red), -1px 0 var(--green);
  }
  100% {
    transform: none;
    text-shadow: none;
  }
}

/* Phases 3 and 4: one line of copy each, fading in and out. The question
   is in ink; the answer is in the brand green. */
.hero-phase-line p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.55rem, 4.2vw, 2.7rem);
  line-height: 1.2;
  max-width: 17em;
  text-wrap: balance;
  color: var(--ink);
}

.hero-phase-line[data-phase="answer"] p {
  color: var(--green);
}


/* Phase 5: the brand. The lockup pops in, then the line and the links rise
   one after another. */
.hero-stage.is-done .hero-text h1 {
  animation: hero-pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

.hero-stage.is-done .hero-text p.hero-tagline {
  animation: hero-rise 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) 0.45s both;
}

@keyframes hero-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-flash {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes hero-clock-switch {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@keyframes hero-clock-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-7px, 0, 0); }
  40%, 60% { transform: translate3d(7px, 0, 0); }
}

@keyframes hero-blink {
  from { opacity: 1; }
  to { opacity: 0.15; }
}

@keyframes hero-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion never sees the sequence (the script skips straight to
   .is-done), and the brand's entrance is dropped too. */
@media (prefers-reduced-motion: reduce) {
  .hero-stage.is-done .hero-anim,
  .hero-stage.is-done .hero-text h1,
  .hero-stage.is-done .hero-text p.hero-tagline {
    animation: none;
  }
}

/* Scroll reveal: each major content section fades and rises into view the
   first time it's well into the viewport. Gated on html.reveal-ready (set by
   an inline script in the head) so the sections stay fully visible if
   JavaScript never runs, instead of getting stuck invisible. */
html.reveal-ready .block,
html.reveal-ready .contact,
html.reveal-ready .team,
html.reveal-ready .cta-band {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 2s cubic-bezier(0.2, 0.6, 0.2, 1), transform 2s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: opacity, transform;
}

html.reveal-ready .block.is-visible,
html.reveal-ready .contact.is-visible,
html.reveal-ready .team.is-visible,
html.reveal-ready .cta-band.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .block,
  html.reveal-ready .contact,
  html.reveal-ready .team,
  html.reveal-ready .cta-band {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero-rule {
  width: 48px;
  height: 2px;
  background: var(--green);
  margin: 0 auto 2rem;
}

/* The name is the logo lockup itself, never typed. Sized by width: about
   60% of the hero on desktop, between 320px and 720px, and 90% of the
   viewport on a phone. No height limit; the PNG is served at its full
   2000px so the thin wordmark stays crisp on a retina screen. */
.hero-text h1 {
  margin-bottom: 1.25rem;
  line-height: 0;
}

.hero-lockup {
  display: block;
  width: clamp(320px, 60vw, 720px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.hero-text p.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.3vw, 1.5rem);
  font-weight: 500;
  color: var(--green);
  line-height: 1.3;
  margin-bottom: 0;
  text-wrap: balance;
}

/* Page masthead: standalone pages (The Service, About Us, Careers) that aren't the homepage */
.page-masthead {
  text-align: center;
  padding: 4.5rem 2rem 3.5rem;
}

.page-masthead .hero-rule {
  margin: 0 auto 1.75rem;
}

.page-masthead h1 {
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 0.85rem 1.8rem;
  border: 1px solid var(--green);
  border-radius: 2px;
  transition: background-color 0.2s, color 0.2s;
}

.btn:hover {
  background-color: var(--green);
  color: #08110a;
}

/* Filled button: the one place on the page that gets a solid accent fill,
   reserved for the CTA band's single call to action. */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #08110a;
  text-decoration: none;
  padding: 0.95rem 2rem;
  background-color: var(--green);
  border: 1px solid var(--green);
  border-radius: 2px;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn-solid:hover {
  background-color: var(--green-dark);
  border-color: var(--green-dark);
}

/* a link inside a line of copy: green and underlined */
.text-link {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.text-link:hover {
  color: var(--green-dark);
}

/* CTA band: the full-width closing pitch at the foot of the homepage and
   The Service, replacing what used to be the inline contact form on the
   homepage -- Contact is now its own page. */
.cta-band {
  padding: 4.5rem 2rem;
  text-align: center;
  background-color: var(--bg-alt);
  border-top: 1px solid var(--rule);
}

.cta-band-inner {
  max-width: 640px;
  margin: 0 auto;
}

.cta-band h2 {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  text-wrap: balance;
}

.cta-band p {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Generic full-width content block, alternating background down the page */
.block {
  padding: 4.5rem 10% 5rem;
  border-top: 1px solid var(--rule);
}

.block-alt {
  background-color: var(--bg-alt);
}

.block-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.block h2 {
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
  text-align: center;
}

.block-text {
  max-width: 44rem;
  margin: 0 auto;
}

.block-text p {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-body);
  line-height: 1.65;
  text-align: center;
}

.block-text p + p {
  margin-top: 1.25rem;
}

.block-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* Text + diagram split blocks: body text and a diagram, nothing else */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

.split.reverse .split-text {
  order: 2;
}

.split.reverse .split-figure {
  order: 1;
}

.split-text p {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.75;
  text-align: left;
}

.split-text h2,
.split-text h3 {
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  text-align: left;
}

/* Diagrams sit inside a bordered card, matching --bg exactly (not --bg-alt)
   so a diagram's own var(--bg) fills -- used to occlude the far side of the
   globe in the coverage diagram -- always match the card behind them. */
.split-figure {
  background-color: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.75rem;
}

.split-figure .diagram {
  display: block;
  width: 100%;
  height: auto;
}

/* Home page teasers linking into The Service page */
.teaser-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto 2.5rem;
}

.teaser-header h2 {
  text-align: left;
  margin-bottom: 0;
}

.teaser-explore {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 0.4rem;
}

.teaser-explore:hover {
  text-decoration: underline;
}

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  max-width: 1080px;
  margin: 0 auto;
  background-color: var(--rule);
  border: 1px solid var(--rule);
}

.teaser-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: var(--bg);
  padding: 2.25rem 2rem;
  transition: background-color 0.2s;
}

/* An odd card count leaves the last one unpaired -- span it across both
   columns instead of leaving an empty cell next to it. */
.teaser-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Three cards side by side, one per thing the service delivers */
.teaser-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.teaser-grid-3 .teaser-card:last-child:nth-child(odd) {
  grid-column: auto;
}

a.teaser-card:hover {
  background-color: var(--bg-alt);
}

.teaser-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 0.75rem;
  color: var(--ink);
  transition: color 0.2s;
}

.teaser-card p {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-body);
  line-height: 1.6;
}

.teaser-card .teaser-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--green);
  margin-bottom: 1rem;
}

a.teaser-card:hover h3 {
  color: var(--green);
}

/* Stat row: three figures side by side under a text block */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
}

.stat {
  border-top: 1px solid rgba(106, 171, 42, 0.35);
  padding-top: 1.5rem;
  text-align: center;
}

.stat-figure {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--green-dark);
  margin-bottom: 0.75rem;
}

.stat-caption {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ink-body);
  line-height: 1.6;
}

.stat-source {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  opacity: 0.8;
  margin-top: 0.75rem;
}

.stat-note {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 3rem;
}

/* The Approach: sub-blocks share one section shell */
.approach-shell {
  border-top: 1px solid var(--rule);
}

.approach-sub {
  padding: 3.5rem 10%;
}

.approach-sub + .approach-sub {
  border-top: 1px solid var(--rule);
}

.approach-sub.block-alt {
  background-color: var(--bg-alt);
}

.approach-sub .split-text h3 {
  font-size: 1.5rem;
}

.approach-heading {
  padding: 4rem 10% 0;
  text-align: center;
}

.approach-heading h2 {
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.01em;
}

/* Team */
.team {
  padding: 4rem 10%;
  border-top: 1px solid var(--rule);
}

.team h2 {
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.01em;
  margin-bottom: 2.5rem;
  text-align: center;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
  max-width: 880px;
  margin: 0 auto;
}

.team-card {
  text-align: center;
}

.team-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.25rem;
  border: 1px solid var(--rule);
}

.team-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-alt);
  border: 1px solid var(--rule);
  color: var(--green);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}

/* Name and its LinkedIn icon sit on one centered line together */
.team-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.team-card h3 {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* LinkedIn's own mark, so its blue is fixed in the SVG rather than themed
   here. Hover fades it instead of recolouring it. */
.team-linkedin {
  display: inline-flex;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.team-linkedin svg {
  width: 16px;
  height: 16px;
  display: block;
}

.team-linkedin:hover,
.team-linkedin:focus-visible {
  opacity: 0.7;
}

.team-title {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.9rem;
}

.team-bio {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ink-body);
  line-height: 1.6;
  text-align: center;
}

/* Press and mission links under a bio: a short stack, centred under the bio
   like the rest of the card */
.team-links {
  list-style: none;
  margin-top: 0.9rem;
}

.team-links li + li {
  margin-top: 0.35rem;
}

.team-link {
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--green);
  text-decoration: none;
}

.team-link:hover,
.team-link:focus-visible {
  text-decoration: underline;
}

/* Contact */
.contact {
  padding: 4rem 10%;
  background-color: var(--bg-alt);
  border-top: 1px solid var(--rule);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}

.contact h1 {
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.contact p {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-body);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.contact-sub {
  margin-bottom: 0;
}

.success-message {
  color: var(--green-dark);
  font-weight: 500;
  margin-top: 1rem;
}

.error-message {
  color: #e2685a;
  font-weight: 500;
  margin-top: 1rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  width: 100%;
  max-width: none;
  margin: 0;
  font-family: var(--font);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  background-color: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0.1rem;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  width: 100%;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--ink-soft);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--green);
}

/* the native control paints its own chrome, which fights the underline the
   other fields use, so draw the arrow ourselves */
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b968a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.15rem center;
  background-size: 0.7rem;
}

/* the prompt row reads as placeholder text until a real option is picked */
.contact-form select:invalid {
  color: var(--ink-soft);
}

.contact-form select option {
  color: #1c231e;
}

.contact-form textarea {
  height: 110px;
  resize: vertical;
}

.contact-form input[type="submit"] {
  align-self: flex-start;
  background-color: transparent;
  border: 1px solid var(--green);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 0.8rem 1.8rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  width: auto;
}

.contact-form input[type="submit"]:hover {
  background-color: var(--green);
  color: #08110a;
}

/* Submission confirmation dialog */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(4, 6, 5, 0.72);
  /* under the intro overlay (9999) so it can never cover it, over the navbar */
  z-index: 500;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  position: relative;
  background-color: var(--bg-alt);
  border: 1px solid var(--rule);
  padding: 2.5rem 2.75rem;
  max-width: 26rem;
  width: 100%;
  text-align: left;
}

.modal h3 {
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.modal-body {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
}

.modal-close:hover {
  color: var(--ink);
}

.modal-dismiss {
  background-color: transparent;
  border: 1px solid var(--green);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 0.8rem 1.8rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.modal-dismiss:hover {
  background-color: var(--green);
  color: #08110a;
}

.footer {
  text-align: center;
  padding: 2.75rem 1rem 2rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  background-color: var(--bg);
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}

.footer-locations {
  margin-bottom: 2rem;
}

.footer-locations-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.1rem;
}

.footer-location-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.75rem;
}

.footer-location {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.footer-location-name {
  font-weight: 500;
  color: var(--ink);
}

.footer-location-city {
  font-weight: 400;
  color: var(--ink-soft);
}

.footer-copy {
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  max-width: 44rem;
  margin: 0 auto;
}

/* Subheading and closing link inside a text block */
.block-text p.block-sub {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--green);
  line-height: 1.4;
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.block-text p.block-link {
  margin-top: 1.75rem;
}

.block-link a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
}

.block-link a:hover {
  text-decoration: underline;
}

.block-cta-left {
  text-align: left;
}

/* Split with the two sides aligned to the top rather than centred, for a
   figure that runs taller than its text */
.split.split-top {
  align-items: start;
}

/* Customer-side service diagram, in a card like every other figure. The
   wide drawing is for desktop, the stacked one for narrow screens. */
.service-diagram {
  background-color: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.75rem;
  margin: 2.5rem auto 0;
  max-width: 1080px;
}

.service-diagram .diagram {
  display: block;
  width: 100%;
  height: auto;
}

.service-diagram .diagram-stacked {
  display: none;
  max-width: 360px;
  margin: 0 auto;
}

.service-diagram figcaption {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.6;
  margin-top: 1.5rem;
}

.service-diagram-small {
  max-width: 520px;
  margin-top: 2.5rem;
}

/* Three steps to service, in a strip like the teaser cards */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 1080px;
  margin: 2.5rem auto 0;
  background-color: var(--rule);
  border: 1px solid var(--rule);
}

.step {
  background-color: var(--bg);
  padding: 1.75rem 1.75rem 1.9rem;
}

.step-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.9rem;
}

.step p + p {
  font-size: 0.98rem;
  color: var(--ink-body);
  line-height: 1.6;
}

/* Who it is for: six tiles, three across */
.segment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 1080px;
  margin: 0 auto;
  background-color: var(--rule);
  border: 1px solid var(--rule);
}

/* a tile left alone on the last row spans it rather than leaving empty
   cells beside it */
.segment-grid .segment:last-child:nth-child(3n+1) {
  grid-column: 1 / -1;
}

.segment {
  display: block;
  background-color: var(--bg);
  padding: 2rem 1.75rem 2.1rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s;
}

a.segment:hover {
  background-color: var(--bg-alt);
}

a.segment:hover h3 {
  color: var(--green);
}

.segment h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 0.6rem;
  transition: color 0.2s;
}

.segment p {
  font-size: 0.95rem;
  color: var(--ink-body);
  line-height: 1.6;
}

/* Bands: a headline and lead centred in a column no wider than 44rem, the
   band's visual full width beneath it, and where a band has two text parts
   they sit side by side as a pair. */
.band {
  padding: 5rem 10%;
}

.band h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  margin-bottom: 1.25rem;
  text-align: center;
  text-wrap: balance;
}

.band-head {
  max-width: 44rem;
  margin: 0 auto 2.75rem;
  text-align: center;
}

.band-head h2:last-child {
  margin-bottom: 0;
}

.band-head p {
  font-size: 1.05rem;
  color: var(--ink-body);
  line-height: 1.65;
  text-wrap: pretty;
}

/* a diagram fills its column, never smaller */
.wyg-panel .service-diagram {
  max-width: none;
  width: 100%;
  margin: 0;
}

.band-link {
  text-align: center;
  margin-top: 2.5rem;
}

.band-link a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
}

.band-link a:hover {
  text-decoration: underline;
}

/* Homepage bands: a kicker, the headline and one sentence sit left-aligned
   in a 44rem column; the visual beneath runs the full content width */
.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
}

.band-left .band-head {
  margin: 0 0 2.75rem;
  text-align: left;
}

.band-left h2 {
  text-align: left;
}

.band-left .band-link {
  text-align: left;
}

/* The homepage's Why timing band: a paragraph between the icon cards and
   the statistics, left-aligned in the band's column, opening on a run-in
   lead in the headline colour rather than a subheading of its own */
.band-left .band-run-in {
  margin: 3rem 0 0;
}

.band-left .band-run-in p {
  text-align: left;
}

.band-left .band-run-in strong {
  font-weight: 600;
  color: var(--ink);
}

/* one muted line under a visual, before the band's link */
.band-aside {
  max-width: 44rem;
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.band-aside a {
  color: var(--ink-body);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.band-aside a:hover {
  color: var(--green);
}

/* Icon cards: a row of four, an icon, a label and an optional line */
.icon-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 1080px;
  margin: 0 auto;
  background-color: var(--rule);
  border: 1px solid var(--rule);
}

.icon-cards-2 {
  grid-template-columns: repeat(2, 1fr);
}

.icon-card {
  background-color: var(--bg);
  padding: 1.9rem 1.25rem 1.75rem;
  text-align: center;
}

.icon-card .icon {
  width: 34px;
  height: 34px;
  color: var(--green);
  margin: 0 auto 1rem;
  display: block;
}

.icon-card-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.icon-card-line {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 0.35rem;
}

/* Long pages: a line under the heading, then a row of band titles that
   sticks under the navbar and scrolls sideways on a phone. Only the
   selected band shows; with scripting off every band shows, stacked. */
.masthead-sub {
  max-width: 44rem;
  margin: 1.25rem auto 0;
  font-size: 1.1rem;
  color: var(--ink-body);
  line-height: 1.6;
  text-wrap: balance;
}

.band-tabs-wrap {
  position: sticky;
  top: var(--nav-h, 0px);
  z-index: 50;
  background-color: rgba(5, 7, 10, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.band-tabs {
  /* centred, and wrapping rather than scrolling, so every title is on the
     screen at every width: four on The Service sit on one centred row, the
     seven on Industries fill one row on a wide screen and wrap below it */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

.band-tabs a {
  flex: none;
  padding: 1rem 0.95rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}

.band-tabs a:hover {
  color: var(--ink);
}

.band-tabs a.is-active {
  color: var(--green);
  border-bottom-color: var(--green);
}

html.tabs-ready [data-tab-band]:not(.is-active) {
  display: none;
}

/* A band's anchor lands below the navbar and the title bar, not under them */
.band[id] {
  scroll-margin-top: calc(var(--nav-h, 73px) + var(--tabs-h, 52px));
}

.wyg-panel[id] {
  scroll-margin-top: calc(var(--nav-h, 73px) + var(--tabs-h, 52px) + 1rem);
}

/* Parts within one band, split by a rule rather than a change of
   background */
.band-part {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid var(--rule);
}

.band-head p:last-child,
.band-head .band-sub:last-child {
  margin-bottom: 0;
}

.band-sub {
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  text-wrap: balance;
}

.band-text {
  max-width: 44rem;
  margin: 3rem auto 0;
}

.band-text p {
  font-size: 1.05rem;
  color: var(--ink-body);
  line-height: 1.65;
  text-align: center;
}

.band-text p + p {
  margin-top: 1.25rem;
}

/* a closing aside inside a paragraph: a size down, italic, on its own line */
.band-fine {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.92em;
  font-style: italic;
  color: var(--ink-soft);
}

/* What you get: four panels, copy on one side and a small diagram on the
   other, sides swapping down the band */
.service-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--green);
  margin-bottom: 0.9rem;
}

.wyg-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  padding: 3.5rem 0;
  border-top: 1px solid var(--rule);
}

.band-head + .wyg-panel,
.wyg-panel:first-child {
  border-top: none;
  padding-top: 0;
}

.wyg-panel:last-child {
  padding-bottom: 0;
}

.wyg-panel:nth-child(even) .wyg-text {
  order: 2;
}

.wyg-text h3 {
  text-align: left;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

.wyg-text p {
  font-size: 1.05rem;
  color: var(--ink-body);
  line-height: 1.65;
  max-width: 44rem;
}

.wyg-panel .service-diagram {
  margin: 0;
  max-width: none;
}

/* Industries: one band per industry, its "what you get" strip in a row
   under the copy */
.band-industry {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.band-industry .band-head {
  margin-bottom: 2rem;
}

.segment-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.segment-strip-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-right: 0.4rem;
}

.segment-strip-centered {
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
}

.segment-chip {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  line-height: 1.3;
}

/* Contact: the locations sit under the form */
.contact-locations {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.contact-locations-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.6rem;
}

.contact-location-list {
  list-style: none;
}

.contact-location {
  font-size: 0.98rem;
  line-height: 1.7;
}

.contact-location-name {
  font-weight: 500;
  color: var(--ink);
}

.contact-location-city {
  color: var(--ink-soft);
}

/* Mobile styles - applies to screens 768px wide or smaller */
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .wyg-panel {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .wyg-panel:nth-child(even) .wyg-text {
    order: 0;
  }

  .wyg-panel .service-diagram {
    max-width: 520px;
    margin: 0 auto;
  }

  .teaser-grid-3,
  .segment-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .segment-grid .segment:last-child:nth-child(3n+1) {
    grid-column: auto;
  }

  .segment-grid .segment:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .teaser-grid-3 .teaser-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .split.reverse .split-text {
    order: 1;
  }

  .split.reverse .split-figure {
    order: 2;
  }

  .split-text h2,
  .split-text h3,
  .split-text p {
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* Navbar */
  .navbar {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }

  .nav-links {
    margin-left: 0;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-logo {
    height: 48px;
  }

  /* Hero */
  .hero-text,
  .hero-phase {
    padding: 3.5rem 1.5rem 4rem;
  }

  .hero-lockup {
    width: 90vw;
  }

  .page-masthead {
    padding: 3.5rem 1.5rem 4rem;
  }

  /* Content blocks / Team / Contact sections */
  .block,
  .approach-sub,
  .approach-heading,
  .team,
  .contact {
    padding: 3rem 1.5rem;
  }

  .teaser-grid,
  .teaser-grid-3,
  .segment-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .icon-cards,
  .icon-cards-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .band {
    padding: 3.5rem 1.5rem;
  }

  .cta-band {
    padding: 3.5rem 1.5rem;
  }

  .band-part {
    margin-top: 3rem;
    padding-top: 3rem;
  }

  .band-tabs a {
    padding: 0.8rem 0.7rem 0.7rem;
    font-size: 0.7rem;
  }

  .service-diagram {
    padding: 1.25rem 1rem;
  }

  .service-diagram .diagram-wide {
    display: none;
  }

  .service-diagram .diagram-stacked {
    display: block;
  }

  .stat-row {
    gap: 1.5rem;
    margin-top: 2.5rem;
  }

  .stat-figure {
    font-size: 2.25rem;
  }

  .block h2,
  .approach-heading h2,
  .team h2,
  .contact h2 {
    font-size: 1.5rem;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Contact - stack columns on mobile */
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Footer - one location per line so the name/city pairs stay readable */
  .footer-location-list {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
  }

  .footer-location {
    font-size: 0.95rem;
  }
}

/* phones: the statistics stack */
@media (max-width: 600px) {
  .stat-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}