/* Layout & Skip Link */
.c-skip-link {
  position: absolute;
  top: -999px;
  left: var(--gutter);
  background: var(--color-signal);
  color: var(--color-ink);
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-display);
  font-size: var(--text-button);
  text-transform: uppercase;
  z-index: 1000;
  text-decoration: none;
}

.c-skip-link:focus {
  top: var(--space-8);
}

/* Top Nav */
.c-top-nav {
  background-color: var(--color-night);
  color: var(--color-white);
  height: var(--nav-h);
  border-bottom: 1px solid var(--color-anvil);
  position: sticky;
  top: 0;
  z-index: 100;
}

.c-top-nav__container {
  max-width: var(--page-max);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
}

.c-top-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  text-decoration: none;
  color: var(--color-white);
}

.c-top-nav__logo-svg {
  width: 28px;
  height: 28px;
}

.c-top-nav__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.c-top-nav__links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-24);
}

.c-top-nav__link {
  font-family: var(--font-display);
  font-size: var(--text-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  letter-spacing: var(--tracking-display);
  padding: var(--space-8) 0;
}

.c-top-nav__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.c-top-nav__phone-ghost {
  display: none;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-button);
  color: var(--color-white);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.c-top-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.c-top-nav__phone-ghost:hover {
  text-decoration: underline;
}

.c-top-nav__mobile-menu {
  display: block;
}

.c-top-nav__menu-summary {
  font-family: var(--font-display);
  font-size: var(--text-button);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  cursor: pointer;
  list-style: none;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-anvil);
}

.c-top-nav__menu-summary::-webkit-details-marker {
  display: none;
}

.c-top-nav__mobile-panel {
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background-color: var(--color-night);
  border-bottom: 1px solid var(--color-anvil);
  padding: var(--space-24) var(--gutter);
}

.c-top-nav__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-top-nav__mobile-link {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  display: block;
  padding: var(--space-8) 0;
}

@media (min-width: 1024px) {
  .c-top-nav__links {
    display: flex;
  }
  .c-top-nav__phone-ghost {
    display: flex;
  }
  .c-top-nav__mobile-menu {
    display: none;
  }
}

/* Sections */
.c-section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.c-section--white {
  background-color: var(--color-white);
  color: var(--color-ink);
}

.c-section--paper {
  background-color: var(--color-paper);
  color: var(--color-ink);
}

.c-section--ink {
  background-color: var(--color-ink);
  color: var(--color-white);
}

.c-section--ink a {
  color: var(--color-white);
}

.c-section--ink :focus-visible {
  outline-color: var(--color-white);
}

.c-section--night {
  background-color: var(--color-night);
  color: var(--color-white);
}

.c-section--night a {
  color: var(--color-white);
}

.c-section__container {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.c-section__h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin-bottom: var(--space-24);
  max-width: var(--measure);
}

.c-section__prose {
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.c-section__prose p {
  margin-bottom: var(--space-16);
}

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

.c-section__prose h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  margin-top: var(--space-32);
  margin-bottom: var(--space-16);
}

/* Section heading block: on desktop the heading holds the left column and the content
   reads on the right, so wide screens aren't half empty. Mobile stays one column. */
@media (min-width: 1024px) {
  .c-section__container:has(> .c-section__h2 + .c-section__prose, > .c-section__h2 + .c-sources-list) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-64);
    align-items: start;
  }

  .c-section__container:has(> .c-section__h2 + .c-section__prose, > .c-section__h2 + .c-sources-list) > .c-section__h2 {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-24));
    margin-bottom: 0;
  }
}

/* Answer Hero */
.c-answer-hero {
  background-color: var(--color-ink);
  color: var(--color-white);
  padding-top: var(--space-24);
  padding-bottom: var(--space-40);
}

@media (min-width: 1024px) {
  .c-answer-hero {
    padding-top: var(--space-48);
    padding-bottom: var(--space-64);
  }
}

/* ── Background-image hero variant ── */
.c-answer-hero--bg {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-24);
  padding-bottom: var(--space-40);
}

@media (min-width: 1024px) {
  .c-answer-hero--bg {
    padding-top: var(--space-80);
    padding-bottom: var(--space-80);
  }
}

.c-answer-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.c-answer-hero__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.c-answer-hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.c-answer-hero--bg .c-answer-hero__container {
  position: relative;
  z-index: 1;
}

