/* ------------------------------------------------------------------
   ONTIME MEDICAL MOBILITY LLC — public website

   Restyled Oct 2026 to the RelayNEMT green-and-white glass theme (see the
   override layer at the end of this file). Originally adapted from the Notomir site: warm paper ground,
   hairline rules instead of card shadows, square corners throughout,
   Newsreader serif for display type with italic accent words,
   JetBrains Mono for labels and numerals.

   Three deliberate departures, noted so they aren't "fixed" later:

   1. Type is scaled up slightly from the Notomir baseline (body 17px
      rather than 16px, small text 15px rather than 13.5px). The people
      reading this site are often older. The editorial proportions are
      unchanged; only the base size moved.

   2. Two accent tokens instead of one. Notomir's --color-accent is a
      bright orange that only reaches about 2.9:1 against the cream
      paper — fine for a dot, a rule, or the logo mark, but short of the
      3:1 that even large text needs, and well short of the 4.5:1 small
      text needs. So --color-accent stays for decoration (dots, borders,
      bullet marks, the logo, hover underlines) and --color-accent-text
      is the same hue burnt darker, used for every piece of orange type.
      Same look, readable.

   3. No dark mode. The Notomir design is a paper-and-ink system with
      dark ink sections for contrast. A prefers-color-scheme variant
      would fight it, so it's omitted.

   Also note: no JavaScript anywhere on this site, including the scroll
   reveals the Notomir homepage uses. Content that fades in on scroll is
   content that is invisible if the script never runs, and this site has
   to be readable by a carrier reviewer, a screen reader, and an old
   browser. There is no .reveal class here on purpose — don't add one.
   ------------------------------------------------------------------ */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Green-and-white glass theme, shared with the RelayNEMT product site.
     Token names are kept from the earlier design so every rule below still
     resolves; only the values changed. */
  --color-ink: #0b2b20;
  --color-ink-2: #2f4a40;
  --color-ink-3: #4b645a;
  --color-paper: #ffffff;
  --color-paper-2: #f3f7f5;
  --color-paper-3: #e4ede8;
  --color-rule: rgba(4, 120, 87, 0.12);
  --color-rule-strong: rgba(4, 120, 87, 0.26);
  --color-accent: #047857;
  --color-accent-text: #047857;
  --color-accent-soft: rgba(4, 120, 87, 0.1);
  --color-accent-hover: #065f46;
  --deep: #04392b;
  --deep-2: #03291f;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.85);
  --shadow-card: 0 12px 40px rgba(4, 80, 58, 0.08);
  --shadow-big: 0 24px 64px rgba(4, 80, 58, 0.14);

  --serif: "Bricolage Grotesque", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1280px;
}

/* ── Base ─────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

/* html carries the ink so that overscroll at the top and bottom of the
   page shows dark rather than a white flash. The page itself is paper. */
html {
  background: var(--color-ink);
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

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

p {
  margin: 0 0 1.1em;
}

::selection {
  background: var(--color-accent-text);
  color: var(--color-paper);
}

:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 14px 22px;
  z-index: 200;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.skip:focus {
  left: 0;
}

/* ── Layout ───────────────────────────────────────────────────── */

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 48px;
}

@media (max-width: 720px) {
  .shell {
    padding: 0 24px;
  }
}

section {
  padding: 120px 0;
  border-bottom: 1px solid var(--color-rule);
}

@media (max-width: 720px) {
  section {
    padding: 72px 0;
  }
}

/* For a band of short items, the full 120px above and below reads as dead
   space rather than breathing room. */
.strip {
  padding: 72px 0;
}

/* The eyebrow sits in the first column and the title in the second. Notomir
   aligns these to the bottom, which reads well when the title is one line —
   but these sections pair the title with a lede, and `end` then drops the
   eyebrow down beside the lede, well away from the words it labels. */
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  margin-bottom: 64px;
  align-items: start;
}

@media (max-width: 900px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.section-title em {
  font-style: italic;
  color: var(--color-accent-text);
}

.section-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ── Nav ──────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-rule);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-size: 14px;
  color: var(--color-ink-2);
  position: relative;
  transition: color 160ms ease;
}

.nav-links a:hover {
  color: var(--color-ink);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-links a[aria-current="page"] {
  color: var(--color-ink);
}

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

.nav-phone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.nav-phone-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.nav-phone-num {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--color-ink);
}

