/* ============================================================
   B&C MONTAGEN — SITE LAYOUT
   Section/page styles ported 1:1 from the design source
   (B&C Montagen Homepage.dc.html + Impressum/Datenschutz).
   All values are design tokens or verbatim clamp()/rgba()
   values from the design — do not invent new ones.
   ============================================================ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-base);
  overflow-x: hidden;
}

/* Legal pages: footer sticks to the bottom on short content */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page > main { flex: 1 0 auto; }

/* <picture> is a transparent wrapper — its child <img> keeps the layout
   role the design gives it (fill-container object-fit, absolute hero). */
picture { display: contents; }

/* ---------- LAYOUT PRIMITIVES ---------- */

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 40px);
  padding-right: clamp(20px, 5vw, 40px);
}

.section {
  padding-top: clamp(64px, 9vw, 104px);
  padding-bottom: clamp(64px, 9vw, 104px);
  scroll-margin-top: 80px;
}

/* anchor targets clear the 74px sticky header */
section[id], main[id] { scroll-margin-top: 80px; }

.band--light { background: var(--surface-light); color: var(--text-on-light); }
.band--sunken { background: var(--surface-sunken); }

/* Section header block (eyebrow → headline → support) */
.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.section-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.06; letter-spacing: -0.01em;
  color: var(--text-primary);
  text-wrap: balance;
}
.section-lead {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.62;
  color: var(--text-secondary);
}
.band--light .section-title { color: var(--text-on-light); }
.band--light .section-lead { color: var(--text-on-light-secondary); }

/* Uppercase text link with arrow (HKLS bar, Referenzen) */
.bc-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--accent);
  white-space: nowrap;
}
.bc-textlink svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Skip link (keyboard users) */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  font: var(--type-mono-sm); text-transform: uppercase; letter-spacing: var(--ls-wide);
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus-visible { top: 16px; outline: none; box-shadow: var(--ring-focus); }

/* ---------- HEADER ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 19, 21, 0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  max-width: 1280px; margin: 0 auto;
  padding-left: clamp(20px, 5vw, 40px); padding-right: clamp(20px, 5vw, 40px);
  height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.bc-logo-link { display: inline-flex; flex: 0 0 auto; transition: opacity .15s ease; }
.bc-logo-link:hover { opacity: 0.82; }
.bc-logo-link img { display: block; height: 53px; width: auto; }

.bc-desktop-nav { display: none; align-items: center; gap: 34px; }
.bc-desktop-nav a {
  font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--text-secondary);
  transition: color .14s ease;
}
.bc-desktop-nav a:hover { color: var(--accent); }

.site-header__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.bc-cta-desktop { display: none; }
.bc-burger { display: inline-flex; }

@media (min-width: 1024px) {
  .bc-desktop-nav { display: flex; }
  .bc-cta-desktop { display: inline-flex; }
  .bc-burger { display: none; }
  /* an open mobile menu must not survive crossing the breakpoint —
     the burger (its only close control) is hidden here */
  .bc-mobile-menu { display: none; }
}

/* Keyboard affordance — orange focus ring on header & footer links (matches hover) */
.bc-desktop-nav a:focus-visible,
.bc-logo-link:focus-visible,
.bc-footer a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

/* Header CTA — secondary/outline Button re-colored to an accent outline that
   fills on hover. Overrides only the DS Button's theming hooks (--_bg/--_fg/--_bd)
   with existing tokens. */
.bc-btn.bc-cta-outline {
  --_bg: transparent;
  --_fg: var(--accent);
  --_bd: var(--accent);
  --border-width: var(--border-width-thick); /* 2px token — scoped to this button */
}
.bc-btn.bc-cta-outline:hover {
  --_bg: var(--accent);
  --_fg: var(--text-on-accent);
  --_bd: var(--accent);
}