.c-answer-hero__container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.c-answer-hero__container--split {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

@media (min-width: 1024px) {
  .c-answer-hero__container--split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-48);
    align-items: center;
  }
}

.c-answer-hero__content {
  display: flex;
  flex-direction: column;
}

.c-figure.c-answer-hero__media {
  margin: 0;
}

.c-answer-hero__media .c-figure__img {
  aspect-ratio: 16 / 9;
}

.c-breadcrumbs {
  margin-bottom: var(--space-16);
}

.c-breadcrumbs__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  color: var(--color-ash);
}

.c-breadcrumbs__link {
  color: var(--color-ash);
  text-decoration: none;
}

.c-breadcrumbs__link:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.c-breadcrumbs__separator {
  color: var(--color-ash);
}

.c-answer-hero__h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  color: var(--color-white);
  margin-bottom: var(--space-16);
  max-width: 20ch;
}

/* Short statements only (6 words or fewer); the component picks this class. */
.c-answer-hero__h1--statement {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
}

.c-answer-block {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-white);
  max-width: var(--measure);
  margin-bottom: var(--space-16);
}

.c-answer-block a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-byline {
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-ash);
  margin-top: var(--space-24);
  margin-bottom: 0;
}

.c-byline a {
  color: var(--color-ash);
  text-decoration: underline;
}

.c-byline a:hover {
  color: var(--color-white);
}

.c-byline time {
  color: var(--color-white);
}

.c-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  list-style: none;
  margin: 0 0 var(--space-24) 0;
  padding: 0;
}

.c-trust-strip__item {
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.c-trust-strip__item {
  margin-bottom: 0;
}

.c-trust-strip .c-icon {
  flex: none;
  color: var(--color-ash);
}

.c-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .c-hero-ctas {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-16);
  }
}

/* Button */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  min-height: var(--tap-min);
  padding: var(--space-8) var(--space-24);
  font-family: var(--font-display);
  font-size: var(--text-button);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}

.c-button--primary {
  background-color: var(--color-signal);
  color: var(--color-ink);
  border-color: var(--color-signal);
}

.c-button--primary:hover {
  background-color: var(--color-signal-deep);
  color: var(--color-white);
  border-color: var(--color-signal-deep);
}

.c-button--outline {
  background-color: transparent;
  border-color: var(--color-steel);
  color: var(--color-ink);
}

.c-button--outline:hover {
  border-color: var(--color-ink);
}

.c-answer-hero .c-button--outline,
.c-hero-ctas .c-button--outline,
.c-section--ink .c-button--outline,
.c-section--night .c-button--outline {
  border-color: var(--color-ash);
  color: var(--color-white);
}

.c-answer-hero .c-button--outline:hover,
.c-hero-ctas .c-button--outline:hover,
.c-section--ink .c-button--outline:hover,
.c-section--night .c-button--outline:hover {
  border-color: var(--color-white);
  color: var(--color-white);
}

.c-button--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-ink);
  padding-left: 0;
  padding-right: 0;
}

.c-button--ghost:hover {
  text-decoration: underline;
}

.c-answer-hero .c-button--ghost,
.c-hero-ctas .c-button--ghost,
.c-section--ink .c-button--ghost,
.c-section--night .c-button--ghost {
  color: var(--color-white);
}

/* One-yellow rule: under 1024px the contact bar's Call owns the yellow, so hero
   and closing-band primaries render as white outline; they turn yellow on desktop. */
.c-hero-ctas .c-button--primary {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

@media (min-width: 1024px) {
  .c-hero-ctas .c-button--primary {
    background-color: var(--color-signal);
    border-color: var(--color-signal);
    color: var(--color-ink);
  }
  .c-hero-ctas .c-button--primary:hover {
    background-color: var(--color-signal-deep);
    border-color: var(--color-signal-deep);
    color: var(--color-white);
  }
}

/* Tables */
.c-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
  border: 1px solid var(--color-ash);
}

.c-section--ink .c-table-wrapper {
  border-color: var(--color-anvil);
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-ui);
  text-align: left;
}

.c-table caption {
  font-family: var(--font-body);
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  text-align: left;
  padding: var(--space-16);
  background-color: var(--color-paper);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-ash);
}

.c-section--ink .c-table caption {
  background-color: var(--color-night);
  color: var(--color-white);
  border-color: var(--color-anvil);
}

