/* ==========================================================================
   OAS site redesign — draft
   Brand: OAS Brand Identity System v1.0 (assets/oas-tokens.css)
   Layout language: matches the deployed site's discipline (bands, hairlines,
   eyebrows, closed CTA set, restrained motion) with the new brand skin.
   ========================================================================== */

:root {
  /* monochrome base — verbatim from assets/oas-tokens.css */
  --oas-ink: #111214;
  --oas-text: #1a1a1a;
  --oas-muted: #4a4a4a;
  --oas-line: #b3b3b3;
  --oas-hairline: #e3e3e5;
  --oas-paper: #f2f2f2;
  --oas-white: #ffffff;
  /* blues — Depth leads; Vapor reserved for dark interfaces */
  --oas-depth: #1e3179;
  --oas-steel: #3c5a7d;
  --oas-vapor: #96b2f7;
  /* type — Sora only */
  --oas-font: "Sora", Helvetica, Arial, sans-serif;
  /* layout */
  --container: 75rem;
  --radius-card: 0.5rem;
  --shadow-raised: 0 1px 2px rgb(17 18 20 / 0.05);
  --shadow-lifted: 0 12px 32px -12px rgb(17 18 20 / 0.18);
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--oas-font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--oas-text);
  background: var(--oas-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1,
h2,
h3 {
  font-weight: 600; /* semibold, never bold */
  color: var(--oas-ink);
  text-wrap: balance;
}

a {
  color: var(--oas-depth);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--oas-depth);
  outline-offset: 2px;
}

::selection {
  background: var(--oas-depth);
  color: var(--oas-white);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 64rem) {
  .container {
    padding-inline: 2.5rem;
  }
}

.section {
  padding-block: 5rem;
}

@media (min-width: 48rem) {
  .section {
    padding-block: 7rem;
  }
}

.surface-paper {
  background: var(--oas-paper);
}

.surface-white {
  background: var(--oas-white);
}

/* Depth at reading weight — a tinted band for lighter emphasis sections */
.surface-tint {
  background: rgb(30 49 121 / 0.06);
}

.surface-ink {
  background: var(--oas-ink);
  color: var(--oas-paper);
}

.surface-ink h2,
.surface-ink h3 {
  color: var(--oas-white);
}

.surface-depth {
  background: var(--oas-depth);
  color: var(--oas-white);
}

.surface-depth h2 {
  color: var(--oas-white);
}

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oas-depth);
  margin-bottom: 1.25rem;
}

.surface-ink .eyebrow,
.surface-depth .eyebrow {
  color: var(--oas-vapor);
}

.display {
  font-size: clamp(1.875rem, 6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.display-accent {
  color: var(--oas-depth);
}

.heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
}

.lede {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--oas-muted);
  max-width: 38rem;
}

@media (min-width: 48rem) {
  .lede {
    font-size: 1.25rem;
  }
}

.surface-ink .lede {
  color: var(--oas-line);
}

.surface-depth .lede {
  color: var(--oas-vapor);
}

.lede-follow {
  margin-top: 1.25rem;
}

.hero-measure {
  max-width: 46rem;
}

.section-flush-top {
  padding-top: 1rem;
}

.muted {
  color: var(--oas-muted);
}

.small {
  font-size: 0.75rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Buttons — two weights on light, one on dark. No third.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem; /* 48px touch target */
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-solid {
  background: var(--oas-depth);
  color: var(--oas-white);
  box-shadow: var(--shadow-raised);
}

.btn-solid:hover {
  background: var(--oas-ink);
}

.btn-outline {
  background: var(--oas-white);
  color: var(--oas-ink);
  border-color: var(--oas-line);
}

.btn-outline:hover {
  border-color: var(--oas-depth);
  color: var(--oas-depth);
}

.btn-on-dark {
  background: var(--oas-white);
  color: var(--oas-depth);
}

.btn-on-dark:hover {
  background: var(--oas-vapor);
  color: var(--oas-ink);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(242 242 242 / 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--oas-hairline);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--oas-depth);
}

