/* ===== RESET ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== BRAND VARIABLES ===== */
:root {
  --black: #0a0a0a;
  --gold: #C8A951;
  --gold-hover: #A68A3E;
  --gray: #4a4a4a;
  --concrete-gray: #8b8b8b;
  --light-bg: #f5f5f3;
  --white: #ffffff;
  --red: #c0392b;
  --green: #27ae60;
}

/* ===== BODY ===== */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: #0a0a0a;
  /* Site is a deliberately dark brand. Declare it so browsers render UA chrome
     (scrollbars, form controls, no white flash) correctly in BOTH light and
     dark OS settings, instead of assuming light and mis-rendering. */
  color-scheme: dark;
}

/* ===== DARK/LIGHT BROWSER-SETTING HARDENING =====
   The document is dark; the form fields are intentionally light surfaces, so
   they opt back into the light scheme locally and keep autofill/caret on-brand. */
input, textarea, select { color-scheme: light; }

.qual-input:-webkit-autofill,
.qual-input:-webkit-autofill:hover,
.qual-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--black);
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  caret-color: var(--black);
}

/* Dark, on-brand scrollbar (Chromium/WebKit) regardless of OS setting */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
* { scrollbar-color: #2a2a2a #0a0a0a; }  /* Firefox */

body {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: var(--gray);
  background-color: transparent;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ===== SKIP NAV (accessibility) ===== */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--black);
  padding: 0.75rem 1.5rem;
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s;
}

.skip-nav:focus {
  top: 0;
}

/* ===== NAVIGATION ===== */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--black);
  border-bottom: 2px solid var(--gold);
  transition: background 0.3s;
}

.site-nav.transparent {
  background: transparent;
  border-bottom-color: transparent;
}

.site-nav.scrolled {
  background: var(--black);
  border-bottom-color: var(--gold);
}

.nav-inner {
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2.5rem;
}

.nav-logo img {
  height: 112px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

/* Desktop: spread the menu across the header so it fills the space
   instead of bunching at the far right with a big empty middle. */
@media (min-width: 769px) {
  .nav-links {
    flex: 1;
    justify-content: space-between;
    gap: 2rem;
    margin-left: clamp(2.5rem, 5vw, 5rem);
  }
}

.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--gold);
}

.nav-links a.active {
  color: var(--gold);
}

.nav-cta {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--gold);
  color: var(--black) !important;
  border-radius: 4px;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  transition: background 0.3s, transform 0.2s;
}

.nav-cta:hover {
  background: var(--gold-hover);
  color: var(--black) !important;
  transform: translateY(-1px);
}

.nav-links a.nav-phone {
  color: var(--gold);
  text-transform: none;
  letter-spacing: 0.3px;
  font-weight: 700;
  white-space: nowrap;
}

.nav-links a.nav-phone:hover {
  color: var(--white);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== CTA BUTTONS ===== */
.cta-button {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: var(--gold);
  color: var(--black);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s;
}

.cta-button:hover {
  background-color: var(--gold-hover);
  transform: translateY(-2px);
}

.cta-outline {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.cta-outline:hover {
  background: var(--white);
  color: var(--black);
}

/* ===== SECTION TAG (reusable) ===== */
.section-tag {
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 1rem;
  text-align: center;
}

/* ===== HERO (full viewport - home) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  overflow: visible;
  padding-top: 60px;
}

.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

.hero-content {
  padding: 2rem;
  max-width: 850px;
}

.hero-logo {
  width: 280px;
  height: auto;
  margin-bottom: 0.25rem;
}

.hero h1 {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  letter-spacing: 1px;
}

.hero-sub {
  font-size: 1.1rem;
  color: #d8d8d8;
  margin: 0 auto 2.5rem;
  max-width: 640px;
  line-height: 1.55;
  letter-spacing: 0.2px;
  font-weight: 500;
}

.hero-ctas {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hero-secondary-link {
  color: #e8e8e8;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 165, 52, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.hero-secondary-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ===== PAGE HERO (short - inner pages) ===== */
.page-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  padding-top: 150px;
  padding-bottom: 2rem;
}

.page-hero h1 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 0.75rem;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--concrete-gray);
}

.breadcrumb a {
  color: var(--gold);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--white);
}

/* ===== STATS BAR ===== */
.stats-bar {
  display: flex;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}

.stat {
  flex: 1;
  max-width: 250px;
  text-align: center;
  padding: 1.5rem 1rem;
  border-right: 1px solid #ddd;
}

.stat:last-child {
  border-right: none;
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #555;
  margin-top: 0.25rem;
}

/* ===== SERVICES OVERVIEW (home page - 2 cards) ===== */
.services-overview {
  padding: 5rem 2rem;
  background: rgba(12, 12, 12, 0.35);
  text-align: center;
}

.services-overview-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.services-overview h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 1rem;
}

