/* ==========================================================================
   Tokens: "Nocturne"
   Dark slate-green ground, pale lichen accent, stone for the light sections.
   Every text pair meets WCAG AAA (7:1), including hero text over the brightest
   point of the photo under the overlay. --line is decorative only, never text.
   ========================================================================== */
:root {
  /* "Nocturne Light": pale green-white ground, deep green text,
     dark green bands for testimonials and FAQ. Every text pair meets
     WCAG AAA, including hero text over the darkest pixel of the photo. */
  --bg: #f7f8f5;          /* page background */
  --bg2: #edf1ea;         /* raised surfaces: cards, panels, inputs */
  --line: #d3dbd0;        /* decorative dividers */
  --on: #13261c;          /* primary text */
  --on2: #2b3e33;         /* secondary text */
  --acc: #1d4630;         /* deep green: accent text, buttons, bullets */
  --acc-large: #1f4d33;   /* headline green, large text only: 5:1 over the darkest pixel of the hero photo */
  --acc-ink: #ffffff;     /* text on deep green */
  --error: #8a1c12;       /* form error text */

  --light: #13261c;       /* deep green bands: testimonials and FAQ */
  --ink: #eef1ea;         /* primary text on the bands */
  --ink2: #c3cec6;        /* secondary text on the bands */
  --ink-acc: #c4d4a4;     /* lichen accent on the bands */

  --tint: #f7f8f5;        /* hero base, under the photo */
  --ov: 247 248 245;      /* hero overlay colour (rgb channels of --bg) */

  --font: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --gutter: 1.25rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

@media (min-width: 640px) {
  :root { --gutter: 3.5rem; }
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--on);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; }

::selection { background: var(--acc); color: var(--acc-ink); }

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--acc);
  color: var(--acc-ink);
  font-weight: 700;
  padding: .75rem 1.25rem;
}
.skip-link:focus { top: 1rem; }
/* In-page link targets take focus so Tab continues from them; they are not interactive, so no ring */
#content:focus,
#background:focus { outline: none; }

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

/* ==========================================================================
   Animation
   ========================================================================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fade-up .7s var(--ease-out) both; }
.delay-1 { animation-delay: 80ms; }
.delay-2 { animation-delay: 130ms; }
.delay-3 { animation-delay: 180ms; }
.delay-4 { animation-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { animation: none; }
  * { transition: none !important; }
}

/* ==========================================================================
   Shared components
   ========================================================================== */
.section { padding: 2.5rem var(--gutter); }
@media (min-width: 640px) {
  .section { padding-block: 3rem; }
}
@media (min-width: 1024px) {
  .section { padding-block: 7rem; }
}
/* Back-to-back sections on the same background share one gap rather than two */
.section:not(.section--light, .section--raised, .section--split) + .section:not(.section--light, .section--raised, .section--split) { padding-top: 0; }

/* Light stone sections (testimonials, FAQ) */
.section--light { background: var(--light); color: var(--ink); }
.section--light :focus-visible { outline-color: var(--ink); }
.section--light .eyebrow { color: var(--ink-acc); }
.section--light .section-head { padding-bottom: 0; border-bottom: 0; }

.section--raised { background: var(--bg2); }

.container { max-width: 74rem; margin-inline: auto; }

/* Headings: Archivo at its widest cut, set in capitals */
.display {
  font-family: var(--font);
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: 1.02;
}
.display em { font-style: normal; color: var(--acc-large); }

.eyebrow {
  color: var(--acc);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}
/* A large title under the label needs more room before the content */
.section-head:has(.section-title) { margin-bottom: 2.5rem; }
@media (min-width: 640px) {
  .section-head { margin-bottom: 1.5rem; }
  .section-head:has(.section-title) { margin-bottom: 3.5rem; }
}
.section-head .eyebrow { font-size: clamp(.9375rem, .4vw + .8rem, 1.125rem); }
.section-title {
  font-size: clamp(1.75rem, 3.6vw + .75rem, 3.75rem);
  max-width: 24ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .875rem 1.5rem;
  background: var(--acc);
  color: var(--acc-ink);
  font-size: .9375rem;
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .25s, color .25s;
}
.btn:hover { background: var(--on); color: var(--bg); }

