:root {
  --navy: #0D1B2A;
  /* Derived shade, not a locked brand token: no "deep navy" role exists in
     CLAUDE.md / meridian-branding-state.md, only the single --navy above.
     This is --navy proportionally darkened (same hue, ~49% of the
     lightness) to preserve the gradient-depth system (hero/footer/page-hero
     backgrounds) that needs two navy stops. Don't mistake this for a
     missed locked token if auditing brand colors again later. */
  --navy-deep: #060D15;
  --blue: #007BFF;
  /* Darkened variant of --blue for the same hue/saturation, used only
     where --blue would host body/link text or sit behind white button
     text on a light background (nav links, "Learn More" links, button
     fills). #007BFF itself only reaches 3.98:1 against white, below the
     4.5:1 AA text minimum; this reaches 4.97:1. --blue stays untouched
     everywhere else (logo-adjacent accents, decorative underlines, text
     on dark backgrounds) since those already pass and #007BFF is the
     actual locked brand hex. */
  --blue-text: #006CE0;
  --steel: #6B7280;
  --text: #071225;
  --muted: #334155;
  --white: #ffffff;
  --cloud: #f8fafc;
  --border: #d7deea;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--cloud);
  line-height: 1.5;
}

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

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.nav {
  max-width: 1560px;
  min-height: 112px;
  margin: 0 auto;
  padding: 16px 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
}

.logo {
  flex: 0 0 540px;
  display: flex;
  align-items: center;
}

.logo img {
  width: 540px;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 42px;
  margin-left: auto;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nav-links a {
  padding: 16px 0;
  color: var(--text);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--blue-text);
}

.nav-links a.active {
  border-bottom: 3px solid var(--blue-text);
}

.menu-toggle {
  display: none;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 2rem;
  cursor: pointer;
}

.hero {
  position: relative;
  min-height: 500px;
  color: var(--white);
  background-color: var(--navy-deep);
  background-image: url("assets/hero-globe.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      var(--navy-deep) 0%,
      var(--navy-deep) 20%,
      rgba(2, 8, 23, 0.94) 30%,
      rgba(2, 8, 23, 0.72) 43%,
      rgba(2, 8, 23, 0.18) 58%,
      rgba(2, 8, 23, 0) 76%
    ),
    linear-gradient(
      180deg,
      rgba(2, 8, 23, 0.12) 0%,
      rgba(2, 8, 23, 0.02) 45%,
      rgba(2, 8, 23, 0.1) 100%
    );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1560px;
  margin: 0 auto;
  padding: 78px 54px 72px;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--blue);
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow.light {
  color: #c7d2fe;
}

.hero .eyebrow {
  /* Only the hero eyebrow sits over an actual photo (hero-globe.jpg) rather
     than a flat CSS gradient -- by the end of the line the overlay gradient
     has faded enough that contrast drops to ~4:1 against the current photo,
     and would vary with any future photo swap. This stacked text-shadow
     builds a near-solid dark halo directly behind the glyphs so contrast
     holds regardless of what's underneath. */
  text-shadow:
    0 0 4px rgba(2, 8, 23, 0.9),
    0 0 8px rgba(2, 8, 23, 0.9),
    0 0 12px rgba(2, 8, 23, 0.7);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 665px;
  margin-bottom: 22px;
  font-size: clamp(3.2rem, 4.8vw, 5.7rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.065em;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 3.2vw, 3.7rem);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -0.04em;
}

h3 {
  margin-bottom: 12px;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.12;
}

.blue-line {
  width: 82px;
  height: 4px;
  margin: 24px 0 26px;
  background: var(--blue);
}

.hero-text {
  max-width: 620px;
  margin-bottom: 0;
  color: #edf4ff;
  font-size: 1.08rem;
  font-weight: 600;
}