.services-overview-sub {
  font-size: 1.05rem;
  color: #bbb;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.division-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.division-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
  border-radius: 14px;
  padding: 2.5rem 2rem;
  text-align: center;
  border: 1px solid #c0bdb8;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 4px 0 0 #b0aca6,
    0 7px 0 0 #9e9a94,
    0 12px 24px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
}

.division-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 80%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.8) 44%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 56%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 0.6s ease;
  z-index: 1;
}

.division-card:hover::after {
  left: 120%;
}

.division-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 6px 0 0 #a8a49e,
    0 10px 0 0 #969289,
    0 20px 40px rgba(0, 0, 0, 0.16),
    0 6px 16px rgba(212, 165, 52, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(0, 0, 0, 0.05);
  border-color: var(--gold);
}

.division-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--gold);
}

.division-icon-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.division-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.division-card p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.division-card a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.division-card a:hover {
  color: var(--gold-hover);
}

/* ===== PORTFOLIO GRID ===== */
.portfolio-section {
  padding: 5rem 2rem;
  background: rgba(10, 10, 10, 0.35);
  text-align: center;
}

.portfolio-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.portfolio-section h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 3rem;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.portfolio-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.portfolio-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
}

.portfolio-item:hover .portfolio-label {
  opacity: 1;
  transform: translateY(0);
}

/* ===== TRUST / ABOUT ===== */
.trust {
  padding: 5rem 2rem;
  background: rgba(12, 12, 12, 0.35);
  text-align: center;
}

.trust-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.trust h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 1rem;
}

.trust-intro {
  font-size: 1.05rem;
  color: #bbb;
  max-width: 650px;
  margin: 0 auto 3rem;
  line-height: 1.7;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.trust-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
  padding: 2rem 1.5rem;
  border-radius: 14px;
  text-align: center;
  border: 1px solid #c0bdb8;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 4px 0 0 #b0aca6,
    0 7px 0 0 #9e9a94,
    0 12px 24px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trust-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 80%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.8) 44%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 56%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 0.6s ease;
  z-index: 1;
}

.trust-card:hover::after {
  left: 120%;
}

.trust-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 6px 0 0 #ded8d1,
    0 10px 0 0 #d0cac3,
    0 20px 40px rgba(0, 0, 0, 0.14),
    0 6px 16px rgba(212, 165, 52, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -3px 8px rgba(0, 0, 0, 0.03);
}

.trust-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--gold);
}

.trust-icon-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.trust-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.trust-card p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
}

/* ===== MARKETS WE SERVE ===== */
.markets {
  padding: 5rem 2rem;
  position: relative;
}
.markets-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.markets-inner h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--white);
  margin: 0.5rem 0 0.75rem;
}
.markets-sub {
  color: #b8b8b8;
  max-width: 680px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}
.markets-grid {
  margin-top: 1rem;
}
.markets-grid .trust-card {
  text-align: left;
}
.markets-grid .trust-card h3 {
  font-size: 1.05rem;
}

/* ===== SELF-PERFORM CAPABILITIES LIST ===== */
.selfperform-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 2rem;
  max-width: 760px;
  margin: 2rem auto 0;
}
.selfperform-grid li {
  position: relative;
  padding-left: 2rem;
  color: #dddddd;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}
.selfperform-grid li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 900;
}
@media (max-width: 560px) {
  .selfperform-grid { grid-template-columns: 1fr; }
}

/* ===== CTA BANNER ===== */
.cta-banner {
  padding: 5rem 2rem;
  background: rgba(10, 10, 10, 0.35);
  text-align: center;
  color: var(--white);
}

.cta-banner-inner {
  max-width: 650px;
  margin: 0 auto;
}

.cta-banner h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.cta-banner > p,
.cta-banner-inner > p {
  font-size: 1.05rem;
  color: #ccc;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.cta-banner-phone {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #888;
}

.cta-banner-phone a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
}

.cta-banner-phone a:hover {
  color: var(--white);
}

/* ===== SERVICES PAGE ===== */
.service-division {
  padding: 5rem 2rem;
}

.service-division:nth-child(odd) {
  background: rgba(10, 10, 10, 0.35);
}

.service-division:nth-child(even) {
  background: rgba(15, 15, 15, 0.30);
}

.service-division-inner {
  max-width: 900px;
  margin: 0 auto;
}

.service-division h2 {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 0.75rem;
  text-align: center;
}

.service-division-intro {
  font-size: 1.05rem;
  color: #bbb;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
  line-height: 1.7;
}

.service-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.service-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
  padding: 1.75rem 1.5rem;
  border-radius: 14px;
  border: 1px solid #c0bdb8;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 4px 0 0 #b0aca6,
    0 7px 0 0 #9e9a94,
    0 12px 24px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 80%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.8) 44%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 56%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 0.6s ease;
  z-index: 1;
}

.service-card:hover::after {
  left: 120%;
}