/* Square-bullet list */
.list { display: grid; gap: .5rem; }
.list li { position: relative; padding-left: 1.25rem; }
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: .4rem;
  height: .4rem;
  background: var(--acc);
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--on2);
  transition: color .25s;
}
.icon-link:hover { color: var(--on); }

/* ==========================================================================
   Hero: the photo fills the header and hero, toned and sunk under the overlay
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tint);
}

/* Stops 2px short of the bottom: the filter puts the photo on its own layer, which
   can round past the wash at fractional hero heights and show as a hairline */
.hero__photo {
  position: absolute;
  inset: 0 0 2px;
  z-index: -2;
  width: 100%;
  height: calc(100% - 2px);
  max-width: none;
  object-fit: cover;
  object-position: 40% 0%;
  filter: saturate(.8);
  pointer-events: none;
}
/* Phones get a less tightly trimmed crop, centred on Peter */
@media (max-width: 759px) {
  .hero__photo { object-position: 25% 0%; }
}
/* Tablets in portrait get the fixed menu-button header but keep the wide
   photo. Sliding the photo down by the header's height keeps it at full size
   and keeps Peter's head clear of the header. The clip trims what slides past
   the bottom, keeping the photo 2px short of the edge as above. */
@media (min-width: 760px) and (max-width: 899px) {
  .js .hero__photo {
    transform: translateY(var(--header-h));
    clip-path: inset(0 0 var(--header-h) 0);
  }
}
/* The white overlay never drops below 75%. Hero text all uses --on, which
   keeps 7:1 (8.2:1) over the darkest pixel of the photo at that strength */
.hero__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(var(--ov) / .75) 0%,
    rgb(var(--ov) / .78) 55%,
    rgb(var(--ov)) 100%);
}

/* Header */
.site-header {
  position: relative;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem var(--gutter);
}

/* Phones and tablets in portrait: header stays pinned to the top. It's fixed
   rather than sticky because .hero clips overflow. Without JS the nav wraps,
   so it stays static. Below 900px the full nav doesn't fit on one line
   (iPad mini portrait is 768px), so the menu button takes over. */
@media (max-width: 899px) {
  :root { --header-h: 4.5rem; }
  html.js { scroll-padding-top: calc(var(--header-h) + 1rem); }
  .js .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    padding-block: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  /* .hero isolates its own stacking context, so the header's z-index only counts
     inside it. Raising the hero keeps the fixed header above positioned content
     further down (list bullets, tooltips) as it scrolls underneath. */
  .js .hero { padding-top: var(--header-h); z-index: 30; }
}

