/* ============================================
   Respira Remote Talent + Resources - Stylesheet
   ============================================ */

:root {
  /* Brand palette: exactly these 7 colors, no derived shades. Depth and
     section rhythm come from WHICH of these is used where, not from tonal
     variation within a color family. */
  --dark-green: #0e2725;
  --light-green: #6d765b;
  --light-tan: #c7a47d;
  --dark-brown: #9c7a61;
  --grey: #575757;
  --off-white: #f5f2ef;
  --cream: #ddd3cb;

  --bg: var(--dark-green);

  /* Contrast notes (WCAG): Off White on Light Tan is only 2.1:1, so text on a
     tan surface is always Dark Green (6.8:1). Light Green and Dark Brown are
     mid-tones (Off White on them: 4.3:1 and 3.5:1), so text placed directly
     on those two backgrounds is kept large (see .on-mid); body copy sits on
     Dark Green, Grey or Off White surfaces instead. */

  /* Translucent tints of palette colors, used for hairlines and panels. */
  --line: rgba(199, 164, 125, 0.22);
  --line-soft: rgba(221, 211, 203, 0.12);
  --panel: rgba(245, 242, 239, 0.04);

  --shadow-sm: 0 2px 8px rgba(14, 39, 37, 0.10);
  --shadow-md: 0 14px 34px rgba(8, 20, 16, 0.22);
  --shadow-lg: 0 28px 64px rgba(8, 20, 16, 0.32);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  /* Cabinet Grotesk (Fontshare) sets headlines at 700 and accent phrases at
     500; DM Sans (Google Fonts) sets body copy at 400 and UI text (nav,
     buttons, labels, forms) at 500-600. */
  --font-head: "Cabinet Grotesk", "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Cabinet Grotesk", "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-y: clamp(72px, 9vw, 120px);
  --measure: 62ch;

  /* Motion system: short feedback, slightly longer entrances, one easing. */
  --dur-fast: 180ms;
  --dur: 240ms;
  --dur-enter: 500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --header-h: 76px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--cream);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul, ol { list-style: none; }

[hidden] { display: none !important; }

button { font: inherit; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }
strong, b, th, dt, legend, optgroup { font-weight: 600; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--off-white);
  text-wrap: balance;
}

h1, h2 {
  letter-spacing: -0.015em;
  line-height: 1.08;
}

p { text-wrap: pretty; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

/* ---------- Focus + skip link ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--light-tan);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-tan :focus-visible,
.how :focus-visible { outline-color: var(--dark-green); }

.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 300;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--off-white);
  color: var(--dark-green);
  font-family: var(--font-ui);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light-tan);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: currentColor;
}
.eyebrow .dot { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  border-radius: 999px;
  padding: 13px 26px;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
  white-space: nowrap;
  text-align: center;
}
.btn .arrow { display: inline-block; transition: transform var(--dur) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* Primary = the main hiring action. Dark Green on Light Tan (6.8:1); the
   previous Off White label on tan was only 2.1:1. */
.btn-primary {
  background: var(--light-tan);
  color: var(--dark-green);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--off-white); box-shadow: var(--shadow-md); }

.btn-outline {
  background: transparent;
  color: var(--off-white);
  border-color: rgba(245, 242, 239, 0.7);
}
.btn-outline:hover { background: var(--off-white); border-color: var(--off-white); color: var(--dark-green); }

.btn-light {
  background: var(--off-white);
  color: var(--dark-green);
}
.btn-light:hover { background: var(--light-tan); box-shadow: var(--shadow-md); }

.btn-dark {
  background: var(--dark-green);
  color: var(--off-white);
}
.btn-dark:hover { background: var(--grey); box-shadow: var(--shadow-md); }

.btn-sm { min-height: 42px; padding: 9px 20px; font-size: 0.9rem; }
.btn-block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
  .btn:hover .arrow { transform: none; }
}

/* Inline text link with an underline that draws in. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--off-white);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast) ease;
}
.text-link:hover { background-size: 100% 1.5px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 39, 37, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.site-header.scrolled {
  border-color: var(--line-soft);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-badge {
  display: inline-flex;
  align-items: center;
}
.logo .mark { height: 46px; width: 46px; flex-shrink: 0; display: block; object-fit: contain; }
.site-header .logo-badge { transition: transform var(--dur) var(--ease-out); transform-origin: left center; }
.site-header.scrolled .logo-badge { transform: scale(0.9); }
.footer-brand .logo .mark { height: 56px; width: 56px; }

.nav-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  margin: 0 auto;
}
.nav-links a {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--cream);
  position: relative;
  display: inline-block;
  padding: 8px 0;
  transition: color var(--dur-fast) ease;
}
.nav-links > li > a::after,
.nav-item-dropdown > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--light-tan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav-links a:hover { color: var(--off-white); }
.nav-links > li > a:hover::after,
.nav-item-dropdown > a:hover::after { transform: scaleX(0.4); }
.nav-links a[aria-current="page"],
.nav-links .is-section { color: var(--off-white); }
.nav-links > li > a[aria-current="page"]::after,
.nav-item-dropdown > a.is-section::after { transform: scaleX(1); }

/* Candidates dropdown: the link still navigates; the arrow button opens the
   submenu for touch and keyboard (JS toggles .open + aria-expanded). Pointer
   hover and keyboard focus inside also reveal it on desktop. */
.nav-item-dropdown { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--cream);
  cursor: pointer;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.nav-dropdown-toggle svg { transition: transform var(--dur) var(--ease-out); }
.nav-dropdown-toggle:hover { color: var(--off-white); background: rgba(245, 242, 239, 0.06); }
.nav-dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -14px;
  margin-top: 10px;
  min-width: 260px;
  background: var(--dark-green);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  z-index: 10;
}
/* Invisible bridge so the pointer can travel from the link to the panel. */
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-dropdown a {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.94rem;
}
.nav-dropdown a small { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--cream); }
.nav-dropdown a:hover,
.nav-dropdown a[aria-current="page"] { background: rgba(245, 242, 239, 0.07); }
.nav-dropdown.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 1025px) {
  .nav-item-dropdown:hover .nav-dropdown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-item-dropdown:hover .nav-dropdown-toggle svg { transform: rotate(180deg); }
}

.nav-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle span {
  width: 20px; height: 2px;
  background: var(--off-white);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) ease;
}
/* Bars are 2px tall with a 5px gap, so the outer two sit 7px from center. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav { gap: 12px; }
  .nav-toggle { display: flex; flex-shrink: 0; margin-left: auto; }
  .nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 12px var(--gutter) 26px;
    background: var(--dark-green);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .nav-panel.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav-links > li { border-bottom: 1px solid var(--line-soft); }
  .nav-links a { display: block; padding: 14px 0; font-size: 1.05rem; }
  .nav-links > li > a::after,
  .nav-item-dropdown > a::after { display: none; }
  .nav-links a[aria-current="page"],
  .nav-links .is-section { color: var(--light-tan); }
  .nav-item-dropdown { flex-wrap: wrap; justify-content: space-between; }
  .nav-item-dropdown > a { flex: 1; }
  .nav-dropdown-toggle { width: 44px; height: 44px; }
  .nav-dropdown {
    position: static;
    flex-basis: 100%;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0 0 0 14px;
    background: none;
    border: none;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown.open { display: block; }
  .nav-links .nav-dropdown a { display: flex; padding: 10px 12px; font-size: 1rem; }
  .nav-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .nav-cta .btn { width: 100%; min-height: 48px; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--dark-brown) 0%, var(--dark-green) 42%, var(--dark-green) 100%);
}

/* Full-bleed photo behind the copy, anchored right (where the globe sits in
   the source photo); a scrim on top darkens the left side into the site's
   own palette so the text stays legible and the image reads as part of the
   hero rather than a pasted-in picture. */
.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(8, 20, 16, 0.94) 0%, rgba(8, 20, 16, 0.85) 42%, rgba(8, 20, 16, 0.4) 68%, rgba(8, 20, 16, 0) 88%),
    linear-gradient(to bottom, rgba(14, 39, 37, 0.4), transparent 30%);
  pointer-events: none;
}