.service-card:hover {
  border-color: var(--gold);
  transform: translateY(-8px);
  box-shadow:
    0 6px 0 0 #ded8d1,
    0 10px 0 0 #d0cac3,
    0 20px 40px rgba(0, 0, 0, 0.14),
    0 6px 16px rgba(212, 165, 52, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -3px 8px rgba(0, 0, 0, 0.03);
}

.service-card-icon {
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.service-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.service-card p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
}

.service-cta {
  text-align: center;
  margin-top: 1rem;
}

/* Why both section */
.why-both {
  padding: 5rem 2rem;
  background: rgba(10, 10, 10, 0.30);
  color: var(--white);
  text-align: center;
}

.why-both-inner {
  max-width: 700px;
  margin: 0 auto;
}

.why-both h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
}

.why-both-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  text-align: left;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.why-both-benefits li {
  padding: 0.75rem 0;
  border-bottom: 1px solid #333;
  font-size: 1rem;
  color: #ccc;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.why-both-benefits li:last-child {
  border-bottom: none;
}

.why-both-check {
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== FAQ PAGE ===== */
.faq-section {
  padding: 5rem 2rem;
  background: rgba(10, 10, 10, 0.35);
}

.faq-section-alt {
  background: rgba(10, 10, 10, 0.55);
}

.faq-inner {
  max-width: 800px;
  margin: 0 auto;
}

.faq-inner .section-tag {
  text-align: center;
}

.faq-inner h2 {
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  text-align: center;
  margin-bottom: 2.5rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background:
    url('marble/light-gray-concrete-wall_53876-89526.jpg') center/cover,
    linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 4px 0 0 #b0aca6,
    0 7px 0 0 #9e9a94,
    0 12px 30px rgba(0, 0, 0, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 0 #b0aca6,
    0 9px 0 0 #9e9a94,
    0 16px 36px rgba(0, 0, 0, 0.25),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(0, 0, 0, 0.08);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #222;
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: #6b5010;
}

.faq-toggle {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  line-height: 1;
  width: 1.5rem;
  text-align: center;
}

.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 1.5rem;
  background:
    url('marble/dark-rough-stucco-texture_1194-6710.jpg') center/cover,
    linear-gradient(160deg, #1e1c1a 0%, #141210 50%, #1a1816 100%);
  border-top: 2px solid rgba(212, 165, 52, 0.3);
}

.faq-item.open .faq-answer {
  max-height: 600px;
  padding: 0.75rem 1.5rem 1.5rem;
}

.faq-answer p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #ccc;
  margin-bottom: 0.75rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.faq-answer li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #ccc;
  margin-bottom: 0.4rem;
}

.faq-answer a {
  color: var(--gold);
  text-decoration: underline;
  font-weight: 600;
}

.faq-answer a:hover {
  color: #f0c850;
}

.faq-answer strong {
  color: #fff;
}

/* ===== CONTACT PAGE ===== */
.contact-section {
  padding: 5rem 2rem;
  background: rgba(10, 10, 10, 0.35);
}

.contact-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-info h2 {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 2rem;
}

.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.contact-item-icon {
  font-size: 1.25rem;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Tint black outline icons to gold */
.contact-icon-dark {
  filter: invert(69%) sepia(58%) saturate(600%) hue-rotate(7deg) brightness(93%) contrast(89%);
}

.contact-item h3 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.contact-item p {
  font-size: 0.9rem;
  color: #bbb;
  line-height: 1.5;
}

.contact-item a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}

.contact-item a:hover {
  color: var(--gold-hover);
}

.contact-cta-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
  border-radius: 14px;
  padding: 2.5rem 2rem;
  text-align: center;
  border: 1px solid #c0bdb8;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 4px 0 0 #b0aca6,
    0 7px 0 0 #9e9a94,
    0 12px 24px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(0, 0, 0, 0.05);
}

.contact-cta-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 80%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.8) 44%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 56%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 0.6s ease;
  z-index: 1;
}

.contact-cta-card:hover::after {
  left: 120%;
}

.contact-cta-card h2 {
  font-size: 1.4rem;
  font-weight: 900;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.contact-cta-card p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.contact-cta-phone {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #666;
}

.contact-cta-phone a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
}

/* Service area */
.service-area {
  padding: 4rem 2rem;
  background: rgba(12, 12, 12, 0.35);
  text-align: center;
}

.service-area-inner {
  max-width: 700px;
  margin: 0 auto;
}

.service-area h2 {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 1rem;
}

.service-area p {
  font-size: 1rem;
  color: #bbb;
  line-height: 1.8;
}

/* ===== FOOTER ===== */
footer {
  background-color: rgba(10, 10, 10, 0.92);
  color: #aaa;
}

.footer-content {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 1rem 2.5rem;
  padding: 0.85rem 2.5rem 0.7rem;
  max-width: none;
  margin: 0;
  align-items: center;
  text-align: left;
}

.footer-brand {
  max-width: 320px;
}

.footer-logo-img {
  width: 112px;
  height: auto;
  margin-bottom: 0.35rem;
}

