/* 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);
  overflow: hidden; /* clips the step photograph at the card's corners */
}

.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;
}
/* 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;
}

/* ==========================================================================
   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;
  }
}

/* ==========================================================================
   Photograph slots (front page, industry index, industry pages)

   Each of these boxes renders a placehold.co placeholder that prints the brief
   for the missing photograph and the pixel size it has to be, so nothing on
   these pages is a blank area and the size is read off the page itself:

     .hero__art .image-slot    640x480   hero photograph, ~464px wide at 1200px
     .card__photo              600x400   head of a front-page product card (3:2)
     .ind-card__photo          600x400   head of an industry index card (3:2)
     .step__photo              480x320   head of a capability step, one per step
     .indp-split__aside        600x400   beside the positions on an industry page
     .equip-item .image-slot   480x360   one machine in the equipment gallery (4:3)

   A real photograph drops in by calling filtraza_placeholder_image() with the
   same size, so these rules stay as they are. One that is not shot to the slot's
   size yet still fills the frame — a front-page card head crops to its 3:2 (see
   .card__photo .image-slot img below) rather than changing the card's height.
   ========================================================================== */
.hero__art .image-slot {
  width: 100%;
}

.card__photo {
  border-bottom: 1px solid var(--color-border);
}

.ind-card__photo {
  margin-bottom: 20px;
}

/* The step photograph bleeds to the card's own edges, the way a product card
   head does; the step card clips the corners. */
.step__photo {
  margin: -28px -28px 20px;
}

/* A photograph that fills its own card frame or band takes the shared slot
   chrome off — the same treatment the featured blog image gets. */
.card__photo .image-slot img,
.ind-card__photo .image-slot img,
.step__photo .image-slot img,
.indp-split__aside .image-slot img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* A real photograph arrives at whatever proportions the camera gave it, so a
   front-page card head fixes the frame at the slot's own 3:2 and fills it: the
   three heads on one row stay the same height, and the card bodies below them
   start on the same line, whatever was dropped in. The same rule belongs on the
   other slots above as their photographs arrive. */
.card__photo .image-slot img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* The equipment gallery's tiles are one grid of equal boxes, so a workshop
   photograph that is not shot to the slot's 4:3 fills the frame instead of
   shortening its own tile; the tile keeps the slot chrome, so a dropped-in
   photograph and a placeholder still look like the same gallery. */
.equip-item .image-slot img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- The industry page: the duty's photograph beside the positions ----------
   The photograph sits inside the page, next to the systems and the filter
   positions — not in the hero band and not as a full-width strip — and it is the
   same 600x400 shot the industry index card carries. Below 1000px it drops under
   the list and stops growing at 480px. */
.indp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.indp-split__aside {
  max-width: 480px;
  margin-inline: auto;
}

.indp-split__aside .image-slot {
  width: 100%;
}

@media (min-width: 1000px) {
  .indp-split {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
  }

  .indp-split__aside {
    max-width: none;
    margin-inline: 0;
  }
}

/* ==========================================================================
   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 — the archive at /products/ (archive-product.php) and every product
   page under it (single-product.php).

   The archive is the material tier of the product section: three media
   families, an index of every element that the filter-sort behaviour narrows,
   the comparison table and the ordering route. A product page follows the
   twelve modules of the page plan. Selectors are prefixed .prod- (shared by
   both templates) or .pdp- (the product page alone), so nothing here can
   collide with the rest of the theme.
   ========================================================================== */

/* In-page anchors stop below the 68px sticky header. */
.prod-family[id],
.prod-index-section[id],
.prod-compare-section[id],
.prod-order[id],
.prod-faq[id],
.pdp-benefits[id],
.pdp-construction[id],
.pdp-specs[id],
.pdp-materials[id],
.pdp-applications[id],
.pdp-customisation[id],
.pdp-downloads[id],
.pdp-faq[id],
.pdp-related[id] {
  scroll-margin-top: 84px;
}

/* ---------- Actions inside a page hero (shared with the 404, author and
   industries pages, which use the same row of buttons) ---------- */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ---------- Breadcrumb, on the dark hero bands ---------- */
.prod-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);
}

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

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

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

.prod-crumbs__here {
  color: #ffffff;
}

/* ---------- "On this page" jump strip ---------- */
.prod-intro {
  padding-top: 40px;
  padding-bottom: 0;
}

.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);
}

/* ---------- The filter bar over the element index ---------- */
.prod-filter {
  margin-bottom: 32px;
  padding: 20px 24px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.prod-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 20px;
}

.prod-filter__field {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 6px;
}

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

.prod-filter input[type="search"],
.prod-filter select {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-ink);
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.prod-filter input[type="search"]:focus-visible,
.prod-filter select:focus-visible,
.prod-filter__reset:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.prod-filter__reset {
  padding: 10px 18px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-brand);
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

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