/* ---------- Hero route overlay: US -> Honduras -> South America ---------- */
.hero-bg-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
@media (min-width: 769px) {
  /* Fit the globe photo to the hero's height and pin it right, so the whole
     globe, wooden base included, is in frame at every width (cover-cropping
     cut the base off on wide screens). The route overlay gets the identical
     box (same right edge, same height, the photo's 1672:941 ratio) so its
     nodes stay locked onto the countries. The wooden base sits on the hero's
     bottom edge, so the section ends cleanly on the photo itself. */
  .hero-bg-image,
  .hero-bg-network {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: auto;
    height: 100%;
    max-width: none;
    aspect-ratio: 1672 / 941;
  }
  .hero-bg-image { object-fit: fill; }
}
.hero-route {
  /* stroke-dasharray is intentionally set per-element via the SVG attribute
     (not here via var(--len)): a CSS stroke-dasharray driven by a var() on
     an element that's also animating stroke-dashoffset renders as an
     invisible stroke in Chromium, even though computed styles read back a
     plausible value. stroke-dashoffset itself doesn't have this problem, so
     it's still driven by var(--len) below/in the keyframes. */
  fill: none;
  stroke: var(--light-tan);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dashoffset: var(--len, 520);
  opacity: 0;
  animation-name: heroRouteDraw;
  animation-duration: var(--dur, 5s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes heroRouteDraw {
  0%   { stroke-dashoffset: var(--len, 520); opacity: 0; }
  8%   { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.hero-particle {
  fill: var(--off-white);
  filter: drop-shadow(0 0 4px rgba(245, 242, 239, 0.9));
  offset-rotate: 0deg;
  opacity: 0;
  animation-name: heroParticleMove;
  animation-duration: var(--dur, 5s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes heroParticleMove {
  0%   { offset-distance: 0%; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.hero-node-core { fill: var(--off-white); stroke: rgba(14, 39, 37, 0.65); stroke-width: 1.4; }
.hero-node-glow { fill: var(--off-white); opacity: 0.55; filter: blur(3px); }
.hero-node-pulse {
  fill: var(--off-white);
  transform-box: fill-box;
  transform-origin: center;
  animation: heroNodePulse 2.8s ease-out infinite;
}
@keyframes heroNodePulse {
  0%   { opacity: 0.9; transform: scale(0.8); }
  50%  { opacity: 0.3; transform: scale(1.8); }
  100% { opacity: 0; transform: scale(2.2); }
}
/* Arrival ripple on the South America node: shares the trunk's 6s --dur and
   is delayed to ~90% of that cycle (the instant the trunk line finishes
   drawing in), so a ring visibly expands out of the dot on arrival instead
   of looping independently of the route animation. */
.hero-node-ripple {
  fill: none;
  stroke: var(--off-white);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation-name: heroNodeArrival;
  animation-duration: 6s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
@keyframes heroNodeArrival {
  0%   { opacity: 0; transform: scale(1); }
  4%   { opacity: 0.7; transform: scale(1.4); }
  46%  { opacity: 0; transform: scale(29); }
  100% { opacity: 0; transform: scale(29); }
}
/* Paused by IntersectionObserver in main.js once the hero scrolls out of
   view: these loop infinitely, and unlike a hidden tab, the browser won't
   throttle a merely off-screen animation on its own. */
.hero.is-offscreen .hero-route,
.hero.is-offscreen .hero-particle,
.hero.is-offscreen .hero-node-pulse,
.hero.is-offscreen .hero-node-ripple,
.hero.is-offscreen .hero-badge {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .hero-route { animation: none; stroke-dashoffset: 0; opacity: 0.5; }
  .hero-particle { animation: none; opacity: 0; }
  .hero-node-pulse { animation: none; opacity: 0; }
  .hero-node-ripple { animation: none; opacity: 0; }
}

/* ---------- Hero floating badge cards ---------- */
.hero-badge {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  max-width: 230px;
  background: rgba(8, 20, 16, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 242, 239, 0.2);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}
.hero-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(245, 242, 239, 0.12);
  border-radius: 10px;
  color: var(--off-white);
}
.hero-badge-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--cream); line-height: 1.3; }
.hero-badge-text strong { color: var(--off-white); font-size: 0.92rem; font-weight: 600; }

/* Positioned by `right` (not `left`) so they stay anchored to the photo/globe
   side of the hero regardless of viewport width. The float is kept small and
   slow so it reads as ambient rather than competing with the headline. */
.hero-badge { animation: heroBadgeFloat 7s ease-in-out infinite; }
.hero-badge-1 { top: 22%; right: 4%; max-width: 280px; animation-delay: 0s; }
.hero-badge-2 { top: 46%; right: 6%; animation-delay: 1.4s; }
.hero-badge-4 { top: 68%; right: 22%; animation-delay: 2.8s; }
@keyframes heroBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge { animation: none; }
}

.hero-grid {
  position: relative;
  z-index: 3;
}
.hero-copy {
  max-width: 600px;
  padding: 120px 0 96px;
}

.hero h1 {
  font-size: clamp(2.9rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  margin-bottom: 24px;
  color: var(--off-white);
}
.hero h1 .accent { color: var(--light-tan); font-family: var(--font-accent); font-weight: 500; }

.hero p.lede {
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  color: var(--cream);
  max-width: 34em;
  margin-bottom: 36px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Left side of the hero, after Motion's "OSS Hero": two soft glowing orbs
   drifting behind the copy and a row of metrics under the buttons. Their
   entrance is staggered in by js/hero-motion.js. */
.hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  animation: heroOrbDrift 14s ease-in-out infinite alternate;
}
.hero-orb-tan {
  top: 22%;
  left: -6%;
  width: 360px;
  height: 360px;
  background: rgba(199, 164, 125, 0.26);
}
.hero-orb-green {
  top: 52%;
  left: 24%;
  width: 300px;
  height: 300px;
  background: rgba(109, 118, 91, 0.34);
  animation-duration: 18s;
  animation-delay: -6s;
}
@keyframes heroOrbDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -24px) scale(1.06); }
  100% { transform: translate(-20px, 18px) scale(0.96); }
}
.hero.is-offscreen .hero-orb { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
}
.hero-copy { position: relative; }
@media (min-width: 769px) {
  /* The section's own padding already frames the copy; trimming the copy's
     extra padding keeps the hero (and so the fitted globe) about as tall as
     before now that the metrics row sits under the buttons. */
  .hero-copy { padding: 24px 0 8px; }
  /* The hero fills exactly the first screen under the header, so the whole
     height-fitted globe (base included) and all the copy, metrics too, are
     in view on load at any desktop size. Padding and headline size ease
     down on shorter screens so the copy still fits. */
  .page-home .hero {
    min-height: calc(100svh - var(--header-h) - 1px);
    padding: clamp(28px, 7svh, 72px) 0 clamp(24px, 6svh, 64px);
  }
  .hero h1 { font-size: clamp(2.6rem, min(5.4vw, 8.4svh), 4.6rem); }
}

.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 0;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero-metric {
  padding: 0 28px;
  border-left: 1px solid var(--line);
}
.hero-metric:first-child { padding-left: 0; border-left: 0; }
.hero-metric dt {
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--light-tan);
  letter-spacing: -0.01em;
}
.hero-metric dd {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--cream);
}
@media (max-width: 600px) {
  .hero-orb-tan { width: 240px; height: 240px; }
  .hero-orb-green { width: 200px; height: 200px; left: 40%; }
  /* Three equal columns so the stats never wrap onto a ragged second row;
     each label can break onto two lines inside its own column instead. */
  .hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }
  .hero-metric { padding: 0 12px; }
  .hero-metric:last-child { padding-right: 0; }
  .hero-metric dt { font-size: clamp(1rem, 4.6vw, 1.2rem); white-space: nowrap; }
  .hero-metric dd { font-size: 0.78rem; line-height: 1.35; }
}

/* Home hero entrance (js/hero-motion.js). The head script adds .hero-intro
   to <html> so the copy doesn't flash before Motion takes over; it is removed
   after 1.5s regardless, so the hero never stays hidden. Only opacity and
   transforms change, so nothing moves the layout. */
.hero-intro .page-home .hero-copy > *,
.hero-intro .page-home .hero-badge,
.hero-intro .page-home .hero-orb { opacity: 0; }
.page-home .hero h1 .w { display: inline-block; }
/* ---------- Sections generic ---------- */
main > section { padding: var(--section-y) 0; }
/* Each section holds its own solid colour; a hairline marks the seam where
   two neighbours share one. */
main > section + section { box-shadow: inset 0 1px 0 var(--line); }
/* Each section is its own stacking layer, so a hero's gradient (moved by
   main.js onto .section-bg) can sit at z-index -1: above the section, below
   its content. */
main > section,
body > footer { position: relative; z-index: 0; }
.section-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.section-head h2 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); margin-bottom: 16px; color: var(--off-white); }
.section-head p { color: var(--cream); font-size: 1.1rem; }
.section-head .btn { margin-top: 26px; }

/* Editorial split head: headline left, supporting line right. */
.section-head.split {
  text-align: left;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px clamp(32px, 6vw, 80px);
  align-items: end;
}
.section-head.split h2 { margin-bottom: 0; }
.section-head.split .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.section-head.left { text-align: left; margin-left: 0; }

/* Text set directly on a mid-tone section (Light Green / Dark Brown) is kept
   large so it clears WCAG's 3:1 large-text threshold. At the regular weight
   that threshold is 24px. */
.on-mid .section-head p:not(.eyebrow),
.on-mid .lead-mid {
  color: var(--off-white);
  font-size: clamp(1.5rem, 1.9vw, 1.65rem);
  font-weight: 400;
  line-height: 1.5;
}
/* Small labels can't be large text, so on mid-tones the eyebrow becomes a
   Dark Green pill with Light Tan text (6.8:1). */
.on-mid .eyebrow {
  color: var(--light-tan);
  background: var(--dark-green);
  padding: 7px 14px;
  border-radius: 999px;
}
.on-mid .eyebrow::before { display: none; }
.on-mid .section-head.split .eyebrow { justify-self: start; }

/* Tan sections carry Dark Green text (6.8:1). */
.on-tan, .on-tan h2, .on-tan h3, .on-tan p { color: var(--dark-green); }
.on-tan .section-head h2, .on-tan .section-head p { color: var(--dark-green); }
.on-tan .eyebrow { color: var(--dark-green); }
.on-tan .story-text h2,
.on-tan .story-text p,
.on-tan .story-text .lead,
.on-tan .text-link { color: var(--dark-green); }