/* Mobile menu (design: sc-if menuOpen) */
.bc-mobile-menu {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  padding: 8px clamp(20px, 5vw, 40px) 24px;
}
.bc-mobile-menu__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; }
.bc-mobile-menu__inner > a {
  padding: 14px 0;
  font: var(--type-title-md); color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.bc-mobile-menu__cta { padding-top: 18px; }

/* ---------- HERO ---------- */

.hero {
  position: relative;
  min-height: clamp(580px, 86vh, 940px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  scroll-margin-top: 80px;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}
/* graphite scrim: dark→transparent left→right, keeps the headline/CTAs readable */
.hero__scrim-left {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(12,13,14,0.95) 0%, rgba(12,13,14,0.86) 30%, rgba(12,13,14,0.50) 62%, rgba(12,13,14,0.16) 100%);
}
/* reinforced bottom-up so text stays AA when it stacks on tablet/mobile */
.hero__scrim-bottom {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,13,14,0.92) 0%, rgba(12,13,14,0.40) 40%, rgba(12,13,14,0) 72%);
}
.hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding-left: clamp(20px, 5vw, 40px); padding-right: clamp(20px, 5vw, 40px);
  padding-bottom: clamp(56px, 8vw, 96px); padding-top: clamp(72px, 10vw, 120px);
}
.hero__stack { max-width: 840px; display: flex; flex-direction: column; gap: 22px; }
.hero__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  line-height: 1.02; letter-spacing: -0.012em;
  color: var(--text-primary); text-wrap: balance;
}
.hero__lead {
  margin: 0; max-width: 600px;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6; color: var(--text-secondary);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.14);
  max-width: 760px;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 9px;
  font: var(--type-mono-sm); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-secondary);
}
.trust-item svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }

/* Signature heat line (hero bottom / contact top) */
.heat-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--heat-line); box-shadow: var(--shadow-glow);
  z-index: 3;
}
.heat-line--bottom { bottom: 0; }
.heat-line--top { top: 0; }

/* ---------- LEISTUNGEN ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 22px; margin-top: 44px;
}

.hkls-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px 28px; justify-content: space-between;
  margin-top: 24px; padding: 24px clamp(20px, 3vw, 28px);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.hkls-bar__text { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.hkls-bar__title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hkls-bar__title { font: var(--type-title-md); color: var(--text-primary); white-space: nowrap; }
.hkls-bar__desc { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }

/* ---------- WARUM B&C (light relief) ---------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 20px; margin-top: 44px;
}

/* ---------- ABLAUF ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 0; margin-top: 48px;
  border-top: 1px solid var(--border-default);
}
.step { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 30px; }
.step:not(:last-child) { border-right: 1px solid var(--border-subtle); }
.step__head { display: flex; align-items: center; gap: 12px; }
.step__num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: var(--fs-lg); letter-spacing: 0.08em;
  color: var(--accent);
}
.step__rule { height: 1px; flex: 1; background: var(--border-default); }
.step__icon { width: 24px; height: 24px; color: var(--text-tertiary); margin-top: 4px; }
.step__title { margin: 0; font: var(--type-title-md); color: var(--text-primary); }
.step__desc { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }

/* ---------- PROJEKTE / REFERENZEN ---------- */

.projects-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.projects-head .section-head { max-width: 680px; }
.projects-head .bc-textlink { padding-bottom: 6px; }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 22px; margin-top: 44px;
}

/* ---------- ÜBER UNS ---------- */

.bc-ueber-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 52px);
  align-items: start;
}
.bc-ueber-media {
  container: bcuebermedia / inline-size;
  display: flex; flex-direction: column;
  gap: clamp(22px, 3vw, 32px);
}
.bc-ueber-photo {
  aspect-ratio: 4/5;
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-inset);
}
.bc-ueber-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.985) contrast(1.06) saturate(1.03);
}
.bc-ueber-photo__tint {
  position: absolute; inset: 0;
  background: rgba(16,18,20,0.10);
  pointer-events: none;
}
.photo-chip {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  background: rgba(18,19,21,0.80);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
}
.photo-chip svg { width: 13px; height: 13px; color: var(--accent); flex: 0 0 auto; }
.photo-chip span {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #F3F4F4;
}