.footer-tagline {
  font-size: 0.8rem;
  color: var(--concrete-gray);
  margin-bottom: 0.3rem;
  max-width: 30ch;
}

.footer-location {
  font-size: 0.8rem;
}

.footer-heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.35rem;
}

.footer-links a,
.footer-contact-link {
  color: #ccc;
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.5;
  transition: color 0.3s;
}

.footer-links a:hover,
.footer-contact-link:hover {
  color: var(--gold);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 1.5rem;
  padding: 0.55rem 2.5rem;
  border-top: 1px solid #333;
  font-size: 0.75rem;
  max-width: none;
  margin: 0;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom a {
  color: var(--gold);
  text-decoration: none;
}

/* ===== 3D EFFECTS ===== */

/* Perspective containers */
.division-cards,
.trust-grid,
.portfolio-grid,
.service-cards {
  perspective: 1200px;
}

/* Tilt card base */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}

/* 3D depth on portfolio hover */
.portfolio-item.tilt-card:hover img {
  transform: scale(1.05) translateZ(20px);
}

.portfolio-item.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Enhanced depth shadows for 3D feel */
.division-card.tilt-card:hover {
  box-shadow:
    0 6px 0 0 #a8a49e,
    0 10px 0 0 #969289,
    0 24px 50px rgba(0, 0, 0, 0.18),
    0 0 0 1px var(--gold),
    0 6px 20px rgba(212, 165, 52, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.trust-card.tilt-card:hover {
  box-shadow:
    0 6px 0 0 #a8a49e,
    0 10px 0 0 #969289,
    0 24px 50px rgba(0, 0, 0, 0.18),
    0 6px 20px rgba(212, 165, 52, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

/* ===== 3D CARD FLIP (service cards on services page) ===== */
.service-card-flip {
  perspective: 1000px;
  height: 280px;
}

.service-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-flip:hover .service-card-flip-inner,
.service-card-flip.flipped .service-card-flip-inner {
  transform: rotateY(180deg);
}

.service-card-front,
.service-card-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  border: 1px solid #c0bdb8;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
  box-shadow:
    0 4px 0 0 #b0aca6,
    0 7px 0 0 #9e9a94,
    0 12px 24px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(0, 0, 0, 0.05);
}

.service-card-front::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 80%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.8) 44%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 56%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 0.6s ease;
  z-index: 1;
}

.service-card-flip:hover .service-card-front::after {
  left: 120%;
}

.service-card-front {
  z-index: 3;
}

/* Service card carousel (replaces emoji icons) */
.card-carousel {
  position: relative;
  width: calc(100% + 3rem);
  height: 110px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  margin: -1.75rem -1.5rem 0.75rem -1.5rem;
  flex-shrink: 0;
}

.carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.carousel-img.active {
  opacity: 1;
}

.service-card-front .service-card-icon {
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.service-card-front h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.service-card-front p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
}

.service-card-back {
  transform: rotateY(180deg);
  z-index: 1;
  background: linear-gradient(160deg, #1e1c1a 0%, #141210 30%, #1a1816 55%, #151310 80%, #1c1a18 100%);
  border: 1px solid rgba(212, 165, 52, 0.4);
  border-top: 2px solid rgba(212, 165, 52, 0.5);
  box-shadow:
    0 4px 0 0 #0c0a08,
    0 7px 0 0 #060504,
    0 12px 24px rgba(0, 0, 0, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.06),
    inset 0 -3px 8px rgba(0, 0, 0, 0.3);
  justify-content: center;
  align-items: center;
  text-align: center;
}

.service-card-back h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.service-card-back p {
  font-size: 0.9rem;
  color: #bbb;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.service-card-back .flip-cta {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: var(--gold);
  color: var(--black);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(212, 165, 52, 0.3);
  border-radius: 4px;
  transition: background 0.3s;
}

.service-card-back .flip-cta:hover {
  background: var(--gold-hover);
}

/* ===== CONCRETE TEXTURES — real concrete photos ===== */
/* 3 light gray concrete textures for card fronts, rotated via nth-child */

/* --- Texture A: Light Gray Concrete Wall --- */
.division-card:nth-child(odd),
.trust-card:nth-child(6n+1),
.service-card:nth-child(odd),
.service-card-flip:nth-child(6n+1) .service-card-front {
  background: url('marble/light-gray-concrete-wall_53876-89526.jpg') center/cover, linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
}

.division-card:nth-child(even),
.trust-card:nth-child(6n+2),
.service-card:nth-child(even),
.service-card-flip:nth-child(6n+2) .service-card-front {
  background: url('marble/cement-texture_1194-6082.jpg') center/cover, linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
}

/* --- Texture B: Smooth Cement --- */
.trust-card:nth-child(6n+3),
.service-card-flip:nth-child(6n+3) .service-card-front {
  background: url('marble/cement-texture_1194-6040(1).jpg') center/cover, linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
}

.trust-card:nth-child(6n+4),
.service-card-flip:nth-child(6n+4) .service-card-front {
  background: url('marble/cement-texture_1194-6018(1).jpg') center/cover, linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
}

/* --- Texture C: Weathered Concrete --- */
.trust-card:nth-child(6n+5),
.service-card-flip:nth-child(6n+5) .service-card-front {
  background: url('marble/cement-texture_1194-6025.jpg') center/cover, linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
}

.trust-card:nth-child(6n+6),
.service-card-flip:nth-child(6n+6) .service-card-front {
  background: url('marble/cement-texture_1194-6068.jpg') center/cover, linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%);
}

/* --- Contact CTA card — light concrete texture --- */
.contact-cta-card {
  background: url('marble/light-gray-concrete-wall_53876-89526.jpg') center/cover, linear-gradient(160deg, #e8e6e3 0%, #d8d6d3 50%, #e0dedb 100%) !important;
  border: 1px solid #c0bdb8 !important;
  border-top: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.contact-cta-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 90%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.95) 42%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 58%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 0.7s ease;
  z-index: 1;
}

.contact-cta-card:hover::after {
  left: 130%;
}

.contact-cta-card:hover {
  border-color: rgba(212, 165, 52, 0.4) !important;
  box-shadow:
    0 6px 0 0 #a8a49e,
    0 10px 0 0 #969289,
    0 20px 40px rgba(0, 0, 0, 0.16),
    0 6px 16px rgba(212, 165, 52, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(0, 0, 0, 0.05);
}

/* --- Dark concrete backs (odd cards) --- */
.service-card-flip:nth-child(odd) .service-card-back {
  background: url('marble/dark-rough-stucco-texture_1194-6710.jpg') center/cover, linear-gradient(160deg, #1e1c1a 0%, #141210 50%, #1a1816 100%);
}

/* --- Dark concrete backs (even cards) --- */
.service-card-flip:nth-child(even) .service-card-back {
  background: url('marble/cement-black-texture_1194-7655.jpg') center/cover, linear-gradient(160deg, #1e1c1a 0%, #141210 50%, #1a1816 100%);
}

/* Flip hint indicator */
.flip-hint {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.service-card-flip:hover .flip-hint {
  opacity: 0;
}

/* ===== HERO BACKGROUND ===== */
/* Contained in .hero (position:absolute), so the image scrolls away with the
   section instead of staying pinned. The old fixed background + JS parallax
   drift made the hero visually overlap the section below during scroll. */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
}

/* Sections after hero must sit ABOVE the fixed .hero-overlay (z-index:1), or its
   dark gradient paints over them and dims them. .markets was omitted originally,
   which dimmed the How We Deliver + Markets We Serve sections — added here. */
.page-hero,
.stats-bar,
.services-overview,
.markets,
.portfolio-section,
.trust,
.cta-banner,
.service-division,
.why-both,
.contact-section,
.service-area,
.faq-section,
footer {
  position: relative;
  z-index: 2;
}

/* Parallax background elements */
.parallax-bg {
  will-change: transform;
}

/* ===== 3D BACKGROUND EFFECTS ===== */

/* Floating 3D shapes container */
.bg-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-shape {
  position: absolute;
  border: 2px solid rgba(212, 165, 52, 0.08);
  border-radius: 4px;
  transform-style: preserve-3d;
  animation: floatShape 20s ease-in-out infinite;
  will-change: transform;
}

.bg-shape:nth-child(1) {
  width: 80px;
  height: 80px;
  top: 15%;
  left: 8%;
  animation-delay: 0s;
  animation-duration: 18s;
  transform: rotateX(45deg) rotateY(30deg);
}

.bg-shape:nth-child(2) {
  width: 120px;
  height: 120px;
  top: 60%;
  right: 5%;
  animation-delay: -4s;
  animation-duration: 22s;
  transform: rotateX(-30deg) rotateY(60deg);
  border-color: rgba(212, 165, 52, 0.05);
}

.bg-shape:nth-child(3) {
  width: 60px;
  height: 60px;
  bottom: 20%;
  left: 15%;
  animation-delay: -8s;
  animation-duration: 16s;
  transform: rotateX(60deg) rotateY(-20deg);
}

.bg-shape:nth-child(4) {
  width: 100px;
  height: 100px;
  top: 30%;
  right: 12%;
  animation-delay: -12s;
  animation-duration: 24s;
  border-color: rgba(212, 165, 52, 0.06);
  transform: rotateX(-45deg) rotateY(45deg);
}

.bg-shape:nth-child(5) {
  width: 50px;
  height: 50px;
  top: 75%;
  left: 40%;
  animation-delay: -6s;
  animation-duration: 20s;
  border-radius: 50%;
  transform: rotateX(30deg) rotateZ(45deg);
}

.bg-shape:nth-child(6) {
  width: 90px;
  height: 90px;
  top: 10%;
  right: 30%;
  animation-delay: -15s;
  animation-duration: 25s;
  border-color: rgba(212, 165, 52, 0.04);
  transform: rotateY(60deg) rotateZ(30deg);
}

@keyframes floatShape {
  0%, 100% {
    transform: rotateX(var(--rx, 45deg)) rotateY(var(--ry, 30deg)) translateZ(0) translateY(0);
    opacity: 0.6;
  }
  25% {
    transform: rotateX(calc(var(--rx, 45deg) + 20deg)) rotateY(calc(var(--ry, 30deg) - 15deg)) translateZ(30px) translateY(-15px);
    opacity: 1;
  }
  50% {
    transform: rotateX(calc(var(--rx, 45deg) - 10deg)) rotateY(calc(var(--ry, 30deg) + 25deg)) translateZ(15px) translateY(10px);
    opacity: 0.8;
  }
  75% {
    transform: rotateX(calc(var(--rx, 45deg) + 15deg)) rotateY(calc(var(--ry, 30deg) + 10deg)) translateZ(40px) translateY(-8px);
    opacity: 0.7;
  }
}

/* 3D grid perspective lines on dark sections */
.cta-banner,
.why-both {
  overflow: hidden;
}

.cta-banner::before,
.why-both::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(212, 165, 52, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(212, 165, 52, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center top;
  pointer-events: none;
  z-index: 0;
}

.cta-banner > *,
.why-both > * {
  position: relative;
  z-index: 1;
}

/* Depth gradient on light sections */
.services-overview,
.portfolio-section,
.trust,
.service-division {
  overflow: hidden;
}

.services-overview::after,
.trust::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(212, 165, 52, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.services-overview > *,
.portfolio-section > *,
.trust > *,
.service-division > * {
  position: relative;
  z-index: 1;
}

/* ===== SCROLL REVEAL ===== */
/* Progressive enhancement: only hide-then-reveal when JS is active.
   Without JS (or for non-executing crawlers), content is visible by default. */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== RESPONSIVE: 1024px ===== */
@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Hide the header phone in the tablet range where the horizontal nav still shows
   but space is tight (it stays in the mobile hamburger menu below 769px, and in
   the desktop nav at 1025px+). Prevents the nav from overflowing/clipping the CTA. */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-phone-li { display: none; }
}

/* ===== RESPONSIVE: 768px ===== */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--black);
    flex-direction: column;
    padding: 1.5rem 2rem;
    gap: 1rem;
    border-bottom: 2px solid var(--gold);
    display: none;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-cta {
    text-align: center;
    width: 100%;
    padding: 0.75rem;
  }

  .nav-logo img {
    height: 88px;
  }

  .hero-logo {
    width: 200px;
  }

  .hero h1 {
    font-size: 1.85rem;
    line-height: 1.2;
  }

  .hero-sub {
    font-size: 0.98rem;
    letter-spacing: 0.2px;
    padding: 0 0.5rem;
  }

  .hero-secondary-link {
    font-size: 0.9rem;
  }

  .bg-shapes {
    display: none;
  }

  .page-hero h1 {
    font-size: 1.8rem;
  }

  .stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .stat {
    max-width: none;
  }

  .stat:nth-child(2) {
    border-right: none;
  }

  .stat:nth-child(1),
  .stat:nth-child(2) {
    border-bottom: 1px solid #333;
  }

  .division-cards {
    grid-template-columns: 1fr;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-cards {
    grid-template-columns: 1fr;
  }

  .service-card-flip {
    height: 250px;
  }

  .contact-inner {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
    padding: 1.5rem 1.5rem 1rem;
    text-align: left;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .services-overview h2,
  .portfolio-section h2,
  .trust h2,
  .cta-banner h2,
  .service-division h2,
  .faq-inner h2 {
    font-size: 1.6rem;
  }

  .faq-question {
    font-size: 0.9rem;
    padding: 1rem 1.25rem;
  }

  .faq-answer p,
  .faq-answer li {
    font-size: 0.9rem;
  }

  .cta-button {
    font-size: 0.95rem;
    padding: 0.9rem 1.5rem;
  }
}

/* ===== RESPONSIVE: 480px ===== */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.5rem;
  }

  .hero-logo {
    width: 170px;
    margin-bottom: 0.75rem;
  }

  .hero-sub {
    font-size: 0.9rem;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }

  .hero-ctas .cta-button {
    width: 100%;
    text-align: center;
  }

  .page-hero h1 {
    font-size: 1.5rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.65rem;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .services-overview,
  .portfolio-section,
  .trust,
  .cta-banner,
  .service-division,
  .contact-section,
  .service-area,
  .faq-section {
    padding: 3rem 1.25rem;
  }

  .faq-inner h2 {
    font-size: 1.2rem;
  }

  .division-card {
    padding: 2rem 1.5rem;
  }

  .cta-button {
    font-size: 0.9rem;
    padding: 0.85rem 1.25rem;
  }

  .footer-logo-img {
    width: 130px;
  }

  .contact-cta-card {
    padding: 2rem 1.25rem;
  }
}

/* ===== EXTRA SMALL: 360px ===== */
@media (max-width: 360px) {
  .hero h1 {
    font-size: 1.3rem;
  }

  .hero-logo {
    width: 120px;
  }

  .cta-button {
    font-size: 0.85rem;
    padding: 0.8rem 1rem;
  }

  .stat-number {
    font-size: 1.3rem;
  }

  .services-overview h2,
  .portfolio-section h2,
  .trust h2,
  .cta-banner h2,
  .service-division h2,
  .why-both h2 {
    font-size: 1.2rem;
  }
}

/* ===== LEAD QUALIFICATION MODAL ===== */
.qual-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.qual-overlay.active {
  display: flex;
}

.qual-modal {
  background: var(--white);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: qualSlideUp 0.35s ease-out;
}

@keyframes qualSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.qual-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--gray);
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}

.qual-close:hover {
  color: var(--black);
}

.qual-header {
  background: var(--black);
  padding: 1.5rem 2rem;
  border-radius: 12px 12px 0 0;
  text-align: center;
}

.qual-header h2 {
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.qual-header p {
  color: var(--concrete-gray);
  font-size: 0.85rem;
}

/* Progress indicator */
.qual-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1.25rem 2rem 0.5rem;
}

.qual-progress-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e0e0e0;
  color: var(--gray);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
}

.qual-progress-step.active {
  background: var(--gold);
  color: var(--black);
}

.qual-progress-step.completed {
  background: var(--green);
  color: var(--white);
}

.qual-progress-line {
  height: 3px;
  width: 60px;
  background: #e0e0e0;
  transition: background 0.3s;
}

.qual-progress-line.active {
  background: var(--green);
}

/* Steps container */
.qual-body {
  padding: 1.5rem 2rem 2rem;
}

.qual-step {
  display: none;
}

.qual-step.active {
  display: block;
  animation: qualFadeIn 0.3s ease-out;
}

@keyframes qualFadeIn {
  from { opacity: 0; transform: translateX(15px); }
  to { opacity: 1; transform: translateX(0); }
}

.qual-step-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.qual-step h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 0.4rem;
}