.prod-filter__count {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brand);
}

/* The behaviour writes "shown / total" into [data-filter-count]; the label beside
   it is authored here so the pair reads as a sentence rather than as a fraction. */
.prod-filter__count-label {
  margin-right: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-muted);
}

.prod-filter__empty {
  margin: 24px 0 0;
  padding: 20px 24px;
  background-color: #ffffff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-muted);
}

/* ---------- The element index ---------- */
.prod-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

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

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

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

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

.prod-item__media {
  aspect-ratio: 14 / 9;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.prod-item__media .image-slot,
.prod-item__media img {
  display: block;
  width: 100%;
  height: 100%;
}

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

.prod-item__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

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

.prod-item__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.prod-item__title a {
  color: var(--color-brand);
  text-decoration: none;
}

.prod-item__title a:hover {
  color: var(--color-accent);
}

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

/* Left-aligned in the card: the values are phrases, not figures. */
.prod-item__specs {
  width: 100%;
  margin-top: 4px;
}

.prod-item__specs th,
.prod-item__specs td {
  padding: 7px 0;
  text-align: left;
  vertical-align: top;
}

.prod-item__specs th {
  padding-right: 14px;
  white-space: nowrap;
}

.prod-item__specs td.spec-table__value--accent {
  font-size: 1rem;
}

.prod-item__link {
  margin-top: auto;
  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);
  text-decoration: none;
}

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

.prod-item__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__list {
  margin-top: 32px;
}

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

.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 and elements of a family, as pills ---------- */
.prod-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.prod-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  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);
}

/* A pill that leads to an element page, not a plain label. */
.prod-tags--links .prod-tag {
  background-color: #ffffff;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.prod-tags--links .prod-tag:hover {
  border-color: var(--color-brand);
  color: var(--color-accent);
}

.prod-tag__meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
}

/* ---------- 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;
}

/* ---------- Forms beyond the list ---------- */
.prod-note-section {
  padding-top: 0;
}

/* ---------- 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);
}

/* 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);
  }
}

/* ==========================================================================
   Product page (single-product.php) — one element, twelve modules.
   ========================================================================== */

/* ---------- M1 · hero: the value line beside the photograph ---------- */
.pdp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 960px) {
  .pdp-hero__grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
  }
}

.pdp-hero__media {
  margin: 0;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.pdp-hero__media img,
.pdp-hero__media .image-slot,
.pdp-hero__media .image-slot img {
  display: block;
  width: 100%;
  height: auto;
}

.pdp-hero__media .image-slot img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- M2 · summary beside the module jump ---------- */
.pdp-summary__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 960px) {
  .pdp-summary__grid {
    grid-template-columns: 1fr 320px;
    gap: 64px;
    align-items: start;
  }
}

.pdp-summary__text {
  margin-bottom: 20px;
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--color-ink);
}

.pdp-summary__content {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-muted);
}

.pdp-jump {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
}

.pdp-jump .prod-jump__list {
  flex-direction: column;
  align-items: flex-start;
}

/* ---------- M3 · key benefits ---------- */
.pdp-benefit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .pdp-benefit-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

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

.pdp-benefit__index {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-cta);
  color: var(--color-accent);
}

.pdp-benefit__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-brand);
}

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

/* ---------- M4 · construction ---------- */
.pdp-construction__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 960px) {
  .pdp-construction__grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 72px;
  }
}

.pdp-layers {
  counter-reset: pdp-layer;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.pdp-layer {
  position: relative;
  margin: 0;
  padding: 0 0 28px 44px;
  border-left: 1px solid var(--color-border);
}

.pdp-layer:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.pdp-layer::before {
  counter-increment: pdp-layer;
  content: counter(pdp-layer, decimal-leading-zero);
  position: absolute;
  left: -14px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.pdp-layer__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-brand);
}

.pdp-layer__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.pdp-construction__media {
  margin: 0;
}

/* ---------- M5 · technical specifications ---------- */
.pdp-specs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 960px) {
  .pdp-specs__grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 64px;
  }
}

.pdp-specs__table {
  width: 100%;
}

/* Values here are phrases, not figures, so they read left to right. */
.pdp-specs__table th {
  width: 36%;
  padding-right: 24px;
}

.pdp-specs__table td {
  text-align: left;
}

.pdp-specs__aside {
  padding: 28px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.pdp-specs__aside-title {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-brand);
}

.pdp-specs__aside-text {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

/* ---------- M6 · available materials ---------- */
.pdp-material-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .pdp-material-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.pdp-material {
  padding: 22px 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-tech);
  border-radius: var(--radius-card);
}

.pdp-material__name {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-brand);
}

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

/* ---------- M7 · applications ---------- */
.pdp-application-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .pdp-application-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

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

.pdp-application__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-brand);
}