.site-header__name {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.site-header__name svg { flex-shrink: 0; }

.nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  color: var(--on2);
  font-size: .9375rem;
  font-weight: 700;
  font-stretch: 112%;
  transition: color .25s, background-color .25s;
}
.nav__link:not(.nav__cta):hover,
.nav__link:not(.nav__cta):focus-visible {
  color: var(--on);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.nav__cta {
  color: var(--on);
  border: 1px solid var(--on2);
  padding: 0 1rem;
}
.nav__cta:hover { background: var(--on); color: var(--bg); }

/* Mobile menu: a button toggles .is-open (see script in index.html).
   Without JavaScript the links simply wrap under the name. */
.nav-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  margin-right: -.75rem;
  color: var(--on);
}
.nav-toggle-btn .icon-close { display: none; }
.nav-toggle-btn[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle-btn[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 899px) {
  html:not(.js) .site-header { flex-wrap: wrap; gap: .5rem; }
  html:not(.js) .nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

  .js .nav-toggle-btn { display: inline-flex; }
  .js .nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: .5rem var(--gutter) 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .js .nav.is-open .nav__link {
    min-height: 52px;
    border-bottom: 1px solid var(--line);
  }
  .js .nav.is-open .nav__cta {
    justify-content: center;
    margin-top: 1.25rem;
    border: 1px solid var(--on2);
  }
  .js .nav.is-open .icon-link { margin-top: .75rem; align-self: flex-start; margin-left: -.75rem; }
}

@media (min-width: 900px) {
  .nav { display: flex; }
}

/* Hero body */
.hero__body {
  position: relative;
  z-index: 10;
  padding: 3.5rem var(--gutter) 3rem;
}
@media (min-width: 640px) {
  .hero__body { padding-block: clamp(5rem, 11vw, 9rem) 3rem; }
}
@media (min-width: 1024px) {
  .hero__body { padding-bottom: 5rem; }
}
.hero__inner {
  max-width: 74rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.hero__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5em;
  color: var(--acc);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Each kicker item stays on one line; separators trail the line, never lead it */
.hero__kicker > span { white-space: nowrap; }

.hero__title {
  /* Smaller floor on phones so the wide caps break into four lines, not six */
  font-size: clamp(2.125rem, 7vw + .5rem, 6rem);
  line-height: .95;
  max-width: 15ch;
}
.hero__lead {
  max-width: 54ch;
  color: var(--on2);
  font-size: 1.125rem;
}
.hero__location {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--on2);
  font-size: .9375rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: .5rem;
}
/* In-page text links ("See what our clients say", "Enquire"): same style,
   underlined only on hover or keyboard focus. The arrow is inline-block so
   the underline stops at the words. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  color: var(--acc);
  font-size: 1rem;
  font-weight: 700;
}
.text-link .arrow { display: inline-block; transition: transform .2s var(--ease-out); }
.text-link:hover,
.text-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.text-link:hover .arrow { transform: translateX(3px); }

/* Over the photo, all small text uses the darkest green so it keeps 7:1
   at the lighter overlay */
.hero__kicker,
.hero__lead,
.hero__location,
.hero .text-link,
.site-header .nav__link:not(.nav__cta) { color: var(--on); }

/* ==========================================================================
   Services: wide ruled rows, name on the left
   ========================================================================== */
#services { padding-top: 2rem; }

.service {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 1024px) {
  .service { padding-block: 2.5rem; }
}
/* The section's own padding is enough after the last card */
.service:last-child { padding-bottom: 0; }
/* The section head's rule already sits above the first card */
.section-head + .service { border-top: 0; }
.service__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 900px) {
  .service__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.25rem 4rem;
  }
  .service__head { grid-column: 1; grid-row: 1 / span 5; }
  .service__body > :not(.service__head) { grid-column: 2; }
  /* Lines the footer up with the second column */
  .service__footer { margin-left: calc(33.33% + 2.67rem); }
}
.service__title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.service__tagline { color: var(--acc); font-weight: 600; margin-top: .5rem; }
.service__desc { color: var(--on2); max-width: 62ch; }
.service__intro { color: var(--on); font-weight: 600; margin-bottom: .6rem; }

/* Forward deployed engineers: the key idea of the Forward Deployed Engineering Team service, set on
   the deep green band colours so it stands out from the rest of the card */
.fde {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem;
  background: var(--light);
  color: var(--ink2);
  border-left: 4px solid var(--ink-acc);
}
.fde .eyebrow { color: var(--ink-acc); }
.fde__title { color: var(--ink); font-size: clamp(1.25rem, 2vw, 1.5rem); }

.service__panels {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 700px) {
  .service__panels { grid-template-columns: 1fr 1fr; }
  .service__panels--single { grid-template-columns: 1fr; }
  .list--cols { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
}
.service__block {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
  background: var(--bg2);
}

.terms {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .4rem 1.25rem;
}
.terms dt { font-weight: 600; }
.terms dd { color: var(--on2); }

.service__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--on2);
  font-size: .9375rem;
}

/* ==========================================================================
   How we work
   ========================================================================== */
.shapes { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .shapes { grid-template-columns: repeat(3, 1fr); }
}
.shape {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding-top: 1.25rem;
  border-top: 3px solid var(--acc);
}
.shape__title { font-size: 1.2rem; }
.shape__text { color: var(--on2); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  padding: .2rem .55rem;
  border: 1px solid var(--on2);
  color: var(--on2);
  font-size: .8125rem;
  font-weight: 600;
}

/* ==========================================================================
   Background / team
   ========================================================================== */
