/* Theme Name: ZeroY Starter */

/* ==========================================================================
   Base & Reset
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  background-color: var(--color-background);
}

img, svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

h1, h2, h3, h4 {
  color: var(--color-brand);
  font-family: var(--font-heading);
  line-height: 1.2;
}

table {
  width: 100%;
  border-collapse: collapse;
}

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

.skip-link {
  position: absolute;
  top: -999px;
  left: 16px;
  padding: 8px 16px;
  background: var(--color-brand);
  color: #fff;
  z-index: 9999;
  border-radius: var(--radius-control);
}
.skip-link:focus {
  top: 16px;
}

/* ==========================================================================
   Layout Containers & Common Elements
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-gutter);
  padding-right: var(--space-gutter);
}

.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section--muted {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section--dark {
  background-color: var(--color-brand-deep);
  color: var(--color-on-dark);
  position: relative;
  background-image:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 48px 48px;
}

.section--dark h2,
.section--dark h3 {
  color: var(--color-on-dark);
}

.section__head {
  max-width: 680px;
  margin-bottom: 48px;
}

.section__title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.section__lead {
  font-size: 1.125rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.section--dark .section__lead {
  color: var(--color-on-dark-muted);
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  border-radius: var(--radius-control);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.btn--accent {
  background-color: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}
.btn--accent:hover {
  background-color: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: #ffffff;
}

.btn--outline-light {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
  color: #ffffff;
}

/* ==========================================================================
   Site Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.brand__logo-svg {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
}

.site-nav a:hover {
  color: var(--color-brand);
}

.site-header__cta {
  padding: 8px 18px;
  font-size: 0.8125rem;
}

@media (max-width: 860px) {
  .site-header__inner {
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
  }
  .site-nav {
    order: 3;
    width: 100%;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
  position: relative;
  background-color: var(--color-brand-deep);
  color: var(--color-on-dark);
  background-image:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 48px 48px;
  overflow: hidden;
  padding-top: 80px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 64px;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 1.2fr 0.8fr;
    padding-top: 32px;
    padding-bottom: 80px;
  }
}

.hero__title {
  color: #ffffff;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 24px;
}

.hero__title-sub {
  display: block;
  color: var(--color-on-dark-muted);
}

.hero__lead {
  font-size: 1.125rem;
  color: #d6e2ee;
  max-width: 580px;
  line-height: 1.65;
  margin-bottom: 36px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__art {
  display: none;
  justify-content: center;
  align-items: center;
}

@media (min-width: 960px) {
  .hero__art {
    display: flex;
  }
}

.hero__art-svg {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
}

.hero__stats {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 34, 55, 0.6);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
}

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

.stat__value {
  font-size: 1.875rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 6px;
}

.stat__value--accent {
  color: var(--color-accent);
}

.stat__label {
  font-size: 0.875rem;
  color: var(--color-on-dark-muted);
  margin-bottom: 0;
}

/* ==========================================================================
   Product Cards
   ========================================================================== */
.cards {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.card__media {
  height: 200px;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(var(--grid-line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-light) 1px, transparent 1px);
  background-size: 24px 24px;
}

.card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  color: var(--color-accent);
  margin-bottom: 8px;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.card__text {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 20px;
  line-height: 1.55;
}

.spec-table {
  margin-top: auto;
  font-size: 0.875rem;
  border-top: 1px solid var(--color-border);
}

.spec-table th,
.spec-table td {
  padding: 8px 0;
}

.spec-table th {
  text-align: left;
  font-weight: 400;
  color: var(--color-muted);
}

.spec-table td {
  text-align: right;
  font-weight: 500;
  color: var(--color-ink);
}

/* ==========================================================================
   Industries Grid
   ========================================================================== */
.industries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

@media (min-width: 960px) {
  .industries {
    grid-template-columns: repeat(6, 1fr);
  }
}

.industry {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.industry:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-card);
}

.industry .icon {
  color: var(--color-brand);
}

.industry__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 0;
}

/* ==========================================================================
   Brand Replacement Split
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
  }
}

.checklist {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.checklist__item {
  position: relative;
  padding-left: 24px;
}

.checklist__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.checklist__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.checklist__text {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.55;
  margin-bottom: 0;
}

.xref {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.xref__head {
  background: var(--color-brand);
  color: #ffffff;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.xref__table {
  font-size: 0.875rem;
}

.xref__table thead tr {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.xref__table th,
.xref__table td {
  padding: 12px 20px;
  text-align: left;
}

.xref__table th {
  font-weight: 600;
  color: var(--color-brand);
}

.xref__table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.xref__table tbody th {
  font-weight: 500;
  color: var(--color-ink);
}

.xref__table tbody td {
  color: var(--color-muted);
}

.xref__note {
  padding: 12px 20px;
  font-size: 0.75rem;
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: 0;
  background: var(--color-surface);
}

/* ==========================================================================
   Capabilities (Steps)
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

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

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

.step {
  padding: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
}

.step__num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.step__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.step__text {
  font-size: 0.875rem;
  color: var(--color-on-dark-muted);
  line-height: 1.55;
  margin-bottom: 0;
}

/* ==========================================================================
   Why Work With Us
   ========================================================================== */