.nav-phone:hover .nav-phone-num {
  color: var(--color-accent);
}

@media (max-width: 860px) {
  .nav {
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 0;
  }

  .nav-cta {
    margin-left: auto;
  }

  .nav-phone-label {
    display: none;
  }

  .nav-phone-num {
    font-size: 17px;
  }

  .nav-links {
    order: 3;
    width: 100%;
    gap: 24px;
    padding-top: 4px;
  }
}

/* ── Logo ─────────────────────────────────────────────────────── */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.logo-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}

/* ── Buttons ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
  cursor: pointer;
  transition: all 180ms ease;
  text-align: center;
}

.btn:hover {
  background: transparent;
  color: var(--color-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule-strong);
}

.btn-ghost:hover {
  border-color: var(--color-ink);
  background: transparent;
  color: var(--color-ink);
}

.btn-arrow {
  transition: transform 220ms ease;
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* ── Hero ─────────────────────────────────────────────────────── */

.hero {
  padding: 80px 0 88px;
  border-bottom: 1px solid var(--color-rule);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px var(--color-accent-soft);
  }
  50% {
    box-shadow: 0 0 0 8px transparent;
  }
}

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 82px);
  line-height: 0.99;
  letter-spacing: -0.025em;
  margin: 0 0 30px;
  text-wrap: balance;
}

.hero-title em {
  font-style: italic;
  color: var(--color-accent-text);
}

.hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-ink-2);
  margin: 0 0 38px;
  max-width: 50ch;
  text-wrap: pretty;
}

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

.hero-meta {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-meta-num {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero-meta-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-meta {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── Hero side panel (the sample message) ─────────────────────── */

.panel {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  padding: 22px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-rule);
}

.panel-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-head .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.panel-body {
  padding-top: 18px;
}

.bubble {
  background: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
  max-width: 42ch;
}

.bubble-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin: 0 0 10px;
}

.panel-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-2);
}

/* ── Facts strip ──────────────────────────────────────────────── */

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

@media (max-width: 900px) {
  .facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 460px) {
  .facts {
    grid-template-columns: 1fr;
  }
}

.fact {
  background: var(--color-paper);
  padding: 26px 24px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  min-height: 84px;
}

.fact svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  transform: translateY(2px);
}

/* ── Steps ────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  background: var(--color-paper);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 250px;
  transition: background 220ms ease;
}

.step:hover {
  background: var(--color-paper-2);
}

.step-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-ink-3);
}

.step-title {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}

.step-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-2);
  margin: 0;
  margin-top: auto;
}

/* ── Cards (what we handle) ───────────────────────────────────── */

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

@media (max-width: 900px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

.card {
  border: 1px solid var(--color-rule);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 220ms ease, transform 220ms ease;
}

.card:hover {
  border-color: var(--color-ink);
  transform: translateY(-2px);
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.card-name {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  flex: 1 1 auto;
  min-width: 0;
}

.card-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-ink-3);
  text-transform: uppercase;
  flex: 0 0 auto;
  white-space: nowrap;
  padding-top: 8px;
}

.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Not flex: a flex container turns each run of text inside the <li> into its
   own flex item, so "You will receive <strong>up to 4 messages per trip</strong>
   — usually fewer" breaks into three columns. Position the marker instead and
   let the text wrap normally. */
.card-list li {
  font-size: 15px;
  color: var(--color-ink-2);
  line-height: 1.55;
  position: relative;
  padding-left: 16px;
}

.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 50%;
}

.card-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-2);
  margin: 0;
}

/* ── Point list (hairline rows) ───────────────────────────────── */

.points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.points li {
  display: grid;
  grid-template-columns: minmax(200px, auto) 1fr auto;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-rule);
  align-items: baseline;
}

.points li:last-child {
  border-bottom: 0;
}

.points .label {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: -0.01em;
}

.points .desc {
  font-size: 15px;
  color: var(--color-ink-2);
  line-height: 1.6;
}

.points .badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-ink-3);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .points li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .points .label {
    font-size: 19px;
  }
}

/* ── Full-bleed grid (who we serve) ───────────────────────────── */

.band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-rule);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

@media (max-width: 900px) {
  .band {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .band {
    grid-template-columns: 1fr;
  }
}

.band-item {
  background: var(--color-paper);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 190px;
  transition: background 240ms ease;
}

.band-item:hover {
  background: var(--color-paper-2);
}

.band-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-ink-3);
}

