/* Design B "Engineering & Energy" (docs/design/themes.md): building materials, sanitary, doors &
   windows, steel structures, lighting projects, solar & storage. Buyers are contractors and
   developers, so projects and applications lead. Sage neutrals, deep teal, brass marks; section
   heads read like the title block of a drawing; key figures are set as a ledger, not boxes. */

:root {
  --ds-ink: #13201c;
  --ds-body: #3e4b47;
  --ds-mute: #67756f;
  --ds-hairline: #dfe5e1;
  --ds-hairline-strong: #c3ccc7;
  --ds-canvas: #ffffff;
  --ds-alt: #f1f4f2;
  --ds-radius: 6px;
  --ds-radius-card: 10px;
  --ds-radius-media: 8px;
  --ds-container: 1280px;
  --ds-heading-weight: 700;
  --ds-heading-tracking: -0.025em;
  --ds-heading-leading: 1.08;
  --ds-display-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  --ds-cta-bg: var(--ds-primary);
  --ds-cta-hover: var(--ds-primary-hover);
  --ds-cta-text: var(--ds-on-primary);
  --ds-btn-weight: 700;
  --ds-btn-height: 48px;
  --ds-kicker-color: var(--ds-link);
  --ds-card-hover-border: var(--ds-hairline-strong);
  --ds-card-hover-shadow: 0 18px 40px -24px rgb(16 32 29 / 0.35);
  --ds-header-h: 80px;
  --ds-section-y: 80px;
  --ds-section-y-lg: 120px;
}
body {
  font-size: 17px;
}
.t-lead {
  font-size: 1.1875rem;
}

/* Kicker: brass square, then the label. */
.t-kicker {
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  gap: 10px;
}
.t-kicker::before {
  width: 8px;
  height: 8px;
  background: var(--ds-accent);
}

/* Section heads sit on a full-width rule, like a drawing title block. */
.section-head {
  border-top: 1px solid var(--ds-hairline-strong);
  padding-top: 22px;
  margin-bottom: 52px;
}
:is(.surface-dark, .surface-brand) .section-head {
  border-top-color: var(--ds-dark-hairline);
}
.section-head.center {
  border-top: 0;
  padding-top: 0;
}
.split-head .t-h2 {
  padding-top: 0;
}

/* Header: white, roomy, primary underline on the active item. */
.header {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 var(--ds-hairline);
}
.nav > a,
.nav-item > a {
  font-weight: 600;
  font-size: 0.9875rem;
}
.nav [aria-current='page']::after,
.nav > a:hover::after,
.nav-item > a:hover::after {
  background: var(--ds-primary);
  height: 2px;
}
.nav-menu > ul {
  border-top-color: var(--ds-primary);
}
.logo-mark {
  border-radius: 50%;
  background: var(--ds-primary);
}
.logo-text b {
  --ds-logo-size: 1.25rem;
  letter-spacing: -0.02em;
}

/* Buttons: confident, rounded; the line button is quiet. */
.btn-line {
  border-color: var(--ds-hairline-strong);
}

/* Ledger: key figures as large numbers between vertical rules, no boxes. */
.plate {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 0;
}
.plate > div {
  background: transparent;
  padding: 6px 28px 6px 0;
  border-left: 1px solid var(--ds-hairline-strong);
  padding-left: 24px;
  gap: 4px;
}
.plate dt {
  order: 2;
  font-family: var(--ds-font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
  font-weight: 400;
}
.plate dd {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem);
  letter-spacing: -0.03em;
}
.plate dd small {
  color: var(--ds-accent-text);
  font-size: 0.5em;
}
.plate.sm dd {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.plate.sm > div {
  padding: 4px 16px 4px 16px;
}
.plate.sm dt {
  font-size: 0.8125rem;
}
:is(.surface-dark, .surface-brand) .plate > div {
  border-left-color: var(--ds-dark-hairline);
}
:is(.surface-dark, .surface-brand) .plate dd small {
  color: var(--ds-accent);
}
@media (max-width: 767px) {
  .plate {
    row-gap: 20px;
  }
}

/* Hero (split): text on the canvas, the project photo bleeds to the right edge with a caption. */
.hero-split .hero-inner {
  padding-block: 56px 64px;
}
@media (min-width: 1024px) {
  .hero-split .hero-inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 56px;
    padding-block: 72px 80px;
    min-height: 620px;
  }
  .hero-split .hero-media {
    margin-right: calc(-1 * ((100vw - 15px - min(100vw - 15px, var(--ds-container) + 64px)) / 2 + 32px));
    align-self: stretch;
  }
  .hero-split .hero-media img {
    height: 100%;
    aspect-ratio: auto;
    border-radius: var(--ds-radius-media) 0 0 var(--ds-radius-media);
  }
}
.hero-split .hero-media {
  position: relative;
}
.hero-split .hero-media img {
  aspect-ratio: 4/3;
}
.hero-split h1 {
  max-width: 17ch;
}
.hero-figures {
  padding-bottom: 64px;
}
.section[data-block='hero']:is(.surface-dark, .surface-brand) .hero-figures {
  padding-bottom: 72px;
}
.hero-image-bg::before {
  background: linear-gradient(0deg, color-mix(in srgb, var(--ds-surface-dark) 92%, transparent) 0%, color-mix(in srgb, var(--ds-surface-dark) 55%, transparent) 60%, color-mix(in srgb, var(--ds-surface-dark) 25%, transparent) 100%);
}
.hero-image-bg .hero-inner {
  min-height: 520px;
  align-content: end;
}

