/* A quiet, shared midnight navy and brushed brass finish for the public site. */
:root {
  color-scheme: dark;
  --midnight: #08111c;
  --navy-panel: #0d1928;
  --brass: #d1b77d;
  --brass-line: #c3a66b38;
  --background: var(--midnight);
  --paper: var(--midnight);
  --surface: var(--navy-panel);
  --forest: var(--navy-panel);
  --gold: var(--brass);
  --ink: #f2efe7;
  --text: #f2efe7;
  --muted: #c1beb6;
  --line: var(--brass-line);
}

body {
  background: linear-gradient(115deg, #0b1623 0%, var(--midnight) 48%, #070e18 100%);
  color: var(--text);
}
.home-hero {
  background: linear-gradient(115deg, #0b1623, var(--midnight) 62%, #070e18);
  border-color: var(--line);
}

.site-header,
body[data-page="client-access"] > header {
  background: linear-gradient(110deg, #0c1724f7, #08111cf7 65%, #080f19f7);
  border-bottom-color: #c3a66b45;
}

.site-header .header-cta,
.site-header .menu-toggle {
  border-color: #bba16b66;
  color: #ddc99b;
}

.site-header .header-cta:hover {
  background: #c3a66b0c;
  border-color: #c3a66baa;
}

.principles,
.approach,
.process,
.concierge-care,
.about-family,
.ventilation-specialists,
.engineering-conversation,
.engineering-process,
.design-story {
  background: linear-gradient(115deg, #101e2e, #0c1724 65%, #0b1521);
  border-color: var(--line);
}

.service-card,
.contact-card,
.concierge-contact,
.certified-brand,
.portfolio-update {
  background: linear-gradient(125deg, #c3a66b05, transparent 42%),
              linear-gradient(135deg, #101d2c, #0c1724);
  border-color: #c3a66b45;
}

.certified-brand.flagship { border-color: #c3a66b80; }
.service-card:focus-within { border-color: #c3a66b90; }

.appliance-brand-grid li {
  background: linear-gradient(135deg, #101d2c, #0b1522);
  border-color: var(--line);
}
.appliance-brand-grid li > a:hover {
  background: #c3a66b0a;
  box-shadow: inset 0 0 0 1px #c3a66b70;
}

.button:not(.button-small),
.sign-in,
.portfolio-filters button[aria-pressed="true"] {
  background-color: #cfb780;
  background-image:
    repeating-linear-gradient(0deg, #ffffff08 0, #ffffff08 1px, #4d361105 1px, #4d361105 3px),
    linear-gradient(110deg, #bfa16a, #dfc995 48%, #c9ad75);
  border-color: #d5bc84;
  color: #101722;
  box-shadow: inset 0 1px 0 #f9e8bf45, 0 3px 12px #00000016;
}
.button:not(.button-small):hover,
.sign-in:hover {
  background-color: #dcc48d;
  background-image:
    repeating-linear-gradient(0deg, #ffffff08 0, #ffffff08 1px, #4d361105 1px, #4d361105 3px),
    linear-gradient(110deg, #cbae78, #e6d3a5 48%, #d4ba86);
}
.button-small { border-color: #c3a66b70; color: var(--gold); }
.button-small:hover { background: #c3a66b0c; }

.gold-rule {
  background: linear-gradient(90deg, #b69559, #dfc995 45%, #c3a66b40);
}

.site-footer,
body[data-page="client-access"] > footer {
  background: #070f1a;
  border-top-color: var(--line);
}
.footer-bottom,
.approach-grid > div,
.process-list li,
.portal-note {
  border-color: var(--line);
}

.portfolio-open,
.installation-portfolio .portfolio-open,
.project-photos img,
.gallery-grid figure,
.photo-viewer,
.engineering-art {
  background-color: var(--navy-panel);
  border-color: #c3a66b50;
}
.engineering-art figcaption { background: #0c1826; }
.engineering-callout { border-color: var(--line); }
.design-plan a > span { background: #0c1826; border-color: #c3a66b50; }
.design-plan a:hover > span { background: #142436; }

.plan-art { background: #0c1826; border-color: #c3a66b50; }
.plan-art .plan-window,
.plan-art .plan-door { background: #0c1826; }
.plan-art .plan-door { border-right-color: #0c1826; }
.plan-art .plan-cabinet,
.plan-art .plan-island,
.plan-art[data-room="exterior"] .plan-outline {
  background: #1a2a3b;
  border-color: #b69c66;
}
.plan-art[data-room="exterior"] .cabinet-b {
  background: repeating-linear-gradient(90deg, #142436 0, #142436 40px, #a88e5c 40px, #a88e5c 75px);
}

.certification {
  background-image: linear-gradient(110deg, #0d1928f5, #08111ce8),
                    url('install-refresh/assets/gas-detail.avif');
  border-color: var(--line);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline-color: #dfc995;
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover { border-color: #c3a66b90; }
}

/* The mnemonic stays readable beside the business phone number. */
.contact-phone { flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.contact-phone .phone-label { font: 500 11px/1.4 var(--sans); letter-spacing: .4px; white-space: nowrap; }
.contact-phone-row .contact-phone { min-width: 0; }