.band-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.band-body {
  margin-top: auto;
  font-size: 15px;
  color: var(--color-ink-3);
  line-height: 1.55;
}

/* ── Notice / disclosure blocks ───────────────────────────────── */

.notice {
  border: 1px solid var(--color-accent-hover);
  background: var(--color-accent-soft);
  padding: 22px 24px;
}

/* Two classes deep on purpose. ".notice p" and ".key-block p" are each
   (0,1,1) and would otherwise override a bare ".notice-title" (0,1,0) —
   which silently reduced this label to body ink at body size. */
.notice .notice-title,
.key-block .notice-title {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 12px;
}

.notice p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0 0 0.8em;
}

.notice p:last-child {
  margin-bottom: 0;
}

.key-block {
  border-left: 2px solid var(--color-accent);
  background: var(--color-accent-soft);
  padding: 20px 24px;
  margin: 0 0 1.4em;
}

.key-block p {
  margin: 0 0 0.8em;
  font-size: 16px;
  line-height: 1.6;
}

.key-block p:last-child {
  margin-bottom: 0;
}

/* ── Contact ──────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}

@media (max-width: 820px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-cell {
  background: var(--color-paper);
  padding: 32px 30px;
}

.contact-cell h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}

.contact-cell p {
  font-size: 15.5px;
  color: var(--color-ink-2);
  line-height: 1.6;
}

.contact-cell p:last-child {
  margin-bottom: 0;
}

.contact-lines {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-lines li {
  display: grid;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-rule);
}

.contact-lines li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.contact-lines .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.contact-lines .v {
  font-size: 17px;
  line-height: 1.5;
}

.contact-lines a {
  border-bottom: 1px solid var(--color-rule-strong);
}

.contact-lines a:hover {
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}

.big-phone {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: inline-block;
  border-bottom: 1px solid var(--color-rule-strong);
  margin-bottom: 6px;
}

.big-phone:hover {
  color: var(--color-accent-text);
  border-color: var(--color-accent-text);
}

/* ── Legal / prose ────────────────────────────────────────────── */

.legal {
  max-width: 76ch;
  padding: 72px 0 100px;
}

@media (max-width: 720px) {
  .legal {
    padding: 44px 0 64px;
  }
}

.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 31px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
  padding-top: 34px;
  border-top: 1px solid var(--color-rule);
  text-wrap: balance;
}

.legal section {
  padding: 0;
  border-bottom: 0;
}

.legal > section:first-of-type h2,
.legal section:first-child h2 {
  border-top: 0;
  padding-top: 0;
}

.legal-num {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-ink-3);
  margin-bottom: 10px;
  font-weight: 400;
}

.legal p,
.legal li {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--color-ink-2);
}

.legal p {
  margin: 0 0 1.15em;
}

.legal ul,
.legal ol {
  margin: 0 0 1.3em;
  padding-left: 1.3em;
}

.legal li {
  margin-bottom: 0.55em;
}

.legal li::marker {
  color: var(--color-ink-3);
}

.legal strong {
  color: var(--color-ink);
  font-weight: 600;
}

.legal a {
  border-bottom: 1px solid var(--color-rule-strong);
}

.legal a:hover {
  color: var(--color-accent-text);
  border-color: var(--color-accent-text);
}

.legal h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.015em;
  margin: 2em 0 0.6em;
}

.toc {
  border: 1px solid var(--color-rule);
  padding: 26px 28px;
  margin-bottom: 48px;
}

.toc ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 2;
  column-gap: 36px;
}

.toc li {
  font-size: 15px;
  margin-bottom: 8px;
  break-inside: avoid;
  color: var(--color-ink-3);
}

.toc li a:hover {
  color: var(--color-accent-text);
}

.legal-note {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--color-ink-3);
  border-top: 1px solid var(--color-rule);
  padding-top: 22px;
  margin-top: 48px;
}

/* The .legal rules above set a size on every p and li, which is right for
   prose and wrong for a component dropped into it. These hand the type
   scale back to the sample-message panel on sms-terms.html. */
.legal .panel p {
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0 10px;
}

.legal .panel .panel-foot {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-2);
  margin: 18px 0 0;
}

/* ── Page head (inner pages) ──────────────────────────────────── */