/* The About page's monument band (Dark Brown) borrows the story band's type
   scale: a 1.2rem lead over regular body copy. Text stays Off White, the
   highest-contrast palette colour on that background. */
.monument-section.on-mid .story-text p,
.monument-section.on-mid .story-text .lead { color: var(--off-white); }

/* ---------- Audience cards (Employers/Candidates) ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 30px);
}
.audience-card {
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 48px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  color: var(--cream);
  box-shadow: var(--shadow-lg);
}
.audience-card.employers { background: var(--dark-green); }
.audience-card.candidates { background: var(--dark-green); }
.audience-card .ac-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.38;
  mix-blend-mode: luminosity;
  transition: transform 0.9s var(--ease-out);
}
.audience-card:hover .ac-bg { transform: scale(1.04); }
.audience-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
}
.audience-card.employers::before { background: linear-gradient(160deg, rgba(14, 39, 37, 0.55), rgba(14, 39, 37, 0.94) 70%); }
.audience-card.candidates::before { background: linear-gradient(160deg, rgba(87, 87, 87, 0.5), rgba(14, 39, 37, 0.94) 70%); }
@media (prefers-reduced-motion: reduce) {
  .audience-card:hover .ac-bg { transform: none; }
}
.ac-kicker {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light-tan);
  margin-bottom: 14px;
}
.audience-card .ac-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  background: rgba(199, 164, 125, 0.16);
  color: var(--light-tan);
}
.audience-card h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 3vw, 2.5rem); letter-spacing: -0.01em; margin-bottom: 12px; color: var(--off-white); }
.audience-card p.desc { margin-bottom: 26px; color: var(--cream); max-width: 34em; }
.audience-card .btn { align-self: flex-start; margin-top: auto; }

.ac-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.ac-list li { display: flex; align-items: center; gap: 12px; font-weight: 400; font-size: 0.98rem; color: var(--off-white); }
.ac-list .check {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(199, 164, 125, 0.26); color: var(--light-tan);
}

/* ---------- How it works (numbered timeline) ----------
   Four photo cards hang off one line: across the top on wide screens, down
   the left side below 1024px. Everything is fully visible without JS;
   js/how-motion.js fills the line as you scroll and lights each number. */
.how { background: var(--light-tan); }
.steps-wrap { position: relative; }
.steps-track {
  position: absolute;
  top: 17px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(14, 39, 37, 0.22);
  pointer-events: none;
}
.steps-track-fill {
  position: absolute;
  inset: 0;
  background: var(--dark-green);
  transform-origin: left center;
  transform: scaleX(0);
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
.step {
  position: relative;
  padding-top: 58px;
  display: flex;
}
.step .num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark-green);
  color: var(--off-white);
  border: 2px solid var(--dark-green);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8rem;
  transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out);
}
/* A soft ring that pulses out once when a number lights up. */
.step .num::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--dark-green);
  opacity: 0;
  pointer-events: none;
}
.step-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 450ms var(--ease-out);
  will-change: transform;
}
.step-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--grey);
}
/* Taller than its frame so js/how-motion.js can drift it with scroll. */
.step-photo img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  display: block;
}
.step-photo img { transition: scale 700ms var(--ease-out); }
.step-body { padding: 22px 22px 26px; flex: 1; }
.step h3 { font-size: 1.15rem; margin: 0 0 10px; color: var(--dark-green); }
.step p { color: var(--dark-green); font-size: 0.98rem; }
/* A Dark Green hairline grows along the card's bottom edge on hover. */
.step-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--dark-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--ease-out);
}
.step:hover .step-card,
.step:focus-within .step-card { box-shadow: var(--shadow-md); }
.step:hover .step-photo img,
.step:focus-within .step-photo img { scale: 1.08; }
.step:hover .step-card::after,
.step:focus-within .step-card::after { transform: scaleX(1); }

/* Title words: dimmed by js/how-motion.js until scrolled past. */
.how h2 .w { display: inline-block; }

/* Pre-entrance states, only once the animation module is running. */
.how-live .step .num { background: var(--light-tan); color: var(--dark-green); }
.how-live .step.is-on .num { background: var(--dark-green); color: var(--off-white); }
.how-live .step.is-on .num::after { animation: how-ping 900ms var(--ease-out); }
.how-live .step-card { opacity: 0; transform: translateY(48px); }
.how-live .step-photo { clip-path: inset(0 0 100% 0); }
.how-live .section-head p { opacity: 0; }
@keyframes how-ping {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .step-photo img,
  .step-card,
  .step-card::after,
  .step .num { transition: none; }
  .step:hover .step-photo img,
  .step:focus-within .step-photo img { scale: none; }
}