.brand svg {
  height: 1.75rem; /* wordmark min 24px respected */
  width: auto;
}

.brand:hover {
  color: var(--oas-ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--oas-ink);
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--oas-depth);
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--oas-line);
  border-radius: var(--radius-card);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--oas-ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-pill:hover {
  border-color: var(--oas-depth);
  color: var(--oas-depth);
}

/* Mobile menu — the four-item nav collapses below 48rem */
.site-nav {
  display: none;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--oas-line);
  border-radius: var(--radius-card);
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--oas-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.menu-toggle:hover {
  border-color: var(--oas-depth);
  color: var(--oas-depth);
}

.menu-toggle svg {
  width: 1rem;
  height: 1rem;
}

.mobile-menu {
  border-top: 1px solid var(--oas-hairline);
  background: var(--oas-paper);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--oas-hairline);
  font-size: 1rem;
  font-weight: 500;
  color: var(--oas-ink);
}

.mobile-menu a:last-child {
  border-bottom: 0;
}

.mobile-menu a:hover,
.mobile-menu a[aria-current="page"] {
  color: var(--oas-depth);
}

@media (min-width: 48rem) {
  .site-nav {
    display: flex;
  }

  .menu-toggle,
  .mobile-menu {
    display: none;
  }
}

/* Small phones — keep the one-row header comfortable */
@media (max-width: 26rem) {
  .site-header .header-bar {
    padding-inline: 1rem;
    gap: 0.75rem;
  }

  .brand svg {
    height: 1.5rem; /* still above the 24px wordmark minimum */
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 5rem 6rem;
}

@media (min-width: 64rem) {
  .hero {
    padding-block: 7rem 8rem;
  }
}

.hero-inner {
  position: relative;
  max-width: 46rem;
}

.hero .display {
  margin-bottom: 1.5rem;
}

.hero-watermark {
  position: absolute;
  right: -4rem;
  bottom: -6rem;
  width: 34rem;
  color: var(--oas-depth);
  opacity: 0.08;
  pointer-events: none;
}

@media (max-width: 48rem) {
  .hero-watermark {
    width: 22rem;
    right: -6rem;
    bottom: -4rem;
  }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.25rem;
}

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.section-head {
  max-width: 44rem;
  margin-bottom: 3.5rem;
}

.section-head .lede {
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Service cards (landing)
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  background: var(--oas-paper);
  border: 1px solid var(--oas-hairline);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: var(--shadow-raised);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  border-color: rgb(30 49 121 / 0.45);
  box-shadow: var(--shadow-lifted);
}

.surface-paper .card {
  background: var(--oas-white);
}

.card.card-lead {
  border-color: var(--oas-depth); /* accent border, never a filled card */
}

.card .glyph {
  width: 1.125rem;
  height: auto;
  color: var(--oas-depth);
  margin-bottom: 1.25rem;
}

.card h3 {
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.018em;
  margin-bottom: 0.625rem;
}

.card p {
  font-size: 0.9375rem;
  color: var(--oas-muted);
}

/* The problem the card answers, in the customer's own words — it sits between
   the title and the body, so it is the one line on a card that carries the
   accent. Depth on Paper is 10.6:1; the dark override below is Vapor on the
   dark card at 8.0:1, which is Vapor doing the job the brand system reserves
   for it (Brand Identity System v1.0 §09) rather than a second accent. */
.card-quote {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--oas-depth);
  margin-bottom: 0.625rem;
}

.theme-dark .card-quote {
  color: var(--oas-vapor);
}

/* --------------------------------------------------------------------------
   Triangle list (dark band)
   -------------------------------------------------------------------------- */

.tri-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem 3rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .tri-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tri-list li {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  font-size: 1.0625rem;
}

.tri-list .glyph {
  flex: none;
  width: 0.75rem;
  height: auto;
  color: var(--oas-vapor);
  transform: translateY(0.05em);
}

.split {
  display: grid;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: 5fr 6fr;
    gap: 5rem;
  }
}