.c-table thead th {
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-graphite);
  padding: var(--space-8) var(--space-16);
  border-bottom: 1px solid var(--color-ash);
  background-color: var(--color-white);
}

.c-section--paper .c-table thead th {
  background-color: var(--color-paper);
}

.c-section--ink .c-table thead th {
  color: var(--color-ash);
  background-color: var(--color-ink);
  border-bottom: 1px solid var(--color-anvil);
}

.c-table tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  text-align: left;
  padding: var(--space-8) var(--space-16);
  border-bottom: 1px solid var(--color-ash);
}

.c-section--ink .c-table tbody th {
  border-bottom: 1px solid var(--color-anvil);
}

.c-table tbody td {
  padding: var(--space-8) var(--space-16);
  border-bottom: 1px solid var(--color-ash);
  vertical-align: top;
}

.c-section--ink .c-table tbody td {
  border-bottom: 1px solid var(--color-anvil);
}

.c-table tbody tr:nth-child(even) {
  background-color: var(--color-paper);
}

.c-section--paper .c-table tbody tr:nth-child(even) {
  background-color: var(--color-white);
}

.c-section--ink .c-table tbody tr:nth-child(even) {
  background-color: var(--color-night);
}

/* Figure & Media */
.c-figure {
  margin: var(--space-32) 0;
  max-width: 100%;
}

.c-figure picture {
  display: block;
  background-color: var(--color-paper);
}

.c-answer-hero .c-figure picture,
.c-section--ink .c-figure picture {
  background-color: var(--color-night);
}

.c-figure__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.c-figure__caption {
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-graphite);
  margin-top: var(--space-8);
  margin-bottom: 0;
}

.c-answer-hero .c-figure__caption,
.c-section--ink .c-figure__caption,
.c-section--night .c-figure__caption {
  color: var(--color-ash);
}

/* Equipment Grid */
.c-equipment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-top: var(--space-32);
}

@media (min-width: 640px) {
  .c-equipment-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1440px) {
  .c-equipment-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.c-equipment-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-ash);
  display: flex;
  flex-direction: column;
}

.c-section--paper .c-equipment-card {
  background-color: var(--color-white);
  border-color: var(--color-ash);
}

.c-section--white .c-equipment-card {
  background-color: var(--color-paper);
  border-color: var(--color-steel);
}

.c-equipment-card__media {
  margin: 0;
  border-bottom: 1px solid var(--color-ash);
}

.c-equipment-card__media picture {
  display: block;
  background-color: var(--color-ink);
}

.c-equipment-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.c-equipment-card__caption {
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-graphite);
  padding: var(--space-8) var(--space-24) 0;
}

.c-equipment-card__body {
  padding: var(--space-16) var(--space-24) var(--space-24);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.c-section__prose .c-equipment-card__title,
.c-equipment-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  margin-top: 0;
  margin-bottom: var(--space-8);
  color: var(--color-ink);
}

.c-equipment-card__desc {
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  color: var(--color-ink);
  margin-bottom: 0;
}

.c-equipment-card__desc p {
  margin-bottom: var(--space-8);
}

.c-equipment-card__desc p:last-child {
  margin-bottom: 0;
}

.c-equipment-card__desc a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-equipment-card__desc a:hover {
  color: var(--color-signal-deep);
}

/* FAQ Details/Summary */
.c-faq-list {
  max-width: var(--measure);
  margin-top: var(--space-24);
  border-top: 1px solid var(--color-ash);
}

.c-faq-item {
  border-bottom: 1px solid var(--color-ash);
}