.qual-step > p {
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 1.25rem;
}

/* Service type selection grid */
.qual-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.qual-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray);
  background: var(--white);
}

.qual-option:hover {
  border-color: var(--gold);
  background: #fffdf5;
}

.qual-option.selected {
  border-color: var(--gold);
  background: #fffdf5;
  color: var(--black);
}

.qual-option input {
  display: none;
}

.qual-option-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Timeline / budget row options */
.qual-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--black);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-top: 0.75rem;
}

.qual-row-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.qual-pill {
  padding: 0.5rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray);
  background: var(--white);
}

.qual-pill:hover {
  border-color: var(--gold);
}

.qual-pill.selected {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--black);
}

.qual-pill input {
  display: none;
}

/* Contact form inputs */
.qual-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.2s;
  color: var(--black);
  background: var(--white);
}

.qual-input:focus {
  outline: none;
  border-color: var(--gold);
}

.qual-input.error {
  border-color: var(--red);
}

.qual-textarea {
  resize: vertical;
  min-height: 70px;
}

/* Buttons */
.qual-btn {
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: var(--gold);
  color: var(--black);
  border: none;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.5rem;
}

.qual-btn:hover {
  background: var(--gold-hover);
}

.qual-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.qual-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--concrete-gray);
  margin-top: 0.75rem;
}