.why {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

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

.why__item {
  display: flex;
  gap: 18px;
}

.why__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background-color: #eef3f8;
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.why__title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.why__text {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ==========================================================================
   Process (Flow)
   ========================================================================== */
.flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

@media (min-width: 960px) {
  .flow {
    grid-template-columns: repeat(5, 1fr);
  }
}

.flow__step {
  text-align: center;
}

.flow__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-brand);
  color: #ffffff;
  font-weight: 600;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

.flow__num--accent {
  background-color: var(--color-accent);
}

.flow__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.flow__text {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

/* ==========================================================================
   Bottom CTA Section
   ========================================================================== */
.cta {
  text-align: center;
}

.cta__inner {
  max-width: 720px;
  margin: 0 auto;
}

.cta__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  margin-bottom: 20px;
}

.cta__text {
  font-size: 1.125rem;
  color: var(--color-on-dark-muted);
  line-height: 1.6;
  margin-bottom: 36px;
}

.cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.cta__note {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0;
}

/* ==========================================================================
   Site Footer
   ========================================================================== */
.site-footer {
  background-color: var(--color-graphite);
  color: #ffffff;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

.footer-col__brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  /* White plate for the logo file, which carries a white ground: on the dark
     footer bar this reads as a deliberate lockup rather than a raw white edge. */
  padding: 7px 10px;
  background: #ffffff;
  border-radius: var(--radius-control);
  text-decoration: none;
  line-height: 1;
}

.footer-col__brand svg {
  display: block;
  height: 28px;
  width: auto;
  max-width: 100%;
}

.footer-col__blurb {
  font-size: 0.875rem;
  color: var(--color-on-dark-muted);
  line-height: 1.6;
  max-width: 280px;
}

.footer-col__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--color-on-dark-muted);
}

.footer-col a:hover {
  color: #ffffff;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.site-footer__bottom p {
  margin-bottom: 0;
}

/* ==========================================================================
   About Page & Placeholder Components
   ========================================================================== */
.page-hero {
  background-color: var(--color-brand-deep);
  color: #ffffff;
  padding-top: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-image:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 48px 48px;
}

.page-hero__inner {
  max-width: 860px;
}

.page-hero__title {
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.page-hero__lead {
  font-size: 1.125rem;
  color: #d6e2ee;
  line-height: 1.7;
  margin-bottom: 0;
}

.split--about {
  align-items: stretch;
  margin-bottom: 56px;
}

.split--reverse {
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .split--reverse {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
  }
}

.about-text {
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 18px;
}

/* Placeholder box */
.placeholder-box {
  background-color: #e2e8f0;
  border: 1px dashed #94a3b8;
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.placeholder-box--tall {
  min-height: 380px;
  height: 100%;
}

.placeholder-box--card {
  height: 180px;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}

.placeholder-box--dark {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
}

.placeholder-box__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  background: var(--color-brand);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 3px;
}

.placeholder-box--dark .placeholder-box__badge {
  background: var(--color-accent);
}

.placeholder-box__text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: #475569;
  letter-spacing: 0.02em;
}

.placeholder-box--dark .placeholder-box__text {
  color: #e2e8f0;
}

.placeholder-box__hint {
  display: block;
  font-size: 0.8125rem;
  color: #64748b;
  margin-top: 8px;
}

.placeholder-box--dark .placeholder-box__hint {
  color: #94a3b8;
}

/* About stats row */
.about-stats {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
  padding-top: 36px;
  border-top: 1px solid var(--color-border);
}

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

@media (min-width: 960px) {
  .about-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px;
}

.about-stat__val {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1;
  margin-bottom: 8px;
}

.about-stat__unit {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-muted);
}

.about-stat__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.about-stat__sub {
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

/* About Cards */
.about-card {
  height: 100%;
}

/* Breakdown List */
.about-breakdown {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
}

.about-breakdown li {
  padding-left: 20px;
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-on-dark-muted);
}

.about-breakdown li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.about-breakdown strong {
  display: block;
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 2px;
}

/* Market Grid */
.market-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .market-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.market-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.market-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 12px;
}

.market-card__desc {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
}

.market-card__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-brand);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 4px;
}



/* ==========================================================================
   Page Entry Content & Simple Card Styles
   ========================================================================== */
.page-entry-content {
  max-width: 860px;
  margin: 0 auto;
}

.test-showcase {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 48px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.test-showcase__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--color-brand);
  font-weight: 600;
  margin-bottom: 24px;
}

.test-showcase__badge-dot {
  width: 8px;
  height: 8px;
  background-color: #10B981;
  border-radius: 50%;
  display: inline-block;
}

.test-showcase__word {
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-brand);
  margin-bottom: 16px;
  line-height: 1.1;
}

.test-showcase__desc {
  font-size: 1rem;
  color: var(--color-muted);
  max-width: 480px;
  margin: 0 auto 32px auto;
  line-height: 1.6;
}

.test-showcase__meta {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-muted);
  flex-wrap: wrap;
}

.test-showcase__meta-item strong {
  color: var(--color-ink);
}


/* ==========================================================================
   Contact Page Styles
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: 1.4fr 0.6fr;
    gap: 48px;
  }
}

.contact-form-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 36px;
  box-shadow: var(--shadow-card);
}

@media (max-width: 640px) {
  .contact-form-card {
    padding: 24px 16px;
  }
}

.contact-form-card__head {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.contact-form-card__title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 8px;
}

.contact-form-card__subtitle {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin-bottom: 0;
}

.form-grid--2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

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

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.form-req {
  color: var(--color-accent);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-ink);
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.15);
}

.form-textarea {
  resize: vertical;
}

.form-actions {
  margin-top: 28px;
}

.contact-form__submit {
  width: 100%;
  gap: 8px;
  padding: 14px 28px;
  font-size: 0.9375rem;
}

@media (min-width: 640px) {
  .contact-form__submit {
    width: auto;
  }
}

.form-privacy-note {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Contact Aside Cards */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-aside-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 28px;
}

.contact-aside-card--dark {
  background: var(--color-brand-deep);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
}

.contact-aside-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 12px;
}

.contact-aside-card--dark .contact-aside-card__title {
  color: #ffffff;
}

.contact-aside-card__text {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.contact-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.contact-detail-item__icon {
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-detail-item__content {
  display: flex;
  flex-direction: column;
}

.contact-detail-item__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  color: var(--color-muted);
  font-weight: 600;
}

.contact-detail-item__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-brand);
}

.contact-fact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--color-on-dark-muted);
}