/* ---------- Values ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.value-card {
  padding: 30px 26px;
  border-radius: var(--radius-md);
  background: var(--dark-green);
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.value-card:hover { transform: translateY(-4px); border-color: var(--light-tan); box-shadow: var(--shadow-md); }
.value-card .vc-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(199, 164, 125, 0.16); color: var(--light-tan);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
/* Hover scale/rotate on the icon is driven by Motion (js/card-hover.js). */
.value-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--off-white); }
.value-card p { color: var(--cream); font-size: 0.96rem; }
@media (prefers-reduced-motion: reduce) {
  .value-card:hover { transform: none; }
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(199, 164, 125, 0.22), transparent 60%),
    var(--dark-green);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 28px 48px;
  align-items: center;
  box-shadow: var(--shadow-lg);
}
.cta-banner h2 { color: var(--off-white); font-size: clamp(2.1rem, 3.8vw, 3rem); margin-bottom: 12px; }
.cta-banner p { color: var(--cream); max-width: 34em; font-size: 1.08rem; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-banner .cta-actions { justify-content: flex-end; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark-green);
  color: var(--cream);
  padding: clamp(56px, 7vw, 80px) 0 32px;
  border-top: 1px solid var(--line-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.footer-brand .logo { color: var(--off-white); margin-bottom: 16px; }
.footer-brand p { color: var(--cream); font-size: 0.94rem; max-width: 300px; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(199, 164, 125, 0.12);
  color: var(--off-white);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}
.footer-social a:hover { background: var(--light-tan); color: var(--dark-green); transform: translateY(-2px); }
.footer-col h2 {
  font-family: var(--font-ui); color: var(--off-white); font-size: 0.82rem; font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col li { font-size: 0.94rem; color: var(--cream); transition: color var(--dur-fast) ease; }
.footer-col a { display: inline-block; padding: 2px 0; }
.footer-col a:hover { color: var(--off-white); text-decoration: underline; text-underline-offset: 4px; }
.footer-col .contact-item { display: flex; align-items: center; gap: 10px; }
.footer-col .contact-item .ico { width: 16px; height: 16px; color: var(--light-tan); flex-shrink: 0; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; font-size: 0.85rem; color: var(--cream); flex-wrap: wrap; gap: 12px;
}

/* Sticky reveal: js/main.js adds .footer-reveal to <html> only when the
   footer fits comfortably in the viewport. The footer then sticks to the
   bottom of the screen behind <main>, which scrolls up off it like a sheet,
   and its content fades and scales in as it is uncovered (--reveal, 0 to 1).
   Page height and anchors are unchanged because the footer stays in flow.
   Without the class (no JS, tall footer, small screen) it is a normal
   footer. */
.footer-reveal main {
  position: relative;
  z-index: 1;
  background: var(--bg);
  box-shadow: 0 32px 64px rgba(8, 20, 16, 0.38);
}
.footer-reveal body > .site-footer { position: sticky; bottom: 0; z-index: 0; }
.footer-reveal .site-footer > .container {
  opacity: calc(0.2 + 0.8 * var(--reveal, 1));
  scale: calc(0.94 + 0.06 * var(--reveal, 1));
  transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .footer-reveal .site-footer > .container { opacity: 1; scale: none; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 104px);
  background:
    radial-gradient(ellipse 900px 600px at 100% 0%, rgba(199, 164, 125, 0.30), transparent 62%),
    radial-gradient(ellipse 800px 600px at 0% 100%, rgba(109, 118, 91, 0.35), transparent 58%),
    linear-gradient(160deg, var(--dark-green) 0%, var(--dark-green) 60%, var(--dark-brown) 140%);
  position: relative;
  overflow: hidden;
}
.page-hero-inner > * { max-width: 820px; }
.page-hero h1 { font-size: clamp(2.7rem, 5.6vw, 4.6rem); margin-bottom: 22px; color: var(--off-white); }
.page-hero p { color: var(--cream); max-width: 40em; font-size: clamp(1.08rem, 1.4vw, 1.2rem); }
.page-hero p strong { color: var(--off-white); }
.page-hero .hero-actions { margin-top: 34px; }

/* Art variant: a photo (Clients) that dissolves into the hero on the right.
   Two long, eased gradients are multiplied so no edge or corner of the image shows. */
.page-hero-has-art .page-hero-inner { position: relative; z-index: 1; }
.page-hero-art {
  --art-fade-x: linear-gradient(to right,
    transparent 0%, rgba(0, 0, 0, 0.02) 22%, rgba(0, 0, 0, 0.1) 32%, rgba(0, 0, 0, 0.28) 41%,
    rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.8) 59%, #000 70%, #000 90%, transparent 100%);
  --art-fade-y: linear-gradient(to bottom,
    transparent 0%, rgba(0, 0, 0, 0.12) 12%, rgba(0, 0, 0, 0.4) 24%, rgba(0, 0, 0, 0.75) 36%,
    #000 48%, #000 74%, rgba(0, 0, 0, 0.6) 86%, rgba(0, 0, 0, 0.2) 94%, transparent 100%);
  position: absolute;
  right: -12%;
  top: 50%;
  translate: 0 -50%;
  height: 100%;
  width: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: var(--art-fade-x), var(--art-fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--art-fade-x), var(--art-fade-y);
  mask-composite: intersect;
}

/* Split variant: copy beside a photo (Jobs). */
.page-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.page-hero-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  position: relative;
}
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Contact page: hero copy overlaid directly on the video ---------- */
.contact-hero {
  position: relative;
  /* The poster frame doubles as the backdrop if the video can't load at all. */
  background: var(--dark-green) url("../assets/lacumbre-poster.jpg") center / cover no-repeat;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 96px 0 calc(min(170px, 22%) + 72px);
}
.contact-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.contact-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(95deg, rgba(14, 39, 37, 0.9) 0%, rgba(14, 39, 37, 0.65) 45%, rgba(14, 39, 37, 0.25) 100%),
    linear-gradient(180deg, rgba(14, 39, 37, 0.5) 0%, transparent 40%);
  pointer-events: none;
}
.contact-hero-content { position: relative; z-index: 2; }
.contact-hero-content > * { max-width: 640px; }
.contact-hero-content h1 { font-size: clamp(2.8rem, 5.6vw, 4.6rem); margin-bottom: 20px; color: var(--off-white); }
.contact-hero-content p { color: var(--cream); font-size: clamp(1.08rem, 1.4vw, 1.2rem); }
.contact-hero-caption {
  position: absolute;
  right: var(--gutter);
  bottom: 28px;
  z-index: 2;
  color: var(--off-white);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* ---------- Content photo (inline figure with caption) ---------- */
.content-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  position: relative;
  aspect-ratio: 4 / 5;
}
.content-photo.landscape { aspect-ratio: 3 / 2; }
.content-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.content-photo .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 20px 16px;
  background: linear-gradient(0deg, rgba(8, 22, 19, 0.85), transparent);
  color: var(--off-white);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---------- Photo caption (Jobs hero photo) ---------- */
.page-hero-photo .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 22px 16px;
  background: linear-gradient(0deg, rgba(8, 22, 19, 0.8), transparent);
  color: var(--off-white);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.85rem;
}

/* ---------- Story / two-column content blocks ---------- */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.story-grid.reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.story-text h2 { font-size: clamp(2.1rem, 3.8vw, 3rem); margin-bottom: 22px; color: var(--off-white); }
.story-text p { color: var(--cream); margin-bottom: 16px; max-width: var(--measure); }
.story-text p:last-child { margin-bottom: 0; }
.story-text .lead { font-size: 1.2rem; color: var(--off-white); }
.story-text .hero-actions { margin-top: 30px; }

/* ---------- Story photo cards (About) ----------
   Three Honduras photos fanned like a still carousel. Nothing moves on its
   own; js/tilt-cards.js adds a cursor tilt and a glare that follows the
   pointer on fine-pointer devices, and the cards stay flat otherwise. */
.story-cards { margin: 0; }
/* The card fan sits in a column a little wider than the text's. */
@media (min-width: 901px) {
  .story-grid.has-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 4.5vw, 64px); }
  /* The fan is a little wider than its column; inset it so the tilted
     outer cards clear the window edge and the text. */
  .story-grid.has-cards .story-cards-row { padding-inline: 4%; }
}
@media (min-width: 1100px) {
  .story-grid.has-cards { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .story-grid.has-cards .story-cards-row { padding-inline: 0 3%; }
  /* Pull the fan toward the left edge of the window, past the container's
     edge on wide screens, while keeping a gutter clear. */
  .story-grid.has-cards .story-cards { transform: translateX(clamp(-140px, calc((var(--container) - 100vw) / 2 + 28px), 3.5%)); }
}
.story-cards-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4% 0;
}
.tilt-card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --shine: 0;
  --lift: 1;
  position: relative;
  flex: 0 0 40%;
  perspective: 900px;
}
.tilt-card:nth-child(1) { transform: rotate(-6deg) translateY(4%); margin-right: -10%; z-index: 1; }
.tilt-card:nth-child(2) { flex-basis: 47%; z-index: 2; }
.tilt-card:nth-child(3) { transform: rotate(6deg) translateY(4%); margin-left: -10%; z-index: 1; }
.tilt-card:hover { z-index: 3; }
.tilt-card-inner {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(245, 242, 239, 0.5);
  box-shadow: var(--shadow-lg);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--lift));
  will-change: transform;
}
.tilt-card-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tilt-card-inner::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12) 28%, transparent 60%);
  mix-blend-mode: soft-light;
  opacity: var(--shine);
}
.story-cards-caption {
  margin-top: 18px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--dark-green);
}

/* ---------- Team ----------
   Each card opens on a stage where a soft light breathes behind the photo
   (about 4s in, 4s out, like a slow breath). js/team-dialog.js pauses it off
   screen and morphs the card into a bio dialog. Reduced motion keeps the
   light still; without JS the card shows its full bio. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--dark-green);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* The glow sits at z-index -1 inside this context: above the card fill,
     below the photo and text, and clipped only by the card's rounded edge. */
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.team-card:hover,
.team-card:focus-within { transform: translateY(-4px); border-color: var(--light-tan); box-shadow: var(--shadow-md); }
.team-stage {
  --glow: 230px;
  position: relative;
  display: grid;
  place-items: center;
  height: 200px;
}
.team-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--glow); height: var(--glow);
  margin: calc(var(--glow) / -2) 0 0 calc(var(--glow) / -2);
  z-index: -1;
  pointer-events: none;
}
.team-glow::before,
.team-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: team-breathe 8s ease-in-out infinite;
}
.team-glow::before {
  background: radial-gradient(circle, rgba(199, 164, 125, 0.5) 0%, rgba(156, 122, 97, 0.26) 40%, transparent 68%);
  opacity: 0.75;
  transition: opacity 600ms ease;
}
.team-glow::after {
  inset: 18%;
  border: 1px solid rgba(199, 164, 125, 0.35);
  animation-delay: -0.6s;
}
.team-card:hover .team-glow::before,
.team-card:focus-within .team-glow::before,
.team-dialog .team-glow::before { opacity: 1; }
.team-glow.is-paused::before,
.team-glow.is-paused::after { animation-play-state: paused; }
@keyframes team-breathe {
  0%, 100% { transform: scale(0.84); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .team-glow::before, .team-glow::after { animation: none; }
}
.team-photo {
  position: relative;
  width: 112px; height: 112px; border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--light-tan);
  box-shadow: var(--shadow-md);
}
.team-body { padding: 24px 28px 0; }
.team-card h3 { font-size: 1.12rem; line-height: 1.2; margin-bottom: 4px; color: var(--off-white); }
.team-card .role,
.team-dialog .role { display: block; font-size: 0.78rem; font-weight: 600; color: var(--light-tan); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; }
.team-card p { color: var(--cream); font-size: 0.96rem; padding: 14px 28px 30px; }

/* Enhanced: the bio is previewed in three lines and the whole card opens the
   dialog through its "Read bio" button (stretched over the card). */
.team-live .team-bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 0;
  margin-bottom: 14px;
}
.team-more {
  align-self: flex-start;
  margin: auto 28px 26px;
  padding: 6px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--light-tan);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.team-more::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  outline: 2px solid transparent;
  outline-offset: -4px;
  /* Eases in when focus comes back from the bio dialog instead of snapping. */
  transition: outline-color 300ms ease;
}
.team-more:focus-visible { outline: none; }
.team-more:focus-visible::after { outline-color: var(--light-tan); }
.team-card.is-open { visibility: hidden; }
.team-card.is-returning {
  transform: translateY(-4px);
  border-color: var(--light-tan);
  box-shadow: var(--shadow-md);
  transition: none;
}

/* The <dialog> itself is a transparent, full-screen layer that scrolls; the
   visible box is .team-dialog-panel. The open and close morph clips this
   full-screen layer between the card's rectangle and the panel's, so the
   card always lies inside it wherever it sits on the page. */
.team-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  color: var(--cream);
  overflow: auto;
  overscroll-behavior: contain;
}
.team-dialog[open] { display: flex; }
.team-dialog::backdrop { background: rgba(14, 39, 37, 0.82); }
.team-dialog-panel {
  position: relative;
  width: min(640px, 100%);
  margin: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--dark-green);
  isolation: isolate;
}
/* During the morph the layer paints the panel colour inside the moving clip
   and nothing may scroll or clip the travelling photo and name. */