.bc-tband {
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.bc-tband > div { padding: 18px 0; display: flex; flex-direction: column; }
.bc-tband > div + div { border-top: 1px solid var(--border-subtle); }
.bc-tband__tick {
  display: block; width: 40px; height: 2px;
  background: var(--accent); border-radius: 999px;
  margin-bottom: 16px;
}
.bc-tband__label {
  display: block; margin-top: auto;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.1rem; line-height: 1.26; letter-spacing: -0.005em;
  color: var(--text-primary);
}
@container bcuebermedia (min-width: 500px) {
  .bc-tband { grid-template-columns: repeat(3, 1fr); }
  .bc-tband > div { padding: 22px 0; }
  .bc-tband > div + div { border-top: none; border-left: 1px solid var(--border-subtle); padding-left: 22px; }
}
@media (max-width: 899px) {
  .bc-ueber-grid { grid-template-columns: 1fr; }
  .bc-ueber-photo { aspect-ratio: 16/10; }
}

.ueber-text { display: flex; flex-direction: column; gap: 20px; max-width: 600px; }
.ueber-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.08; letter-spacing: -0.01em;
  color: var(--text-primary); text-wrap: balance;
}
.ueber-copy {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.64; color: var(--text-secondary);
}
.ueber-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.facts { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.facts__heading {
  margin: 0; font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--text-secondary);
}
.facts__table { display: flex; flex-direction: column; border-bottom: 1px solid var(--border-subtle); }
.facts__row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--border-subtle);
}
.facts__label {
  flex: 0 0 158px;
  font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--text-secondary);
}
.facts__value { font: var(--type-body-sm); color: var(--text-primary); font-weight: 500; }

/* ---------- KONTAKT / FINAL CTA ---------- */

.contact-band {
  position: relative; overflow: hidden;
  background: var(--surface-sunken);
  scroll-margin-top: 80px;
}
.contact-band__grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 58px);
}
.contact-band__glow {
  position: absolute; inset: 0;
  background: radial-gradient(58% 80% at 82% 50%, rgba(224,83,31,0.12) 0%, rgba(224,83,31,0) 64%);
}
.contact-band__content {
  position: relative; z-index: 2;
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: clamp(72px, 10vw, 120px);
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.contact-pitch { display: flex; flex-direction: column; gap: 22px; max-width: 600px; }
.contact-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.05; letter-spacing: -0.01em;
  color: var(--text-primary); text-wrap: balance;
}
.contact-lead {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6; color: var(--text-secondary);
}
.contact-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.contact-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: clamp(24px, 3vw, 32px);
}
.contact-card__title { margin: 14px 0 0; font: var(--type-title-md); color: var(--text-primary); }
.contact-card__list {
  display: flex; flex-direction: column;
  margin-top: 18px; border-bottom: 1px solid var(--border-subtle);
}
.contact-card__row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--border-subtle);
}
.contact-card__num { font: var(--type-mono-sm); color: var(--text-secondary); min-width: 20px; }
.contact-card__item { font: var(--type-body-sm); color: var(--text-secondary); }
.contact-card__note {
  margin: 16px 0 0;
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--type-mono-sm); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-secondary);
}
.contact-card__note svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }

.contacts-block {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px; border-top: 1px solid var(--border-default);
}
.contacts-block__heading {
  margin: 0; font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--text-secondary);
}
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 32px;
}
.contact-person {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding-top: 14px; border-top: 1px solid var(--border-default);
}
.contact-person__role {
  font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--text-secondary);
}
.contact-person__name { font: var(--type-body-sm); color: var(--text-primary); font-weight: 500; }
.contact-person__phone { font: var(--type-mono-md); color: var(--text-secondary); transition: color .14s ease; }
.contact-person__phone:hover { color: var(--accent); }

.bc-contactbar {
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px; border-top: 1px solid var(--border-default);
}
.bc-contactbar a, .bc-contactbar > span {
  display: inline-flex; align-items: center; gap: 9px;
  font: var(--type-mono-md); color: var(--text-secondary);
}
.bc-contactbar a { transition: color .14s ease; }
.bc-contactbar a:hover { color: var(--text-primary); }
.bc-contactbar svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }

/* ---------- FOOTER ---------- */

.bc-footer { background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); }
.bc-footer__inner {
  max-width: 1280px; margin: 0 auto;
  padding-left: clamp(20px, 5vw, 40px); padding-right: clamp(20px, 5vw, 40px);
  padding-top: clamp(56px, 7vw, 80px); padding-bottom: 28px;
}
.bc-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px 32px; padding-bottom: 48px;
}
.bc-footer__brand { display: flex; flex-direction: column; gap: 18px; max-width: 320px; }
.bc-footer__brand img { display: block; height: 76px; width: auto; align-self: flex-start; }
.bc-footer__brand p { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }
.bc-footer__col { display: flex; flex-direction: column; }
.bc-footer__col h2 {
  margin: 0 0 16px;
  font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--text-secondary);
}
.bc-footer__col a {
  padding: 6px 0; font: var(--type-body-sm); color: var(--text-secondary);
  transition: color .15s ease;
}
.bc-footer__col a:hover { color: var(--accent); }
.bc-footer__col span { padding: 6px 0; font: var(--type-body-sm); color: var(--text-secondary); }
.bc-footer__col span + span { padding-top: 2px; }
.bc-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--border-subtle);
  font: var(--type-body-sm); color: var(--text-secondary);
}
.bc-footer__legal { display: flex; gap: 26px; }
.bc-footer__legal a { color: var(--text-secondary); transition: color .15s ease; }
.bc-footer__legal a:hover { color: var(--accent); }
.bc-footer__legal a[aria-current="page"] { color: var(--text-primary); }