.c-faq-question {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  gap: var(--space-16);
  min-height: var(--tap-min);
  padding: var(--space-16) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-faq-question::-webkit-details-marker {
  display: none;
}

.c-faq-question__icon {
  flex: none;
  color: var(--color-graphite);
}

.c-faq-item[open] .c-faq-question__icon {
  transform: rotate(180deg);
}

.c-faq-answer {
  padding-bottom: var(--space-24);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Glossary DL */
.c-glossary {
  max-width: var(--measure);
  margin-top: var(--space-24);
}

.c-glossary__item {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-paper);
  break-inside: avoid;
}

@media (min-width: 1024px) {
  .c-glossary {
    max-width: none;
    columns: 2;
    column-gap: var(--space-64);
  }
}

.c-glossary__term {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.c-glossary__def {
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  margin-left: 0;
}

/* About Box (Aside) */
.c-about-box {
  background-color: var(--color-paper);
  border-left: 3px solid var(--color-ink);
  padding: var(--space-24);
  max-width: var(--measure);
  margin-top: var(--space-32);
}

.c-about-box p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Sources OL */
.c-sources-lead {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin-bottom: var(--space-24);
  max-width: var(--measure);
}

.c-sources-list {
  max-width: var(--measure);
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
}

.c-sources-list li {
  margin-bottom: var(--space-16);
}

/* Footer */
.c-footer {
  background-color: var(--color-night);
  color: var(--color-white);
  padding-top: var(--space-64);
  padding-bottom: calc(var(--space-64) + var(--contactbar-h));
  border-top: 1px solid var(--color-anvil);
}

@media (min-width: 1024px) {
  .c-footer {
    padding-bottom: var(--space-64);
  }
}

.c-footer__container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.c-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
  margin-bottom: var(--space-48);
}

@media (min-width: 640px) {
  .c-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .c-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.c-footer__col-title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-16);
  color: var(--color-white);
}

.c-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-footer__list li {
  margin-bottom: 0;
}

.c-footer__list a,
.c-footer__legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.c-footer__list a {
  color: var(--color-ash);
  text-decoration: none;
  font-size: var(--text-ui);
}

.c-footer__list a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.c-footer strong {
  color: var(--color-white);
}

.c-footer__contact-list {
  list-style: none;
  margin: 0 0 var(--space-16) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.c-footer__contact-list li {
  color: var(--color-ash);
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
}

.c-footer__contact-list strong {
  color: var(--color-white);
  margin-right: var(--space-4);
}

.c-footer__contact-list a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-footer__contact-list a:hover {
  color: var(--color-signal);
}

.c-footer__info-p {
  color: var(--color-ash);
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  margin-bottom: var(--space-16);
}

.c-footer__info-p a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-footer__info-p a:hover {
  color: var(--color-signal);
}

.c-footer__bottom {
  border-top: 1px solid var(--color-anvil);
  padding-top: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  color: var(--color-ash);
  font-size: var(--text-label);
}

@media (min-width: 640px) {
  .c-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.c-footer__legal-links {
  display: flex;
  gap: var(--space-16);
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-footer__legal-links a {
  color: var(--color-ash);
  text-decoration: underline;
}

/* Sticky Contact Bar */
.c-contact-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--contactbar-h) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-night);
  border-top: 1px solid var(--color-anvil);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  z-index: 999;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 1024px) {
  .c-contact-bar {
    display: none;
  }
}

.c-contact-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-decoration: none;
  border-right: 1px solid var(--color-anvil);
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
}

.c-contact-bar__item:last-child {
  border-right: none;
}

.c-contact-bar__item svg {
  width: 20px;
  height: 20px;
}

.c-contact-bar__item--call {
  background-color: var(--color-signal);
  color: var(--color-ink);
  font-weight: 600;
}

/* Section layout: prose left, media right on desktop; media stacks under prose on mobile */
.c-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-32);
}

.c-section__aside .c-figure {
  margin: 0;
}

@media (min-width: 1024px) {
  .c-section__layout--aside {
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
    column-gap: var(--space-64);
    align-items: start;
  }
  .c-section__layout--aside .c-section__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--nav-h) + var(--space-24));
  }
  .c-section__layout--aside .c-section__cta {
    grid-column: 1;
  }
}

/* Tables: numbers right-aligned and tabular; on phones text columns keep a readable
   width and the table scrolls sideways with the row label pinned. */
.c-table .c-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.c-table tbody td:not(.c-table__num) {
  min-width: 11em;
}

.c-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--color-white);
  min-width: 7em;
}

.c-table tbody tr:nth-child(even) th,
.c-section--paper .c-table tbody th {
  background-color: var(--color-paper);
}

.c-section--paper .c-table tbody tr:nth-child(even) th {
  background-color: var(--color-white);
}

/* Button icon */
.c-button .c-icon {
  flex: none;
}

/* Bar chart (sourced data graphic) */
.c-bar-chart {
  margin: 0;
  padding: var(--card-pad);
  border: 1px solid var(--color-ash);
  background-color: var(--color-white);
}

.c-section--white .c-bar-chart {
  background-color: var(--color-paper);
}

.c-bar-chart__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-16);
}