/* --------------------------------------------------------------------------
   Steps (how it works)
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  counter-reset: step;
}

@media (min-width: 40rem) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.steps li {
  border-top: 2px solid rgb(30 49 121 / 0.3);
  padding-top: 1.5rem;
}

.step-num {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--oas-depth);
  margin-bottom: 0.75rem;
}

.steps h3 {
  font-size: 1.1875rem;
  margin-bottom: 0.5rem;
}

.steps p {
  font-size: 0.9375rem;
  color: var(--oas-muted);
}

/* --------------------------------------------------------------------------
   Who it's for
   -------------------------------------------------------------------------- */

.audience {
  max-width: 44rem;
}

.audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 2rem;
}

.audience-tags span {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(30 49 121 / 0.35);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--oas-depth);
  background: var(--oas-white);
}

/* Narrow viewports drop the tag row entirely (captain, 2026-08-24). The four
   tags are an illustration of the paragraph above them, and on a phone they
   cost more vertical space than they earn — so the ROW goes, taking its own
   `gap` and its 2rem `margin-top` with it, which `visibility` and `opacity`
   would both leave behind. The selector is `.audience .audience-tags` and not
   the bare class on purpose: the contact form's interest chips reuse this same
   class (`.contact-form .audience-tags`) and they are controls, not
   illustration. 48rem is the sheet's own mobile boundary — the width below
   which the header collapses into the menu button — and not a new number. */
@media (max-width: 48rem) {
  .audience .audience-tags {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Contact band
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .contact-grid {
    grid-template-columns: 6fr 5fr;
    gap: 5rem;
  }
}

.contact-form {
  background: var(--oas-white);
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-lifted);
  display: grid;
  gap: 1.125rem;
}

.field {
  display: grid;
  gap: 0.375rem;
}

.field label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--oas-ink);
}

.field input,
.field textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--oas-text);
  background: var(--oas-white);
  border: 1px solid var(--oas-line);
  border-radius: var(--radius-card);
  padding: 0.6875rem 0.875rem;
  width: 100%;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--oas-depth);
  outline-offset: 0;
  border-color: var(--oas-depth);
}

.field textarea {
  resize: vertical;
  min-height: 6.5rem;
}

.form-note {
  font-size: 0.75rem;
  color: var(--oas-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--oas-ink);
  color: var(--oas-paper);
  padding-block: 4rem 2.5rem;
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 48rem) {
  .footer-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.footer-brand {
  color: var(--oas-white);
  display: inline-flex;
}

.footer-brand svg {
  height: 1.625rem;
  width: auto;
}

.footer-blurb {
  margin-top: 1.25rem;
  max-width: 24rem;
  font-size: 0.9375rem;
  color: var(--oas-line);
}

.footer-nav {
  display: grid;
  gap: 0.75rem;
}

.footer-nav-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oas-line);
  margin-bottom: 0.5rem;
}

.footer-nav a {
  color: var(--oas-paper);
  font-size: 0.9375rem;
  font-weight: 500;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
}

.footer-nav a:hover {
  color: var(--oas-vapor);
}

.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--oas-line);
}

/* --------------------------------------------------------------------------
   Services page
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: 4.5rem 3.5rem;
}

@media (min-width: 64rem) {
  .page-hero {
    padding-block: 6rem 4.5rem;
  }
}

.page-hero .lede {
  margin-top: 1.25rem;
}

.scope-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .scope-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .scope-card-wide {
    grid-column: 1 / -1;
  }
}

.scope-card {
  background: var(--oas-white);
  border: 1px solid var(--oas-hairline);
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-raised);
}

.scope-card.card-lead {
  border-color: var(--oas-depth);
}

.scope-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.scope-card h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.scope-card > p {
  font-size: 0.9375rem;
  color: var(--oas-muted);
  margin-bottom: 1.25rem;
}

.status {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-now {
  color: var(--oas-white);
  background: var(--oas-depth);
  border: 1px solid var(--oas-depth);
}

.status-dev {
  color: var(--oas-muted);
  border: 1px solid var(--oas-line);
}

.scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.scope-list li {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--oas-text);
}

.scope-list .glyph {
  flex: none;
  width: 0.5625rem;
  height: auto;
  color: var(--oas-depth);
  transform: translateY(0.02em);
}

.scope-footnote {
  margin-top: 2.5rem;
  font-size: 0.8125rem;
  color: var(--oas-muted);
  max-width: 44rem;
}

/* CTA strip at the bottom of services */
.cta-strip {
  text-align: center;
}

