/* LagVärn brand finishing based on the official navy, copper and gold artwork. */
.brand .brand-logo {
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  padding: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand-copy strong { color: var(--brand-strong, #20243a); }
.brand-copy span { color: var(--muted, #62677a); }

html[data-theme="dark"] .brand-copy strong { color: var(--brand-strong, #ffd990); }
html[data-theme="dark"] .brand-copy span { color: var(--muted, #c7cad8); }

/* Inner-page builder blocks used by About, Team and Contact. Their bundled
 * styles use translucent white cards, so give them explicit dark surfaces
 * instead of combining those cards with inherited light-on-dark text. */
html[data-theme="dark"] .dsc-hero,
html[data-theme="dark"] .dsc-hero--v2 {
  color: var(--text, #f7f4ed) !important;
  background:
    radial-gradient(circle at top right, rgba(85, 93, 130, 0.28), transparent 32%),
    radial-gradient(circle at bottom left, rgba(239, 185, 89, 0.12), transparent 34%),
    linear-gradient(145deg, #191d2e, #111421) !important;
  border-color: var(--line, rgba(239, 185, 89, 0.2)) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .dsc-hero__copy :is(h1, h2, h3, h4, strong),
html[data-theme="dark"] :is(.team-values-card, .team-ops-card, .contact-info-card, .about-process-card) :is(h1, h2, h3, h4) {
  color: var(--text, #f7f4ed) !important;
}

html[data-theme="dark"] .dsc-hero__copy :is(p, li),
html[data-theme="dark"] .dsc-hero__metric p,
html[data-theme="dark"] .dsc-hero__card p,
html[data-theme="dark"] .contact-info-item span,
html[data-theme="dark"] .team-value-item p,
html[data-theme="dark"] .team-ops-item p,
html[data-theme="dark"] .about-process-card p {
  color: var(--muted, #c7cad8) !important;
}

html[data-theme="dark"] .dsc-hero__side--panel,
html[data-theme="dark"] .team-values-card,
html[data-theme="dark"] .team-ops-card,
html[data-theme="dark"] .contact-info-card {
  color: var(--text, #f7f4ed) !important;
  background: var(--surface-strong, #20243a) !important;
  border-color: var(--line, rgba(239, 185, 89, 0.2)) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .dsc-hero__metric,
html[data-theme="dark"] .dsc-hero__link,
html[data-theme="dark"] .dsc-hero__card,
html[data-theme="dark"] .team-value-item,
html[data-theme="dark"] .team-ops-item,
html[data-theme="dark"] .contact-social-card,
html[data-theme="dark"] .about-process-card {
  color: var(--text, #f7f4ed) !important;
  background: var(--surface-soft, #2a2f49) !important;
  border: 1px solid var(--line-soft, rgba(239, 185, 89, 0.11)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 14px 30px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] .dsc-hero__card--brand,
html[data-theme="dark"] .dsc-hero__card--soft,
html[data-theme="dark"] .contact-info-card--map {
  background: linear-gradient(135deg, #2a2f49, rgba(98, 70, 42, 0.72)) !important;
}

html[data-theme="dark"] :is(
  .dsc-hero__metric,
  .dsc-hero__link,
  .dsc-hero__card,
  .team-value-item,
  .team-ops-item,
  .contact-social-card,
  .about-process-card
) :is(h1, h2, h3, h4, strong) {
  color: var(--text, #f7f4ed) !important;
}

html[data-theme="dark"] :is(
  .dsc-hero__metric,
  .dsc-hero__link,
  .dsc-hero__card,
  .team-value-item,
  .team-ops-item,
  .contact-social-card,
  .about-process-card
) :is(p, span:not(.dsc-hero__eyebrow):not(.dsc-hero__link-label):not(.about-process-card__step)) {
  color: var(--muted, #c7cad8) !important;
}

html[data-theme="dark"] :is(
  .dsc-hero__eyebrow,
  .dsc-hero__link-label,
  .contact-info-item strong,
  .contact-social-card strong,
  .team-value-item > strong,
  .team-ops-item > strong,
  .about-process-card__step
) {
  color: var(--brand-strong, #ffd990) !important;
}

html[data-theme="dark"] .contact-social-card__icon {
  color: var(--brand-strong, #ffd990) !important;
  background: var(--brand-soft, rgba(239, 185, 89, 0.17)) !important;
  box-shadow: inset 0 0 0 1px var(--line, rgba(239, 185, 89, 0.2)) !important;
}

html[data-theme="dark"] .contact-social-card:hover {
  background: #343a59 !important;
}

.lagvarn-install__logo {
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(32, 36, 58, 0.2);
}

@media (max-width: 720px) {
  .brand .brand-logo { width: 54px; height: 54px; }
}