.c-bar-chart__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-bar-chart__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-16);
  margin-bottom: var(--space-16);
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
}

.c-bar-chart__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.c-bar-chart__track {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: var(--space-16);
  border: 1px solid var(--color-steel);
}

.c-bar-chart__fill {
  fill: var(--color-ink);
}

.c-bar-chart__caption {
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-graphite);
}

/* Closing CTA band */
.c-closing-cta__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  margin-bottom: var(--space-8);
}

.c-closing-cta__hours {
  color: var(--color-ash);
  margin-bottom: var(--space-32);
}

/* Keep the caption readable while a wide table scrolls under it */
.c-table caption {
  position: sticky;
  left: 0;
  max-width: calc(100vw - 2 * var(--gutter) - 2px);
}

/* ─── CTA Blocks (services page) ─── */

.c-cta-block {
  background-color: var(--color-night);
  color: var(--color-white);
  padding: var(--section-y) 0;
}

.c-cta-block__container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--space-40);
}

@media (min-width: 1024px) {
  .c-cta-block__container {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.c-cta-block__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-ash);
  margin-bottom: var(--space-8);
}

.c-cta-block__headline {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  margin-bottom: var(--space-16);
}

.c-cta-block__body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ash);
  max-width: var(--measure);
  margin-bottom: var(--space-24);
}

.c-cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

/* One-yellow rule: on mobile (<1024px) the contact bar's Call owns the yellow,
   so CTA block primaries render as outline with white text and border;
   they turn yellow on desktop (>=1024px). */
.c-cta-block .c-button--primary {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

@media (min-width: 1024px) {
  .c-cta-block .c-button--primary {
    background-color: var(--color-signal);
    border-color: var(--color-signal);
    color: var(--color-ink);
  }
  .c-cta-block .c-button--primary:hover {
    background-color: var(--color-signal-deep);
    border-color: var(--color-signal-deep);
    color: var(--color-white);
  }
}

/* Buttons on dark: white text, ash borders */
.c-cta-block .c-button--outline {
  color: var(--color-white);
  border-color: var(--color-ash);
}

.c-cta-block .c-button--outline:hover,
.c-cta-block .c-button--outline:focus-visible {
  border-color: var(--color-white);
}

/* Stat block */
.c-cta-block__stat {
  margin-top: var(--space-24);
}

.c-cta-block__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-stat);
  line-height: var(--leading-stat);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  margin-bottom: var(--space-8);
}

.c-cta-block__stat-label {
  display: block;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--color-ash);
  max-width: 40ch;
}

.c-cta-block__source-link {
  display: inline-block;
  font-size: var(--text-label);
  color: var(--color-ash);
  margin-top: var(--space-4);
  text-decoration: underline;
}

.c-cta-block__source-link:hover,
.c-cta-block__source-link:focus-visible {
  color: var(--color-white);
}

/* ─── Rate-con card visual ─── */

.c-rate-card {
  border: var(--hairline) solid var(--color-anvil);
  background-color: var(--color-ink);
}

.c-rate-card__header {
  display: flex;
  justify-content: space-between;
  padding: var(--space-16);
  border-bottom: var(--hairline) solid var(--color-anvil);
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-ash);
}

.c-rate-card__table {
  width: 100%;
  border-collapse: collapse;
}

.c-rate-card__row td {
  padding: var(--space-16);
  border-bottom: var(--hairline) solid var(--color-anvil);
  font-size: var(--text-ui);
}

.c-rate-card__row:last-child td {
  border-bottom: none;
}

.c-rate-card__check {
  width: 32px;
  color: var(--color-ash);
}

.c-rate-card__label {
  color: var(--color-white);
}

.c-rate-card__amount {
  text-align: right;
  color: var(--color-steel);
}

/* ─── Lane strip visual ─── */

.c-lane-strip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.c-lane-strip__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-8) var(--space-16);
  border: var(--hairline) solid var(--color-anvil);
  font-family: var(--font-display);
  font-size: var(--text-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
}

.c-lane-strip__node--origin {
  background-color: var(--color-ink);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  font-weight: 600;
}

.c-lane-strip__arrow {
  font-size: var(--text-h3);
  color: var(--color-ash);
  transform: rotate(90deg);
  align-self: center;
}

.c-lane-strip__separator {
  color: var(--color-ash);
}