/* Certification strip: quiet, centered. */
.badges {
  justify-content: center;
}
.badges .icon {
  color: var(--ds-accent-text);
}

/* Project / application cards: photo with a caption block underneath. */
.photo-card {
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  background: var(--ds-card-bg);
  border: 1px solid var(--ds-hairline);
  color: var(--ds-body);
}
.photo-card::before {
  display: none;
}
.photo-card img {
  position: static;
  z-index: auto;
  aspect-ratio: 3/2;
  height: auto;
}
.photo-card > div {
  padding: 20px 22px 24px;
  border-left: 3px solid var(--ds-accent);
  margin: 18px 0 4px 22px;
  padding: 2px 22px 2px 16px;
  gap: 6px;
}
.photo-card {
  padding-bottom: 20px;
}
.photo-card h3 {
  color: var(--ds-ink);
  font-size: 1.3125rem;
}
.photo-card p {
  color: var(--ds-mute);
}

/* Category tiles: application photos, name on the photo's lower edge. */
.ctile {
  border-color: var(--ds-hairline);
}
.ctile-media {
  aspect-ratio: 3/2;
}
.ctile-title {
  font-size: 1.375rem;
}

/* Product cards: inset photo, model as a light tag. */
.pcard-model {
  left: 10px;
  top: 10px;
  bottom: auto;
  background: var(--ds-canvas);
  color: var(--ds-ink);
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.pcard-media {
  margin: 10px 10px 0;
  border-radius: calc(var(--ds-radius-card) - 4px);
}
.pcard-foot {
  color: var(--ds-link);
  border-top-style: dashed;
}

/* Image + text: inset photo and the badge as a brass-edged card. */
.imagetext-media .badge {
  width: auto;
  min-width: 170px;
  background: var(--ds-canvas);
  box-shadow: 0 18px 40px -20px rgb(16 32 29 / 0.4);
  border-radius: var(--ds-radius-card);
  padding: 16px 20px;
}
.imagetext-media .badge > div {
  border-left: 3px solid var(--ds-accent);
}
.imagetext-text .prose ol > li::before {
  color: var(--ds-link);
}

/* Features: open grid with brass top marks instead of boxed cells. */
.feature-grid {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 40px 32px;
}
.feature-grid li {
  background: transparent;
  padding: 22px 0 0;
  border-top: 2px solid var(--ds-hairline-strong);
  position: relative;
}
.feature-grid li::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--ds-accent);
}

/* Steps as a timeline of project phases. */
.steps.horizontal li {
  border-top-color: var(--ds-primary);
}
.step-n {
  color: var(--ds-link);
}

/* CTA band on the brand color: large type, one button. */
.cta-band .t-h2 {
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
}

/* Inquiry block: form on a white card with soft lift. */
.inquiry-card {
  border-top: 1px solid var(--ds-hairline);
  box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.5);
}
.rfq-points .icon {
  color: var(--ds-accent);
}

/* Category page: lighter head, sidebar CTA in the brand color. */
.cat-head {
  background: var(--ds-alt);
}
.side-cta {
  background: var(--ds-primary);
  color: color-mix(in srgb, var(--ds-on-primary) 80%, transparent);
}
.side-cta .icon {
  color: var(--ds-on-primary);
}
.side-cta h2 {
  color: var(--ds-on-primary);
}
.side-cta .btn-quote {
  background: var(--ds-on-primary);
  color: var(--ds-primary);
}
.subcats a[aria-current='page'] {
  border-bottom-color: var(--ds-primary);
}
.tree a:hover,
.tree a[aria-current='page'] {
  color: var(--ds-link);
}

/* Product page: tabs on a light bar. */
.pd-tabs {
  background: var(--ds-canvas);
  border-bottom: 1px solid var(--ds-hairline);
  box-shadow: 0 1px 0 var(--ds-hairline);
}
.pd-tabs a {
  color: var(--ds-body);
}
.pd-tabs a:hover {
  color: var(--ds-ink);
  border-bottom-color: var(--ds-primary);
}
.pd-tabs .tab-quote {
  border-radius: var(--ds-radius);
  margin-block: 8px;
  padding-block: 8px;
}
.pd-tags .model {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
}
.table-wrap thead th,
.table-wrap .group th {
  background: var(--ds-alt);
  color: var(--ds-ink);
  border-bottom: 2px solid var(--ds-primary);
}

/* Footer: deep green, brass icons. */
.footer .logo-mark {
  background: var(--ds-accent);
  color: var(--ds-on-accent);
}
.page-head {
  background: var(--ds-alt);
  border-bottom: 0;
}

/* Dark surfaces: brass kicker; forms keep the primary button. */
:is(.surface-dark, .surface-brand) {
  --ds-kicker-color: var(--ds-accent);
}
.surface-reset {
  --ds-cta-bg: var(--ds-primary);
  --ds-cta-hover: var(--ds-primary-hover);
  --ds-cta-text: var(--ds-on-primary);
}
.pd-tabs .tab-quote,
.pd-tabs .tab-quote:hover {
  color: var(--ds-cta-text);
}