.page-head {
  padding: 68px 0 56px;
  border-bottom: 1px solid var(--color-rule);
}

.page-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.page-title em {
  font-style: italic;
  color: var(--color-accent-text);
}

.page-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-ink-2);
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}

.page-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin: 18px 0 0;
}

/* ── Footer CTA ───────────────────────────────────────────────── */

.foot-cta {
  padding: 100px 0;
  background: var(--color-ink);
  color: var(--color-paper);
  border-bottom: 0;
}

.foot-cta-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(44px, 6.5vw, 90px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 40px;
  max-width: 16ch;
  text-wrap: balance;
}

.foot-cta .btn {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}

.foot-cta .btn:hover {
  background: transparent;
  color: var(--color-paper);
}

.foot-cta .btn-ghost {
  background: transparent;
  color: var(--color-paper);
  border-color: oklch(0.95 0.012 90 / 0.3);
}

.foot-cta .btn-ghost:hover {
  border-color: var(--color-paper);
}

.foot-cta-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.foot-cta-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.foot-cta-eyebrow span:last-child {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.95 0.012 90 / 0.72);
}

/* ── Footer ───────────────────────────────────────────────────── */

.foot {
  padding: 60px 0 48px;
  background: var(--color-ink);
  color: oklch(0.95 0.012 90 / 0.72);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid oklch(0.95 0.012 90 / 0.14);
}

@media (max-width: 820px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 520px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}

.foot .logo {
  color: var(--color-paper);
  margin-bottom: 16px;
}

.foot-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.95 0.012 90 / 0.62);
  margin: 0 0 16px;
}

.foot p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 10px;
}

.foot a {
  color: oklch(0.95 0.012 90 / 0.88);
  transition: color 160ms ease;
}

.foot a:hover {
  color: var(--color-paper);
}

.foot-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 32px;
}

.foot-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.95 0.012 90 / 0.62);
}

/* The one link in the footer that is for staff rather than passengers —
   the way into the dispatcher app at /login. It sits down here with the
   copyright rather than in the navigation on purpose: a passenger looking
   for a ride should never be given a sign-in form as an option, and the
   only people who go looking for this are the two or three who already
   know it exists. Full-strength paper so it is legible, and the underline
   on hover like every other link on the site. */
.foot-meta a {
  color: var(--color-paper);
  text-decoration: none;
  border-bottom: 1px solid oklch(0.95 0.012 90 / 0.28);
  transition: border-color 180ms ease;
}

.foot-meta a:hover {
  border-bottom-color: var(--color-paper);
}

/* Lighter than --color-accent on purpose: this sits on the dark ink
   footer, where the bright accent would be too dim to read. */
.foot-emergency {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.78 0.13 62);
}