.pdp-application__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.pdp-applications__note,
.pdp-related__note {
  margin-top: 32px;
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.pdp-applications__note a,
.pdp-related__note a {
  color: var(--color-accent);
  text-decoration: none;
}

.pdp-applications__note a:hover,
.pdp-related__note a:hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
}

/* ---------- M8 · customisation ---------- */
.pdp-customisation__text {
  margin-bottom: 16px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-ink);
}

.pdp-customisation__note {
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

/* ---------- M9 · downloads ---------- */
.pdp-download-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .pdp-download-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.pdp-download {
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.pdp-download__title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
}

.pdp-download__title a {
  color: var(--color-brand);
  text-decoration: none;
}

.pdp-download__title a:hover {
  color: var(--color-accent);
}

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

.pdp-download-request {
  max-width: 760px;
  padding: 28px 32px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.pdp-download-request__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-ink);
}

.pdp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ---------- M10 · trust signals, on the dark band ---------- */
.pdp-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

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

.pdp-trust__title {
  margin-bottom: 16px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-on-dark);
}

.pdp-trust__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-on-dark-muted);
}

.pdp-trust__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-trust__fact {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--grid-line-dark);
  border-radius: var(--radius-card);
}

.pdp-trust__figure {
  display: block;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-on-dark);
}

.pdp-trust__label {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-on-dark-muted);
}

/* ---------- M11 · FAQ ---------- */
.pdp-faq .faq-item__body p {
  color: var(--color-muted);
}
/* ==========================================================================
   Industries page (page-industries.php, served at /industries/)
   Rebuilt around the applications of the three media: the industry index, one
   card per industry, and the selection rules. All selectors are prefixed .ind-
   so nothing here can collide with the rest of the theme. The last rule belongs
   to the product page's application cards, which link into these blocks.
   ========================================================================== */

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

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

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

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

/* ---------- One card per industry ---------- */
.ind-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.ind-card {
  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-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ind-card__icon {
  display: inline-flex;
  color: var(--color-tech);
}

.ind-card__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-brand);
}

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

.ind-card__row {
  margin-bottom: 16px;
  font-size: 0.875rem;
  color: var(--color-ink);
  line-height: 1.6;
}

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

.ind-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.ind-card__item {
  position: relative;
  margin-bottom: 0;
  padding-left: 18px;
  font-size: 0.875rem;
  color: var(--color-ink);
  line-height: 1.55;
}

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

/* The medium names, then the link that opens the industry's own page — which is
   the row pinned to the foot, so the cards still line up across a row. */
.ind-card__media {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.ind-card__link-row {
  margin: auto 0 0;
  padding-top: 14px;
}

/* The card name is a link to the industry's page, as the closing row is. */
.ind-card__name a {
  color: inherit;
  text-decoration: none;
}

.ind-card__name a:hover {
  color: var(--color-accent);
}

/* The positions the card does not print, counted rather than listed. */
.ind-card__item--more {
  color: var(--color-muted);
}

/* ---------- Selection notes ---------- */
.ind-notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

.ind-note {
  padding: 28px 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

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

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

.ind-note__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

/* ---------- The text link that opens the industries page ---------- */
.ind-block__link {
  display: inline-block;
  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);
}

/* ---------- A product page's application card names its industry ---------- */
.pdp-application__title a {
  color: inherit;
}

.pdp-application__title a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Industry pages (page-industry.php, served at /industries/<industry>/)
   One page per duty, built from the same list as the index above. The page
   reuses the section, hero, note, tile and product-card classes; its own are
   the breadcrumb, the systems panel, the numbered filter positions and the
   closing note, all prefixed .indp-.
   ========================================================================== */

/* ---------- Breadcrumb, on the dark hero band ---------- */
.indp-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);
}

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

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

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

.indp-crumbs__here {
  color: #ffffff;
}

/* ---------- The system the duty belongs to ---------- */
.indp-systems {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 28px;
  padding: 20px 24px;
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-card);
}

.indp-systems__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-tech);
}

.indp-systems__text {
  font-size: 0.9375rem;
  color: var(--color-ink);
  line-height: 1.6;
}

/* ---------- Every filter position of the duty, numbered ---------- */
.indp-positions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.indp-position {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 0;
  padding: 16px 18px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.indp-position__index {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  color: var(--color-accent);
  line-height: 1.7;
}

.indp-position__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-ink);
  line-height: 1.6;
}

/* ---------- The closing note that points back at the index ---------- */
.indp-note {
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.7;
}

.indp-note a {
  color: var(--color-accent);
}

.indp-note a:hover {
  color: var(--color-accent-strong);
}

/* The media links that stand in when no element names the duty yet. */
.indp-media-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
}

/* ==========================================================================
   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 editorial lines: five, one per subject heading ---------- */
.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(3, 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);
}