/* Success state */
.qual-success {
  text-align: center;
  padding: 1rem 0;
}

.qual-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.qual-success h3 {
  font-size: 1.3rem;
  color: var(--black);
  margin-bottom: 0.5rem;
}

.qual-success p {
  color: var(--gray);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.qual-score-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.qual-score-badge.hot {
  background: #ffecd2;
  color: #c0392b;
}

.qual-score-badge.warm {
  background: #fff3cd;
  color: #856404;
}

.qual-score-badge.cold {
  background: #e8f4f8;
  color: #2980b9;
}

.qual-next-steps {
  text-align: left;
  background: var(--light-bg);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

.qual-next-steps p {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.qual-next-steps ul {
  list-style: none;
  padding: 0;
}

.qual-next-steps li {
  font-size: 0.85rem;
  color: var(--gray);
  padding: 0.3rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.qual-next-steps li::before {
  content: attr(data-icon);
  position: absolute;
  left: 0;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .qual-modal {
    max-height: 95vh;
    border-radius: 10px;
  }

  .qual-header {
    padding: 1.25rem 1.25rem;
  }

  .qual-header h2 {
    font-size: 1.1rem;
  }

  .qual-body {
    padding: 1.25rem 1.25rem 1.5rem;
  }

  .qual-options-grid {
    grid-template-columns: 1fr;
  }

  .qual-progress-line {
    width: 40px;
  }

  .qual-row-options {
    gap: 0.4rem;
  }

  .qual-pill {
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
  }
}

/* ===== COMMERCIAL PAGES (capabilities, leadership, commercial) ===== */

.page-hero {
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
  color: #fff;
  padding: 8rem 1.5rem 4rem;
  text-align: center;
}

.page-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}

.page-hero .eyebrow {
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.page-hero .subhead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #d4d4d4;
  max-width: 720px;
  margin: 0 auto;
}

.content-section {
  padding: 4rem 1.5rem;
  background: #fff;
}

.content-section-alt {
  background: var(--light-bg);
}

.content-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.content-section h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: var(--black);
}

.content-section p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray);
  margin-bottom: 1rem;
}

