/*
 * 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 and --bg-alt are kept as two separate variables (some
     rules key off one or the other) but are the same value on purpose,
     matching the Earth's fill color in the homepage hero animation exactly
     -- every section on every page reads as one continuous dark surface,
     with no seam between adjacent sections regardless of which variable
     each happens to use. */
  --bg: #05070a;
  --bg-alt: #05070a;
  --ink: #eef2ec;
  --ink-soft: #8b968a;
  --rule: rgba(255, 255, 255, 0.08);
  --green: #6AAB2A;
  --green-dark: #8ec94e;
  --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;
}

/* Eyebrow label above a masthead or section heading -- mono, green, wide
   tracking, matching the labels used on buttons and nav. */
.eyebrow {
  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;
}

/* 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 {
  height: 42px;
  width: auto;
  display: block;
}

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

.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  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;
}

/* Always-on background layer: the satellites, starfield, and ambient orb run
   continuously behind the text hero rather than fading in and out. Sits at
   the back of the stack so the text hero's opaque content (headline, body
   copy, buttons) paints over it wherever the two overlap. */
.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: sits on top of the animated hero in the same box. Its own
   background is transparent so the animation stays visible around the text,
   and it sits above .hero-anim in the stack so the transiting orb never
   paints over the headline, body copy, or buttons. */
.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: 640px;
  margin: 0 auto;
}

/* 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 .advisors,
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 .advisors.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 .advisors,
  html.reveal-ready .cta-band {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

.hero-text h1 {
  font-weight: 500;
  font-size: clamp(2.15rem, 5.4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.hero-text p.hero-tagline {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--green);
  line-height: 1.3;
  margin-bottom: 0;
}

/* Two ghost-outline links under the hero copy. Deliberately never filled --
   not even on hover -- so they read as secondary next to the accent used
   elsewhere on the page. */
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.hero-actions .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  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.9rem 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
}

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

/* Signal-tracking figure: a wandering glow orb reading its own coordinates
   off the satellites overhead, eased with the same ambient-drift timing the
   site used to use for touch devices, since there's no cursor to follow
   inside a small inline figure on any device. */
.hero-signal {
  position: relative;
  width: 100%;
  height: 100%;
}

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

.page-masthead .eyebrow {
  margin-bottom: 1.25rem;
}

.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);
}

/* CTA band: a full-width closing pitch between the Advantage teasers and the
   footer, replacing what used to be the inline contact form on the homepage
   -- Contact is now its own page. */
.cta-band {
  padding: 6rem 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: 680px;
  margin: 0 auto;
}

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

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

.block-text .eyebrow {
  text-align: center;
  color: var(--green);
}

.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 Architecture 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 .eyebrow {
  margin-bottom: 0.75rem;
}

.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;
}

.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-soft);
  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;
}

.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-soft);
  line-height: 1.6;
}

/* 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-soft);
  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;
}

.team-quote {
  font-family: var(--font-display);
  text-align: center;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--green);
  line-height: 1.4;
  max-width: 640px;
  margin: 3rem auto 0;
}

/* Advisors: its own section so the background keeps alternating past the team grid */
.advisors {
  padding: 3.5rem 10%;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.advisors-inner {
  max-width: 880px;
  margin: 0 auto;
}

.advisors h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.advisors p {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 400;
}

/* 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-soft);
  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-sep {
  color: var(--rule);
  font-weight: 300;
}

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

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

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

  .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: 34px;
  }

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

  .hero-text h1 {
    font-size: 1.9rem;
  }

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

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

  .teaser-grid {
    grid-template-columns: 1fr;
  }

  .stat-row {
    grid-template-columns: 1fr;
    gap: 2rem;
    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;
  }
}