.cta-strip .heading {
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quote-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .quote-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quote-card {
  background: var(--oas-white);
  border: 1px solid var(--oas-hairline);
  border-top: 3px solid var(--oas-depth);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem 2rem;
  box-shadow: var(--shadow-raised);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.quote-card .glyph {
  width: 1.25rem;
  height: auto;
  color: var(--oas-depth);
}

.quote-card blockquote {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--oas-ink);
  flex: 1;
}

.quote-card figcaption {
  font-size: 0.9375rem;
  color: var(--oas-muted);
}

.quote-card figcaption strong {
  display: block;
  font-weight: 600;
  color: var(--oas-ink);
}

/* Placeholder content awaiting real material — visibly not final */
.placeholder {
  border-style: dashed;
  border-top-style: solid;
}

.placeholder-tag {
  align-self: flex-start;
  display: inline-flex;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  border: 1px dashed var(--oas-line);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oas-muted);
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .principles {
    grid-template-columns: repeat(2, 1fr);
  }
}

.principles li {
  background: var(--oas-white);
  border: 1px solid var(--oas-hairline);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: var(--shadow-raised);
}

.principles h3 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.principles .glyph {
  flex: none;
  width: 0.75rem;
  height: auto;
  color: var(--oas-depth);
  transform: translateY(0.02em);
}

.principles p {
  font-size: 0.9375rem;
  color: var(--oas-muted);
}

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

@media (min-width: 40rem) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 44rem;
  }
}

.team-card {
  background: var(--oas-white);
  border: 1px dashed var(--oas-line);
  border-radius: var(--radius-card);
  padding: 2rem;
  text-align: center;
}

.team-avatar {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: rgb(30 49 121 / 0.08);
  color: var(--oas-depth);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
}

.team-card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.team-card p {
  font-size: 0.875rem;
  color: var(--oas-muted);
}

/* --------------------------------------------------------------------------
   Variant themes — preview alternatives for the landing page.
   Base (no body class) = light with Depth. Variants override per brand rules:
   Vapor is the dark-interface accent; Steel is the documents reserve.
   -------------------------------------------------------------------------- */

/* ===== Dark landing — ink surfaces, Vapor accent ===== */

.theme-dark {
  background: var(--oas-ink);
  color: var(--oas-paper);
}

.theme-dark :focus-visible {
  outline-color: var(--oas-vapor);
}

.theme-dark ::selection {
  background: var(--oas-vapor);
  color: var(--oas-ink);
}

.theme-dark .site-header {
  background: rgb(17 18 20 / 0.9);
  border-bottom-color: rgb(255 255 255 / 0.12);
}

.theme-dark .brand {
  color: var(--oas-white);
}

.theme-dark .brand:hover {
  color: var(--oas-vapor);
}

.theme-dark .nav-link,
.theme-dark .menu-toggle {
  color: var(--oas-paper);
}

.theme-dark .nav-link:hover,
.theme-dark .nav-link[aria-current="page"],
.theme-dark .menu-toggle:hover {
  color: var(--oas-vapor);
}

.theme-dark .nav-pill {
  border-color: rgb(255 255 255 / 0.25);
  color: var(--oas-paper);
}

.theme-dark .nav-pill:hover,
.theme-dark .menu-toggle:hover {
  border-color: var(--oas-vapor);
}

.theme-dark .mobile-menu {
  background: var(--oas-ink);
  border-top-color: rgb(255 255 255 / 0.12);
}