.contact-fact-list li {
  position: relative;
  padding-left: 18px;
}

.contact-fact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.contact-fact-list strong {
  color: #ffffff;
}

/* ==========================================================================
   Thank You Page Styles
   ========================================================================== */
.thank-you-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 960px) {
  .thank-you-layout {
    grid-template-columns: 1.35fr 0.65fr;
    gap: 48px;
  }
}

.thank-you-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 36px;
  box-shadow: var(--shadow-card);
}

.thank-you-status {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
}

.thank-you-status__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.12);
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.thank-you-status__title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 8px;
}

.thank-you-status__desc {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

.thank-you-steps__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 20px;
}

.thank-you-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
}

.thank-you-timeline-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.thank-you-timeline-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-brand);
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.thank-you-timeline-content h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.thank-you-timeline-content p {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

.thank-you-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.btn--secondary {
  background-color: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  background-color: #e5e7eb;
  color: var(--color-ink);
}

/* ==========================================================================
   Blog listing — theme route, served without a WordPress page record
   ========================================================================== */
.route-listing {
  display: grid;
  gap: 24px;
}

.post-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.post-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-card-hover);
}

.post-card__body {
  padding: 28px 32px;
}

.post-card__meta {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  color: var(--color-muted);
  margin-bottom: 8px;
}

.post-card__title {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-brand);
  margin-bottom: 12px;
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--color-tech);
}

.post-card__excerpt {
  color: var(--color-muted);
  margin-bottom: 20px;
}

.post-card__more {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.post-card__more:hover {
  color: var(--color-accent-strong);
  border-bottom-color: var(--color-accent-strong);
}

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
}

/* Pagination */
.pagination {
  margin-top: 48px;
}

.pagination ul.page-numbers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.pagination ul.page-numbers li {
  margin: 0;
}

.pagination a.page-numbers,
.pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.pagination a.page-numbers:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.pagination span.page-numbers.current {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #ffffff;
}

.pagination span.page-numbers.dots {
  background: transparent;
  border-color: transparent;
}
/* ==========================================================================
   Books — archive grid (书本归档, post type archive at /books/)
   ========================================================================== */
.book-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

@media (min-width: 960px) {
  .book-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.book-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.book-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-card-hover);
}

.book-card__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.book-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-card__cover--empty {
  background-image:
    linear-gradient(var(--grid-line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-light) 1px, transparent 1px);
  background-size: 24px 24px;
}

.book-card__cover-empty {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.book-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.book-card__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.book-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-brand);
  margin-bottom: 6px;
}

.book-card__title a {
  color: inherit;
  text-decoration: none;
}

.book-card__title a:hover {
  color: var(--color-tech);
}

.book-card__author {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.book-card .spec-table {
  margin-top: auto;
}

.book-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.book-card__price-label {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.book-card__price-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* ==========================================================================
   Books — single book detail
   ========================================================================== */
.book-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 960px) {
  .book-detail {
    grid-template-columns: 320px 1fr;
    gap: 64px;
  }
}

.book-detail__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.book-detail__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-detail__cover--empty {
  background-image:
    linear-gradient(var(--grid-line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-light) 1px, transparent 1px);
  background-size: 24px 24px;
}

.book-detail__cover-empty {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.book-detail__specs {
  margin-bottom: 40px;
}

.book-detail__section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 16px;
}

.book-detail__content {
  margin-bottom: 40px;
  color: var(--color-ink);
  line-height: 1.7;
}

.book-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

/* Roomier variant of the spec table, for a full specification list */
.spec-table--detail {
  width: 100%;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--color-border);
}

