:root {
  --brand-orange: #e8821e;
  --brand-orange-dark: #c96a0e;
  --brand-black: #1e1c1a;
  --brand-cream: #f5f3ec;
  --brand-text: #1e1c1a;
  --brand-muted: #5c574f;
  --brand-on-orange: #1e1c1a; /* dark text on orange for WCAG AA */
  --brand-secondary-line: #4a4743;
}

body {
  color: var(--brand-text);
  background-color: #fff;
}

/* ---------- Navbar / footer / dark bands ---------- */

.navbar.bg-dark,
footer.bg-dark,
header.bg-dark,
section.bg-dark {
  background-color: var(--brand-black) !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--brand-orange) !important;
}

.navbar-brand {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.navbar-brand-logo {
  display: block;
  height: 40px;
  width: auto;
  border-radius: 8px;
  background: var(--brand-cream);
}

.footer-logo {
  display: block;
  height: 28px;
  width: auto;
  margin: 0 auto 0.85rem;
  border-radius: 6px;
  background: var(--brand-cream);
}

footer a.link-light {
  color: #f0ebe3 !important;
}

footer a.link-light:hover {
  color: var(--brand-orange) !important;
}

/* ---------- Buttons ---------- */

.btn-primary {
  --bs-btn-color: var(--brand-on-orange);
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-color: var(--brand-on-orange);
  --bs-btn-hover-bg: var(--brand-orange-dark);
  --bs-btn-hover-border-color: var(--brand-orange-dark);
  --bs-btn-focus-shadow-rgb: 232, 130, 30;
  --bs-btn-active-color: var(--brand-on-orange);
  --bs-btn-active-bg: var(--brand-orange-dark);
  --bs-btn-active-border-color: var(--brand-orange-dark);
  --bs-btn-disabled-color: var(--brand-on-orange);
  --bs-btn-disabled-bg: var(--brand-orange);
  --bs-btn-disabled-border-color: var(--brand-orange);
  color: var(--brand-on-orange) !important;
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: var(--brand-on-orange) !important;
  background-color: var(--brand-orange-dark) !important;
  border-color: var(--brand-orange-dark) !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  color: var(--brand-on-orange) !important;
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
}

/* ---------- Feature tiles / primary accents ---------- */

.feature.bg-primary,
.bg-primary {
  background-color: var(--brand-orange) !important;
}

.feature.bg-gradient {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12),
    rgba(0, 0, 0, 0.08)
  ) !important;
}

.text-primary {
  color: var(--brand-orange) !important;
}

/* ---------- Links (not paragraph body text) ---------- */

a:not(.btn):not(.nav-link):not(.navbar-brand):not(.link-light) {
  color: var(--brand-orange);
}

a:not(.btn):not(.nav-link):not(.navbar-brand):not(.link-light):hover {
  color: var(--brand-orange-dark);
}

p,
.lead,
li,
.form-label,
.form-text,
.text-muted {
  color: inherit;
}

p a,
.lead a,
li a,
.card-body a:not(.btn),
.fallback-note a {
  color: var(--brand-orange);
}

p a:hover,
.lead a:hover,
li a:hover,
.card-body a:not(.btn):hover,
.fallback-note a:hover {
  color: var(--brand-orange-dark);
}

/* Keep long-form copy dark on cream/white */
.lead,
p,
.card-body p,
.card-body li,
section p,
section li {
  color: var(--brand-text);
}

.text-muted,
.form-text,
.small.text-muted {
  color: var(--brand-muted) !important;
}

header.bg-dark .lead,
header.bg-dark p,
section.bg-dark .lead,
section.bg-dark p,
header.bg-dark .text-white-50 {
  color: rgba(245, 243, 236, 0.78) !important;
}

header.bg-dark h1,
section.bg-dark h2 {
  color: #fff !important;
}

/* ---------- Light / cream sections ---------- */

.bg-light {
  background-color: var(--brand-cream) !important;
}

.card.bg-light {
  background-color: var(--brand-cream) !important;
}

/* ---------- Compact “no-scroll” vertical rhythm ---------- */
/*
  Target ~1080p laptops: halve hero and section vertical padding vs Bootstrap
  py-5 (3rem), and trim heading/lead margins ~30%. Prefer vh so scale follows
  the viewport. Overrides theme utility classes without editing Bootstrap CSS.
*/

header.bg-dark.page-hero,
header.bg-dark {
  /* Was effectively py-5 (3rem ≈ 48px); ~50% via vh + smaller rem floor */
  padding-top: max(2.5vh, 0.85rem) !important;
  padding-bottom: max(2.5vh, 0.85rem) !important;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

header.bg-dark .text-center.my-5 {
  margin-top: 1.05rem !important; /* was my-5 = 3rem → ~35% */
  margin-bottom: 1.05rem !important;
}

header.bg-dark .text-center.my-4 {
  margin-top: 0.7rem !important; /* was my-4 = 1.5rem → ~50% */
  margin-bottom: 0.7rem !important;
}

header.bg-dark h1.display-5 {
  margin-bottom: 0.35rem !important; /* was mb-2 ≈ 0.5rem → −30% */
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  line-height: 1.2;
}

header.bg-dark .lead {
  margin-bottom: 1rem !important; /* was often mb-4 = 1.5rem → −33% */
  font-size: 1.05rem;
  line-height: 1.45;
}

header.bg-dark .lead.mb-0 {
  margin-bottom: 0 !important;
}

header.bg-dark .lead.mb-4 {
  margin-bottom: 1rem !important;
}

/* Major content bands after the hero (white / cream / dark) */
body > section.py-5,
body > section {
  padding-top: 1.5rem !important; /* half of Bootstrap py-5 (3rem) */
  padding-bottom: 1.5rem !important;
}

body > section .container.my-5,
body > section .container.px-5.my-5 {
  margin-top: 1.05rem !important; /* was my-5 = 3rem → ~35% */
  margin-bottom: 1.05rem !important;
}

body > section h1,
body > section h2.fw-bolder,
body > section h2.h4,
body > section .h4.fw-bolder {
  margin-top: 0;
  margin-bottom: 0.5rem; /* ~30% tighter than typical 0.7–1rem stacks */
}

body > section .lead {
  margin-bottom: 1rem;
  font-size: 1.05rem;
  line-height: 1.45;
}

body > section .lead.mb-4 {
  margin-bottom: 1rem !important;
}

body > section .mb-5 {
  margin-bottom: 1.5rem !important; /* half of mb-5 (3rem) */
}

body > section .mb-4 {
  margin-bottom: 1.05rem !important; /* −30% of 1.5rem */
}

body > section .text-center.mb-5 {
  margin-bottom: 1.5rem !important;
}

body > section .text-center.my-4 {
  margin-top: 0.85rem !important;
  margin-bottom: 0.85rem !important;
}

body > section .card-body.p-lg-5 {
  padding: 1.25rem !important;
}

@media (min-width: 992px) {
  body > section .card-body.p-lg-5 {
    padding: 1.5rem !important; /* was p-lg-5 = 3rem → 50% */
  }
}

/* Compact dark CTA band on home */
body > section.bg-dark.py-5 {
  padding-top: 1.35rem !important;
  padding-bottom: 1.35rem !important;
}

/* Footer: keep present but shorter so page body fits first view */
footer.py-5.bg-dark,
footer.py-4.bg-dark {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.footer-logo {
  margin-bottom: 0.55rem;
}

/* Slightly smaller feature tiles so service/contact blocks fit the viewport */
.feature {
  height: 3rem;
  width: 3rem;
  font-size: 1.5rem;
}