.content-section .footnote {
  font-size: 0.85rem;
  color: var(--concrete-gray);
  font-style: italic;
  margin-top: 1.5rem;
}

/* Credentials grid */
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.credential-item {
  padding: 1.25rem;
  background: #fff;
  border-left: 3px solid var(--gold);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.content-section-alt .credential-item {
  background: #fff;
}

.credential-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--concrete-gray);
  margin-bottom: 0.5rem;
}

.credential-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--black);
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
}

.credential-value a {
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}

.credential-value a:hover {
  color: var(--gold-hover);
}

/* NAICS / cert / staffing / project-types lists */
.naics-list,
.cert-list,
.staffing-list,
.project-types-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.naics-list li,
.cert-list li,
.staffing-list li,
.project-types-list li {
  padding: 0.75rem 0 0.75rem 1.75rem;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  color: var(--gray);
  line-height: 1.6;
}

.naics-list li::before,
.cert-list li::before,
.staffing-list li::before,
.project-types-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 8px;
  height: 8px;
  background: var(--gold);
}

.naics-list strong,
.project-types-list strong {
  color: var(--black);
}

/* NAICS codes as a condensed horizontal row of chips */
.naics-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
}

.naics-code {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  background: #fff;
  border: 1px solid #e3e0d9;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--black);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.naics-primary {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
}