.theme-dark .mobile-menu a {
  color: var(--oas-paper);
  border-bottom-color: rgb(255 255 255 / 0.12);
}

.theme-dark .mobile-menu a:hover,
.theme-dark .mobile-menu a[aria-current="page"] {
  color: var(--oas-vapor);
}

.theme-dark .surface-paper {
  background: var(--oas-ink);
}

.theme-dark .surface-white {
  background: #17181c;
}

.theme-dark .surface-tint {
  background: rgb(150 178 247 / 0.08);
}

.theme-dark .surface-ink {
  background: #17181c;
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3 {
  color: var(--oas-white);
}

.theme-dark .display-line2 {
  color: var(--oas-vapor);
}

.theme-dark .eyebrow {
  color: var(--oas-vapor);
}

.theme-dark .lede,
.theme-dark .steps p,
.theme-dark .card p,
.theme-dark .form-note {
  color: var(--oas-line);
}

.theme-dark .hero-watermark {
  color: var(--oas-vapor);
  opacity: 0.1;
}

.theme-dark .card {
  background: #1c1d22;
  border-color: rgb(255 255 255 / 0.12);
}

.theme-dark .card:hover {
  border-color: rgb(150 178 247 / 0.55);
}

/* THE CONSULTATION BAND GOES TO INK IN DARK MODE, AND VAPOR STAYS THE ACCENT
   (2026-08-23). Depth is a light-mode ground: against a dark page it reads as a
   lit panel rather than a band. The fix is the one the brand system already
   prescribes — Brand Identity System v1.0 §09 reserves Vapor as "the reversed
   accent where Depth goes muddy against Ink", so the GROUND changes and the
   accent does not.

   VAPOR IS NEVER THE FILL, and that is the whole of why this is three lines
   instead of one substitution. White on Vapor measures 2.1:1 — §07's misuse
   panel — and the eyebrow and lede on this band are ALREADY Vapor, so filling
   with it would render them at 1.0:1 against themselves. On Ink they measure
   8.9:1.

   The lede takes `--oas-line` rather than keeping Vapor, which is exactly what
   `.surface-ink .lede` above already does on the same ground: one accent is
   live at a time, and on this band it is the eyebrow. */
.theme-dark .surface-depth {
  background: var(--oas-ink);
}

.theme-dark .surface-depth .lede {
  color: var(--oas-line);
}

.theme-dark .card .glyph {
  color: var(--oas-vapor);
}

.theme-dark .card.card-lead {
  border-color: var(--oas-vapor);
}

.theme-dark .steps li {
  border-top-color: rgb(150 178 247 / 0.4);
}

.theme-dark .step-num {
  color: var(--oas-vapor);
}

.theme-dark .audience-tags span {
  background: transparent;
  border-color: rgb(150 178 247 / 0.45);
  color: var(--oas-vapor);
}

.theme-dark .btn-solid {
  background: var(--oas-vapor);
  color: var(--oas-ink);
}

.theme-dark .btn-solid:hover {
  background: var(--oas-white);
}

.theme-dark .btn-outline {
  background: transparent;
  border-color: rgb(255 255 255 / 0.25);
  color: var(--oas-paper);
}

.theme-dark .btn-outline:hover {
  border-color: var(--oas-vapor);
  color: var(--oas-vapor);
}

.theme-dark .contact-form {
  background: #1c1d22;
}

.theme-dark .field label {
  color: var(--oas-paper);
}

.theme-dark .field input,
.theme-dark .field textarea {
  background: var(--oas-ink);
  border-color: rgb(255 255 255 / 0.2);
  color: var(--oas-paper);
}

.theme-dark .field input:focus-visible,
.theme-dark .field textarea:focus-visible {
  outline-color: var(--oas-vapor);
  border-color: var(--oas-vapor);
}

.theme-dark .contact-form .btn-solid {
  background: var(--oas-vapor);
  color: var(--oas-ink);
}

.theme-dark .site-footer {
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

/* Dark — inner pages (services, about, testimonials) */

.theme-dark .display-accent {
  color: var(--oas-vapor);
}

.theme-dark .scope-card,
.theme-dark .quote-card,
.theme-dark .principles li {
  background: #1c1d22;
  border-color: rgb(255 255 255 / 0.12);
}

.theme-dark .scope-card.card-lead {
  border-color: var(--oas-vapor);
}

.theme-dark .scope-card > p,
.theme-dark .principles p,
.theme-dark .scope-footnote,
.theme-dark .team-card p,
.theme-dark .quote-card figcaption {
  color: var(--oas-line);
}

.theme-dark .scope-list li {
  color: var(--oas-paper);
}

.theme-dark .scope-list .glyph,
.theme-dark .principles .glyph,
.theme-dark .quote-card .glyph {
  color: var(--oas-vapor);
}

.theme-dark .status-now {
  background: var(--oas-vapor);
  border-color: var(--oas-vapor);
  color: var(--oas-ink);
}

.theme-dark .status-dev {
  border-color: rgb(255 255 255 / 0.3);
  color: var(--oas-line);
}

.theme-dark .quote-card {
  border-top-color: var(--oas-vapor);
}

.theme-dark .quote-card blockquote {
  color: var(--oas-white);
}

.theme-dark .quote-card figcaption strong {
  color: var(--oas-white);
}

.theme-dark .placeholder-tag {
  border-color: rgb(255 255 255 / 0.3);
  color: var(--oas-line);
}

.theme-dark .team-card {
  background: #1c1d22;
  border-color: rgb(255 255 255 / 0.3);
}

.theme-dark .team-avatar {
  background: rgb(150 178 247 / 0.14);
  color: var(--oas-vapor);
}

.theme-dark .audience-tags span {
  background: transparent;
}

/* ===== Steel landing — light, Steel accent ===== */

.theme-steel main a:not([class]) {
  color: var(--oas-steel);
}

.theme-steel :focus-visible {
  outline-color: var(--oas-steel);
}

.theme-steel ::selection {
  background: var(--oas-steel);
  color: var(--oas-white);
}

.theme-steel .brand {
  color: var(--oas-steel);
}

.theme-steel .brand:hover {
  color: var(--oas-ink);
}

.theme-steel .nav-link:hover,
.theme-steel .nav-link[aria-current="page"],
.theme-steel .nav-pill:hover,
.theme-steel .menu-toggle:hover {
  color: var(--oas-steel);
  border-color: var(--oas-steel);
}

.theme-steel .mobile-menu a:hover,
.theme-steel .mobile-menu a[aria-current="page"] {
  color: var(--oas-steel);
}

.theme-steel .eyebrow {
  color: var(--oas-steel);
}

.theme-steel .surface-ink .eyebrow,
.theme-steel .surface-depth .eyebrow {
  color: var(--oas-vapor);
}

.theme-steel .hero-watermark {
  color: var(--oas-steel);
}

.theme-steel .card .glyph,
.theme-steel .scope-list .glyph,
.theme-steel .principles .glyph,
.theme-steel .quote-card .glyph {
  color: var(--oas-steel);
}

.theme-steel .card:hover {
  border-color: rgb(60 90 125 / 0.55);
}

.theme-steel .card.card-lead,
.theme-steel .scope-card.card-lead {
  border-color: var(--oas-steel);
}

.theme-steel .steps li {
  border-top-color: rgb(60 90 125 / 0.35);
}

.theme-steel .step-num {
  color: var(--oas-steel);
}

.theme-steel .audience-tags span {
  border-color: rgb(60 90 125 / 0.4);
  color: var(--oas-steel);
}

.theme-steel .btn-solid {
  background: var(--oas-steel);
}

.theme-steel .btn-outline:hover {
  border-color: var(--oas-steel);
  color: var(--oas-steel);
}

.theme-steel .btn-on-dark {
  color: var(--oas-steel);
}

.theme-steel .surface-depth {
  background: var(--oas-steel);
}

.theme-steel .surface-tint {
  background: rgb(60 90 125 / 0.07);
}

.theme-steel .status-now {
  background: var(--oas-steel);
  border-color: var(--oas-steel);
}

.theme-steel .quote-card {
  border-top-color: var(--oas-steel);
}

.theme-steel .display-accent {
  color: var(--oas-steel);
}

/* ===== Vapor landing — light, Vapor as fills (never as text on light) ===== */

.theme-vapor main a:not([class]) {
  color: var(--oas-ink);
}

.theme-vapor :focus-visible {
  outline-color: var(--oas-ink);
}

.theme-vapor ::selection {
  background: var(--oas-vapor);
  color: var(--oas-ink);
}

.theme-vapor .brand {
  color: var(--oas-ink);
}

.theme-vapor .brand:hover {
  color: var(--oas-steel);
}

.theme-vapor .nav-link:hover,
.theme-vapor .nav-link[aria-current="page"],
.theme-vapor .mobile-menu a:hover,
.theme-vapor .mobile-menu a[aria-current="page"] {
  color: var(--oas-steel);
}

.theme-vapor .nav-pill:hover,
.theme-vapor .menu-toggle:hover {
  color: var(--oas-ink);
  border-color: var(--oas-ink);
}

.theme-vapor .eyebrow {
  display: inline-block;
  color: var(--oas-ink);
  background: rgb(150 178 247 / 0.35);
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
}

.theme-vapor .surface-ink .eyebrow {
  color: var(--oas-vapor);
  background: rgb(150 178 247 / 0.14);
}

.theme-vapor .hero-watermark {
  color: var(--oas-vapor);
  opacity: 0.35;
}

.theme-vapor .card .glyph {
  color: var(--oas-steel);
}

.theme-vapor .card:hover {
  border-color: var(--oas-vapor);
}

.theme-vapor .card.card-lead {
  border-color: var(--oas-vapor);
  border-width: 2px;
}

.theme-vapor .steps li {
  border-top-color: var(--oas-vapor);
}

.theme-vapor .step-num {
  color: var(--oas-ink);
}

.theme-vapor .audience-tags span {
  background: rgb(150 178 247 / 0.3);
  border-color: var(--oas-vapor);
  color: var(--oas-ink);
}

.theme-vapor .btn-solid {
  background: var(--oas-vapor);
  color: var(--oas-ink);
}

.theme-vapor .btn-solid:hover {
  background: var(--oas-ink);
  color: var(--oas-white);
}

.theme-vapor .btn-outline:hover {
  border-color: var(--oas-ink);
  color: var(--oas-ink);
}

.theme-vapor .surface-tint {
  background: rgb(150 178 247 / 0.16);
}

/* The final band flips from Depth blue to Vapor with ink type */
.theme-vapor .surface-depth {
  background: var(--oas-vapor);
  color: var(--oas-ink);
}

.theme-vapor .surface-depth h2 {
  color: var(--oas-ink);
}

.theme-vapor .surface-depth .lede {
  color: var(--oas-text);
}

.theme-vapor .surface-depth .eyebrow {
  background: rgb(255 255 255 / 0.6);
}

.theme-vapor .btn-on-dark {
  background: var(--oas-ink);
  color: var(--oas-white);
}

.theme-vapor .btn-on-dark:hover {
  background: var(--oas-white);
  color: var(--oas-ink);
}

.theme-vapor .contact-form .btn-solid {
  background: var(--oas-ink);
  color: var(--oas-white);
}

.theme-vapor .contact-form .btn-solid:hover {
  background: var(--oas-vapor);
  color: var(--oas-ink);
}

/* --------------------------------------------------------------------------
   Motion — two effects, both reduced-motion-gated
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .float-in {
    animation: float-in 0.9s cubic-bezier(0.16, 0.84, 0.3, 1) both;
  }

  @keyframes float-in {
    from {
      opacity: 0;
      transform: translateY(1.25rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 0.84, 0.3, 1);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}