.team-dialog.is-morphing { overflow: hidden; background: var(--dark-green); }
.team-dialog.is-morphing .team-dialog-panel { background: none; border-color: transparent; }
.team-ghost { position: fixed; inset: 0; pointer-events: none; }
.team-dialog-stage { height: 260px; --glow: 260px; overflow: visible; }
.team-dialog-stage .team-photo { width: 168px; height: 168px; }
.team-dialog-body { padding: 28px clamp(24px, 5vw, 44px) 40px; }
.team-dialog h2 { font-size: clamp(1.3rem, 5.6vw, 2.4rem); line-height: 1.2; color: var(--off-white); margin-bottom: 8px; }
.team-dialog-bio { margin-top: 22px; font-size: 1.08rem; color: var(--cream); max-width: var(--measure); }
.team-dialog-close {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--dark-green);
  color: var(--off-white);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.team-dialog-close:hover { background: var(--off-white); color: var(--dark-green); }
@media (max-width: 600px) {
  .team-dialog-stage { height: 210px; --glow: 210px; }
  .team-dialog-stage .team-photo { width: 132px; height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-card:hover, .team-card:focus-within { transform: none; }
}

/* ---------- About: hero title fill wave (js/about-fx.js) ----------
   Words start as a faint outline tint and fill with Off White line by line,
   a Light Tan band riding the edge of the fill. --x is the fill edge inside
   each word, in px. */
.fill-wave .fw {
  --x: -1em;
  background-image: linear-gradient(100deg,
    var(--off-white) calc(var(--x) - 0.55em),
    var(--light-tan) calc(var(--x) - 0.3em),
    var(--light-tan) calc(var(--x) - 0.12em),
    rgba(221, 211, 203, 0.2) var(--x));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em;
}

/* ---------- About: ambient cursor light (js/about-fx.js) ----------
   Hero only. A large, soft Light Tan glow behind the content follows the
   cursor; it never changes the hero's own colours. Fine pointers without
   reduced motion only. */
.hero-light {
  position: absolute;
  left: -260px; top: -260px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 164, 125, 0.22) 0%, rgba(199, 164, 125, 0.09) 38%, transparent 68%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 700ms ease;
  will-change: transform;
}
.hero-light.is-on { opacity: 1; }
.trail-host { position: relative; isolation: isolate; }
.trail-host > :not(.hero-light) { position: relative; z-index: 1; }

/* ---------- Partnership tiers (Clients page) ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Border beam (after Motion's "Recommended border beam" pricing section),
   given to every tier rather than one: an arc of light travels around each
   card's border. The ring is a conic gradient masked down to the border
   width; the three cards start at different points so they never move in
   step. js/tiers-motion.js pauses the beams while the section is off screen. */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.tier-card {
  position: relative;
  background: var(--dark-green);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.tier-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--beam-angle),
    transparent 0deg 200deg,
    rgba(199, 164, 125, 0.4) 270deg,
    var(--light-tan) 320deg,
    var(--off-white) 352deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  opacity: 0.9;
  animation: tier-beam 8s linear infinite;
  transition: opacity var(--dur) ease;
}
.tier-card:nth-child(2)::before { animation-delay: -2.7s; }
.tier-card:nth-child(3)::before { animation-delay: -5.4s; }
.tier-card:hover::before,
.tier-card:focus-within::before { opacity: 1; }
.tiers-idle .tier-card::before { animation-play-state: paused; }
@keyframes tier-beam { to { --beam-angle: 360deg; } }
.tier-card:hover { transform: translateY(-4px); border-color: var(--light-tan); box-shadow: var(--shadow-md); }
.tier-card .tier-label { font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--light-tan); margin-bottom: 10px; }
.tier-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 2rem; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--off-white); }
.tier-card p.tier-desc { color: var(--cream); font-size: 0.96rem; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.tier-card .tier-included { font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--light-tan); margin-bottom: 14px; }
.tier-card .tier-plus { color: var(--off-white); font-size: 0.96rem; margin-bottom: 14px; }
.tier-card .ac-list { margin-bottom: 0; }
.tier-card .ac-list li { font-size: 0.94rem; align-items: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .tier-card:hover { transform: none; }
  /* Still bordered, just still: the beam settles as a static tan edge. */
  .tier-card::before { animation: none; --beam-angle: 0deg; opacity: 0; }
  .tier-card { border-color: var(--light-tan); }
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
/* Heading above a full-width form, for the long candidate forms. */
.contact-grid.stacked { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.contact-grid.stacked .section-head { max-width: 760px; margin-bottom: 0; }
.contact-info-card {
  background: var(--dark-green);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}
.contact-info-card h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; color: var(--off-white); font-size: 1.2rem; margin-bottom: 8px; }
.contact-info-card > p { font-size: 0.96rem; margin-bottom: 22px; }
.contact-info-card .contact-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); color: var(--cream); font-size: 0.98rem; }
.contact-info-card .contact-item .ico { width: 18px; height: 18px; color: var(--light-tan); flex-shrink: 0; transition: transform var(--dur) var(--ease-out); }
.contact-info-card .contact-item:hover .ico { transform: translateX(3px); }
.contact-info-card .contact-item a { color: var(--off-white); }
.contact-info-card .contact-item a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-form-card {
  background: var(--dark-green);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-lg);
}
.contact-form-card h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; font-size: 1.3rem; margin-bottom: 6px; }
.contact-form-card .form-intro { font-size: 0.96rem; margin-bottom: 24px; }
.form-narrow { max-width: 640px; margin: 0 auto; }

/* ---------- Forms ---------- */
.form-row { margin-bottom: 18px; }
.form-row.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row.three-up { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* Long forms (apply, resume, referral) sit side by side on wide screens so
   they fit without much scrolling; they fall back to one column on phones. */
.form-wide .form-row textarea { min-height: 96px; }
@media (max-width: 900px) {
  .form-row.three-up { grid-template-columns: 1fr 1fr; }
}
.form-row label { display: block; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; color: var(--off-white); margin-bottom: 7px; transition: color var(--dur-fast) ease; }
.form-row .req { color: var(--light-tan); }
.form-row .optional { font-weight: 400; color: var(--cream); }
.form-row input, .form-row textarea, .form-row select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(199, 164, 125, 0.35);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--off-white);
  background: rgba(245, 242, 239, 0.04);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur) ease;
}
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--cream); opacity: 0.6; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none;
  border-color: var(--light-tan);
  box-shadow: 0 0 0 4px rgba(199, 164, 125, 0.2);
}
.form-row:focus-within > label,
.form-row > div:focus-within > label { color: var(--light-tan); }
.form-row textarea { resize: vertical; min-height: 120px; }
.form-row select {
  appearance: none;
  color-scheme: dark;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7A47D' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
/* Some browsers (Chrome on Windows) draw the option list light, so give the
   options their own colours rather than inheriting the white text. */
.form-row select option { background-color: var(--dark-green); color: var(--off-white); }
.form-row [aria-invalid="true"] { border-color: var(--off-white); box-shadow: 0 0 0 3px rgba(245, 242, 239, 0.18); }
.field-error {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--off-white);
}
.field-error::before {
  content: "!";
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--light-tan); color: var(--dark-green);
  font-size: 0.72rem; font-weight: 600;
}
.field-error.show { display: flex; }
.form-note { font-size: 0.86rem; color: var(--cream); margin-top: 14px; }
.form-note a { color: var(--light-tan); text-decoration: underline; text-underline-offset: 2px; }
.form-status {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(199, 164, 125, 0.1);
  color: var(--off-white);
  font-size: 0.93rem;
}
.form-status.show { display: block; }
.form-status a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Jobs page ---------- */
.jobs-board { padding-top: clamp(48px, 6vw, 72px); }
.jobs-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 920px;
  margin: 0 auto 24px;
}
.jobs-count { font-size: 0.95rem; color: var(--cream); }
.jobs-count strong { color: var(--off-white); }

.filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative;
}
.filter-pill {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9rem;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.filter-pill:hover { color: var(--off-white); }
.filter-pill[aria-pressed="true"] { background: var(--light-tan); color: var(--dark-green); }

/* With js/jobs.js loaded, a single sliding indicator paints the active fill
   instead of each pill's own background. */
.filter-indicator {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  border-radius: 999px;
  background: var(--light-tan);
  pointer-events: none;
  z-index: 0;
}
.filter-bar.has-indicator .filter-pill { position: relative; z-index: 1; }
.filter-bar.has-indicator .filter-pill[aria-pressed="true"] { background: transparent; }

.jobs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}
.job-card {
  background: var(--dark-green);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.job-card:hover { border-color: var(--light-tan); box-shadow: var(--shadow-md); }
.job-main h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--off-white); }
.job-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.job-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(245, 242, 239, 0.08);
  color: var(--off-white);
  letter-spacing: 0.02em;
}
.job-tag.loc { background: rgba(199, 164, 125, 0.18); color: var(--light-tan); }
.job-card p.blurb { color: var(--cream); font-size: 0.98rem; max-width: 560px; }
.job-apply { flex-shrink: 0; }

.no-results {
  display: none;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--cream);
}
.no-results.show { display: block; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 8px; }
.no-results .btn { margin-top: 18px; }