.spec-table--detail th,
.spec-table--detail td {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.spec-table--detail tr:last-child th,
.spec-table--detail tr:last-child td {
  border-bottom: 0;
}

.spec-table td.spec-table__value--accent {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.125rem;
}

/* Phones: the cover sits beside the details instead of filling the screen */
@media (max-width: 639px) {
  .book-card {
    flex-direction: row;
  }

  .book-card__cover {
    flex: 0 0 128px;
    width: 128px;
    min-height: 192px;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid var(--color-border);
  }

  .book-card__body {
    padding: 20px;
  }
}

/* ==========================================================================
   Custom design page — specification table variants
   ========================================================================== */

/* Prose table: multi-column tables whose cells hold sentences instead of
   values (the design questionnaire, the media routes). Row labels read as
   headings, cells stay left-aligned and muted. */
.spec-table--prose th,
.spec-table--prose td {
  vertical-align: top;
  text-align: left;
}

.spec-table--prose th {
  font-weight: 600;
  color: var(--color-brand);
}

.spec-table--prose td {
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.55;
}

.spec-table--prose thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.spec-table--prose thead th:first-child {
  width: 24%;
}

.spec-table--prose td.spec-table__value--accent {
  font-size: 1rem;
}

/* Note under a specification table */
.spec-note {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* Phones: three columns of prose are unreadable at this width, so each row of a
   prose table becomes a block and the column heading is repeated from the cell's
   own data-label attribute (falls back to nothing when a cell has no label). */
@media (max-width: 639px) {
  .spec-table--prose thead {
    display: none;
  }

  .spec-table--prose tbody tr {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .spec-table--prose tbody tr:last-child {
    border-bottom: 0;
  }

  .spec-table--prose tbody th,
  .spec-table--prose tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .spec-table--prose tbody th {
    margin-bottom: 8px;
    font-size: 1rem;
  }

  .spec-table--prose tbody td + td {
    margin-top: 12px;
  }

  .spec-table--prose tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-cta);
    text-transform: uppercase;
    color: var(--color-muted);
  }
}

/* ==========================================================================
   Our process page — stage rows, figure slots, FAQ disclosure
   ========================================================================== */

.process-stages {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/* Photo slot. The placeholder image prints its own label and pixel size, so the
   replacement photograph can be produced to exactly that size. */
.image-slot {
  margin: 0;
}

.image-slot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Alternate the side the photo sits on, without changing the column widths. */
@media (min-width: 960px) {
  .process-row--flip {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* Native disclosure list — no script, keeps the page working with JS disabled. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
}

.faq-item {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 0 24px;
}

.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-brand);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.faq-item[open] summary::after {
  content: "\2013";
}

.faq-item__body {
  max-width: 760px;
  padding-bottom: 22px;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.65;
}

.faq-item__body p {
  margin-bottom: 0;
}

/* ==========================================================================
   Manufacturing page — hero badges and the equipment gallery
   ========================================================================== */

/* Certification line under a page-hero lead (ISO 9001 and the documentation
   that travels with each batch). */
.page-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.page-hero__badges li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.page-hero__badges li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* Equipment gallery: a photo per machine, with the caption naming it. */
.equip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

@media (min-width: 960px) {
  .equip-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.equip-item {
  margin: 0;
}

.equip-item figcaption {
  margin-top: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-brand);
}

.equip-item figcaption span {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.5;
}

/* Real workshop photograph in the About page's facility slot. It fills the
   column the placeholder box used to occupy, so the split keeps its height. */
.photo-slot {
  margin: 0;
  height: 100%;
}

.photo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Photography band at the top of an About page card, replacing the placeholder
   box that used to sit there. */
.about-photo {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Footer tidy-up: one job per column, every link points at a page that exists,
   and the last column carries the contact route instead of a fake link list. */
.footer-col__cert {
  max-width: 280px;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

.footer-col__link-strong {
  color: #ffffff;
  font-weight: 600;
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
}

.site-footer__meta {
  color: rgba(255, 255, 255, 0.45);
}/* Brand mark in the header: the uploaded logo file (media library attachment
   827) keeps a wide white margin around the wordmark, so the image is cropped
   to the mark band with object-fit instead of scaling the whole canvas down to
   header height. Swap the numbers here — or the file in the library — rather
   than editing the template. */
.brand__logo-img {
  display: block;
  width: 216px;
  height: 34px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 860px) {
  .brand__logo-img {
    width: 180px;
    height: 28px;
  }
}/* Footer brand mark: the same file as the header, but it carries a white ground,
   so on the dark footer bar it sits on a white logo plate rather than showing a
   raw white edge. The plate disappears the day a transparent (or light-on-dark)
   version of the logo is uploaded. */
.footer-logo-img {
  display: block;
  width: 148px;
  height: 26px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 860px) {
  .footer-logo-img {
    width: 132px;
    height: 23px;
  }
}

/* ==========================================================================
   Landing pages (single-landing.php): no header, no footer, so the content
   block carries its own spacing instead of sitting inside a section.
   ========================================================================== */
.landing-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--space-gutter);
}

/* ==========================================================================
   Landing page — sintered metal filter elements (page-lp-metal-filter.php)
   Standalone landing page: no site header, no site nav, no footer, so every
   rule it needs lives here. All selectors are prefixed .lp- and the values
   come from assets/css/tokens.css, so nothing on this page can collide with
   the rest of the theme.
   ========================================================================== */

/* Anchor jumps stop below the sticky bar instead of hiding under it. */
.lp-main section[id],
.lp-hero[id] {
  scroll-margin-top: 92px;
}

/* Landing sections run slightly tighter than the page rhythm: one message per
   screen reads better than the full 96px section gap. */
.lp-section {
  padding-top: var(--space-section-sm);
  padding-bottom: var(--space-section-sm);
}

.lp-body {
  background-color: var(--color-background);
}

/* ---------- Sticky page navigation ---------- */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.lp-nav__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--space-gutter);
}

.lp-nav__brand {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  line-height: 1.2;
}

.lp-nav__brand-name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.lp-nav__brand-sub {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.lp-nav__link {
  display: inline-block;
  padding: 4px 0;
  color: var(--color-ink);
  border-bottom: 2px solid transparent;
}

.lp-nav__link:hover {
  color: var(--color-brand);
  border-bottom-color: var(--color-accent);
}

.lp-nav__cta {
  padding: 10px 18px;
  font-size: 0.75rem;
}

/* ---------- Screen 1 · hero ---------- */
.lp-hero {
  padding-top: 64px;
  padding-bottom: var(--space-section-sm);
}

.lp-hero__copy {
  max-width: 880px;
}

.lp-hero__title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 18px;
}

.lp-hero__lead {
  max-width: 800px;
  margin-bottom: 28px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-on-dark-muted);
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.lp-hero__media {
  margin-top: 8px;
}

/* On the dark hero the placeholder frame lightens instead of showing a grey
   border against the blue ground. */
.lp-hero .image-slot img {
  border-color: rgba(255, 255, 255, 0.18);
}