.hero-proof {
  margin-top: 24px;
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  color: var(--white);
  background: var(--blue-text);
  border: none;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.button.secondary {
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.section {
  max-width: 1560px;
  margin: 0 auto;
  padding: 74px 54px;
}

.section-header {
  max-width: 860px;
  margin-bottom: 34px;
}

.section-header p {
  color: var(--muted);
  font-size: 1.05rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.service-card {
  min-height: 285px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.service-card img {
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
}

.service-card p {
  color: var(--muted);
}

.service-card a {
  margin-top: auto;
  color: var(--blue-text);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.approach-section {
  color: var(--white);
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 123, 255, 0.28), transparent 32%),
    linear-gradient(135deg, var(--navy-deep), #082452);
}

.approach-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 74px 54px;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 36px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.approach-card {
  padding: 34px;
  background: rgba(2, 8, 23, 0.35);
}

.approach-card p {
  color: #dbeafe;
}

.cta-band {
  color: var(--white);
  /* The eyebrow/heading/paragraph text sits at the left, which is also
     where the base gradient is lightest (its start stop is var(--blue)
     itself) -- even white text only reaches ~4:1 there, so text color
     alone can't clear AA. This scrim darkens just the text-bearing left
     portion (fading out before the button around 85% width) to give a
     contrast floor independent of the base gradient. Alpha tuned against
     the gradient's actual start color, not an approximation. */
  background:
    linear-gradient(90deg, rgba(2, 8, 23, 0.4) 0%, rgba(2, 8, 23, 0.4) 45%, transparent 75%),
    linear-gradient(135deg, var(--blue), #1e3a8a);
}

.cta-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 58px 54px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  align-items: center;
}

.cta-inner p {
  max-width: 820px;
  margin-bottom: 0;
  color: #dbeafe;
  font-size: 1.05rem;
}

.page {
  max-width: 1320px;
  min-height: 520px;
  margin: 0 auto;
  padding: 80px 32px;
}

.page-hero {
  padding: 68px;
  margin-bottom: 36px;
  color: var(--white);
  background:
    radial-gradient(circle at right center, rgba(0, 123, 255, 0.26), transparent 35%),
    linear-gradient(135deg, var(--navy-deep), var(--navy));
}

.page-hero h1 {
  /* Defensive fallback, not the primary fix for the services/contact mobile
     overflow (see .h1-tight below) — if a future headline edit introduces
     another long word, this breaks it mid-word instead of silently
     overflowing the box again. */
  overflow-wrap: break-word;
}

.page-hero p {
  max-width: 840px;
  color: #dbeafe;
  font-size: 1.08rem;
}

.service-section {
  padding: 38px;
  margin-bottom: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.service-section:nth-of-type(even) {
  /* Faint brand-blue wash (not a new token, same rgba(0, 123, 255, X)
     convention already used for the decorative glow accents elsewhere) so
     the 5 stacked blocks read as distinct sections instead of repeated
     identical boxes. Alternates automatically with block count, so adding
     or removing a service section doesn't require re-numbering anything. */
  background: linear-gradient(rgba(0, 123, 255, 0.035), rgba(0, 123, 255, 0.035)), var(--white);
}

.service-section-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}

.service-section-header h2 {
  margin-bottom: 0;
}

.service-icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}

.service-section p {
  color: var(--muted);
}

.service-section ul,
.plain-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 32px;
  margin: 22px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.job-card {
  padding: 24px;
  margin-top: 18px;
  background: var(--cloud);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.job-card h4 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 900;
}

.job-meta {
  margin-bottom: 14px;
  color: var(--blue-text);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.job-card p:not(.job-meta) {
  margin-bottom: 18px;
  color: var(--muted);
}

/* Projects module: built 2026-07-20, held back from live rendering per
   Jared's review (placeholder "Coming Soon" cards read as unfinished on a
   public page). Matching HTML is commented out in services.html too --
   uncomment both together once a real project exists to populate this
   with. Grid uses auto-fit + minmax, not a fixed 2-column track, so a real
   3rd/4th project card slots in later without a layout change here.

.projects-section {
  padding-top: 12px;
}

.projects-section > p {
  max-width: 640px;
  margin-bottom: 34px;
  color: var(--muted);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.project-card {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.project-card-media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--navy-deep), var(--blue));
}

.project-card-body {
  padding: 24px 28px 28px;
}

.project-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  color: var(--blue-text);
  background: rgba(0, 123, 255, 0.08);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-card-body h3 {
  margin-bottom: 0;
  font-size: 1.1rem;
}

.project-card--placeholder .project-card-body h3 {
  color: var(--muted);
  font-weight: 700;
}

.projects-cta {
  margin: 30px 0 0;
  font-weight: 700;
}

.projects-cta a {
  color: var(--blue-text);
  font-weight: 900;
  text-decoration: underline;
}
*/

/* Employee Highlights: built 2026-07-20, held back from live rendering
   until real hires exist (first expected August 2026), same pattern as
   the Projects module above. Matching HTML is commented out in
   careers.html too, uncomment both together. The scroll-reveal JS in
   script.js is NOT commented out, but is guarded against this section
   being absent -- see the comment there.

.employee-highlights-section {
  padding-top: 12px;
}

.employee-highlights-section > p {
  max-width: 640px;
  margin-bottom: 34px;
  color: var(--muted);
}

.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.highlight-card {
  padding: 30px 26px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
  text-align: center;
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.highlight-card.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.employee-grid.revealed .highlight-card:nth-child(2) {
  transition-delay: 0.12s;
}

.employee-grid.revealed .highlight-card:nth-child(3) {
  transition-delay: 0.24s;
}

.avatar-placeholder {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(135deg, var(--navy-deep), var(--blue));
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.highlight-card h3 {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 1.05rem;
}

.highlight-card p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.85rem;
}
*/

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.detail-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

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

.detail-card,
.contact-panel,
.form-panel,
.content-panel {
  padding: 36px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.detail-card p,
.contact-panel p,
.content-panel p,
.form-panel p {
  color: var(--muted);
}

.detail-card.accent-top {
  /* Quick-scan card treatment (About page Mission/Beliefs/Safety trio):
     a thin brand-blue top bar signals "reference fact," distinct from the
     open editorial look of .story-panel below. */
  border-top: 4px solid var(--blue);
}

.inset-section {
  padding-left: 0;
  padding-right: 0;
}

.split-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 54px;
  align-items: start;
}

.story-panel {
  /* Open editorial treatment, overriding the boxed-card look inherited from
     .content-panel above: no border/background/shadow, just a left accent
     rule, so the two narrative panels (Why We Started, Looking Forward)
     read as distinct from the quick-scan cards rather than matching them. */
  margin-top: 24px;
  padding: 0 0 0 36px;
  background: none;
  border: none;
  border-left: 4px solid var(--blue);
  box-shadow: none;
}

.story-panel p {
  max-width: 640px;
  font-size: 1.08rem;
}

.spacing-top {
  margin-top: 24px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
}

.contact-item {
  margin-bottom: 22px;
}

.contact-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.contact-item a,
.contact-item span,
.contact-item p {
  color: var(--muted);
}

.contact-subhead {
  margin-top: 32px;
}

.form-grid {
  display: grid;
  gap: 16px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 900;
}

.form-grid input,
.form-grid textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--cloud);
}

.form-grid textarea {
  min-height: 150px;
  resize: vertical;
}

.form-grid button {
  justify-self: start;
}

.footer {
  color: var(--white);
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 123, 255, 0.16), transparent 32%),
    linear-gradient(135deg, var(--navy-deep), #082452);
}

.footer-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 32px 54px 22px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  gap: 46px;
  align-items: center;
}