.general-app {
  max-width: 920px;
  margin: 40px auto 0;
  background: var(--light-tan);
  border-radius: var(--radius-md);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.general-app h3 { font-size: 1.2rem; margin-bottom: 4px; color: var(--dark-green); }
.general-app p { color: var(--dark-green); font-size: 0.98rem; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 20, 16, 0.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) ease, visibility 0s linear var(--dur);
  padding: 20px;
}
.modal-overlay.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal {
  background: var(--dark-green);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 40px);
  max-width: 480px;
  width: 100%;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  position: relative;
  transform: translateY(16px);
  transition: transform var(--dur-enter) var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.modal-overlay.open .modal { transform: none; }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(199, 164, 125, 0.15); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--off-white);
  transition: background-color var(--dur-fast) ease;
}
.modal-close:hover { background: rgba(199, 164, 125, 0.3); }
.modal h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; font-size: 1.35rem; line-height: 1.25; margin: 0 44px 8px 0; color: var(--off-white); }
.modal p.modal-sub { color: var(--cream); font-size: 0.94rem; margin-bottom: 24px; }
.modal.modal-wide { max-width: 980px; padding: clamp(24px, 4vw, 36px); }
.modal.modal-wide p.modal-sub { margin-bottom: 18px; }
.modal-wide .form-row { margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) {
  .modal { transition: none; transform: none; }
}

/* ---------- Toast stack (js/toast.js) ----------
   Bottom right on desktop; on phones a full-width strip at the bottom, clear
   of the header and the filter bar. Off White card so it reads against the
   Dark Green page and over the modal backdrop. */
.toast-region {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 250;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast-list {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  height: 0;
  transition: height var(--dur) var(--ease-out);
}
.toast {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 14px 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(14, 39, 37, 0.08);
  background: var(--off-white);
  color: var(--dark-green);
  box-shadow: var(--shadow-md);
  transform-origin: 50% 100%;
  pointer-events: auto;
}
.toast.is-back .toast-icon,
.toast.is-back .toast-text,
.toast.is-back .toast-close { visibility: hidden; }
.toast.is-back { height: var(--front-h); overflow: hidden; }
.toast-icon {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--light-green); color: var(--off-white);
}
.toast-text { flex: 1; min-width: 0; padding-top: 3px; }
.toast-title { font-size: 0.98rem; line-height: 1.3; color: var(--dark-green); }
.toast-body { margin-top: 4px; font-size: 0.88rem; line-height: 1.45; color: var(--grey); }
.toast-body a { color: var(--dark-green); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.toast-close {
  flex: none;
  width: 32px; height: 32px; margin: -2px -2px 0 0;
  border: none; border-radius: 50%;
  background: transparent; color: var(--grey); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.toast-close:hover { background: var(--cream); color: var(--dark-green); }
.toast :focus-visible { outline-color: var(--dark-green); }
@media (max-width: 640px) {
  .toast-region {
    left: 16px; right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast-list { transition: none; }
}

/* ---------- Referral program ---------- */
.referral-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.referral-card {
  background: var(--dark-green);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--shadow-lg);
}
.referral-card h3 { color: var(--off-white); font-size: clamp(1.9rem, 3vw, 2.4rem); margin-bottom: 22px; }
.referral-table-wrap { overflow-x: auto; }
.referral-table { width: 100%; border-collapse: collapse; }
.referral-table caption { text-align: left; }
.referral-table th {
  color: var(--light-tan);
  text-align: left;
  padding: 0 16px 12px 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
}
.referral-table td {
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--cream);
  font-size: 0.98rem;
  vertical-align: top;
}
.referral-table td:first-child { font-family: var(--font-ui); font-weight: 500; color: var(--off-white); white-space: nowrap; }
.referral-table td:last-child { font-family: var(--font-accent); font-weight: 500; font-size: 1.5rem; line-height: 1.1; color: var(--light-tan); }
.referral-table td:last-child .reward-note { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; color: var(--cream); margin-top: 4px; }
.referral-table tr:last-child td { border-bottom: none; }
.referral-table .sub { display: block; font-size: 0.86rem; color: var(--cream); margin-top: 2px; }
.referral-note { color: var(--cream); font-size: 0.9rem; margin-bottom: 6px; }
.referral-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Each program opens with a clear ladder: small label, large title, then the
   offer in a mid size. */
.referral-intro { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.referral-intro h2 { font-size: clamp(2.3rem, 4.4vw, 3.4rem); margin: 0 0 18px; }
.client-referrals .referral-intro { margin-bottom: 0; }
.referral-benefit { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.35; color: var(--dark-green); }
.client-referrals .referral-actions { margin-top: 30px; }
/* "Good to know" sits on a Dark Green panel so its labels and body copy can
   differ in size and colour without losing contrast on Dark Brown. */
.referral-good-to-know {
  background: var(--dark-green);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-lg);
}
.referral-good-to-know h3 { font-size: clamp(1.9rem, 3vw, 2.4rem); color: var(--off-white); margin-bottom: 8px; }
.referral-steps { display: flex; flex-direction: column; }
.referral-steps > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.referral-steps dt { font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--light-tan); margin-bottom: 6px; }
.referral-steps dd { color: var(--cream); font-size: 1.05rem; line-height: 1.6; }

/* ---------- Per-page section color rhythm ----------
   Each section keeps its colour as a solid band, and no two neighbouring
   bands (footer included) share a colour. Text placed directly on Light
   Green / Dark Brown uses the .on-mid rules above. */
.page-home .audience {
  background: var(--light-green);
  /* A solid Off White band marks a clear break from the globe hero above. */
  border-top: 6px solid var(--off-white);
}
.page-home .why { background: var(--light-green); }
.page-home .cta { background: var(--dark-brown); }

/* Home only: a soft, blurred Honduras photo sits faintly inside two of the
   bands so they read as scenes rather than flat colour blocks. It is static
   and stops at each section's edge (no fades between sections). The photos
   are greyscale, so no new hues enter the palette, and the blend can only
   push each band further from its text colour: Screen lightens the tan band
   under Dark Green text, Multiply darkens the green band under Off White
   text. */
.page-home .how-bg,
.page-home .why-bg {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Real elements (not ::before) so the motion modules can drift them slowly
   with scroll. Each is taller than its section and clipped by it, so no
   edge ever shows while it moves. */
.page-home .how,
.page-home .why { overflow: hidden; }
.page-home .how-bg {
  inset: -12% 0;
  background-image: url("../assets/home-texture-coast.jpg");
  mix-blend-mode: screen;
  opacity: 0.22;
}
.page-home .why-bg {
  inset: -12% 0;
  background-image: url("../assets/home-texture-city.jpg");
  mix-blend-mode: multiply;
  opacity: 0.35;
}

/* ---------- Home "Why Respira": the livelier version ----------
   Everything here is static and fully visible without JS. js/why-motion.js
   adds .why-live to the section, which sets the pre-entrance states it then
   animates; if Motion fails to load, the class never appears. */
.page-home .why-head { position: relative; }
.page-home .why-head h2 { position: relative; }
.page-home .why-head p { position: relative; }

/* Three soft rings behind the headline that slowly "breathe" in and out. */
.why-breath {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(560px, 120vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}
.why-breath span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 239, 0.3);
}
.why-breath span:nth-child(2) { inset: 14%; border-color: rgba(199, 164, 125, 0.4); }
.why-breath span:nth-child(3) { inset: 28%; border-color: rgba(245, 242, 239, 0.16); background: rgba(14, 39, 37, 0.12); }

.why-wave {
  display: block;
  width: 160px;
  height: 16px;
  margin: 2px auto 18px;
  color: var(--light-tan);
  overflow: visible;
}

.why-head .w { display: inline-block; }

.page-home .why .value-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page-home .why .vc-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--grey);
}
.page-home .why .vc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}
/* A Dark Green wash at the bottom of each photo blends it into the card. */
.page-home .why .vc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, var(--dark-green));
}
.page-home .why .value-card:hover .vc-photo img,
.page-home .why .value-card:focus-within .vc-photo img { transform: scale(1.08); }
.page-home .why .vc-body {
  position: relative;
  padding: 0 26px 30px;
  flex: 1;
}
.page-home .why .vc-icon {
  margin-top: -24px;
  position: relative;
  background: var(--dark-green);
  border: 1px solid var(--line);
}
.page-home .why .vc-num {
  position: absolute;
  top: 6px;
  right: 24px;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--light-tan);
}
/* A tan hairline grows along the card's bottom edge on hover. */
.page-home .why .value-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--light-tan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--ease-out);
}
.page-home .why .value-card { position: relative; }
.page-home .why .value-card:hover::after,
.page-home .why .value-card:focus-within::after { transform: scaleX(1); }