.c-lane-strip__destinations {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .c-lane-strip {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .c-lane-strip__arrow {
    transform: none;
    align-self: auto;
  }

  .c-lane-strip__destinations {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* ─── Lead Form ─── */
.c-lead-form-card {
  background-color: var(--color-night);
  border: 1px solid var(--color-anvil);
  padding: var(--space-24);
  color: var(--color-white);
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .c-lead-form-card {
    padding: var(--space-32);
  }
}

.c-lead-form__header {
  margin-bottom: var(--space-24);
}

.c-lead-form__headline {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  margin: 0 0 var(--space-8) 0;
}

.c-lead-form__subhead {
  font-family: var(--font-body);
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  color: var(--color-ash);
  margin: 0;
}

.c-lead-form__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-lead-form__required-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-lead-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.c-lead-form__label {
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.c-lead-form__required {
  color: var(--color-white);
}

.c-lead-form__input,
.c-lead-form__select,
.c-lead-form__textarea {
  min-height: 48px;
  padding: 12px 16px;
  background-color: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-steel);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  box-sizing: border-box;
  width: 100%;
}

.c-lead-form__textarea {
  min-height: 80px;
  resize: vertical;
}

.c-lead-form__input:focus,
.c-lead-form__select:focus,
.c-lead-form__textarea:focus {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.c-lead-form__help {
  font-size: var(--text-label);
  color: var(--color-ash);
}

.c-lead-form__optional {
  border: 1px solid var(--color-anvil);
  padding: var(--space-16);
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.c-lead-form__optional-summary {
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-lead-form__optional-summary::-webkit-details-marker {
  display: none;
}

.c-lead-form__optional-summary::after {
  content: "+";
  font-size: var(--text-body);
  line-height: 1;
}

.c-lead-form__optional[open] .c-lead-form__optional-summary::after {
  content: "−";
}

.c-lead-form__optional-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.c-lead-form__checkbox-field {
  margin: var(--space-8) 0;
}

.c-lead-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  min-height: var(--tap-min);
  gap: var(--space-16);
  cursor: pointer;
}

.c-lead-form__checkbox {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-top: 2px;
  border: 1px solid var(--color-steel);
  border-radius: 0;
  accent-color: var(--color-white);
  cursor: pointer;
}

.c-lead-form__checkbox-text {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--color-ash);
}

.c-lead-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

/* One-Yellow Rule for Lead Form Submit Button:
   Under 1024px, the mobile contact bar's Call owns yellow -> submit button is outline.
   At >=1024px, the form submit button owns yellow in the hero! */
.c-lead-form__submit {
  width: 100%;
  justify-content: center;
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

@media (min-width: 1024px) {
  .c-lead-form__submit {
    background-color: var(--color-signal);
    border-color: var(--color-signal);
    color: var(--color-ink);
  }
  .c-lead-form__submit:hover {
    background-color: var(--color-signal-deep);
    border-color: var(--color-signal-deep);
    color: var(--color-white);
  }
}

.c-lead-form__reassurance {
  font-size: var(--text-label);
  color: var(--color-ash);
  text-align: center;
  margin: 0;
}

.c-lead-form__feedback {
  padding: var(--space-16) var(--space-16);
  margin-bottom: var(--space-16);
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  border-left: 2px solid var(--color-white);
  background-color: var(--color-ink);
  color: var(--color-white);
}

.c-lead-form__feedback[hidden],
.c-lead-form__success-state[hidden] {
  display: none !important;
}

.c-lead-form__error-phone {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.c-lead-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.c-lead-form__feedback--error {
  border-left-color: var(--color-white);
}

.c-lead-form__success-state {
  text-align: center;
  padding: var(--space-32) var(--space-16);
}

.c-lead-form__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--color-signal);
  color: var(--color-signal);
  margin-bottom: var(--space-16);
}

.c-lead-form__success-title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  margin: 0 0 var(--space-16) 0;
}

.c-lead-form__success-message {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ash);
  margin: 0;
}

/* ─── Graphics ─── */
.c-graphic {
  margin: var(--space-32) 0;
  max-width: 100%;
}

.c-graphic__content {
  background-color: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-16);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
}

.c-section--paper .c-graphic__content {
  background-color: var(--color-white);
}

.c-section--ink .c-graphic__content,
.c-section--night .c-graphic__content,
.c-cta-block .c-graphic__content {
  background-color: var(--color-night);
  color: var(--color-white);
}

.c-graphic svg {
  font-family: var(--font-body);
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}

.c-graphic__caption {
  font-family: var(--font-body);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--color-graphite);
  margin-top: var(--space-8);
}