@media (max-width: 480px) {
  .foot-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Entrance ─────────────────────────────────────────────────────
   A single on-load fade at the top of each page. Deliberately not a
   scroll reveal: this site has no JavaScript, so an element that only
   becomes visible once a script adds a class would never appear at all.
   An animation only changes how content arrives, never whether it is
   there — if a browser ignores the rule, the text just renders normally.
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-title,
  .hero-sub,
  .hero-ctas,
  .hero-meta,
  .page-title,
  .page-sub,
  .page-date,
  .hero .panel {
    animation: rise 620ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }

  .hero-sub,
  .page-sub {
    animation-delay: 60ms;
  }

  .page-date {
    animation-delay: 100ms;
  }

  .hero-ctas {
    animation-delay: 120ms;
  }

  .hero .panel {
    animation-delay: 140ms;
  }

  .hero-meta {
    animation-delay: 180ms;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Touch targets ────────────────────────────────────────────────
   Most of the controls on this site are already tall enough — buttons
   are 45px, the header phone number is 50px, the big phone link on the
   contact page is larger still. The ones that are not are the plain
   text links in navigation, the contents list, and the footer, which
   are about 22px of text with no padding around them.

   WCAG 2.5.8 exempts links sitting inline inside a sentence — those
   cannot be padded without wrecking the line spacing — but it does not
   exempt navigation, a list of contents, or a footer list. So those
   get padding here.
   ---------------------------------------------------------------- */

.nav-links a,
.toc li a,
.foot-links a,
.contact-lines a,
.big-phone {
  display: inline-block;
}

/* Padding goes on the <a>, not the <li> — the list item is not clickable,
   so padding there enlarges the gap without enlarging the target. */
.foot-links {
  gap: 0;
}

.foot-links a {
  padding: 11px 0;
}

.big-phone {
  padding: 6px 0;
}

.contact-lines li {
  padding-bottom: 6px;
}

.contact-lines .v a {
  padding: 11px 0;
}

@media (max-width: 860px) {
  .nav-links a {
    padding: 11px 0;
    font-size: 15px;
  }

  .nav-phone {
    padding: 9px 0;
  }

  .toc ol {
    columns: 1;
  }

  .toc li {
    margin-bottom: 0;
  }

  .toc li a {
    padding: 10px 0;
  }
}

/* ── Print ────────────────────────────────────────────────────── */

@media print {
  .nav,
  .foot,
  .foot-cta,
  .btn,
  .skip {
    display: none !important;
  }

  html,
  body {
    background: #fff;
    color: #000;
  }

  .legal {
    max-width: none;
    padding: 0;
  }

  .legal p,
  .legal li {
    font-size: 11pt;
    color: #000;
  }

  .legal h2 {
    font-size: 14pt;
  }
}


/* =====================================================================
   Green-and-white glass theme (Oct 2026)
   Matches the RelayNEMT product site: white ground with soft green glows,
   frosted-glass cards with rounded corners, Bricolage Grotesque headings,
   emerald accents, and deep green bands for the dark sections.
   Still no JavaScript: nothing here hides content.
   ===================================================================== */

html { background: #fff; }
body {
  background:
    radial-gradient(800px 800px at 100% -10%, rgba(4,120,87,.16), transparent 65%),
    radial-gradient(700px 700px at -15% 30%, rgba(52,211,153,.14), transparent 65%),
    radial-gradient(800px 800px at 110% 75%, rgba(4,120,87,.10), transparent 65%),
    #fff;
  background-repeat: no-repeat;
  color: var(--color-ink);
}
::selection { background: var(--color-accent); color: #fff; }

/* Headings: the display face, upright, with green emphasis instead of italics */
h1, h2, h3, .hero-title, .section-title, .page-title, .foot-cta-title, .card-name, .step-title, .band-name, .legal h2 {
  font-family: var(--serif);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-title, .section-title, .page-title, .foot-cta-title { font-weight: 800; font-style: normal; }
.hero-title em, .section-title em, .page-title em, .foot-cta-title em {
  font-style: normal;
  color: var(--color-accent);
}
.foot-cta-title em { color: #6ee7b7; }
.card-name, .step-title, .band-name { font-weight: 700; font-style: normal; }
.eyebrow { font-family: var(--sans); font-weight: 700; letter-spacing: 0.08em; font-size: 12px; color: var(--color-accent); }

/* Navigation: a floating glass bar */
header.shell { position: sticky; top: 16px; z-index: 50; margin-top: 16px; }
.nav {
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(4,80,58,.08);
  padding-left: 22px !important; padding-right: 14px !important;
}
.logo { font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em; font-size: 20px; }
.nav, .foot-grid > * { min-width: 0; }
.logo-mark {
  background: var(--color-accent); color: #fff; border-radius: 10px;
  border: 0 !important;
}
.nav-links a::after { background: var(--color-accent); }
.nav-links a[aria-current="page"] { color: var(--color-accent); }
.nav-phone { background: var(--color-accent); color: #fff !important; border-radius: 12px; padding: 8px 16px; border: 0 !important; }
.nav-phone-label { color: rgba(255,255,255,.8) !important; }
.nav-phone-num { color: #fff !important; }
.nav-phone:hover { background: var(--color-accent-hover); }

/* Buttons */
.btn {
  background: var(--color-accent); border-color: var(--color-accent);
  color: #fff; border-radius: 14px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(4,120,87,.28);
}
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }
.btn-ghost {
  background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(4,120,87,.25); color: var(--color-accent); box-shadow: none;
}
.btn-ghost:hover { background: rgba(255,255,255,.9); color: var(--color-accent-hover); border-color: rgba(4,120,87,.4); }

/* Sections lose the hairline frames; glass does the separating */
section, .strip { border-color: transparent !important; }
.strip { background: transparent; }

/* Glass surfaces */
.panel, .card, .step, .notice, .key-block, .contact-cell, .toc, .points, .band-item {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}
.panel { box-shadow: var(--shadow-big); border-radius: 28px; padding: 26px; }
.card:hover, .step:hover, .band-item:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(4,80,58,.12); }
.cards, .steps { gap: 20px !important; background: transparent !important; border: 0 !important; }
.band { gap: 20px !important; background: transparent !important; border: 0 !important; }
.points { padding: 8px 24px; }
.points li { border-color: var(--color-rule) !important; }
.points .badge { background: var(--color-accent-soft); color: var(--color-accent-hover); border: 0; border-radius: 99px; }
.card-tag { background: var(--color-accent-soft); color: var(--color-accent-hover); border-radius: 99px; border: 0; }
.card-list li::before { background: var(--color-accent); }

/* Number markers become filled green circles */
.step-num, .band-num, .legal-num {
  color: var(--color-accent);
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-accent); color: #fff; font-family: var(--sans); font-weight: 800;
}

/* Hero bits */
.hero-eyebrow .dot, .panel-head .dot, .foot-cta-eyebrow .dot { background: var(--color-accent); }
.hero-meta-item { border-color: var(--color-rule) !important; }
.hero-meta-num { font-family: var(--serif); font-weight: 700; color: var(--color-ink); }
.bubble {
  background: #eef2f0; color: var(--color-ink);
  border: 0 !important; border-radius: 20px; border-bottom-left-radius: 6px;
}
.facts .fact svg, .fact svg { color: var(--color-accent); }

/* Dark sections: deep green with a soft glow */
.foot-cta, .foot {
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(52,211,153,.2), transparent 60%),
    linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%);
  color: #e7f3ee;
}
.foot { background: var(--deep-2); }
.foot-cta-eyebrow span:last-child, .foot-h { color: #6ee7b7 !important; }
.foot-cta .btn { background: #34d399; border-color: #34d399; color: var(--deep-2); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.foot-cta .btn:hover { background: #6ee7b7; border-color: #6ee7b7; color: var(--deep-2); }
.foot-cta .btn-ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.foot-cta .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.foot a:hover, .foot-meta a:hover { color: #6ee7b7; }
.foot .logo-mark { background: #34d399; color: var(--deep-2); }

/* Contact and legal pages */
.big-phone { color: var(--color-accent); font-family: var(--serif); font-weight: 800; }
.big-phone:hover { color: var(--color-accent-hover); }
.contact-lines a { color: var(--color-accent); }
.legal a { color: var(--color-accent); }
.legal li::marker { color: var(--color-accent); }
.toc { padding: 24px 28px; }
.notice { border-left: 4px solid var(--color-accent) !important; }

/* Phones: keep the glass, tighten the shapes */
@media (max-width: 720px) {
  header.shell { top: 10px; margin-top: 10px; }
  .logo { font-size: 15px; white-space: normal; line-height: 1.15; min-width: 0; }
  .nav { gap: 10px; padding-left: 14px !important; }
  .nav-phone { padding: 8px 12px; flex: none; }
  .nav { border-radius: 16px; }
  .panel { padding: 20px; border-radius: 24px; }
  .panel, .card, .step, .notice, .key-block, .contact-cell, .toc, .points, .band-item { border-radius: 20px; }
}
@media print {
  body { background: #fff; }
  .panel, .card, .step, .notice, .key-block, .contact-cell, .toc, .points, .band-item { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── Theme fixes: step pills, contained band, soft facts ── */
.step-num {
  width: auto; height: auto; padding: 6px 14px; border-radius: 99px; align-self: flex-start;
  font-size: 12px; letter-spacing: .04em;
  background: var(--color-accent-soft); color: var(--color-accent-hover);
}
.band {
  max-width: calc(var(--maxw) - 96px);
  margin-inline: auto !important;
  padding-inline: 48px;
  box-sizing: content-box;
}
@media (max-width: 720px) { .band { padding-inline: 24px; } }
.facts { gap: 16px !important; background: transparent !important; border: 0 !important; }
.fact {
  background: var(--glass); border: 1px solid rgba(255,255,255,.85);
  border-radius: 20px; box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.contact-grid { gap: 20px !important; background: transparent !important; border: 0 !important; }
.contact-cell { background: var(--glass) !important; border-radius: 24px; }
.contact-cell h3, .legal h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.01em; color: var(--color-ink); }
.legal-num { display: block; font-weight: 700; margin-bottom: 4px; }