/* Pre-entrance states, only once the animation module is running. */
.why-live .why-head .w { opacity: 0; transform: translateY(0.5em); }
.why-live .why-head p,
.why-live .why-breath { opacity: 0; }
.why-live .why-wave path { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Motion drives these cards' transform frame by frame, so the CSS transform
   transition must not also ease toward each frame and fight it. */
.why-live .value-card { opacity: 0; transform: translateY(40px); transition-property: border-color, box-shadow; }
.why-live .vc-photo { clip-path: inset(100% 0 0 0); }
.why-live .vc-photo img { transform: scale(1.25); }

@media (max-width: 600px) {
  .page-home .why .vc-photo { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .why .vc-photo img,
  .page-home .why .value-card::after { transition: none; }
  .page-home .why .value-card:hover .vc-photo img,
  .page-home .why .value-card:focus-within .vc-photo img { transform: none; }
}

.page-about .story-section { background: var(--light-tan); }
.page-about .why { background: var(--light-green); }
.page-about .why .values-grid { grid-template-columns: repeat(3, 1fr); }
.page-about .team-section { background: var(--dark-green); }
.page-about .monument-section { background: var(--dark-brown); }
.page-about .cta { background: var(--light-green); }

.page-clients .story-section { background: var(--light-tan); }
.page-clients .why { background: var(--light-green); }
.page-clients .referral-cta { background: var(--dark-brown); }
.page-clients .cta { background: var(--light-green); }

.page-candidates .story-section { background: var(--light-tan); }
.page-candidates .open-roles { background: var(--light-green); }
.page-candidates #resume { background: var(--dark-green); }
.page-candidates #referrals { background: var(--light-green); }

.page-resources .why { background: var(--light-green); }
.page-resources .cta { background: var(--dark-brown); }

.page-contact .contact-section { background: var(--light-green); }

.page-referrals .client-referrals { background: var(--light-tan); }
.page-referrals .referral-section { background: var(--dark-brown); }

.page-jobs .jobs-board { background: var(--grey); }

/* ---------- Honduras photo sections ----------
   Four bands (About mission, Clients tiers, Candidates open roles, Resources
   categories) carry a full-bleed photo from Honduras. The photo is graded
   toward the palette (desaturated, slightly warm), sits under a Dark Green
   wash so Off White text and Dark Green cards stay readable, and dissolves
   at the top and bottom into the colour of the neighbouring band, so there
   is no hard image edge. It scrolls with the page (no fixed or parallax
   effect). Each photo sets its own crop, grade and wash strength. */
.photo-section {
  --photo-pos: 50% 50%;
  --photo-pos-m: 50% 50%;
  --photo-filter: saturate(0.72) sepia(0.14) brightness(0.92);
  --wash-top: 0.55;
  --wash-mid: 0.62;
  --wash-bottom: 0.72;
  --blend-top: var(--light-green);
  --blend-bottom: var(--light-green);
  --fade: clamp(90px, 11vw, 170px);
  background: var(--dark-green);
}
.section-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.section-photo picture,
.section-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.section-photo img {
  object-fit: cover;
  object-position: var(--photo-pos);
  filter: var(--photo-filter);
}
/* Wash, warm light and edge blends, in one layer above the photo:
   1. top and bottom fades into the neighbouring bands' colours;
   2. a faint Light Tan glow from the top, tying the photo to the gold accents;
   3. the Dark Green wash that carries text contrast. */
.section-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      var(--blend-top) 0,
      transparent var(--fade),
      transparent calc(100% - var(--fade-bottom, var(--fade))),
      var(--blend-bottom) 100%),
    radial-gradient(120% 60% at 50% 0%, rgba(199, 164, 125, 0.16), transparent 70%),
    linear-gradient(to bottom,
      rgba(14, 39, 37, var(--wash-top)) 0%,
      rgba(14, 39, 37, var(--wash-mid)) 50%,
      rgba(14, 39, 37, var(--wash-bottom)) 100%);
}
/* The neighbouring bands, per page. */
.page-about .photo-forest { --blend-top: var(--light-tan); --blend-bottom: var(--dark-green); }
.page-clients .photo-city { --blend-top: var(--light-tan); --blend-bottom: var(--dark-brown); }
.page-candidates .photo-beach { --blend-top: var(--light-tan); --blend-bottom: var(--dark-green); }
.page-resources .photo-lake { --blend-top: var(--dark-green); --blend-bottom: var(--dark-brown); }
/* On these three the photo runs straight on into the band below: a longer
   bottom fade, and no hairline on the next band's top edge. */
.page-about .photo-forest,
.page-clients .photo-city,
.page-resources .photo-lake { --fade-bottom: clamp(140px, 16vw, 240px); }
.page-about .photo-forest + section,
.page-clients .photo-city + section,
.page-resources .photo-lake + section { box-shadow: none; }
/* Resources: the hero runs straight on into the lake photo too. The hero's
   gradient warms toward Dark Brown at its lower edge, so it settles back to
   Dark Green over its last stretch, where the photo's top fade begins; the
   seam hairline is dropped. */
.page-resources .page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(90px, 11vw, 170px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 39, 37, 0), var(--dark-green));
}
.page-resources .photo-lake { box-shadow: none; }

/* Per-photo crop and grade. */
.photo-forest {
  --photo-pos: 50% 40%;
  --photo-filter: saturate(0.8) sepia(0.12) brightness(0.95);
}
.photo-city {
  --photo-pos: 50% 55%;
  --photo-filter: saturate(0.62) sepia(0.16) brightness(0.9);
  --wash-mid: 0.66;
  --wash-bottom: 0.74;
}
.photo-beach {
  --photo-pos: 50% 62%;
  --photo-filter: saturate(0.5) sepia(0.26) brightness(0.88);
  --wash-top: 0.58;
  --wash-mid: 0.6;
  --wash-bottom: 0.66;
}
.photo-lake {
  --photo-pos: 50% 45%;
  --photo-filter: saturate(0.55) sepia(0.22) brightness(0.92);
}
/* A Dark Green button would sink into the washed photo, so it gets a fine
   Light Tan ring there. */
.photo-section .btn-dark { box-shadow: 0 0 0 1px rgba(199, 164, 125, 0.45); }
.photo-section .btn-dark:hover { box-shadow: 0 0 0 1px var(--light-tan), var(--shadow-md); }

/* Phones get portrait crops. Stacked cards make the tall bands several
   screens high, so the photo fills the first screen-and-a-bit behind the
   heading and dissolves into Dark Green under the cards below, instead of
   being stretched across the whole band. */
@media (max-width: 700px) {
  .section-photo { background: var(--dark-green); }
  .section-photo picture { height: min(100%, 178vw); }
  .section-photo img {
    object-position: var(--photo-pos-m);
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }
  .photo-section { --fade: 72px; }
  .photo-forest { --photo-pos-m: 50% 45%; }
  .photo-city { --photo-pos-m: 50% 50%; }
  .photo-beach { --photo-pos-m: 50% 50%; }
  .photo-lake { --photo-pos-m: 50% 50%; }
}

/* Simple centered band (Clients referral prompt, Candidates open roles). */
.band { text-align: center; }
.band .section-head { margin-bottom: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
  .hero { min-height: 680px; }
  .hero-copy { max-width: 500px; }
}

/* Below full desktop width there is little safe space between the copy and
   the globe, so the route overlay and badges only show on wider screens. */
@media (max-width: 1299px) {
  .hero-bg-network, .hero-badge { display: none; }
}