/* ---------- LEGAL PAGES (Impressum / Datenschutz) ---------- */

.legal-main {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(72px, 10vw, 120px);
}
.legal-wrap { max-width: 720px; margin: 0 auto; }
.legal-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(40px, 6vw, 60px); }
.legal-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.04; letter-spacing: -0.01em;
  color: var(--text-primary);
}
.legal-rule { width: 48px; height: 3px; background: var(--accent); border-radius: var(--radius-xs); }
.legal-lead { margin: 0; font: var(--type-body-lg); color: var(--text-secondary); }

.legal-sections { border-bottom: 1px solid var(--border-subtle); }
.legal-section {
  border-top: 1px solid var(--border-subtle);
  padding: clamp(22px, 3.4vw, 32px) 0;
  display: flex; flex-direction: column; gap: 12px;
}
.legal-section h2 {
  margin: 0;
  font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--text-secondary);
}
.legal-body { font: var(--type-body-md); color: var(--text-primary); line-height: 1.7; }
.legal-body--stack { display: flex; flex-direction: column; gap: 6px; }
.legal-body--stack-lg { display: flex; flex-direction: column; gap: 10px; }
.legal-note { margin: 0; font: var(--type-body-md); color: var(--text-secondary); line-height: 1.72; }
.legal-muted { color: var(--text-secondary); }
.legal-section a { color: var(--accent); text-decoration: none; transition: color .14s ease; }
.legal-section a:hover { color: var(--accent-hover); }
.ph { color: var(--text-primary); border-bottom: 1px dashed var(--border-strong); padding-bottom: 1px; }

/* ---------- 404 ---------- */

.notfound {
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  max-width: 720px; margin: 0 auto;
  padding-top: clamp(72px, 12vw, 140px);
  padding-bottom: clamp(72px, 12vw, 140px);
}
.notfound__code {
  font-family: var(--font-mono); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: 0.18em;
  color: var(--accent); text-transform: uppercase;
}

/* ---------- MOBILE TOUCH TARGETS ---------- */
/* below the 1024px desktop-nav breakpoint: interactive links meet the 44px touch target */
@media (max-width: 1023px) {
  .bc-footer a, .bc-contactbar a, .bc-textlink, .contact-person__phone {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
}

/* ---------- ACCESSIBILITY OVERRIDES (WCAG 2.1 AA contrast) ----------
   Documented deviations from the design source, confirmed by review.
   Only existing palette tokens are used — no invented colors. */

/* Primary CTA: white on #E0531F is 3.87:1 (AA needs 4.5:1). Near-black
   text reaches 4.81:1 at rest and 6.70:1 on the lighter hover fill. */
:root { --text-on-accent: var(--gray-950); }
/* keep the pressed state at AA too — press feedback stays via translateY(1px) */
.bc-btn--primary:active { --_bg: var(--accent); }

/* Accent text on card surfaces (#212529) is 3.99:1 with --orange-500;
   the lighter --orange-400 reaches 5.55:1. Accent text on the page base
   (#16181A) and sunken (#111315) surfaces passes as-is and stays untouched. */
.bc-service__link,
.hkls-bar .bc-textlink,
.contact-card .bc-eyebrow--accent { color: var(--orange-400); }

/* Accent eyebrow on the light relief band: #E0531F on #F4F3F1 is 3.49:1;
   the deep --orange-700 reaches 6.59:1. The tick stays brand orange (decorative). */
.band--light .bc-eyebrow--accent { color: var(--orange-700); }

/* Feature-card index numerals on white cards: #767D85 is 4.16:1;
   the secondary on-light tone passes comfortably. */
.bc-feature--on-light .bc-feature__num { color: var(--text-on-light-secondary); }