/* ---------- Specification chips ---------- */
.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.lp-chip {
  display: inline-block;
  padding: 7px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brand);
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.lp-hero .lp-chip {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ---------- Specification tables (the house's core component) ---------- */
.lp-table-wrap {
  overflow-x: auto;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.lp-table-wrap--narrow {
  max-width: 900px;
}

.lp-table {
  min-width: 640px;
  font-size: 0.9375rem;
}

.lp-table__caption {
  caption-side: top;
  padding: 16px 24px 12px;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-table thead th {
  padding: 12px 24px;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-brand);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.lp-table tbody th,
.lp-table tbody td {
  padding: 14px 24px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--color-border);
}

.lp-table tbody tr:first-child th,
.lp-table tbody tr:first-child td {
  border-top: 0;
}

.lp-table tbody th {
  width: 34%;
  font-weight: 600;
  color: var(--color-brand);
}

.lp-table tbody td {
  color: var(--color-muted);
  line-height: 1.55;
}

.lp-table--compare tbody th {
  width: 22%;
}

.lp-table__value {
  font-weight: 600;
  color: var(--color-ink);
}

.lp-subhead {
  margin: 56px 0 20px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-brand);
}

/* Callout that names a limitation in the open — a trust point, not a warning,
   so it stays quiet: a grey panel, a thin technical-blue edge, no orange. */
.lp-note {
  margin: 24px 0 0;
  padding: 20px 24px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-tech);
  border-radius: var(--radius-card);
}

.lp-note strong {
  color: var(--color-brand);
}

.lp-markets-lead {
  margin-bottom: 18px;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

/* ---------- Product cards, services ---------- */
.lp-cards {
  margin-top: 8px;
}

/* The placeholder sits flush in the card's media band: no card shadow, no
   rounded corners of its own, one rule between image and body. */
.lp-card .lp-card__media {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.lp-card .lp-card__media .image-slot img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lp-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .lp-services {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lp-service {
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-card);
}

.lp-service__title {
  font-size: 1.0625rem;
  margin-bottom: 8px;
}

.lp-service__text {
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* ---------- Screen 3 · the process chain ---------- */
.lp-chain {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

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

@media (min-width: 1024px) {
  .lp-chain {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
}

.lp-chain__media {
  margin-bottom: 14px;
}

.lp-chain__num {
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-cta);
  color: var(--color-accent);
}

.lp-chain__title {
  font-size: 1.0625rem;
  margin-bottom: 8px;
}

.lp-chain__text {
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.lp-figure {
  margin: 48px 0 0;
}

.lp-figure__caption {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* ---------- Dark numbers band ---------- */
.lp-band {
  padding-top: var(--space-section-sm);
  padding-bottom: var(--space-section-sm);
}

.lp-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

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

@media (min-width: 1024px) {
  .lp-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lp-stat {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.lp-stat__num {
  margin-bottom: 8px;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.lp-stat__label {
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-on-dark-muted);
}

.lp-band__note {
  max-width: 820px;
  margin: 40px 0 0;
  padding-top: 24px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-on-dark-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------- Ordering terms and the audit invitation ---------- */
.lp-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 960px) {
  .lp-split {
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
  }
}

.lp-split__col .section__title {
  margin-bottom: 20px;
}

.lp-audit {
  padding: 28px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-card);
}

.lp-audit__title {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.lp-audit__text {
  margin-bottom: 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.lp-audit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Outline button for a light ground (the theme's outline button is white-on-dark). */
.lp-btn--outline {
  background-color: #ffffff;
  color: var(--color-brand);
  border-color: var(--color-border);
}

.lp-btn--outline:hover {
  background-color: #ffffff;
  color: var(--color-brand);
  border-color: var(--color-brand);
}

/* ---------- Screen 4 · the action screen ---------- */
.lp-action {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.lp-action__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 960px) {
  .lp-action__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
  }
}

.lp-action__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-channel,
.lp-next {
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.lp-channel__title,
.lp-next__title {
  font-size: 1.0625rem;
  margin-bottom: 14px;
}

.lp-channel__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-channel__item {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.lp-channel__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.lp-channel__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-channel__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-brand);
  word-break: break-word;
}

.lp-channel__value:hover {
  color: var(--color-accent-strong);
}

.lp-next__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-next__item {
  position: relative;
  padding-left: 18px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.lp-next__item::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.lp-next__item strong {
  color: var(--color-ink);
}

/* ---------- Closing colophon ---------- */
.lp-colophon {
  padding: 32px 0;
  background-color: var(--color-brand-deep);
  color: var(--color-on-dark-muted);
}

.lp-colophon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}

.lp-colophon__text {
  max-width: 760px;
  margin-bottom: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.lp-colophon__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.lp-colophon__links a {
  color: #ffffff;
}

.lp-colophon__links a:hover {
  color: var(--color-accent);
}/* Anchor jumps from the sticky landing nav must not hide the heading they land
   on. The bar is ~60px tall on desktop and taller when it wraps on narrow
   screens, so the offset follows the same breakpoint. */
.lp-main [id] {
  scroll-margin-top: 76px;
}

@media (max-width: 860px) {
  /* Keep the landing bar compact on phones: brand and the WhatsApp button stay on
     the first line, the section links move to one horizontally scrollable row,
     instead of three stacked rows that eat the viewport. */
  .lp-nav__brand-sub {
    display: none;
  }

  .lp-nav__links {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .lp-nav__link {
    white-space: nowrap;
  }

  /* Anchor targets still clear the sticky bar. */
  .lp-main [id] {
    scroll-margin-top: 128px;
  }
}/* ==========================================================================
   Inquiry forms: the honeypot field and the rejected-post notice
   ========================================================================== */

/* Off-screen rather than display:none — bots fill in what they can "see", people
   never reach it by keyboard or pointer. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

.form-notice {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid var(--color-accent);
  border-left-width: 3px;
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}/* ==========================================================================
   Single article (single.php) — reading column, headline image, back link
   ========================================================================== */
.post-hero {
  margin: 0 0 32px;
}

.post-hero img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.post-back {
  margin-top: 40px;
  margin-bottom: 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  font-weight: 600;
}

.post-back a {
  color: var(--color-accent);
}

/* Article flow: the reading column needs real spacing between its parts, and
   bullets — the theme resets lists for layout use, so they are restored here. */
.page-entry-content h2 {
  margin-top: 44px;
  margin-bottom: 12px;
}

.page-entry-content h3 {
  margin-top: 28px;
  margin-bottom: 8px;
}

.page-entry-content p,
.page-entry-content ul,
.page-entry-content ol {
  margin-bottom: 20px;
}

.page-entry-content ul {
  list-style: disc;
  padding-left: 22px;
}

.page-entry-content ol {
  list-style: decimal;
  padding-left: 22px;
}

.page-entry-content li {
  margin-bottom: 8px;
}/* ==========================================================================
   Products page (page-products.php, served at /products/)
   The product range: three media families, the forms we build, a comparison
   table and the inquiry route. All selectors are prefixed .prod- so nothing
   here can collide with the rest of the theme.
   ========================================================================== */

/* The header is sticky at 68px, so an in-page anchor stops below it. */
.prod-family[id],
.prod-forms-section[id],
.prod-compare-section[id] {
  scroll-margin-top: 84px;
}

/* ---------- Actions inside a page hero ---------- */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ---------- "On this page" jump strip ---------- */
.prod-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 64px;
  padding: 16px 20px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.prod-jump__label {
  margin-bottom: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.prod-jump__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prod-jump__link {
  display: inline-block;
  padding: 6px 14px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brand);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.prod-jump__link:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* ---------- Family cards ---------- */
.prod-card__media {
  aspect-ratio: 56 / 36;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.prod-card__media .image-slot,
.prod-card__media .image-slot img {
  width: 100%;
  height: 100%;
}

/* The card already draws its own border and radius. */
.prod-card__media .image-slot img {
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.prod-card__link {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.prod-card__link::after {
  content: " \2192";
}

.prod-card__link:hover {
  color: var(--color-accent-strong);
}/* ---------- Family detail blocks ---------- */
.prod-family__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 960px) {
  .prod-family__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 72px;
  }

  /* Alternate the side the drawing sits on, column widths untouched. */
  .prod-family__grid.prod-family--flip .prod-family__media {
    order: 2;
  }
}

.prod-family__lead {
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

.prod-family__specs {
  margin-top: 32px;
}

.prod-family__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

/* ---------- Engineering section drawing ---------- */
.prod-diagram {
  margin: 0;
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* On a muted band the panel needs no second border to separate it. */
.section--muted .prod-diagram {
  border-color: #ffffff;
}

.prod-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
}

.prod-diagram__caption {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.prod-diagram__title {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-brand);
}

/* ---------- Forms we build, as pills ---------- */
.prod-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.prod-tag {
  margin-bottom: 0;
  padding: 6px 14px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brand);
}

/* ---------- What the medium is used for ---------- */
.prod-uses {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.prod-use {
  margin-bottom: 0;
  padding-left: 18px;
  border-left: 2px solid var(--color-tech);
}

.prod-use__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 6px;
}

.prod-use__text {
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.6;
}/* ---------- The forms we build, as photographed tiles ---------- */
.prod-forms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

@media (min-width: 1100px) {
  .prod-forms {
    grid-template-columns: repeat(4, 1fr);
  }
}

.prod-form {
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.prod-form__media {
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.prod-form__media .image-slot,
.prod-form__media .image-slot img {
  width: 100%;
  height: 100%;
}

.prod-form__media .image-slot img {
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.prod-form__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px 24px;
}

.prod-form__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-brand);
}

.prod-form__note {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.55;
}

/* ---------- Media comparison ---------- */
.prod-compare {
  overflow-x: auto;
}

.prod-compare__caption {
  margin-bottom: 16px;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.prod-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.prod-compare__table thead th {
  padding: 0 20px 14px 0;
  text-align: left;
  vertical-align: bottom;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-brand);
}

.prod-compare__table tbody th {
  width: 20%;
  padding: 16px 20px 16px 0;
  text-align: left;
  vertical-align: top;
  font-weight: 600;
  color: var(--color-brand);
  border-bottom: 1px solid var(--color-border);
}

.prod-compare__table tbody td {
  padding: 16px 20px 16px 0;
  vertical-align: top;
  color: var(--color-ink);
  line-height: 1.55;
  border-bottom: 1px solid var(--color-border);
}

.prod-compare__value {
  font-weight: 600;
  color: var(--color-tech);
}/* Phones: four columns of comparison are unreadable at this width, so each row
   becomes a block and the medium is repeated from the cell's data-label. */
@media (max-width: 767px) {
  .prod-compare {
    overflow-x: visible;
  }

  .prod-compare__table thead {
    display: none;
  }

  .prod-compare__table tbody tr {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .prod-compare__table tbody tr:last-child {
    border-bottom: 0;
  }

  .prod-compare__table tbody th {
    display: block;
    width: auto;
    padding: 0 0 12px;
    border-bottom: 0;
    font-size: 1rem;
  }

  .prod-compare__table tbody td {
    display: block;
    padding: 0 0 14px;
    border-bottom: 0;
  }

  .prod-compare__table tbody td:last-child {
    padding-bottom: 0;
  }

  .prod-compare__table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-cta);
    text-transform: uppercase;
    color: var(--color-muted);
  }
}/* ==========================================================================
   Industries page (page-industries.php, served at /industries/)
   The six downstream duties, the envelope behind each one and the boundary we
   hold in that service. All selectors are prefixed .ind- so nothing here can
   collide with the rest of the theme.
   ========================================================================== */

/* The header is sticky at 68px, so an in-page anchor stops below it. */
.ind-block[id] {
  scroll-margin-top: 84px;
}

/* ---------- Industry index: the six tiles, each one a link ---------- */
.ind-index__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: inherit;
}

.ind-index__link .icon {
  color: var(--color-brand);
}

.ind-index__link:hover .industry__name {
  color: var(--color-accent);
}

/* ---------- The four figures that decide an element ---------- */
.ind-duties {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

@media (min-width: 1000px) {
  .ind-duties {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ind-duty {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: 28px 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.ind-duty__icon {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--color-tech);
}

.ind-duty__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 10px;
}

.ind-duty__text {
  margin-bottom: 20px;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* What this axis settles, pinned to the foot of the card. */
.ind-duty__decides {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-accent);
}/* ---------- One block per industry ---------- */
.ind-block__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 960px) {
  .ind-block__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 72px;
  }

  /* Alternate the side the photograph sits on, column widths untouched. */
  .ind-block__grid--flip .ind-block__media {
    order: 2;
  }
}

.ind-block__media .image-slot img {
  min-height: 300px;
  object-fit: cover;
}

.ind-block__icon {
  display: inline-flex;
  margin-bottom: 20px;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-brand);
}

.ind-block__lead {
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

.ind-block__specs {
  margin-top: 28px;
}

/* What we build for this duty */
.ind-builds {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.ind-build {
  position: relative;
  margin-bottom: 0;
  padding-left: 20px;
  font-size: 0.9375rem;
  color: var(--color-ink);
  line-height: 1.6;
}

.ind-build::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 2px;
  background-color: var(--color-tech);
}

/* The boundary: what this service does not get from us. */
.ind-boundary {
  margin: 32px 0 0;
  padding: 20px 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-size: 0.9375rem;
  color: var(--color-ink);
  line-height: 1.6;
}

.ind-boundary__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-accent);
}

.ind-block__link {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.ind-block__link::after {
  content: " \2192";
}

.ind-block__link:hover {
  color: var(--color-accent-strong);
}/* ==========================================================================
   Blog page (route-blog.php, served at /blog/)
   Editorial lines, the featured latest note, the archive grid and the questions
   the desk is asked. All selectors are prefixed .bl- so nothing here can collide
   with the rest of the theme. The archive cards reuse .post-card from the shared
   design system and only add the media slot on top.
   ========================================================================== */

/* ---------- The four editorial lines ---------- */
.bl-topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

@media (min-width: 1000px) {
  .bl-topics {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bl-topic {
  margin-bottom: 0;
  padding: 28px 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.bl-topic__icon {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--color-tech);
}

.bl-topic__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 10px;
}

.bl-topic__text {
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* ---------- The featured note ---------- */
.bl-featured {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 0;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

@media (min-width: 960px) {
  .bl-featured {
    grid-template-columns: 1.15fr 1fr;
  }
}

/* The picture fills its half of the card, so the shared photo-slot chrome comes off. */
.bl-featured__media .image-slot img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}

@media (min-width: 960px) {
  .bl-featured__media .image-slot img {
    min-height: 100%;
  }
}

.bl-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 32px;
}

@media (min-width: 960px) {
  .bl-featured__body {
    padding: 48px 52px;
  }
}

.bl-featured__title {
  margin: 0 0 16px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--color-brand);
}

@media (min-width: 640px) {
  .bl-featured__title {
    font-size: 1.875rem;
  }
}

.bl-featured__title a {
  color: inherit;
  text-decoration: none;
}

.bl-featured__title a:hover {
  color: var(--color-tech);
}

.bl-featured__excerpt {
  margin-bottom: 28px;
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 1.7;
}

.bl-featured__more {
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  color: var(--color-accent);
  text-decoration: none;
}

.bl-featured__more::after {
  content: " \2192";
}

.bl-featured__more:hover {
  color: var(--color-accent-strong);
}

/* ---------- Meta line and its flag ---------- */
.bl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  color: var(--color-muted);
}

.bl-flag {
  padding: 4px 10px;
  background-color: var(--color-accent);
  border-radius: var(--radius-control);
  color: var(--color-on-dark);
}

.bl-meta__sep {
  color: var(--color-border);
}/* ---------- The archive grid ---------- */
.bl-grid {
  grid-template-columns: 1fr;
}

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

@media (min-width: 1100px) {
  .bl-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Same card as everywhere else, with the picture added on top. */
.bl-card {
  overflow: hidden;
}

.bl-card__media .image-slot img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}

.bl-card .post-card__body {
  padding: 24px 26px 28px;
}

.bl-card .post-card__title {
  font-size: 1.1875rem;
}

/* ---------- Questions the desk is asked ---------- */
.bl-questions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 860px) {
  .bl-questions {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bl-question {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: 28px 28px 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.bl-question__q {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-brand);
}

.bl-question__a {
  margin-bottom: 20px;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.65;
}

.bl-question__link {
  margin-top: auto;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  color: var(--color-accent);
}

.bl-question__link::after {
  content: " \2192";
}

.bl-question__link:hover {
  color: var(--color-accent-strong);
}
/* ==========================================================================
   Article archives — /category/<slug>/ and /tag/<slug/>.
   A category page and a tag page render through one component
   (components/archive-articles.php), so everything below is shared by both, and
   every selector is prefixed .ar- so nothing here can collide with the rest of
   the theme. The article cards reuse .post-card and the blog's .bl-grid and
   .bl-card; only the hero, the browse band and the empty state are new.
   ========================================================================== */

/* ---------- Hero: breadcrumb, term description, article count ---------- */
.ar-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.ar-crumbs a {
  color: var(--color-on-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ar-crumbs a:hover {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.ar-crumbs__sep {
  color: rgba(255, 255, 255, 0.3);
}

.ar-crumbs__here {
  color: #ffffff;
}

/* The description is written in wp-admin and may carry a link, so it is rendered
   as content rather than as one plain line. */
.ar-hero__desc {
  max-width: 760px;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #d6e2ee;
}

.ar-hero__desc p {
  margin: 0 0 14px;
}

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

.ar-hero__desc a {
  color: #ffffff;
  text-decoration: underline;
}

.ar-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.ar-hero__count {
  padding: 4px 10px;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-control);
  color: #ffffff;
}

/* ---------- Browse band: the categories (or tags) as chips ---------- */
.ar-browse {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.ar-browse__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.ar-browse__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.ar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-chips li {
  margin: 0;
}

.ar-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ar-chip:hover {
  border-color: var(--color-brand);
  color: var(--color-tech);
}

.ar-chip__count {
  padding: 1px 7px;
  background-color: var(--color-surface);
  border-radius: 10px;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.ar-chip--current,
.ar-chip--current:hover {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: #ffffff;
}

.ar-chip--current .ar-chip__count {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ---------- Empty state ---------- */
.ar-empty {
  max-width: 620px;
  margin: 0 auto;
}

.ar-empty__hint {
  margin: 20px 0 0;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.ar-empty__links {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
}

.ar-empty__links a {
  color: var(--color-accent);
}

.ar-empty__links a:hover {
  color: var(--color-accent-strong);
}
/* ==========================================================================
   Search form (searchform.php) — the one get_search_form() prints.

   The form is a white field on whatever ground it is placed on, so it reads the
   same in the dark search hero and on the white 404 page. Its only surroundings
   are the wrapper each caller supplies (.sr-form, .nf-search), which is why
   nothing here positions it.
   ========================================================================== */

/* Visually hidden, still announced. Used by the search field's label. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.search-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 8px;
  box-shadow: var(--shadow-card);
}

.search-form__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  color: var(--color-tech);
}

.search-form__field {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--color-ink);
}

.search-form__field::placeholder {
  color: var(--color-muted);
}

.search-form__field:focus {
  outline: none;
}

.search-form__field:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

.search-form__submit {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .search-form__row {
    padding: 6px;
  }

  .search-form__submit {
    width: 100%;
  }
}

/* ==========================================================================
   Single article (single.php) — headline block, lead photograph, the contents
   list that sits beside the reading column, and the footer a note is filed
   under. Every selector is prefixed .si- so nothing here can reach another
   template. Colours, radii and spacing come from assets/css/tokens.css.
   ========================================================================== */

.si-hero {
  padding-top: 56px;
  padding-bottom: 36px;
}

.si-hero__inner {
  max-width: 860px;
}

/* The breadcrumb runs on the light ground, unlike the archive heroes: this
   headline sits on white so the article body follows without a dark band
   between the two. */
.si-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.si-crumbs a {
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.si-crumbs a:hover {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

.si-crumbs__sep {
  color: var(--color-border);
}

.si-hero__title {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-brand);
  margin-bottom: 20px;
}

.si-hero__lead {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--color-muted);
  margin-bottom: 24px;
}

.si-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.si-byline__author a {
  font-weight: 600;
  color: var(--color-brand);
}

.si-byline__sep {
  color: var(--color-border);
}

/* ---------- Lead photograph ---------- */
.si-media {
  margin: 0;
}

.si-media .container {
  max-width: 1000px;
}

.si-media .image-slot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

/* ---------- Contents + reading column ---------- */
.si-body {
  padding-top: 56px;
  padding-bottom: var(--space-section);
}

.si-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

/* The contents list only becomes a rail beside the article when there is room
   for one; on a narrow screen it stays a box above the text, which is where a
   reader looks for it anyway. */
@media (min-width: 1080px) {
  .si-layout--toc {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
  }
}

.si-toc {
  align-self: start;
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

@media (min-width: 1080px) {
  .si-layout--toc .si-toc {
    position: sticky;
    top: 92px;
  }
}

.si-toc__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.si-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: si-toc;
}

.si-toc__list li {
  margin-bottom: 10px;
  padding-left: 22px;
  position: relative;
  font-size: 0.875rem;
  line-height: 1.45;
}

.si-toc__list li::before {
  counter-increment: si-toc;
  content: counter(si-toc);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.si-toc__list a {
  color: var(--color-brand);
  text-decoration: none;
}

.si-toc__list a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.si-article {
  min-width: 0;
}

/* An anchored heading must clear the sticky header when it is jumped to. */
.page-entry-content h2[id] {
  scroll-margin-top: 92px;
}

/* ---------- What the note is filed under ---------- */
.si-foot {
  margin-top: 56px;
}

.si-filed {
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.si-filed__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.875rem;
}

.si-filed__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.si-chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: none;
}

.si-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

/* ---------- A protected article: the password form only ---------- */
.si-locked .post-password-form p {
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.si-locked .post-password-form input[type="password"] {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font: inherit;
  font-size: 1rem;
  color: var(--color-ink);
  margin-right: 8px;
}

.si-locked .post-password-form input[type="submit"] {
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.si-locked .post-password-form input[type="submit"]:hover {
  background: var(--color-accent-strong);
}

/* ==========================================================================
   Search results (search.php) — the term and its count, the form, the content
   type filter, the result grid and the honest list of what a search cannot
   reach. Every selector is prefixed .sr-; the cards themselves are the shared
   .post-card .bl-card, so a result looks like the article does on the blog.
   ========================================================================== */

.sr-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.sr-crumbs a {
  color: var(--color-on-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sr-crumbs a:hover {
  color: var(--color-on-dark);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.sr-crumbs__sep {
  color: rgba(255, 255, 255, 0.3);
}

/* The form sits in the dark hero, so it is capped rather than full width. */
.sr-form {
  max-width: 720px;
  margin-top: 32px;
}

/* ---------- The content type filter ---------- */
.sr-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.sr-filter__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}

.sr-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sr-filter__item {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sr-filter__item:hover {
  border-color: var(--color-brand);
}

.sr-filter__item.is-current {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #ffffff;
}

/* ---------- Nothing found / nothing typed ---------- */
.sr-empty {
  max-width: 720px;
  padding: 40px 0 8px;
}

.sr-empty__hint {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.sr-empty__block {
  margin-top: 32px;
}

.sr-empty__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.sr-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sr-suggest__link {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: none;
}

.sr-suggest__link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

.sr-empty__links {
  margin-top: 32px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.sr-empty__links a {
  color: var(--color-accent);
}

/* ---------- The pages a search cannot reach ---------- */
.sr-routes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 720px) {
  .sr-routes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .sr-routes {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sr-route {
  display: block;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sr-route:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-card-hover);
}

.sr-route__title {
  display: block;
  margin-bottom: 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-brand);
}

.sr-route__text {
  display: block;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* ---------- The chip naming what a mixed result row is ---------- */
.post-card__kind {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
}