@media (max-width: 1024px) {
  .values-grid { grid-template-columns: 1fr 1fr; }
  .tier-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  /* The line runs down the left; each card sits beside its number. */
  .steps-track { top: 18px; bottom: 0; left: 17px; right: auto; width: 2px; height: auto; }
  .steps-track-fill { transform-origin: center top; transform: scaleY(0); }
  .steps { grid-template-columns: 1fr; row-gap: 32px; }
  .step { padding: 0 0 0 64px; }
  .step-card { flex-direction: row; }
  .step-photo { aspect-ratio: auto; flex: 0 0 38%; min-height: 200px; }
  .step-body { align-self: center; padding: 26px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-banner { grid-template-columns: 1fr; }
  .cta-banner .cta-actions { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .audience-grid { grid-template-columns: 1fr; }
  .page-about .why .values-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .team-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .story-grid, .story-grid.reverse { grid-template-columns: 1fr; }
  .story-grid .content-photo { order: 0; aspect-ratio: 3 / 2; }
  .story-cards { max-width: 620px; margin: 0 auto; width: 100%; }
  .story-cards-row { padding-inline: 8%; }
  .story-grid.reverse .content-photo { order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid:not(.stacked) .contact-form-card { order: -1; }
  .referral-layout { grid-template-columns: 1fr; }
  .page-hero-split { grid-template-columns: 1fr; }
  .section-head.split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .contact-hero { min-height: 560px; padding: 64px 0 200px; }

  /* On phones the copy sits over the globe, as on desktop, rather than below
     a photo band. The photo keeps its own 1672:941 shape at 100vw tall and
     is pinned slightly past the right edge, which puts the globe on the
     right with the headline over its lower half. The route overlay gets the
     identical box, so its nodes stay on the countries. Photo, scrim and
     overlay all fade out at the bottom (a mask, not a hard line) into the
     hero's own gradient, which carries the lede, buttons and stats. The
     floating badges stay hidden: there is no room for them on a phone. */
  .hero { --hero-photo-h: 100vw; min-height: auto; align-items: flex-start; }
  .hero-bg-image,
  .hero-bg-network {
    display: block;
    top: 0;
    bottom: auto;
    left: auto;
    right: -14vw;
    width: auto;
    height: var(--hero-photo-h);
    max-width: none;
    aspect-ratio: 1672 / 941;
  }
  .hero-bg-image { object-fit: fill; }
  /* Darkens the left and lower part of the photo, where the text sits, and
     leaves the globe on the right bright. */
  .hero-scrim {
    height: var(--hero-photo-h);
    bottom: auto;
    background:
      linear-gradient(90deg, rgba(8, 20, 16, 0.8) 0%, rgba(8, 20, 16, 0.5) 50%, rgba(8, 20, 16, 0.05) 100%),
      linear-gradient(to bottom, rgba(8, 20, 16, 0.1) 0%, rgba(8, 20, 16, 0.3) 45%, rgba(8, 20, 16, 0.8) 100%);
  }
  .hero-bg-image,
  .hero-scrim,
  .hero-bg-network {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
  .hero-copy { max-width: 100%; padding: calc(var(--hero-photo-h) * 0.42) 0 44px; }
  .hero-actions .btn { flex: 1 1 200px; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .values-grid { grid-template-columns: 1fr; }
  .step { padding-left: 52px; }
  .step-card { flex-direction: column; }
  .step-photo { aspect-ratio: 16 / 9; min-height: 0; flex: none; }
  .step-body { padding: 20px 20px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .job-card { grid-template-columns: 1fr; padding: 24px 22px; }
  .job-apply .btn { width: 100%; }
  .general-app { flex-direction: column; align-items: stretch; padding: 26px 22px; }
  .jobs-toolbar { flex-direction: column; align-items: stretch; }
  .filter-bar { border-radius: 18px; }
  .filter-pill { flex: 1 1 auto; }
  .form-row.two-up, .form-row.three-up { grid-template-columns: 1fr; gap: 18px; }
  .referral-table td:first-child { white-space: normal; }
  .referral-table td:last-child { font-size: 1.25rem; }
  .page-hero .hero-actions .btn,
  .cta-actions .btn,
  .story-text .hero-actions .btn,
  .referral-actions .btn { width: 100%; }
  .btn { white-space: normal; }
}

.referral-layout .referral-actions { margin-top: 28px; }
.contact-hero-content .hero-actions { margin-top: 30px; }


/* ---------- Brush icons ----------
   Hand-painted raster icons (assets/icons/brush-*.webp, 128px for 2x).
   They are always decorative, so each <img> carries alt="". On tan and
   mid-tone sections the painted brown would sink into the background, so
   standalone icons sit on a Dark Green chip, like the card icons. */
.brush-icon { display: block; object-fit: contain; flex-shrink: 0; }
.value-card .vc-icon .brush-icon { width: 32px; height: 32px; }
.hero-badge-icon .brush-icon { width: 28px; height: 28px; }
.audience-card .ac-icon .brush-icon { width: 36px; height: 36px; }
.audience-card .ac-icon { margin-bottom: 18px; background: rgba(14, 39, 37, 0.72); border: 1px solid var(--line); }
.step-icon { width: 40px; height: 40px; margin-bottom: 12px; }
.brush-icon-head,
.tier-icon,
.general-app-icon {
  box-sizing: content-box;
  width: 40px;
  height: 40px;
  padding: 10px;
  background: var(--dark-green);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 18px;
}
.tier-icon { width: 34px; height: 34px; background: rgba(199, 164, 125, 0.12); margin-bottom: 16px; }
.general-app-icon { width: 30px; height: 30px; padding: 8px; border-radius: 14px; margin-bottom: 12px; }
.section-head:not(.left):not(.split) .brush-icon-head { margin-inline: auto; }
.contact-info-card .contact-item img.ico { width: 28px; height: 28px; }
.contact-info-card .contact-item svg.ico { margin-inline: 5px; }

@media (max-width: 1200px) {
  .page-hero-art { right: -24%; }
}
/* Clients hero art on tablets and phones: sits behind the copy, quieter. */
@media (max-width: 1024px) {
  .page-hero-art { right: -36%; height: 80%; top: auto; bottom: 0; translate: none; opacity: 0.4; }
}
@media (max-width: 600px) {
  .page-hero-art { right: -55%; height: 62%; }
}

/* Jobs hero art: the rooftop terrace photo (remote work, city view) is a full scene
   behind the hero, not a box. It covers most of the hero and dissolves into the dark
   green with a long left fade plus a soft elliptical edge, so no corner or straight
   edge shows. A warm glow and a very slow drift add depth. */
.page-hero-jobs .page-hero-art {
  /* The whole scene (sky, mountains, city, terrace, empty chairs) at full hero height,
     uncropped, dissolving into the green on the left and softly at the edges. */
  --art-fade-x: linear-gradient(to right,
    transparent 0%, rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.55) 22%, rgba(0, 0, 0, 0.85) 33%, #000 42%);
  --art-fade-y: linear-gradient(to bottom,
    transparent 0%, rgba(0, 0, 0, 0.6) 7%, #000 16%, #000 92%, rgba(0, 0, 0, 0.6) 100%);
  inset: 0 0 0 auto;
  translate: none;
  width: auto;
  height: 100%;
  transform-origin: 60% 80%;
  animation: jobs-hero-drift 32s ease-in-out infinite alternate;
}
.page-hero-jobs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 520px 380px at 46% 64%, rgba(199, 164, 125, 0.22), transparent 70%),
    linear-gradient(to right, rgba(14, 39, 37, 0.6) 0%, rgba(14, 39, 37, 0.32) 50%, transparent 72%);
}
.page-hero-jobs::before { z-index: 1; }
.page-hero-jobs .page-hero-inner { z-index: 2; }
.page-hero-jobs .page-hero-inner { text-shadow: 0 2px 24px rgba(8, 22, 19, 0.6); }
/* Desktop: a big, nearly square window onto the scene so the chairs, table, city and
   mountains all read at once; it never covers more than ~60% of the width, and the copy
   is kept to the left so the headline never runs into the photo. */
@media (min-width: 1025px) {
  .page-hero-jobs { min-height: min(880px, 76vh); padding-block: clamp(48px, 5vw, 80px); display: flex; align-items: center; }
  .page-hero-jobs .page-hero-inner { width: 100%; }
  .page-hero-jobs .page-hero-inner > * { max-width: min(640px, 44vw); }
  .page-hero-jobs .page-hero-art {
    aspect-ratio: 1.12;
    max-width: 62%;
    object-fit: cover;
    object-position: 50% 72%;
  }
}
@keyframes jobs-hero-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-jobs .page-hero-art { animation: none; }
}
@media (max-width: 1024px) {
  /* Phones and tablets: the photo sits in the lower part of the hero, so the empty
     chairs show large under the buttons; its top melts into the green behind the copy. */
  .page-hero-jobs .page-hero-art {
    --art-fade-x: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, #000 40%);
    --art-fade-y: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 18%, #000 40%, #000 92%, rgba(0, 0, 0, 0.6) 100%);
    inset: auto 0 0 0;
    width: 100%;
    height: 82%;
    object-position: 55% 100%;
    opacity: 0.95;
  }
  .page-hero-jobs::before {
    background: linear-gradient(to bottom,
      rgba(14, 39, 37, 0.5) 0%, rgba(14, 39, 37, 0.4) 55%, rgba(14, 39, 37, 0.08) 78%, transparent 100%);
  }
  .page-hero-jobs .page-hero-inner { text-shadow: 0 2px 18px rgba(8, 22, 19, 0.85); }
  /* Extra room under the buttons so the terrace chairs show on their own. */
  .page-hero-jobs { padding-top: 48px; padding-bottom: clamp(190px, 52vw, 300px); }
}

/* ---- Live job listings (js/jobs-live.js) ---- */
.job-card:has(.job-details[open]) { align-items: start; }
.job-details { margin-top: 14px; }
.job-details summary {
  cursor: pointer;
  width: fit-content;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--light-tan);
}
.job-details summary:hover { color: var(--off-white); }
.job-desc { margin-top: 14px; color: var(--cream); font-size: 0.96rem; max-width: 620px; }
.job-desc h4 { font-size: 1rem; color: var(--off-white); margin: 18px 0 8px; }
.job-desc h4:first-child { margin-top: 0; }
.job-desc p { margin-bottom: 10px; }
.job-desc ul { margin: 0 0 12px; padding-left: 1.2em; list-style: disc; }
.job-desc li { margin-bottom: 6px; }
.jobs-state {
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--cream);
}
.jobs-state h3 { font-size: 1.2rem; margin-bottom: 8px; color: var(--off-white); }
.jobs-state a { color: var(--light-tan); }

/* ---- Forms sent to the backend (js/apply-form.js) ---- */
.field-hint { margin-top: 6px; font-size: 0.84rem; color: var(--cream); opacity: 0.8; }
.form-row input[type="file"] { padding: 10px 12px; cursor: pointer; }
.form-row input[type="file"]::file-selector-button {
  font: inherit; font-weight: 500; font-size: 0.88rem;
  margin-right: 12px; padding: 6px 14px;
  border: none; border-radius: 999px;
  background: var(--light-tan); color: var(--dark-green); cursor: pointer;
}
.form-check { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; }
.form-row.form-check input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin-top: 3px; padding: 0; accent-color: var(--light-tan); }
.form-row.form-check label { margin: 0; font-weight: 400; font-size: 0.88rem; color: var(--cream); line-height: 1.5; }
.form-check label a { color: var(--light-tan); text-decoration: underline; text-underline-offset: 3px; }
.form-check .field-error { grid-column: 1 / -1; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot:not(:empty) { margin-bottom: 16px; min-height: 65px; }
button[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ---- Privacy notice ---- */
.legal-section { padding: clamp(48px, 7vw, 88px) 0; }
.legal { max-width: 760px; }
.legal h2 { font-size: 1.35rem; margin: 32px 0 10px; color: var(--off-white); }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: 14px; }
.legal a { color: var(--light-tan); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { margin-top: 32px; font-size: 0.9rem; opacity: 0.8; }