/* Services grid (static) */
.services-grid,
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.service-card-static,
.audience-card {
  padding: 1.75rem;
  background: #fff;
  border-top: 3px solid var(--gold);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.service-card-static h3,
.audience-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--black);
}

.service-card-static p,
.audience-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray);
  margin: 0;
}

/* ===== CONCRETE GUIDE ===== */
.factor-head {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-bottom: 0.9rem;
}

.factor-num {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.factor-head h2 {
  margin: 0;
}

.factor-takeaway {
  margin-top: 1.25rem;
  padding: 0.9rem 1.15rem;
  background: rgba(200, 169, 81, 0.10);
  border-left: 3px solid var(--gold);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--black);
}

.factor-takeaway strong {
  color: var(--black);
}

/* Concrete guide teaser (Services page) */
.guide-teaser-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 2rem;
  list-style: none;
  padding: 0;
}

.guide-teaser-list li {
  padding: 1.1rem;
  background: #fff;
  border-top: 3px solid var(--gold);
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.guide-teaser-num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.guide-teaser-list h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.3rem 0 0.4rem;
  color: var(--black);
}

.guide-teaser-list p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gray);
  margin: 0;
}

/* Leader card */
.leader-card {
  background: #fff;
  padding: 2.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border-top: 4px solid var(--gold);
}

.leader-card .eyebrow {
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.leader-card h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  color: var(--black);
}

.leader-contact {
  display: inline-block;
  margin-right: 1.5rem;
  font-weight: 600;
  color: var(--black);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
}

.leader-contact:hover {
  color: var(--gold-hover);
}

/* Case study preview cards */
.case-study-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.case-study-preview {
  padding: 1.75rem;
  background: var(--light-bg);
  border-left: 3px solid var(--gold);
}

.case-study-preview .eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-hover);
  margin-bottom: 0.5rem;
}

.case-study-preview h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--black);
}

.case-study-preview p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gray);
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .page-hero {
    padding: 6rem 1rem 3rem;
  }

  .content-section {
    padding: 2.5rem 1rem;
  }

  .leader-card {
    padding: 1.5rem;
  }

  .leader-contact {
    display: block;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}

/* ===== Sticky mobile CTA bar (B2B lead capture) ===== */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
    display: flex;
    background: rgba(10, 10, 10, 0.96);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid rgba(200, 169, 81, 0.45);
    padding: 0.55rem 0.6rem calc(0.55rem + env(safe-area-inset-bottom));
  }
  .mobile-cta-bar .mcb-btn {
    flex: 1; text-align: center; padding: 0.85rem 0.5rem; margin: 0 0.25rem;
    font-weight: 700; font-size: 0.95rem; text-decoration: none; border-radius: 6px;
  }
  .mobile-cta-bar .mcb-call { color: var(--gold); border: 1px solid rgba(200, 169, 81, 0.6); }
  .mobile-cta-bar .mcb-bid { color: #0a0a0a; background: var(--gold); }
  body.has-mobile-cta { padding-bottom: 4.75rem; }
}