.c-section--ink .c-graphic__caption,
.c-section--night .c-graphic__caption,
.c-cta-block .c-graphic__caption,
.c-answer-hero .c-graphic__caption {
  color: var(--color-ash);
}

.c-answer-hero .c-graphic {
  margin: var(--space-16) 0;
  max-width: 360px;
}

.c-answer-hero .c-graphic__content {
  background-color: transparent;
  color: var(--color-white);
  border: none;
  padding: 0;
}

/* ─── Final CTA Stat Tile & Baseline CTA ─── */
.c-cta-block--final .c-cta-block__container,
.c-cta-block--stat .c-cta-block__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

@media (min-width: 1024px) {
  .c-cta-block--final .c-cta-block__container,
  .c-cta-block--stat .c-cta-block__container {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-48);
    align-items: center;
  }
}

.c-cta-block__stat-tile {
  background-color: var(--color-ink);
  border: 1px solid var(--color-anvil);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.c-cta-block__stat-source {
  font-size: var(--text-label);
  color: var(--color-ash);
  margin-top: var(--space-8);
}

/* ─── Rate-Con Mini Card Visual ─── */
.c-ratecon-card {
  background-color: var(--color-ink);
  border: 1px solid var(--color-anvil);
  border-left: 4px solid var(--color-white);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-ratecon-card__header {
  font-family: var(--font-display);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-white);
  font-weight: 400;
}

.c-ratecon-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-ratecon-card__line {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-anvil);
}

.c-ratecon-card__line:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.c-ratecon-card__badge {
  font-family: var(--font-display);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-ash);
}

.c-ratecon-card__text {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-white);
  font-weight: 400;
}

.c-ratecon-card__footer {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--color-ash);
  margin-top: var(--space-4);
}




/* ─── Book a call dialog ─── */
/* Mobile: full screen sheet. >=640px: centered panel. Native <dialog> top layer covers the contact bar, so the submit owns yellow. */
.c-book {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--color-night);
  color: var(--color-white);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.c-book::backdrop {
  background-color: var(--scrim);
}

@media (min-width: 640px) {
  .c-book {
    max-width: 560px;
    height: auto;
    max-height: calc(100% - var(--space-48));
    margin: auto;
    border: 1px solid var(--color-anvil);
  }
}

.c-book__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--gutter);
  background-color: var(--color-night);
  border-bottom: 1px solid var(--color-anvil);
}

.c-book__eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--text-label);
  color: var(--color-ash);
}

.c-book__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.c-book__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-anvil);
  color: var(--color-white);
  cursor: pointer;
}

.c-book__close:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.c-book__form,
.c-book__done {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24) var(--gutter) calc(var(--space-24) + env(safe-area-inset-bottom, 0px));
}

.c-book__form[hidden],
.c-book__done[hidden] {
  display: none;
}

.c-book__done {
  align-items: center;
  text-align: center;
}

.c-book__intro,
.c-book__note {
  margin: 0;
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  color: var(--color-ash);
}

.c-book__note {
  font-size: var(--text-label);
  text-align: center;
}

.c-book__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-book__legend {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.c-book__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-ash);
  font-size: var(--text-label);
}

/* Day chips scroll sideways on phones so all five fit one thumb row */
.c-book__days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, 1fr);
  gap: var(--space-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.c-book__times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .c-book__times {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.c-book__chip {
  position: relative;
  scroll-snap-align: start;
  cursor: pointer;
}

.c-book__chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}

.c-book__chip span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-8) var(--space-4);
  border: 1px solid var(--color-steel);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  line-height: 1.2;
  color: var(--color-white);
  white-space: nowrap;
  transition: background-color var(--ease), color var(--ease);
}

.c-book__chip--day span {
  min-height: 64px;
}

.c-book__chip small {
  font-family: var(--font-display);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-ash);
}

.c-book__chip:hover span {
  border-color: var(--color-white);
}

.c-book__chip input:checked + span {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-ink);
}

.c-book__chip input:checked + span small {
  color: var(--color-ink);
}

.c-book__chip input:focus-visible + span {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.c-book__submit {
  width: 100%;
}