.footer-logo {
  padding-right: 42px;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}

.footer-logo img {
  width: 340px;
  height: auto;
}

.footer-column {
  min-height: 110px;
  padding-left: 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.footer-logo + .footer-column {
  border-left: none;
  padding-left: 0;
}

.footer-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}

.footer-icon {
  color: var(--blue);
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
}

.footer-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--white);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.footer-item a,
.footer-item span {
  color: #dbeafe;
  font-size: 0.95rem;
  line-height: 1.2;
}

.footer-bottom {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 54px 18px;
  color: #c7d2fe;
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 1200px) {
  .nav {
    padding: 14px 32px;
  }

  .logo {
    flex-basis: 430px;
  }

  .logo img {
    width: 430px;
  }

  .nav-links {
    gap: 24px;
  }

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

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-logo {
    border-right: none;
  }
}

@media (max-width: 900px) {
  .nav {
    min-height: 92px;
  }

  .logo {
    flex-basis: 340px;
  }

  .logo img {
    width: 340px;
  }

  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 92px;
    left: 22px;
    right: 22px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
  }

  .nav-links.open {
    display: flex;
  }

  .hero {
    min-height: 560px;
    background-position: 64% center;
  }

  .hero::before {
    background: rgba(2, 8, 23, 0.72);
  }

  .hero-content,
  .section,
  .approach-inner,
  .cta-inner {
    padding-left: 32px;
    padding-right: 32px;
  }

  .approach-grid,
  .split-section,
  .contact-layout,
  .detail-grid,
  .detail-grid.two,
  .detail-grid.three {
    grid-template-columns: 1fr;
  }

  .cta-inner {
    grid-template-columns: 1fr;
  }

  .service-section ul,
  .plain-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .nav {
    padding: 12px 18px;
  }

  .logo {
    flex-basis: 280px;
  }

  .logo img {
    width: 280px;
  }

  h1 {
    font-size: clamp(2.9rem, 13vw, 4.3rem);
  }

  .h1-tight {
    /* services.html "Infrastructure" and contact.html "Conversation" don't
       fit the mobile page-hero column at the default clamp size (measured
       overflow: 58px / 40px). Scoped to just these two headlines so
       about.html/careers.html/index.html, which already fit, aren't
       affected. Value tuned empirically against actual rendered width. */
    font-size: clamp(2.2rem, 10.5vw, 4.3rem);
  }

  .hero {
    min-height: 540px;
    background-position: 58% center;
  }

  .hero-content {
    padding: 48px 22px;
  }

  .section,
  .approach-inner,
  .cta-inner {
    padding: 48px 22px;
  }

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

  .service-card {
    min-height: auto;
    padding: 30px 24px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    padding: 34px 24px 18px;
    gap: 26px;
  }

  .footer-logo,
  .footer-column {
    padding: 0;
    border: none;
  }

  .footer-logo img {
    width: 300px;
  }

  .footer-bottom {
    padding: 0 24px 20px;
  }

  .page {
    padding: 48px 20px;
  }

  .page-hero,
  .detail-card,
  .service-section,
  .content-panel,
  .contact-panel,
  .form-panel {
    padding: 32px 24px;
  }
}