.bg-intro {
  display: grid;
  gap: 1rem;
  max-width: 62ch;
  margin-bottom: 2.5rem;
  color: var(--on2);
}
.roles { display: grid; gap: 1.5rem; }
@media (min-width: 760px) {
  .roles { grid-template-columns: 1fr 1fr; }
}
.role {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: 1.25rem;
  background: var(--bg2);
}
@media (min-width: 640px) {
  .role { padding: 1.75rem; }
}
.role__past {
  display: block;
  color: var(--acc);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* The name comes first in the source so screen readers reach it before the
   employer line; order puts that line back above it on screen */
.role__head { display: flex; flex-direction: column; }
.role__past { order: -1; }
.role__name { display: flex; align-items: center; gap: .25rem; }
.role__company { font-size: clamp(1.125rem, 1vw + .875rem, 1.3rem); overflow-wrap: anywhere; }
.role__linkedin { margin-block: -.5rem; }
.role__title { color: var(--on2); font-weight: 600; margin-top: .25rem; }
.role__text { color: var(--on2); }

/* Split band: deep green behind the heading and intro, then the cards
   overlap its bottom edge onto the page. The section's bottom padding moves
   onto .roles so the page colour shows beneath the cards. */
.section--split { background: var(--light); padding-bottom: 0; overflow: clip; }
.section--split .eyebrow { color: var(--ink-acc); }
.section--split .section-head { border-bottom-color: rgb(255 255 255 / .15); }
.section--split .bg-intro { color: var(--ink2); }
.section--split .roles { position: relative; padding-bottom: 2.5rem; }
@media (min-width: 640px) {
  .section--split .roles { padding-bottom: 3rem; }
}
@media (min-width: 1024px) {
  .section--split .roles { padding-bottom: 7rem; }
}
/* Contact follows the split band. Overlapping it by a pixel hides the hairline
   of dark band that otherwise shows at fractional heights. */
.section--split + .booking { position: relative; margin-top: -1px; background: var(--bg); }
.section--split .roles::before {
  content: "";
  position: absolute;
  top: 5rem;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  background: var(--bg);
}
.section--split .role {
  position: relative;
  background: #fff;
  box-shadow: 0 1px 0 var(--line), 0 12px 32px -16px rgb(19 38 28 / .35);
}

/* ==========================================================================
   FAQ (light, like testimonials)
   ========================================================================== */
.container--narrow { max-width: 74rem; margin-inline: auto; }
.faq details { padding-block: .75rem; border-top: 1px solid var(--ink); }
.faq details:first-child { border-top-width: 4px; }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { color: var(--ink-acc); font-size: 1.5rem; font-weight: 800; transition: transform .25s; }
.faq details[open] .faq__icon { transform: rotate(45deg); }
.faq__a { max-width: 60ch; padding-block: .25rem .75rem; color: var(--ink2); }

/* ==========================================================================
   Contact
   ========================================================================== */
/* Follows Background on the same colour, so the contact heading's rule separates
   them instead of a second band of padding */
.booking { padding: 0 var(--gutter) 2.5rem; }
@media (min-width: 640px) {
  .booking { padding-bottom: 3rem; }
}
@media (min-width: 1024px) {
  .booking { padding-bottom: 7rem; }
}
.booking__inner { max-width: 74rem; margin-inline: auto; }
/* Title and lead side by side from tablet up, lead sitting on the title's baseline */
.booking__intro { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 860px) {
  .booking__intro { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; }
}
.booking__title { font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: .95; text-wrap: balance; }
.booking__lead { color: var(--on2); }
.booking__copy { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.agenda { display: grid; gap: .75rem; }
.agenda li { padding-top: .75rem; border-top: 1px solid var(--line); color: var(--on2); }
.agenda strong { color: var(--on); }
.booking__email {
  color: var(--acc);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.booking__email:hover { text-decoration-thickness: 2px; }

/* Tabs: "Book a call" and "Send a message". The selected tab is marked with
   a deep green bar along its bottom, sitting on the tab list's rule. */
.contact-tabs { display: flex; gap: 2rem; border-bottom: 1px solid var(--line); }
html:not(.js) .contact-tabs { display: none; }
.contact-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  min-height: 64px;
  margin-bottom: -1px;
  padding: .875rem 0;
  border-bottom: 4px solid transparent;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  color: var(--on2);
  text-align: left;
  transition: color .25s, border-color .25s;
}
.contact-tab__name { font-size: .9375rem; font-weight: 800; font-stretch: 115%; letter-spacing: .03em; text-transform: uppercase; }
.contact-tab__meta { font-size: .875rem; }
.contact-tab:hover { color: var(--on); border-bottom-color: var(--line); }
.contact-tab[aria-selected="true"] { color: var(--on); border-bottom-color: var(--acc); }

.contact-panel { padding-top: 1.5rem; }
.contact-panel[hidden] { display: none; }
.contact-panel:focus-visible { outline-offset: 4px; }
/* Without JS both panels show, one after the other */
html:not(.js) .contact-panel + .contact-panel { margin-top: 1.5rem; border-top: 1px solid var(--line); }
/* The prompts come before the form: above it when stacked, beside it on the left from 860px */
.contact-panel--message { display: grid; gap: 2rem; }
@media (min-width: 860px) {
  .contact-panel--message { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4rem; align-items: start; }
}

/* cal.com's inline calendar draws its own bordered card, so the wrapper has
   no box of its own. The minimum height stops the page jumping while it
   loads; cal.com then resizes the iframe to fit the calendar. */
.cal-inline { min-height: 34rem; }
.cal-inline__fallback { padding: 1.5rem; }

.contact-form { display: grid; gap: .5rem; min-width: 0; }
.contact-form__label {
  margin-top: .75rem;
  color: var(--on2);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact-form__label:first-of-type { margin-top: 0; }
.contact-form__field {
  width: 100%;
  min-height: 48px;
  padding: .75rem .875rem;
  background: var(--bg2);
  border: 1px solid var(--on2);
  border-radius: 0;
  color: var(--on);
  font: inherit;
}
.contact-form__field:focus-visible { outline-offset: 0; }
.contact-form__field[aria-invalid="true"] { border-color: var(--error); }
.contact-form__error { color: var(--error); font-size: .9375rem; }
.contact-form__hint { color: var(--on2); font-size: .875rem; }
.contact-form__submit { margin-top: 1rem; justify-self: start; }
.contact-form__submit:disabled { opacity: .7; cursor: progress; }
.contact-form__status { min-height: 1.6em; color: var(--acc); }
.contact-form__status.is-error { color: var(--error); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding: 2rem var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--on2);
  font-size: .9375rem;
}
/* Phones: stacked and centred. Wider: three equal columns, so the location
   sits in the true centre whatever the widths of the outer items. */
.site-footer .container {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: .75rem 2rem;
  text-align: center;
}
@media (min-width: 640px) {
  .site-footer .container { grid-template-columns: 1fr auto 1fr; }
  .site-footer .container > :first-child { justify-self: start; }
  .site-footer__links { justify-self: end; }
}
.site-footer small { font-size: inherit; }
.site-footer__links { display: flex; gap: .25rem; }
/* Photo credit: its own row under the three columns */
.site-footer .site-footer__credit { grid-column: 1 / -1; font-size: .875rem; }
.site-footer__credit a {
  display: inline-block;
  padding-block: .75rem;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__credit a:hover { text-decoration-thickness: 2px; }

.nowrap { white-space: nowrap; }

/* ==========================================================================
   Term tooltips (e.g. "forward deployed engineers")
   Shown on hover, keyboard focus or tap; Esc dismisses (WCAG 1.4.13).
   ========================================================================== */
.term { position: relative; display: inline; }
.term__trigger {
  display: inline;
  padding: 0;
  color: var(--on);
  font: inherit;
  font-weight: 600;
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: help;
}
.term__trigger:hover { text-decoration-style: solid; }
.term__tip {
  position: absolute;
  bottom: calc(100% + .625rem);
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: .75rem 1rem;
  background: var(--on);
  color: var(--bg);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility 0s .15s;
}
/* Invisible bridge over the gap, so the pointer can move onto the tooltip */
.term__tip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: .75rem;
}
.term:hover .term__tip,
.term:focus-within .term__tip,
.term.is-open .term__tip {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .15s, transform .15s;
}
.term.is-dismissed .term__tip { visibility: hidden; opacity: 0; }