/* ================================================================
   THE ROOFING CREW — THEME STYLESHEET v2.0
   ================================================================
   To change primary color: Appearance > Customize > Brand Colors
   To change phone: Appearance > Customize > Phone & Contact Info
   ================================================================ */

:root {
  /* ── Tennessee Vols Color System — Light Mode ── */
  --orange:       #FF8200;   /* Tennessee Orange */
  --orange-light: #FF9E33;   /* Hover orange */
  --orange-dark:  #CC6800;   /* Pressed orange */

  /* Light backgrounds */
  --dark:         #FFFFFF;   /* Main bg — pure white */
  --dark2:        #F4F4F4;   /* Section alt bg — light grey */
  --steel:        #E8E8E8;   /* Card / panel bg — mid grey */

  /* Text & borders */
  --mid:          #9B9B9B;   /* Subtle borders, placeholders */
  --light:        #4A4A4A;   /* Body text on light bg */
  --offwhite:     #231F20;   /* Primary text — UT dark charcoal */
  --white:        #231F20;   /* Was pure white text — now dark for light bg */

  /* Explicit colors for hero/dark sections (used inline) */
  --hero-dark:    #231F20;   /* Dark hero backgrounds */
  --hero-dark2:   #3B3537;   /* Dark section variants */
  --hero-text:    #FFFFFF;   /* White text inside dark sections */

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--offwhite); font-family: var(--font-body); font-weight: 400; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

/* ── UTILITY ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.rc-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; }
.rc-tag::before { content: ''; display: block; width: 24px; height: 2px; background: var(--orange); }
.section-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px,6vw,72px); line-height: 0.95; text-transform: uppercase; color: var(--offwhite); letter-spacing: -0.01em; }
.section-title span { color: var(--orange); }
.section-header { margin-bottom: 60px; }
.section-header-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.section-intro { font-size: 16px; font-weight: 300; color: var(--light); max-width: 420px; line-height: 1.7; }

/* ── BUTTONS ── */
.btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--orange); color: #fff !important; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 32px; border: none; cursor: pointer; clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); transition: background 0.2s, transform 0.2s; }
.btn-primary:hover { background: var(--orange-light); transform: translateX(3px); }
.btn-outline { display: inline-flex; align-items: center; gap: 10px; border: 2px solid rgba(255,255,255,0.35); color: #fff !important; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 30px; background: transparent; transition: border-color 0.2s, color 0.2s; }
.btn-outline:hover { border-color: var(--orange); color: var(--orange) !important; }
.btn-white { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--orange) !important; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; padding: 18px 36px; clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); transition: transform 0.2s; }
.btn-white:hover { transform: translateX(4px); }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── TOP BAR ── */
#topbar { background: var(--orange); padding: 9px 0; }
#topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar-left { display: flex; gap: 20px; align-items: center; }
.topbar-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9); }
.topbar-item svg { width: 14px; height: 14px; }
.topbar-phone { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 0.04em; color: #fff; display: flex; align-items: center; gap: 8px; }
.topbar-phone svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── NAVIGATION ── */
#masthead { position: sticky; top: 0; z-index: 200; background: #231F20; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.nav-logo-wrap { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-logo-img { height: 72px; width: 72px; object-fit: contain; border-radius: 8px; filter: none; box-shadow: none; transition: transform 0.3s; }
.nav-logo-wrap:hover .nav-logo-img { filter: none; transform: scale(1.04); }
.nav-logo-text { display: flex; flex-direction: column; }
.nav-logo-name { font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); line-height: 1; }
.nav-logo-name span { color: var(--orange); }
.nav-logo-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--light); margin-top: 2px; }
#primary-menu { display: flex; align-items: center; gap: 2px; list-style: none; }
#primary-menu li { position: relative; }
#primary-menu > li > a { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); padding: 8px 12px; display: block; transition: color 0.2s; white-space: nowrap; }
#primary-menu > li > a:hover,
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current_page_item > a { color: var(--orange); }
/* Dropdown */
#primary-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--dark2); border-top: 2px solid var(--orange); border-bottom: 1px solid rgba(255,255,255,0.06); list-style: none; z-index: 300; }
#primary-menu li:hover > .sub-menu { display: block; }
#primary-menu .sub-menu li a { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--light); padding: 12px 18px; display: block; border-bottom: 1px solid rgba(255,255,255,0.04); transition: color 0.2s, background 0.2s; white-space: nowrap; }
#primary-menu .sub-menu li a:hover { color: var(--orange); background: rgba(255,130,0,0.08); }
.nav-cta { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--orange); color: #fff !important; padding: 10px 20px; transition: background 0.2s; white-space: nowrap; flex-shrink: 0; }
.nav-cta:hover { background: var(--orange-light); }
.menu-toggle { display: none; background: transparent; border: 2px solid rgba(255,255,255,0.2); padding: 8px; cursor: pointer; color: var(--white); flex-shrink: 0; }
.menu-toggle svg { width: 22px; height: 22px; display: block; }

/* ── MOBILE DRAWER ── */
.mobile-drawer { display: none; position: fixed; top: 0; left: 0; width: min(320px,85vw); height: 100vh; background: var(--dark2); border-right: 2px solid rgba(255,130,0,0.3); z-index: 300; transform: translateX(-100%); transition: transform 0.3s ease; flex-direction: column; overflow-y: auto; }
.mobile-drawer.open { transform: translateX(0); display: flex; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.drawer-logo-img { height: 44px; width: auto; border-radius: 6px; }
.drawer-close { background: transparent; border: none; color: var(--light); cursor: pointer; font-size: 24px; line-height: 1; padding: 4px; }
.drawer-menu { list-style: none; padding: 12px 0; flex: 1; }
.drawer-menu li a { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: color 0.2s, background 0.2s, padding-left 0.2s; }
.drawer-menu li a:hover { color: var(--orange); background: rgba(255,130,0,0.08); padding-left: 30px; }
.drawer-menu .sub-menu { list-style: none; background: rgba(255,255,255,0.03); }
.drawer-menu .sub-menu a { padding-left: 36px; font-size: 14px; }
.drawer-cta { margin: 20px 24px; }
.drawer-phone { padding: 20px 24px; border-top: 1px solid rgba(255,255,255,0.07); }
.drawer-phone a { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--orange); display: flex; align-items: center; gap: 10px; }
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 250; }
.overlay.open { display: block; }

/* ── HERO SLIDER ── */
#hero-slider { position: relative; overflow: hidden; height: 92vh; min-height: 560px; max-height: 920px; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; display: flex; align-items: center; }
.slide.active { opacity: 1; z-index: 1; }
.slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); transition: transform 7s ease; }
.slide.active .slide-bg { transform: scale(1); }
.slide-overlay { position: absolute; inset: 0; background: linear-gradient(105deg,rgba(17,18,20,0.75) 0%,rgba(17,18,20,0.55) 55%,rgba(17,18,20,0.30) 100%); }
.slide-overlay::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.05) 2px,rgba(0,0,0,0.05) 4px); }
.slide-content { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.slide-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s; }
.slide-eyebrow::before { content: ''; display: block; width: 36px; height: 2px; background: var(--orange); }
.slide.active .slide-eyebrow { opacity: 1; transform: translateY(0); }
.slide-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(52px,8vw,100px); line-height: 0.9; text-transform: uppercase; color: var(--white); letter-spacing: -0.02em; margin-bottom: 24px; max-width: 700px; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s; }
.slide-title .accent { color: var(--orange); }
.slide-title .stroke { -webkit-text-stroke: 2px rgba(255,255,255,0.35); color: transparent; }
.slide.active .slide-title { opacity: 1; transform: translateY(0); }
.slide-subtitle { font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.78); line-height: 1.65; max-width: 520px; margin-bottom: 36px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s; }
.slide.active .slide-subtitle { opacity: 1; transform: translateY(0); }
.slide-actions { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease 0.65s, transform 0.5s ease 0.65s; }
.slide.active .slide-actions { opacity: 1; transform: translateY(0); }
.slider-nav { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 12px; align-items: center; }
.slider-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); border: none; cursor: pointer; transition: all 0.3s; padding: 0; }
.slider-dot.active { background: var(--orange); transform: scale(1.35); }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 52px; height: 52px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; backdrop-filter: blur(4px); }
.slider-arrow:hover { background: var(--orange); border-color: var(--orange); }
.slider-arrow-prev { left: 24px; }
.slider-arrow-next { right: 24px; }
.slider-arrow svg { width: 22px; height: 22px; }
/* hero-stats-bar consolidated below */
.hero-stats-inner { display: flex; flex-wrap: wrap; }
.hero-stat { flex: 1 1 120px; padding: 16px 28px; border-right: 1px solid #D8D8D8; }
.hero-stat:last-child { border-right: none; }
.hero-stat-num { font-family: var(--font-display); font-weight: 900; font-size: 34px; color: var(--orange); line-height: 1; letter-spacing: -0.02em; }
.hero-stat-label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #231F20 !important; margin-top: 3px; }
.slider-phone-card { position: absolute; right: 60px; bottom: 90px; z-index: 5; background: var(--orange); padding: 22px 32px; clip-path: polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.slider-phone-label { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 4px; }
.slider-phone-num { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: #fff; letter-spacing: 0.02em; }
.slider-phone-sub { font-size: 11px; color: rgba(255,255,255,0.8); margin-top: 3px; }

/* ── TRUST BAR ── */
#trust-bar { background: var(--dark2); border-top: 3px solid var(--orange); border-bottom: 1px solid rgba(255,255,255,0.06); }
.trust-bar-inner { display: flex; flex-wrap: wrap; }
.trust-item { flex: 1 1 180px; display: flex; align-items: center; gap: 14px; padding: 22px 26px; border-right: 1px solid rgba(255,255,255,0.06); }
.trust-item:last-child { border-right: none; }
.trust-icon { width: 40px; height: 40px; background: rgba(255,130,0,0.12); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-icon svg { width: 20px; height: 20px; color: var(--orange); }
.trust-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); margin-bottom: 2px; }
.trust-desc { font-size: 11px; color: var(--light); }

/* ── SECTIONS ── */
section { padding: 100px 0; }
#materials { padding: 72px 0; }

/* ── SERVICES ── */
#services { background: var(--dark); }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.service-card { position: relative; overflow: hidden; background: var(--dark2); }
.service-card-img { width: 100%; height: 280px; object-fit: cover; transition: transform 0.5s, filter 0.5s; filter: brightness(0.7) saturate(0.8); }
.service-card:hover .service-card-img { transform: scale(1.05); filter: brightness(0.5); }
.service-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px; background: linear-gradient(to top,rgba(17,18,20,0.98),transparent); transition: padding-bottom 0.3s; }
.service-card:hover .service-card-body { padding-bottom: 36px; }
.service-card-cat { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.service-card-title { font-family: var(--font-display); font-weight: 800; font-size: 24px; text-transform: uppercase; color: var(--white); line-height: 1.1; margin-bottom: 8px; }
.service-card-desc { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6; max-height: 0; overflow: hidden; transition: max-height 0.4s, opacity 0.4s; opacity: 0; }
.service-card:hover .service-card-desc { max-height: 80px; opacity: 1; }
.service-card-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-top: 10px; opacity: 0; transition: opacity 0.3s 0.1s; }
.service-card:hover .service-card-link { opacity: 1; }
.sub-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 2px; }
.sub-service { background: var(--dark2); padding: 26px 28px; border-left: 3px solid var(--orange); }
.sub-service h4 { font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; color: var(--white); margin-bottom: 5px; }
.sub-service p { font-size: 13px; color: var(--light); }

/* ── MATERIALS ── */
#materials { background: var(--dark2); }
.materials-header { text-align: center; margin-bottom: 40px; }
.materials-strip { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.material-pill { background: var(--steel); border: 1px solid rgba(255,255,255,0.08); padding: 12px 22px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); transition: all 0.2s; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); cursor: default; }
.material-pill:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

/* ── EMERGENCY BAR ── */
#emergency-bar { position: relative; padding: 72px 0; overflow: hidden; background: var(--orange); }
.emergency-storm-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.12; mix-blend-mode: luminosity; pointer-events: none; }
#emergency-bar::after { content: 'EMERGENCY'; position: absolute; top: -20px; right: -20px; font-family: var(--font-display); font-weight: 900; font-size: 180px; line-height: 1; color: rgba(255,255,255,0.05); pointer-events: none; z-index: 1; }
.emergency-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.emergency-label { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.emergency-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(32px,5vw,60px); text-transform: uppercase; color: #fff; line-height: 0.95; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.emergency-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.emergency-phone { font-family: var(--font-display); font-weight: 900; font-size: 36px; color: #fff; letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(0,0,0,0.25); }

/* ── WHY US ── */
#why-us { background: var(--dark); }
.why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.why-image-wrap { position: relative; }
.why-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; filter: brightness(0.88); }
.why-exp-badge { position: absolute; top: -24px; left: -24px; background: var(--dark2); border: 2px solid var(--orange); padding: 20px 24px; text-align: center; }
.why-exp-num { font-family: var(--font-display); font-weight: 900; font-size: 48px; color: var(--orange); line-height: 1; }
.why-exp-label { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light); }
.why-cert-badge { position: absolute; bottom: -24px; right: -24px; background: var(--orange); padding: 20px; width: 150px; text-align: center; clip-path: polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.why-cert-badge img { width: 80px; margin: 0 auto 6px; border-radius: 4px; }
.why-cert-label { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; line-height: 1.4; }
.why-intro { font-size: 16px; font-weight: 300; color: var(--light); line-height: 1.75; margin-bottom: 36px; }
.why-checklist { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-bottom: 40px; }
.why-check-item { display: flex; gap: 14px; }
.check-dot { width: 26px; height: 26px; background: rgba(255,130,0,0.15); border: 1.5px solid var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.check-dot svg { width: 12px; height: 12px; color: var(--orange); }
.check-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); margin-bottom: 3px; }
.check-desc { font-size: 13px; color: var(--light); line-height: 1.6; }

/* ── SERVICE AREAS ── */
#service-areas { padding: 0; background: var(--dark2); position: relative; overflow: hidden; }
.areas-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; }
.areas-content { padding: 80px 60px 80px 32px; max-width: 600px; margin-left: calc((100vw - 1200px) / 2); padding-left: 32px; }
.areas-desc { font-size: 16px; color: var(--light); line-height: 1.7; margin-bottom: 36px; }
.area-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.area-tag { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); padding: 9px 16px; background: var(--steel); border: 1px solid rgba(255,255,255,0.08); transition: all 0.2s; }
.area-tag:hover { background: var(--orange); border-color: var(--orange); }
.areas-map-panel { position: relative; overflow: hidden; }
.areas-map-panel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; filter: invert(90%) hue-rotate(180deg) saturate(0.8) brightness(0.85); }
.map-badge { position: absolute; top: 20px; left: 20px; z-index: 5; background: var(--orange); padding: 10px 18px; clip-path: polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; box-shadow: 0 4px 20px rgba(255,130,0,0.4); }
.areas-map-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--orange); z-index: 6; }
.map-caption { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 11px; color: rgba(255,255,255,0.4); z-index: 5; }

/* ── ABOUT ── */
#about { background: var(--dark); padding: 80px 0 40px; }
.expertise-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.expertise-lead { font-size: 19px; font-weight: 300; line-height: 1.75; color: var(--offwhite); margin-bottom: 32px; border-left: 3px solid var(--orange); padding-left: 22px; }
.expertise-body { font-size: 15px; font-weight: 300; color: var(--light); line-height: 1.75; margin-bottom: 22px; }
.expertise-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: brightness(0.85); margin-bottom: 2px; }
.expertise-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.expertise-stat { background: var(--dark2); padding: 26px; text-align: center; }
.expertise-stat-num { font-family: var(--font-display); font-weight: 900; font-size: 48px; color: var(--orange); line-height: 1; }
.expertise-stat-label { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light); margin-top: 4px; }

/* ── REVIEWS ── */
#reviews { background: var(--dark2); }
.reviews-header { text-align: center; margin-bottom: 52px; }
.stars-display { display: flex; justify-content: center; gap: 4px; margin: 12px 0 8px; }
.star { color: var(--orange); font-size: 22px; }
.reviews-count { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light); }
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.review-card { background: var(--steel); padding: 32px 28px; position: relative; }
.review-card::before { content: '"'; position: absolute; top: 12px; right: 20px; font-family: var(--font-display); font-size: 72px; font-weight: 900; color: rgba(255,130,0,0.15); line-height: 1; }
.review-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.review-star { color: var(--orange); font-size: 13px; }
.review-text { font-size: 14px; color: var(--light); line-height: 1.7; margin-bottom: 20px; font-style: italic; font-weight: 300; }
.reviewer { display: flex; align-items: center; gap: 12px; }
.reviewer-avatar { width: 40px; height: 40px; background: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; flex-shrink: 0; }
.reviewer-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; color: var(--white); }
.reviewer-loc { font-size: 11px; color: var(--mid); }

/* ── CONTACT ── */
#contact { background: var(--dark); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.contact-desc { font-size: 16px; color: var(--light); line-height: 1.7; margin-bottom: 40px; }
.contact-details { display: flex; flex-direction: column; gap: 24px; }
.contact-detail { display: flex; gap: 14px; align-items: flex-start; }
.contact-detail-icon { width: 40px; height: 40px; background: rgba(255,130,0,0.12); border: 1px solid rgba(255,130,0,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-detail-icon svg { width: 18px; height: 18px; color: var(--orange); }
.contact-detail-label { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; }
.contact-detail-value { font-size: 17px; font-weight: 600; color: var(--white); }
.contact-form-wrap { background: var(--dark2); padding: 44px; border-top: 3px solid var(--orange); }
.form-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.form-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--light); }
.form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  background: var(--steel); border: 1px solid rgba(255,255,255,0.08); color: var(--white); font-family: var(--font-body); font-size: 15px; padding: 13px 15px; outline: none; width: 100%; transition: border-color 0.2s; border-radius: 0;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
input:focus, select:focus, textarea:focus { border-color: var(--orange); }
.form-textarea, textarea { resize: vertical; min-height: 100px; }
select option { background: var(--steel); }
.form-submit, input[type="submit"], button[type="submit"] {
  width: 100%; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--orange); color: #fff; border: none; cursor: pointer; padding: 17px; display: flex; align-items: center; justify-content: center; gap: 10px; clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); transition: background 0.2s; margin-top: 4px;
}
.form-submit:hover { background: var(--orange-light); }
.form-submit:disabled { background: var(--mid); cursor: not-allowed; }
.form-success { display: none; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.4); padding: 16px; text-align: center; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: #4ade80; }
.form-error { display: none; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.4); padding: 16px; text-align: center; margin-top: 14px; font-size: 13px; color: #f87171; }
/* WPForms / CF7 compatibility */
.wpcf7-response-output { margin-top: 14px; padding: 14px; font-size: 13px; }
.wpforms-container .wpforms-field input,
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select { background: var(--steel) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: var(--white) !important; border-radius: 0 !important; }
.wpforms-container .wpforms-submit-container button { background: var(--orange) !important; clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%) !important; border-radius: 0 !important; font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }

/* ── BLOG STRIP (homepage) ── */
/* blog-preview updated v76 */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-top: 44px; }
.blog-card { background: #fff; overflow: hidden; transition: transform 0.3s; border: 1px solid #E8E8E8; }
.blog-card:hover { transform: translateY(-3px); }
.blog-card-img-wrap { overflow: hidden; }
.blog-card-img { width: 100%; height: 220px; object-fit: cover; filter: brightness(1); transition: filter 0.3s, transform 0.4s; }
.blog-card:hover .blog-card-img { filter: brightness(0.9); transform: scale(1.04); }
.blog-card-body { padding: 20px 22px 22px; }
.blog-card-cat { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; display: block; }
.blog-card-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; text-transform: uppercase; color: #231F20; line-height: 1.15; margin-bottom: 10px; display: block; transition: color 0.2s; }
.blog-card-title:hover { color: var(--orange); }
.blog-card-excerpt { font-size: 13px; color: #6B6B6B; line-height: 1.6; margin-bottom: 16px; }
.blog-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #E8E8E8; padding-top: 12px; }
.blog-card-date { font-size: 12px; color: #9B9B9B; }
.blog-card-read { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); transition: color 0.2s; }

/* ── PAGE HERO (inner pages) ── */
.page-hero { position: relative; overflow: hidden; padding: 80px 0 60px; }
.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(17,18,20,0.75) 0%, rgba(17,18,20,0.55) 100%); }
.page-hero-inner { position: relative; z-index: 1; }
.page-title-text { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px,7vw,88px); line-height: 0.9; text-transform: uppercase; color: var(--white); letter-spacing: -0.02em; }
.page-title-text span { color: var(--orange); }
.page-subtitle { font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.7); max-width: 560px; line-height: 1.65; margin-top: 20px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: var(--mid); flex-wrap: wrap; }
.breadcrumb a { color: var(--light); transition: color 0.2s; }
.breadcrumb a:hover, .breadcrumb .yoast-bc a:hover { color: var(--orange); }
.breadcrumb span.sep { color: var(--mid); }

/* ── POST SINGLE ── */
.post-hero { position: relative; overflow: hidden; padding: 100px 0 72px; }
.post-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.post-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(17,18,20,0.75) 0%, rgba(17,18,20,0.55) 55%, rgba(17,18,20,0.30) 100%); }
.post-hero-inner { position: relative; z-index: 1; }
.post-cat-badge { display: inline-block; background: var(--orange); font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; padding: 5px 14px; margin-bottom: 18px; }
.post-hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(38px,6vw,76px); line-height: 0.95; text-transform: uppercase; color: var(--white); letter-spacing: -0.02em; margin-bottom: 22px; max-width: 900px; }
.post-hero-title span { color: var(--orange); }
.post-meta-bar { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.post-meta-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mid); }
.post-meta-item svg { width: 12px; height: 12px; color: var(--orange); }
.post-layout { padding: 72px 0; background: var(--dark); }
.post-inner { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.post-lead { font-size: 19px; font-weight: 300; line-height: 1.75; color: var(--offwhite); margin-bottom: 36px; border-left: 3px solid var(--orange); padding-left: 22px; }
.post-body p { font-size: 15px; font-weight: 300; color: var(--light); line-height: 1.8; margin-bottom: 22px; }
.post-body h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px,2.2vw,24px); text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); line-height: 1.1; margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,130,0,0.25); }
.post-body h2 span { color: var(--orange); }
.post-body h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--white); margin: 28px 0 10px; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.post-body ul li, .post-body ol li { font-size: 14px; font-weight: 300; color: var(--light); line-height: 1.7; padding: 7px 0 7px 26px; border-bottom: 1px solid rgba(255,255,255,0.04); position: relative; }
.post-body ul li::before { content: '›'; position: absolute; left: 8px; color: var(--orange); font-size: 16px; font-weight: 700; top: 6px; }
.author-box { background: var(--dark2); padding: 28px; border-left: 4px solid var(--orange); margin-top: 36px; display: flex; gap: 20px; }
.author-avatar { width: 56px; height: 56px; background: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 20px; color: #fff; flex-shrink: 0; }
.author-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; color: var(--white); margin-bottom: 3px; }
.author-cred { font-size: 11px; color: var(--orange); letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-display); font-weight: 700; margin-bottom: 8px; }
.author-bio { font-size: 13px; color: var(--light); line-height: 1.65; }
.related-posts { padding: 72px 0; background: var(--dark2); }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 36px; }
.related-card { background: var(--steel); overflow: hidden; }
.related-img { width: 100%; height: 170px; object-fit: cover; filter: brightness(0.7); transition: filter 0.3s; }
.related-card:hover .related-img { filter: brightness(1); }
.related-body { padding: 20px; }
.related-cat { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange); margin-bottom: 7px; }
.related-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; color: var(--white); line-height: 1.15; margin-bottom: 10px; display: block; transition: color 0.2s; }
.related-title:hover { color: var(--orange); }

/* ── BLOG ARCHIVE ── */
.blog-archive { padding: 80px 0; background: var(--dark); }
.blog-archive-layout { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
.posts-grid-archive { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cat-filter { padding: 36px 0; background: var(--dark2); border-bottom: 1px solid rgba(255,255,255,0.06); }
.cat-filter-inner { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cat-btn { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 18px; background: var(--steel); border: none; color: var(--light); cursor: pointer; transition: all 0.2s; }
.cat-btn:hover, .cat-btn.active { background: var(--orange); color: #fff; }

/* ── SIDEBAR ── */
.sidebar-widget { background: var(--dark2); padding: 26px; margin-bottom: 2px; }
.sidebar-cta { background: var(--orange); padding: 32px 26px; text-align: center; margin-bottom: 2px; }
.sidebar-cta-title { font-family: var(--font-display); font-weight: 900; font-size: 26px; text-transform: uppercase; color: #fff; line-height: 1; margin-bottom: 10px; }
.sidebar-cta-desc { font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 20px; line-height: 1.6; }
.sidebar-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--orange); font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 24px; width: 100%; transition: transform 0.2s; clip-path: polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%); }
.sidebar-cta-btn:hover { transform: translateX(3px); }
.widget-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,130,0,0.3); }
.sticky-sidebar { position: sticky; top: 88px; }
.tag-cloud { display: flex; gap: 7px; flex-wrap: wrap; }
.tag-pill { background: var(--steel); color: var(--light); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; transition: all 0.2s; clip-path: polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%); }
.tag-pill:hover { background: var(--orange); color: #fff; }

/* ── PAGINATION ── */
.pagination, .nav-links { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 52px; flex-wrap: wrap; }
.page-numbers, .nav-links a, .nav-links span { min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px; background: var(--dark2); color: var(--light); text-decoration: none; transition: all 0.2s; }
.page-numbers.current, .page-numbers:hover, .nav-links a:hover { background: var(--orange); color: #fff; }

/* ── FOOTER ── */
footer { background: var(--dark2); border-top: 1px solid rgba(255,255,255,0.06); padding: 72px 0 36px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 52px; margin-bottom: 52px; }
.footer-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-logo-img { height: 90px; width: 90px; object-fit: contain; border-radius: 10px; filter: none; box-shadow: none; }
.footer-logo-text-wrap .footer-logo-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); }
.footer-logo-text-wrap .footer-logo-name span { color: var(--orange); }
.footer-logo-text-wrap .footer-logo-sub { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); margin-top: 2px; }
.footer-about { font-size: 13px; font-weight: 300; color: var(--light); line-height: 1.7; margin-bottom: 16px; }
.footer-address { font-size: 13px; color: var(--light); line-height: 1.7; margin-bottom: 16px; display: flex; gap: 8px; align-items: flex-start; }
.footer-address svg { width: 14px; height: 14px; color: var(--orange); flex-shrink: 0; margin-top: 3px; }
.footer-license { font-size: 11px; color: var(--mid); margin-bottom: 20px; }
.footer-col-title { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,130,0,0.3); }
.footer-menu { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-menu a { font-size: 13px; font-weight: 300; color: var(--light); transition: color 0.2s, padding-left 0.2s; display: flex; align-items: center; gap: 7px; }
.footer-menu a::before { content: '›'; color: var(--orange); font-size: 15px; }
.footer-menu a:hover { color: var(--orange); padding-left: 4px; }

/* SOCIAL ICONS */
.social-links { display: flex; gap: 10px; margin-top: 18px; }
.social-btn { width: 38px; height: 38px; background: var(--steel); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--light); transition: all 0.25s; }
.social-btn:hover { background: var(--orange); color: #fff !important; border-color: var(--orange); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,130,0,0.4); }
.social-btn svg { width: 18px; height: 18px; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-copy { font-size: 12px; color: var(--mid); }

/* ── STICKY CALL ── */
#sticky-call { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--orange); padding: 13px 24px; display: none; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-decoration: none; }
#sticky-call svg { width: 18px; height: 18px; }

/* ── 404 ── */
.error-404 { min-height: 70vh; display: flex; align-items: center; background: var(--dark); }
.error-404-num { font-family: var(--font-display); font-weight: 900; font-size: 180px; line-height: 1; color: rgba(255,130,0,0.1); letter-spacing: -0.05em; }
.error-404-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px,5vw,64px); text-transform: uppercase; color: var(--white); margin-top: -40px; margin-bottom: 16px; }
.error-404-title span { color: var(--orange); }

/* ── WP CORE ── */
.aligncenter { display: block; margin: 0 auto 24px; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.wp-caption { background: var(--dark2); padding: 12px; margin-bottom: 24px; }
.wp-caption-text { font-size: 12px; color: var(--mid); text-align: center; margin-top: 8px; }
.yoast-bc { font-size: 13px; margin-bottom: 16px; }
.yoast-bc a { color: var(--light); }
.yoast-bc a:hover { color: var(--orange); }
.screen-reader-text { clip: rect(1px,1px,1px,1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .sub-services { grid-template-columns: 1fr 1fr; }
  .why-inner { grid-template-columns: 1fr; gap: 48px; }
  .why-image-wrap { display: none; }
  .expertise-inner { grid-template-columns: 1fr; gap: 44px; }
  .areas-inner { grid-template-columns: 1fr; min-height: auto; }
  .areas-content { margin-left: 0; padding: 60px 32px; max-width: 100%; }
  .areas-map-panel { height: 400px; }
  .areas-map-panel::before { width: 100%; height: 3px; top: auto; bottom: 0; left: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .contact-inner { grid-template-columns: 1fr; gap: 44px; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .slider-phone-card { display: none; }
  .blog-archive-layout { grid-template-columns: 1fr; }
  .post-inner { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .topbar-left { display: none; }
  #primary-menu { display: none; }
  .nav-cta { display: none; }
  .menu-toggle { display: flex; }
  .services-grid, .sub-services { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .reviews-grid, .blog-grid, .related-grid, .posts-grid-archive { grid-template-columns: 1fr; }
  #sticky-call { display: flex; }
  body { padding-bottom: 52px; }
  .trust-bar-inner { flex-direction: column; }
  .trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); flex: none; width: 100%; }
  .emergency-inner { flex-direction: column; text-align: center; }
  .emergency-actions { justify-content: center; }
  #hero-slider { height: 80vh; min-height: 500px; }
  .slider-arrow { display: none; }
  .slide-title { font-size: clamp(44px,12vw,80px); }
  .contact-inner { grid-template-columns: 1fr; }
  .expertise-stats { grid-template-columns: 1fr 1fr; }
  .nav-logo-text { display: none; }
  .nav-logo-img { height: 46px; }
  section { padding: 72px 0; }
  .contact-form-wrap { padding: 28px 20px; }
  .areas-map-panel { height: 320px; }
}
@media (max-width: 480px) {
  .slide-actions { flex-direction: column; gap: 12px; }
  .slide-actions .btn-primary, .slide-actions .btn-outline { width: 100%; justify-content: center; }
  #hero-slider { height: 85vh; }
  .hero-stat { padding: 12px 16px; }
  .hero-stat-num { font-size: 26px; }
}

/* ══════════════════════════════════════════════
   BUG FIX: DROPDOWN SUBMENUS
   ══════════════════════════════════════════════ */
#primary-menu li { position: relative; }

/* Desktop hover dropdown */
#primary-menu > li > .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 220px;
  background: var(--dark2);
  border-top: 2px solid var(--orange);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  list-style: none;
  z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#primary-menu > li:hover > .sub-menu,
#primary-menu > li:focus-within > .sub-menu {
  display: block;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
#primary-menu .sub-menu li {
  display: block;
  width: 100%;
}
#primary-menu .sub-menu li a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--light);
  padding: 13px 20px;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
}
#primary-menu .sub-menu li a:hover {
  color: var(--orange);
  background: rgba(255,130,0,0.08);
  padding-left: 26px;
}
/* Arrow indicator on parent items with children */
#primary-menu > li.menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 10px;
  opacity: 0.6;
}

/* ══════════════════════════════════════════════
   SERVICE AREAS MAP WITH PINS
   ══════════════════════════════════════════════ */
#service-areas { padding: 0; background: var(--dark2); overflow: hidden; }
.areas-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.areas-content { padding: 80px 60px 80px 32px; max-width: 600px; margin-left: calc((100vw - 1200px) / 2); padding-left: 32px; display: flex; flex-direction: column; justify-content: center; }
.areas-map-panel { position: relative; overflow: hidden; min-height: 600px; }
#rc-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* Dark filter on leaflet tiles */
.leaflet-tile { filter: invert(1) hue-rotate(180deg) saturate(0.6) brightness(0.75) !important; }
.leaflet-container { background: var(--dark) !important; }
/* Custom orange marker */
.rc-map-pin {
  background: var(--orange);
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(255,130,0,0.5);
  transition: transform 0.2s;
}
.rc-map-pin::after {
  content: '🏠';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  font-size: 14px;
}
.leaflet-popup-content-wrapper {
  background: var(--dark2) !important;
  border: 1px solid rgba(255,130,0,0.4) !important;
  border-radius: 0 !important;
  color: var(--white) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-tip { background: var(--dark2) !important; }
.leaflet-popup-content { margin: 14px 18px !important; }
.leaflet-popup-content strong {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
  margin-bottom: 4px;
}
.leaflet-popup-content span { font-size: 12px; color: var(--light); }
.leaflet-popup-close-button { color: var(--orange) !important; font-size: 18px !important; }
.map-badge { position: absolute; top: 20px; left: 20px; z-index: 10; background: var(--orange); padding: 10px 18px; clip-path: polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; box-shadow: 0 4px 20px rgba(255,130,0,0.4); pointer-events: none; }
.areas-map-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--orange); z-index: 10; pointer-events: none; }

/* RESPONSIVE for new sections */
@media (max-width: 1024px) {
  .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-left { position: static; }
  .areas-inner { grid-template-columns: 1fr; min-height: auto; }
  .areas-content { margin-left: 0; padding: 60px 32px; max-width: 100%; }
  .areas-map-panel { min-height: 400px; }
}
@media (max-width: 768px) {
  .faq-question { padding: 18px 20px; }
  .faq-answer { padding: 0 20px 20px 23px; }
  .faq-question-text { font-size: 15px; }
}

/* ══════════════════════════════════════════════
   FAQ SECTION — BOLD CARD GRID
   ══════════════════════════════════════════════ */

/* Header strip */
#faq-section { background: var(--dark); padding-bottom: 0; margin-bottom: 0; }
.faq-header-strip {
  background: var(--dark2);
  padding: 80px 0 60px;
  border-bottom: 3px solid var(--orange);
  position: relative;
  overflow: hidden;
}
.faq-header-strip::before {
  content: '?';
  position: absolute; right: 60px; top: -30px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 320px; line-height: 1;
  color: rgba(255,130,0,0.05);
  pointer-events: none; user-select: none;
}
.faq-header-inner {
  display: flex; justify-content: space-between;
  align-items: flex-end; gap: 40px; flex-wrap: wrap;
}
.faq-header-right {
  max-width: 400px;
}
.faq-header-right p {
  font-size: 16px; font-weight: 300; color: var(--light); line-height: 1.65;
}

/* Grid layout */
.faq-grid-wrap { padding: 60px 0 0; }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 2px;
}

/* Card */
.faq-card {
  background: var(--dark2);
  overflow: hidden;
  transition: background 0.2s;
}
.faq-card.active { background: var(--dark3, #1a1c20); }

.faq-card-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 28px 24px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  border-left: 4px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
.faq-card-header:hover { background: rgba(255,130,0,0.06); border-left-color: rgba(255,130,0,0.4); }
.faq-card.active .faq-card-header { border-left-color: var(--orange); background: rgba(255,130,0,0.08); }

.faq-card-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: 48px; line-height: 1; letter-spacing: -0.03em;
  color: rgba(255,130,0,0.2);
  flex-shrink: 0; width: 52px; text-align: center;
  transition: color 0.2s;
}
.faq-card.active .faq-card-num,
.faq-card-header:hover .faq-card-num { color: var(--orange); }

.faq-card-q {
  font-family: var(--font-display); font-weight: 800;
  font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--white); line-height: 1.2;
  flex: 1;
}
.faq-card.active .faq-card-q { color: var(--orange); }

.faq-card-arrow {
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(255,130,0,0.1); border: 1.5px solid rgba(255,130,0,0.3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.3s;
  margin-top: 2px;
}
.faq-card-arrow svg { width: 16px; height: 16px; color: var(--orange); transition: transform 0.3s; }
.faq-card.active .faq-card-arrow { background: var(--orange); border-color: var(--orange); }
.faq-card.active .faq-card-arrow svg { color: #fff; transform: rotate(180deg); }

/* Answer panel */
.faq-card-body {
  display: none;
  padding: 0 28px 28px 100px;
  border-left: 4px solid var(--orange);
  animation: faqSlide 0.3s ease;
}
.faq-card.active .faq-card-body { display: block; }
@keyframes faqSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-card-answer {
  font-size: 15px; font-weight: 300; color: var(--light);
  line-height: 1.8; margin-bottom: 16px;
}
.faq-card-cta {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); transition: letter-spacing 0.2s;
}
.faq-card-cta:hover { letter-spacing: 0.15em; }

/* Bottom CTA bar */
.faq-bottom-bar {
  background: var(--orange);
  padding: 28px 36px;
  display: flex; justify-content: space-between;
  align-items: center; gap: 24px; flex-wrap: wrap;
}
.faq-bottom-left strong {
  display: block;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.04em; color: #fff; margin-bottom: 4px;
}
.faq-bottom-left span { font-size: 13px; color: rgba(255,255,255,0.8); }
.faq-bottom-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.faq-bottom-phone {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: #fff; letter-spacing: 0.03em;
}
.faq-bottom-phone:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-left { position: static; }
  .areas-inner { grid-template-columns: 1fr; min-height: auto; }
  .areas-content { margin-left: 0; padding: 60px 32px; max-width: 100%; }
  .areas-map-panel { min-height: 400px; }
}
@media (max-width: 768px) {
  .faq-header-inner { flex-direction: column; gap: 24px; }
  .faq-card-body { padding-left: 28px; }
  .faq-card-num { font-size: 36px; width: 40px; }
  .faq-bottom-bar { flex-direction: column; text-align: center; }
  .faq-bottom-right { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   PAGES SIDEBAR — Right sidebar for all inner pages
   ══════════════════════════════════════════════════════════ */

/* Page with sidebar layout */
.page-with-sidebar { padding: 72px 0 100px; background: var(--dark); }
.page-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 52px;
  align-items: start;
}
.page-main-content { min-width: 0; }

/* Pages sidebar wrapper */
.pages-sidebar { position: relative; }
.pages-sidebar-inner { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }

/* ── CTA WIDGET ── */
.sidebar-cta-widget {
  background: #fff !important;
  border: 1px solid #E8E8E8 !important;
  border-top: 3px solid var(--orange) !important;
  padding: 28px 24px !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sidebar-cta-widget::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: rgba(255,130,0,0.05);
  border-radius: 50%;
}
.sidebar-cta-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; background: rgba(255,130,0,0.1);
  border: 2px solid rgba(255,130,0,0.3);
  border-radius: 50%; margin: 0 auto 14px;
}
.sidebar-cta-icon svg { width: 24px; height: 24px; color: var(--orange); }
.sidebar-cta-title {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  text-transform: uppercase; color: var(--orange) !important; line-height: 1; margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.sidebar-cta-desc {
  font-size: 13px; color: #4A4A4A; line-height: 1.65; margin-bottom: 20px;
}
.sidebar-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--orange); color: #fff !important;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 24px; width: 100%; transition: transform 0.2s, background 0.2s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.sidebar-cta-btn:hover { transform: translateX(4px); background: var(--orange-dark); }
.sidebar-cta-phone-wrap { margin-top: 18px; }
.sidebar-cta-phone-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #878787; display: block; margin-bottom: 4px; }
.sidebar-cta-phone-num {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  color: var(--orange); display: block; margin-bottom: 3px;
}
.sidebar-cta-phone-num:hover { text-decoration: underline; }
.sidebar-cta-phone-sub { font-size: 11px; color: #878787; }

/* ── SERVICES LIST WIDGET ── */
.sidebar-service-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 0; }
.sidebar-service-list li { list-style: none !important; }
.sidebar-service-list li::before { content: none !important; display: none !important; }
.sidebar-service-list li::marker { display: none !important; }
.sidebar-service-list li a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--light); padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s, padding-left 0.2s;
}
.sidebar-service-list li:last-child a { border-bottom: none; }
.sidebar-service-list li a:hover { color: var(--orange); padding-left: 6px; }
.ssl-icon { font-size: 16px; flex-shrink: 0; }

/* ── AREA LIST WIDGET ── */
.sidebar-area-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 0; }
.sidebar-area-list li { list-style: none !important; }
.sidebar-area-list li::before { content: none !important; display: none !important; }
.sidebar-area-list li::marker { display: none !important; }
.sidebar-area-list li a {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--light);
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s, padding-left 0.2s;
}
.sidebar-area-list li:last-child a { border-bottom: none; }
.sidebar-area-list li a:hover { color: var(--orange); padding-left: 6px; }

/* ── TRUST BADGES WIDGET ── */
.sidebar-trust-widget { background: var(--dark3, #1a1c20) !important; border-left: 3px solid var(--orange) !important; }
.sidebar-trust-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 14px; }
.sidebar-trust-list li {
  display: flex !important; align-items: flex-start; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.05);
  list-style: none !important;
}
.sidebar-trust-list li::before { display: none !important; content: none !important; }
.sidebar-trust-list li::marker { display: none !important; }
.sidebar-trust-list li:last-child { border-bottom: none; padding-bottom: 0; }
.stl-check {
  width: 24px; height: 24px;
  background: transparent;
  border: 2px solid var(--orange);
  border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  color: var(--orange);
  font-size: 14px; font-weight: 900; line-height: 1;
}
.sidebar-trust-list li div { display: flex; flex-direction: column; gap: 2px; }
.sidebar-trust-list li strong { font-family: var(--font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--white); letter-spacing: 0.04em; }
.sidebar-trust-list li span { font-size: 12px; color: var(--light); }

/* ── EMERGENCY WIDGET ── */
.sidebar-emergency-widget {
  background: var(--steel) !important;
  border-top: 3px solid var(--orange) !important;
  text-align: center;
}
.sidebar-emergency-label {
  font-family: var(--font-display); font-weight: 900; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 10px; display: block;
}
.sidebar-emergency-widget p { font-size: 13px; color: var(--light); line-height: 1.6; margin-bottom: 14px; }
.sidebar-emergency-phone {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  color: var(--white); display: block;
}
.sidebar-emergency-phone:hover { color: var(--orange); }

/* ── WORDPRESS CORE WIDGET STYLING ── */
/* These ensure any widget added via Appearance > Widgets looks great */
.pages-sidebar .widget { background: var(--dark2); padding: 26px; margin-bottom: 2px; }
.pages-sidebar .widget-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,130,0,0.3); }
.pages-sidebar .widget ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pages-sidebar .widget ul li a { color: var(--light); font-size: 14px; transition: color 0.2s; display: flex; align-items: center; gap: 6px; }
.pages-sidebar .widget ul li a::before { content: '›'; color: var(--orange); font-size: 16px; }
.pages-sidebar .widget ul li a:hover { color: var(--orange); }
.pages-sidebar .widget p { font-size: 14px; color: var(--light); line-height: 1.7; }
.pages-sidebar .widget a { color: var(--orange); }
.pages-sidebar .widget a:hover { text-decoration: underline; }
.pages-sidebar .widget input[type="text"],
.pages-sidebar .widget input[type="search"] {
  background: var(--steel); border: 1px solid rgba(255,255,255,0.08); color: var(--white);
  font-family: var(--font-body); font-size: 14px; padding: 10px 14px; width: 100%; outline: none;
}
.pages-sidebar .widget input[type="text"]:focus,
.pages-sidebar .widget input[type="search"]:focus { border-color: var(--orange); }
.pages-sidebar .widget input[type="submit"],
.pages-sidebar .widget button[type="submit"] {
  background: var(--orange); color: #fff; border: none; padding: 10px 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; margin-top: 8px; width: 100%;
}
.pages-sidebar .widget input[type="submit"]:hover { background: var(--orange-light); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .page-sidebar-layout {
    grid-template-columns: 1fr 280px;
    gap: 36px;
  }
}
@media (max-width: 768px) {
  .page-sidebar-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pages-sidebar-inner { position: static; }
  .page-with-sidebar { padding: 48px 0 72px; }
}

/* ── FAQ BOTTOM GAP FIX ── */
#faq-section,
.rc-shortcode-faq { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.faq-bottom-bar { margin-bottom: 0; }
.rc-shortcode-faq .faq-grid-wrap { padding-bottom: 0; }

/* ── SIDEBAR LIST — no bullets anywhere ── */
.pages-sidebar ul,
.pages-sidebar ol { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.pages-sidebar li { list-style: none !important; }
.pages-sidebar li::marker { display: none !important; content: '' !important; }


/* ════════════════════════════════════════════════════════════
   ROOFING COST ESTIMATOR
   ════════════════════════════════════════════════════════════ */
#cost-estimator {
  background: var(--dark2);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
#cost-estimator::before {
  content: '$';
  position: absolute; right: -20px; top: -60px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 400px; line-height: 1; color: rgba(255,255,255,0.02);
  pointer-events: none; user-select: none;
}

/* Header */
.est-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 52px; }
.est-header-left { flex: 1; min-width: 280px; }
.est-title { font-size: clamp(32px,4.5vw,60px); }
.est-header-right { max-width: 400px; }
.est-header-right p { font-size: 15px; font-weight: 300; color: var(--light); line-height: 1.75; margin-bottom: 12px; }
.est-disclaimer { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mid); }
.est-disclaimer svg { flex-shrink: 0; }

/* Main Card */
.est-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2px;
  background: var(--steel);
}

/* Inputs Panel */
.est-inputs { background: var(--dark); padding: 44px 44px 40px; }

/* Sq Ft Slider */
.est-field { margin-bottom: 32px; }
.est-field:last-child { margin-bottom: 0; }
.est-field-label {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--white);
  margin-bottom: 16px;
}
.est-sqft-display {
  font-family: var(--font-display); font-weight: 900; font-size: 20px;
  color: var(--orange); letter-spacing: 0.02em;
}
.est-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: linear-gradient(to right, var(--orange) 0%, var(--orange) 30%, var(--steel) 30%);
  border-radius: 2px; outline: none; cursor: pointer;
}
.est-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); border: 3px solid var(--white);
  box-shadow: 0 2px 10px rgba(255,130,0,0.5);
  cursor: pointer; transition: transform 0.15s;
}
.est-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.est-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); border: 3px solid var(--white);
  cursor: pointer;
}
.est-slider-range {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--mid); margin-top: 8px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Two-column layout */
.est-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* Radio Groups */
.est-radio-group { display: flex; flex-direction: column; gap: 8px; }
.est-radio-row { flex-direction: row; gap: 12px; }
.est-radio {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--dark2);
  border: 1.5px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.est-radio:hover { border-color: rgba(255,130,0,0.4); background: rgba(255,130,0,0.04); }
.est-radio.active { border-color: var(--orange); background: rgba(255,130,0,0.08); }
.est-radio input[type="radio"] { display: none; }
.est-radio-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
.est-radio.active .est-radio-dot {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,130,0,0.2);
}
.est-radio.active .est-radio-dot::after {
  content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%;
}
.est-radio-text { display: flex; flex-direction: column; gap: 1px; }
.est-radio-text strong { font-family: var(--font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); line-height: 1; }
.est-radio-text small { font-size: 11px; color: var(--light); margin-top: 1px; }

/* Results Panel */
.est-results {
  background: var(--orange);
  padding: 44px 40px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.est-results::before {
  content: ''; position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.07); border-radius: 50%;
  pointer-events: none;
}
.est-results::after {
  content: ''; position: absolute;
  bottom: -40px; left: -40px;
  width: 140px; height: 140px;
  background: rgba(255,255,255,0.05); border-radius: 50%;
  pointer-events: none;
}
.est-results-inner { position: relative; z-index: 1; }
.est-results-label {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
}
.est-range-display { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.est-range-low, .est-range-high {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  color: #fff; letter-spacing: -0.02em; line-height: 1;
  transition: all 0.3s ease;
}
.est-range-sep { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: rgba(255,255,255,0.6); }
.est-range-sub { font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 28px; }
.est-breakdown { border-top: 1px solid rgba(255,255,255,0.25); border-bottom: 1px solid rgba(255,255,255,0.25); padding: 18px 0; margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.est-breakdown-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.est-breakdown-row span:first-child { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 400; }
.est-breakdown-row span:last-child { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; }
.est-breakdown-note { opacity: 0.75; }
.est-per-sqft { font-size: 12px; color: rgba(255,255,255,0.85); margin-bottom: 24px; font-style: italic; }
.est-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--orange);
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 16px 24px; width: 100%; margin-bottom: 16px;
  clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);
  transition: transform 0.2s, box-shadow 0.2s;
}
.est-cta:hover { transform: translateX(4px); box-shadow: -4px 0 0 rgba(0,0,0,0.1); }
.est-legal { font-size: 10px; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* Animated update */
.est-range-low.updating, .est-range-high.updating { opacity: 0.5; transform: scale(0.97); }

/* Responsive */
@media (max-width:1024px) {
  .est-card { grid-template-columns: 1fr; }
  .est-results { padding: 36px 32px; }
}
@media (max-width:768px) {
  .est-inputs { padding: 28px 22px; }
  .est-two-col { grid-template-columns: 1fr; gap: 0; }
  .est-header { flex-direction: column; gap: 20px; }
}

/* ════════════════════════════════════════════════════════════
   SERVICE AREA PAGE TEMPLATE
   ════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.sa-hero {
  position: relative; overflow: hidden;
  min-height: 580px; display: flex; align-items: center;
  background: var(--dark) url('') center/cover no-repeat;
}
.sa-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(17,18,20,0.75) 0%, rgba(17,18,20,0.55) 55%, rgba(17,18,20,0.30) 100%);
}
.sa-hero::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px);
  pointer-events: none;
}
.sa-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: center; padding-top: 80px; padding-bottom: 60px;
}
.sa-h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 6vw, 80px); line-height: 0.95;
  text-transform: uppercase; color: var(--white);
  letter-spacing: -0.02em; margin: 16px 0 22px;
}
.sa-h1-accent { color: var(--orange); }
.sa-h1-stroke { -webkit-text-stroke: 2px rgba(255,255,255,0.3); color: transparent; }
.sa-hero-sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.78); line-height: 1.7; max-width: 540px; margin-bottom: 32px; }
.sa-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.sa-hero-stats {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(17,18,20,0.8); border-left: 3px solid var(--orange);
  backdrop-filter: blur(8px); flex-shrink: 0;
}
.sa-hero-stat { padding: 18px 28px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sa-hero-stat:last-child { border-bottom: none; }
.sa-stat-num { font-family: var(--font-display); font-weight: 900; font-size: 32px; color: var(--orange); line-height: 1; letter-spacing: -0.02em; }
.sa-stat-label { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light); margin-top: 3px; }

/* ── TRUST RIBBON ── */
.sa-trust-ribbon { background: var(--dark2); border-top: 3px solid var(--orange); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 16px 0; }
.sa-trust-items { display: flex; gap: 0; overflow-x: auto; flex-wrap: wrap; }
.sa-trust-item { display: flex; align-items: center; gap: 8px; padding: 8px 22px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); border-right: 1px solid rgba(255,255,255,0.06); white-space: nowrap; }
.sa-trust-item:last-child { border-right: none; }
.sa-trust-item span { font-size: 14px; line-height: 1; }

/* ── SECTIONS ── */
.sa-section { padding: 90px 0; }
.sa-section-dark { background: #f1f1f1; }
.sa-section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 52px; }

/* ── SERVICES GRID ── */
.sa-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.sa-service-card {
  background: var(--dark2); padding: 32px 28px;
  border-top: 3px solid transparent;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  text-decoration: none;
}
.sa-service-card:hover { border-top-color: var(--orange); background: var(--steel); transform: translateY(-3px); }
.sa-svc-icon {
  width: 52px; height: 52px;
  background: rgba(255,130,0,0.1);
  border: 1.5px solid rgba(255,130,0,0.3);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.sa-service-card:hover .sa-svc-icon {
  background: rgba(255,130,0,0.18);
  border-color: var(--orange);
}
.sa-svc-icon svg { width: 26px; height: 26px; stroke: var(--orange); }
.sa-svc-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); line-height: 1.2; }
.sa-svc-desc { font-size: 13px; font-weight: 300; color: var(--light); line-height: 1.65; flex: 1; }
.sa-svc-more { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: 6px; margin-top: auto; transition: gap 0.2s; }
.sa-service-card:hover .sa-svc-more { gap: 10px; }

/* ── PAGE CONTENT ── */
.sa-content-section { padding: 72px 0; background: var(--dark); }
.sa-content-layout { display: grid; grid-template-columns: 1fr 320px; gap: 52px; align-items: start; }
.sa-editor-content h2 { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,130,0,0.2); }
.sa-editor-content h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); margin: 22px 0 8px; }
.sa-editor-content h4 { font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange); margin: 16px 0 6px; }
.sa-editor-content p { font-size: 15px; font-weight: 300; color: var(--light); line-height: 1.8; margin-bottom: 18px; }
.sa-editor-content ul { list-style: none; padding: 0; margin: 0 0 20px; }
.sa-editor-content ul li { font-size: 14px; font-weight: 300; color: var(--light); padding: 7px 0 7px 20px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.04); }
.sa-editor-content ul li::before { content: '›'; position: absolute; left: 4px; color: var(--orange); font-size: 16px; font-weight: 700; }
.sa-editor-content blockquote { border-left: 3px solid var(--orange); padding: 16px 22px; background: #f4f4f4; margin: 24px 0; font-size: 16px; font-weight: 300; color: #4A4A4A; font-style: italic; line-height: 1.7; }
.sa-editor-content a { color: var(--orange); }
.sa-editor-content strong { color: var(--white); font-weight: 600; }

/* ── WHY CHOOSE US ── */
.sa-why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.sa-why-list { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-direction: column; gap: 14px; }
.sa-why-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 300; color: var(--light); line-height: 1.6; }
.sa-why-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; color: var(--orange); }
.sa-why-image { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.sa-why-badge { position: absolute; bottom: -10px; right: -10px; background: var(--orange); padding: 18px; width: 140px; clip-path: polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); }

/* ── MID CTA ── */
.sa-cta-banner { background: var(--orange); padding: 52px 0; }
.sa-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.sa-cta-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px,3.5vw,42px); text-transform: uppercase; color: #fff; line-height: 1; }
.sa-cta-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sa-cta-phone { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: #fff; letter-spacing: 0.02em; white-space: nowrap; }
.sa-cta-phone:hover { text-decoration: underline; }

/* ── NEIGHBORHOODS ── */
.sa-neighborhoods { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sa-neighborhood-pill { background: var(--dark2); border: 1px solid rgba(255,255,255,0.08); padding: 12px 22px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--light); display: flex; align-items: center; gap: 8px; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); transition: all 0.2s; }
.sa-neighborhood-pill:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.sa-map-wrap { overflow: hidden; border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid var(--orange); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .sa-hero-inner { grid-template-columns: 1fr; }
  .sa-hero-stats { flex-direction: row; border-left: none; border-top: 3px solid var(--orange); }
  .sa-hero-stat { border-right: 1px solid rgba(255,255,255,0.06); border-bottom: none; }
  .sa-services-grid { grid-template-columns: 1fr 1fr; }
  .sa-content-layout { grid-template-columns: 1fr; }
  .sa-why-inner { grid-template-columns: 1fr; gap: 40px; }
  .sa-why-image { display: none; }
}
@media (max-width: 768px) {
  .sa-hero { min-height: auto; }
  .sa-hero-inner { padding-top: 56px; padding-bottom: 40px; }
  .sa-services-grid { grid-template-columns: 1fr; }
  .sa-hero-stats { overflow-x: auto; flex-wrap: nowrap; }
  .sa-cta-inner { flex-direction: column; text-align: center; }
  .sa-cta-actions { justify-content: center; }
  .sa-section { padding: 64px 0; }
  .sa-content-section { padding: 48px 0; }
}

/* ════════════════════════════════════════════════════════════
   CONTACT PAGE TEMPLATE
   ════════════════════════════════════════════════════════════ */
.ct-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-items: start; }

.ct-tagline { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px,3vw,34px); text-transform: uppercase; color: var(--white); line-height: 1.1; margin-bottom: 32px; }
.ct-tagline span { color: var(--orange); }

.ct-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 24px; }
.ct-info-cell { display: flex; align-items: flex-start; gap: 14px; background: var(--dark2); padding: 22px 20px; }
.ct-info-icon { width: 44px; height: 44px; background: rgba(255,130,0,0.1); border: 1.5px solid rgba(255,130,0,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--orange); }
.ct-info-label { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 5px; }
.ct-info-value { font-size: 14px; font-weight: 300; color: var(--light); line-height: 1.5; }
.ct-info-link { font-size: 15px; font-weight: 600; color: var(--white); display: block; transition: color 0.2s; }
.ct-info-link:hover { color: var(--orange); }
.ct-info-link-phone { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--orange); }
.ct-map { overflow: hidden; border-left: 3px solid var(--orange); }

.ct-photo-wrap { position: relative; overflow: hidden; }
.ct-photo-badge { position: absolute; bottom: 20px; left: 20px; background: var(--orange); padding: 14px 20px; clip-path: polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%); }

.ct-form-box { background: var(--dark2); padding: 36px 32px; border-top: 3px solid var(--orange); }
.ct-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--light); display: block; margin-bottom: 7px; }
.ct-input { background: var(--steel); border: 1px solid rgba(255,255,255,0.08); color: var(--white); font-family: var(--font-body); font-size: 14px; padding: 12px 14px; outline: none; width: 100%; transition: border-color 0.2s; border-radius: 0; }
.ct-input:focus { border-color: var(--orange); }

/* Responsive */
@media (max-width: 900px) {
  .ct-layout { grid-template-columns: 1fr; }
  .ct-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ct-form-box { padding: 24px 18px; }
}

/* ════════════════════════════════════════════════════════════
   ESTIMATOR RADIO BUTTONS — global (front page + contact page)
   ════════════════════════════════════════════════════════════ */
.est-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--dark2);
  border: 1.5px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
}
.est-opt:hover { border-color: rgba(255,130,0,0.5); background: rgba(255,130,0,0.06); }
.est-opt-active { border-color: var(--orange) !important; background: rgba(255,130,0,0.1) !important; }
.est-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
.est-opt-active .est-dot { border-color: var(--orange); background: var(--orange); }
.est-opt-active .est-dot::after { content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; display: block; }
.est-opt-active span { color: var(--white) !important; }
.rc-est-card { background: var(--steel); }
#est-slider::-webkit-slider-thumb, #est2-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(255,130,0,0.6); cursor: pointer;
}
#est-slider::-moz-range-thumb, #est2-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); border: 3px solid #fff; cursor: pointer;
}
@media(max-width:900px){ .rc-est-card { grid-template-columns: 1fr !important; } }
@media(max-width:640px){ .rc-est-card > div:first-child { padding: 28px 22px !important; } .rc-est-card > div:last-child { padding: 32px 22px !important; } }


/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — About, Services, Roofing Service pages
   ════════════════════════════════════════════════════════════ */

/* Force full-width containers on mobile */
@media (max-width: 768px) {

  /* About page: hero stats strip */
  .about-stats-strip { flex-direction: column !important; flex-wrap: wrap !important; }

  /* All 4-column grids → 2 col on tablet, 1 col on phone */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* All 3-column grids → 1 col on phone */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 2-column layouts → 1 col */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Content + sidebar → hide sidebar, full-width content */
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 320px"] {
    grid-template-columns: 1fr !important;
  }

  /* Hide sidebar on mobile */
  [style*="grid-template-columns:1fr 320px"] aside,
  [style*="grid-template-columns: 1fr 320px"] aside {
    display: none !important;
  }

  /* Feature cards — stack vertically, remove side borders */
  [style*="border-right:1px solid rgba(255,255,255,0.06)"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  /* About hero stats — horizontal scroll not stack */
  [style*="position:absolute;bottom:0;right:0;display:flex"] {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    border-left: none !important;
    border-top: 3px solid var(--orange) !important;
    width: 100% !important;
  }

  /* Hero min-height shrink on mobile */
  [style*="min-height:420px"],
  [style*="min-height:480px"],
  [style*="min-height:580px"] {
    min-height: 300px !important;
  }

  /* Stat badge in hero — hide on mobile */
  [style*="position:absolute;top:80px;right:5%"] {
    display: none !important;
  }

  /* Bottom CTA flex → column */
  [style*="justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px !important;
  }

  /* Container padding on mobile */
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Service area hero two-column → one column */
  .sa-hero-inner { grid-template-columns: 1fr !important; }
  .sa-hero-stats { flex-direction: row !important; overflow-x: auto !important; flex-wrap: nowrap !important; }

  /* Values strip → 2 col */
  .sa-services-grid { grid-template-columns: 1fr !important; }
  .sa-why-inner { grid-template-columns: 1fr !important; }
  .sa-why-image { display: none !important; }

  /* Estimator on mobile */
  .rc-est-card { grid-template-columns: 1fr !important; }
  .ct-layout { grid-template-columns: 1fr !important; }

  /* Section headings scale down */
  .section-title { font-size: clamp(28px, 8vw, 48px) !important; }

  /* Typography */
  .rs-body h2 { font-size: 17px !important; }
  .rs-body h3 { font-size: 14px !important; }
  .rs-body p, .rs-body li { font-size: 14px !important; }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 320px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1fr 320px"] aside {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   WORDPRESS BLOCK EDITOR — strip all default borders & outlines
   These WP defaults cause the unwanted outlined boxes on content pages
   ════════════════════════════════════════════════════════════ */

/* Remove all borders/outlines from WP block elements */
.wp-block,
.wp-block-group,
.wp-block-group__inner-container,
.wp-block-columns,
.wp-block-column,
.entry-content .wp-block,
.rs-body .wp-block,
.rs-body .wp-block-group,
.sa-editor-content .wp-block,
.sa-editor-content .wp-block-group,
.post-body .wp-block,
.page-main-content .wp-block,
.page-main-content .wp-block-group {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Specifically kill the rounded outline that WP adds to block groups */
.wp-block-group:where(.has-background) {
    padding: 0 !important;
    background: transparent !important;
}

/* WP adds a border to table blocks */
.wp-block-table,
.wp-block-table table,
.rs-body .wp-block-table td,
.rs-body .wp-block-table th,
.sa-editor-content .wp-block-table td,
.sa-editor-content .wp-block-table th {
    border-color: rgba(255,255,255,0.1) !important;
}

/* Kill sidebar/aside default borders from WP */
.pages-sidebar .wp-block,
.pages-sidebar .wp-block-group {
    border: none !important;
    outline: none !important;
}

/* Remove the outline from the left inner column in the editor content layout */
.sa-content-layout aside,
.sa-content-layout .pages-sidebar,
.pages-sidebar-inner {
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Ensure .rs-body content never has outer borders */
.rs-body {
    border: none !important;
    outline: none !important;
}

/* Kill any remaining WP editor frame artifacts */
[class*="wp-block-"] {
    box-sizing: border-box;
}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100% !important;
}

/* ═══ BLOCKQUOTE — single orange line only, kill ALL WP stacking ═══ */
/* WP outputs: <blockquote class="wp-block-quote"><p>text</p></blockquote>
   Both elements get borders → triple line. Reset everything, re-apply once. */
.wp-block-quote,
.wp-block-pullquote,
.wp-block-quote.is-style-large,
.wp-block-quote blockquote,
blockquote.wp-block-quote {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Apply our single border to the paragraph INSIDE the block quote */
.wp-block-quote > p,
.rs-body .wp-block-quote > p,
.sa-editor-content .wp-block-quote > p,
.post-body .wp-block-quote > p {
    border-left: 3px solid var(--orange) !important;
    padding: 14px 20px !important;
    background: var(--dark2) !important;
    margin: 24px 0 !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    color: var(--light) !important;
    font-style: italic !important;
    line-height: 1.7 !important;
    display: block !important;
}
/* Also handle plain blockquote (non-Gutenberg) */
.rs-body blockquote:not(.wp-block-quote),
.sa-editor-content blockquote:not(.wp-block-quote),
.post-body blockquote:not(.wp-block-quote) {
    border-left: 3px solid var(--orange) !important;
    padding: 14px 20px !important;
    background: var(--dark2) !important;
    margin: 24px 0 !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    color: var(--light) !important;
    font-style: italic !important;
    line-height: 1.7 !important;
}

/* ════════════════════════════════════════════════════════════
   TEAM SHOWCASE — homepage + about us
   ════════════════════════════════════════════════════════════ */
.rc-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3px;
  align-items: end;
}
.rc-team-card {
  position: relative;
  overflow: hidden;
  height: 480px;
  cursor: pointer;
}
.rc-team-card--tall {
  height: 560px;
  margin-top: -80px;
}
.rc-team-photo {
  position: absolute;
  inset: 0;
}
.rc-team-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.rc-team-card:hover .rc-team-photo img { transform: scale(1.07); }
.rc-team-overlay-base {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17,18,20,0.97) 0%, rgba(17,18,20,0.5) 40%, rgba(17,18,20,0.1) 70%, transparent 100%);
  pointer-events: none;
}
.rc-team-overlay-hover {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(17,18,20,0.98) 0%, rgba(17,18,20,0.95) 60%, rgba(17,18,20,0.7) 100%);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  padding: 20px 24px 90px;
}
.rc-team-card:hover .rc-team-overlay-hover { transform: translateY(0); }
.rc-team-bio { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.82); line-height: 1.7; margin: 0 0 14px; }
.rc-team-specs { display: flex; flex-direction: column; gap: 6px; }
.rc-team-spec { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); display: flex; align-items: center; }
.rc-team-nameplate { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px 22px; z-index: 2; }
.rc-team-name { font-family: var(--font-display); font-weight: 900; font-size: 20px; text-transform: uppercase; color: #fff; letter-spacing: -0.01em; line-height: 1; }
.rc-team-role { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-top: 5px; }
.rc-team-tag { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: var(--orange); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 3; }
.rc-team-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--orange); transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s ease; z-index: 4; }
.rc-team-card:hover::before { transform: scaleY(1); }
@media (max-width: 1024px) {
  .rc-team-grid { grid-template-columns: 1fr 1fr; }
  .rc-team-card--tall { height: 480px; margin-top: 0; }
}
@media (max-width: 640px) {
  .rc-team-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .rc-team-card { height: 300px; }
  .rc-team-card--tall { height: 300px; }
  .rc-team-name { font-size: 14px; }
  .rc-team-role { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES — White/Grey backgrounds
   ════════════════════════════════════════════════════════════ */

/* Primary text color on white background */
body { color: #231F20; }
p, li, td, th { color: #4A4A4A; }

/* Headings dark on white */
h1, h2, h3, h4, h5, h6 { color: #231F20; }
.section-title { color: #231F20; }
.section-title span { color: var(--orange); }
.section-intro { color: #4A4A4A; }

/* Trust bar — dark text on white */
#trustbar { background: var(--dark2); border-bottom: 2px solid var(--orange); }
.trust-item { color: #231F20; }

/* Services section */
.service-card-title { color: #231F20; }
.service-card-desc { color: #4A4A4A; }

/* Reviews */
.review-card { background: var(--dark2); }
.review-text { color: #4A4A4A; }
.reviewer-name { color: #231F20; }
.reviewer-loc { color: #878787; }

/* Sidebar widgets */
.sidebar-widget { background: var(--dark2); }
.sidebar-widget h3, .sidebar-widget .widget-title { color: #231F20; }
.sidebar-services a, .sidebar-areas a { color: #4A4A4A; }
.sidebar-services a:hover, .sidebar-areas a:hover { color: var(--orange); }

/* FAQ on light bg */
.faq-question { color: #231F20; background: var(--dark2); }
.faq-answer { color: #4A4A4A; background: var(--steel); }

/* Service area pills */
.sa-neighborhood-pill { background: var(--steel); color: #231F20; border-color: #D0D0D0; }
.sa-neighborhood-pill:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

/* Why list items */
.sa-why-item { color: #4A4A4A; }

/* Trust ribbon */
.sa-trust-ribbon { background: var(--dark2); border-top-color: var(--orange); }
.sa-trust-item { color: #231F20; }

/* Estimator radio buttons */
.est-opt { background: var(--dark2) !important; border-color: #D0D0D0 !important; }
.est-opt:hover { border-color: rgba(255,130,0,0.5) !important; background: rgba(255,130,0,0.06) !important; }
.est-opt-active { border-color: var(--orange) !important; background: rgba(255,130,0,0.1) !important; }
.est-opt > span:last-child { color: #4A4A4A; }
.est-opt-active > span:last-child { color: #231F20 !important; }
.est-dot { border-color: #AAAAAA; }

/* Post body / editor content on light bg */
.post-body p, .rs-body p, .sa-editor-content p { color: #4A4A4A; }
.post-body h2, .rs-body h2, .sa-editor-content h2 { color: #231F20; }
.post-body h3, .rs-body h3, .sa-editor-content h3 { color: #231F20; }
.post-body ul li, .rs-body ul li, .sa-editor-content ul li { color: #4A4A4A; }
.post-body blockquote, .rs-body blockquote { background: #f4f4f4 !important; color: #4A4A4A !important; }

/* Btn-outline for light backgrounds */
.btn-outline { color: #231F20 !important; border-color: #231F20; }
.btn-outline:hover { border-color: var(--orange) !important; color: var(--orange) !important; }

/* Estimator slider track on light bg */
#est-slider, #est2-slider {
  background: linear-gradient(to right, var(--orange) 40%, #D0D0D0 40%);
}

/* Navigation links */
#primary-menu > li > a { color: #FFFFFF; }
#primary-menu > li > a:hover { color: var(--orange); }

/* Footer stays dark */
#colophon { background: #231F20 !important; }
#colophon * { color: rgba(255,255,255,0.7); }
.footer-logo-name { color: #fff !important; }
.footer-logo-name span { color: var(--orange) !important; }
.footer-col-title { color: #fff !important; }
.footer-link:hover { color: var(--orange) !important; }
.footer-bottom { background: #595959 !important; }
.footer-copy { color: rgba(255,255,255,0.5) !important; }
.footer-copy a { color: var(--orange) !important; }

/* Hero sections stay dark — override white bg for full-bleed heroes */
.sa-hero, #rc-video-wrap, .rs-hero-section, #hero-slider {
  background-color: #231F20 !important;
}
.sa-hero .section-title, .sa-hero h1 { color: #fff !important; }

/* Service cards (homepage) */
.service-card { background: var(--dark2); border-top: 3px solid transparent; }
.service-card:hover { border-top-color: var(--orange); }
.service-cat { color: var(--orange); }
.service-title { color: #231F20; }
.service-desc { color: #4A4A4A; }
.service-link { color: var(--orange); }

/* Materials strip */
#materials { background: var(--orange); }

/* Emergency bar stays orange */
#emergency { background: var(--orange); }

/* Why Choose Us section */
#why { background: var(--dark2); }
#why .section-title { color: #231F20; }
#why .why-point { color: #4A4A4A; }

/* Orange topbar — keep */
#topbar { background: var(--orange); }
#topbar * { color: #fff !important; }

/* Contact form inputs on light bg */
.ct-input { background: var(--dark2) !important; color: #231F20 !important; border-color: #D0D0D0 !important; }
.ct-label { color: #4A4A4A !important; }

/* Map on light bg */
.sa-map-wrap iframe, #ct-map { filter: none !important; }

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — COMPREHENSIVE FIXES v2
   ════════════════════════════════════════════════════════════ */

/* ── Hero/slider stroke text → white ── */
.slide-title .stroke,
.sa-h1-stroke,
[style*="-webkit-text-stroke"][style*="rgba(255,255,255"] {
  -webkit-text-stroke: 2px rgba(255,255,255,0.45) !important;
  color: transparent !important;
}
/* All hero h1 text → white */
.slide-title, .sa-h1, .sa-hero h1,
[style*="position:absolute"] .section-title,
#rc-video-wrap .section-title,
#rc-video-wrap h2 {
  color: #fff !important;
}

/* ── Video showcase section → darker bg ── */
#video-showcase {
  background: #1a1718 !important;
}
#video-showcase .section-title,
#video-showcase h2,
#video-showcase p {
  color: #fff !important;
}
#video-showcase .rc-tag { color: var(--orange) !important; }

/* ── FAQ section — light theme ── */
#faq-section { background: var(--dark2) !important; }
/* faq-header-strip dark override removed v76 */


.faq-header-right p { color: rgba(255,255,255,0.75) !important; }
.faq-card { background: #fff !important; border: 1px solid #E8E8E8 !important; }
.faq-card.active { background: #FFF5EC !important; }
.faq-card-q { color: #231F20 !important; }
.faq-card.active .faq-card-q { color: var(--orange) !important; }
.faq-card-num { color: rgba(255,130,0,0.25) !important; }
.faq-card.active .faq-card-num { color: var(--orange) !important; }
.faq-card-header:hover { background: rgba(255,130,0,0.04) !important; }
.faq-card.active .faq-card-header { background: rgba(255,130,0,0.06) !important; }
.faq-card-body { background: #fff !important; border-left-color: var(--orange) !important; }
.faq-card-answer { color: #4A4A4A !important; }
.faq-grid-wrap { background: var(--dark2) !important; padding-bottom: 60px; }

/* ── Pages sidebar — light theme ── */
.pages-sidebar-inner,
.pages-sidebar .widget,
.sidebar-widget,
.sidebar-cta-widget {
  background: #F4F4F4 !important;
  border: 1px solid #E0E0E0 !important;
}
.pages-sidebar .widget-title,
.sidebar-widget h3,
.pages-sidebar .widget h3 {
  color: #231F20 !important;
  border-bottom-color: rgba(255,130,0,0.3) !important;
}
.pages-sidebar .widget ul li a,
.sidebar-widget a,
.sidebar-services a,
.sidebar-areas a {
  color: #4A4A4A !important;
}
.pages-sidebar .widget ul li a:hover { color: var(--orange) !important; }
.pages-sidebar .widget p,
.sidebar-widget p { color: #4A4A4A !important; }
/* Sidebar CTA widget — keep orange */
.sidebar-cta { background: var(--orange) !important; }
.sidebar-cta * { color: #fff !important; }

/* ── Why Choose Us sidebar on service pages ── */
.sa-why-list li,
.sa-why-item { color: #4A4A4A !important; }
.sa-why-content .section-title,
.sa-why-content h2 { color: #231F20 !important; }

/* ── Breadcrumb text ── */
.breadcrumb a, .breadcrumb span { color: #4A4A4A !important; }
.breadcrumb a:hover { color: var(--orange) !important; }

/* ── Service area hero — keep white text ── */
.sa-hero .sa-h1,
.sa-hero .rc-tag,
.sa-hero p { color: #fff !important; }
.sa-hero-sub { color: rgba(255,255,255,0.8) !important; }
.sa-stat-num { color: var(--orange) !important; }
.sa-stat-label { color: rgba(255,255,255,0.8) !important; }

/* ── Roofing service page hero ── */
.rs-hero-section h1,
[style*="min-height:420px"] h1,
[style*="min-height:420px"] .section-title,
[style*="min-height:420px"] p.rs-sub { color: #fff !important; }

/* ── About / Services hero text ── */
[style*="min-height:420px"] [style*="color:var(--white)"],
[style*="position:absolute;inset:0"] + * h1 { color: #fff !important; }

/* ── Contact page hero ── */
[style*="min-height:480px"] h1,
[style*="min-height:480px"] .section-title { color: #fff !important; }

/* ── Section titles in dark hero areas ── */
.sa-cta-banner .sa-cta-title { color: #fff !important; }
.sa-cta-banner * { color: #fff !important; }
#emergency * { color: #fff !important; }

/* ── Review cards on light bg ── */
.review-card { background: #fff !important; border: 1px solid #E8E8E8 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.review-text { color: #4A4A4A !important; }
.reviewer-name { color: #231F20 !important; }

/* ── Trust ribbon ── */
.sa-trust-ribbon { background: #231F20 !important; }
.sa-trust-item { color: rgba(255,255,255,0.85) !important; }

/* ── Why section on homepage ── */
#why { background: #F4F4F4 !important; }
#why .section-title, #why h2 { color: #231F20 !important; }
#why .why-point, #why p { color: #4A4A4A !important; }

/* ── Services grid ── */
.service-card, .sa-service-card { background: #fff !important; border: 1px solid #E8E8E8 !important; }
.service-card:hover, .sa-service-card:hover { border-top-color: var(--orange) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.sa-svc-title, .service-title { color: #231F20 !important; }
.sa-svc-desc, .service-desc { color: #4A4A4A !important; }

/* ── Contact form on light bg ── */
.ct-form-box { background: #F4F4F4 !important; border-top-color: var(--orange) !important; }
.ct-label { color: #231F20 !important; }
.ct-input { background: #fff !important; color: #231F20 !important; border-color: #D0D0D0 !important; }
.ct-tagline { color: #231F20 !important; }
.ct-info-label { color: var(--orange) !important; }
.ct-info-value { color: #4A4A4A !important; }
.ct-info-link { color: #231F20 !important; }

/* ── Homepage about section ── */
#about { background: #fff !important; }
.expertise-lead { color: #231F20 !important; }
.expertise-body { color: #4A4A4A !important; }

/* ── Homepage services section ── */
#services { background: #F4F4F4 !important; }
#services .section-title, #services h2 { color: #231F20 !important; }

/* ── Homepage materials ── */
#materials { background: var(--orange) !important; }

/* ── Homepage trust bar ── */
#trustbar { background: #231F20 !important; }
.trust-item { color: #fff !important; }

/* ── Blog post cards ── */
.post-card { background: #fff !important; border: 1px solid #E8E8E8 !important; }
.post-title a { color: #231F20 !important; }
.post-excerpt { color: #4A4A4A !important; }

/* Materials section on orange bg — section title all white */
#materials .section-title { color: #fff !important; }
#materials .section-title span { color: transparent !important; -webkit-text-stroke: 2px rgba(255,255,255,0.5) !important; }
#materials .rc-tag { color: #fff !important; opacity: 0.9; }
#materials .rc-tag::before { background: #fff !important; }

/* ════════════════════════════════════════════════════════════
   LIGHT THEME v3 — Estimator, Maps, Service Cards
   ════════════════════════════════════════════════════════════ */

/* ── ESTIMATOR left panel — white bg, dark text ── */
.rc-est-card > div:first-child,
#cost-estimator > .container > div > div:first-child,
#cost-estimator-contact > .container > div > div:first-child {
  background: #fff !important;
}
/* Slider range labels */
#cost-estimator .est-slider-range span,
#cost-estimator [style*="est-sq-min"],
#cost-estimator [style*="est-sq-max"],
[id*="est-sq-min-label"], [id*="est-sq-max-label"] { color: #4A4A4A !important; }

/* Estimator radio options on white bg */
.est-opt { background: #F4F4F4 !important; border-color: #D8D8D8 !important; }
.est-opt:hover { border-color: rgba(255,130,0,0.5) !important; background: rgba(255,130,0,0.05) !important; }
.est-opt-active { border-color: var(--orange) !important; background: rgba(255,130,0,0.08) !important; }
.est-opt > span:last-child { color: #4A4A4A !important; }
.est-opt-active > span:last-child { color: #231F20 !important; }
.est-dot { border-color: #BBBBBB; }

/* Field labels in estimator */
[id*="est-sqft"], [id*="est2-sqft"] { color: var(--orange) !important; }

/* ── LEAFLET MAPS — light theme (remove dark filter) ── */
.leaflet-tile { filter: none !important; }
.leaflet-container { background: #f0f0f0 !important; }

/* Overide all dark-filter map containers */
#main-map, #ct-map, #sa-area-map,
.sa-map-wrap, .ct-map,
[style*="invert(90%)"] { filter: none !important; }

/* ── SERVICE AREA — services grid section → light grey bg ── */
.sa-services-grid,
.sa-section.sa-section-dark,
section.sa-section.sa-section-dark {
  background: #F4F4F4 !important;
}
.sa-service-card {
  background: #fff !important;
  border: 1px solid #E8E8E8 !important;
  border-top: 3px solid transparent !important;
}
.sa-service-card:hover {
  border-top-color: var(--orange) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  background: #fff !important;
  transform: translateY(-3px) !important;
}
.sa-svc-title { color: #231F20 !important; }
.sa-svc-desc { color: #4A4A4A !important; }
.sa-svc-more { color: var(--orange) !important; }
/* Section heading on grey */
.sa-section.sa-section-dark .section-title,
.sa-section.sa-section-dark h2 { color: #231F20 !important; }
.sa-section.sa-section-dark .section-intro,
.sa-section.sa-section-dark p { color: #4A4A4A !important; }

/* Service area neighborhoods section → also light grey */
.sa-neighborhoods,
section.sa-section.sa-section-dark:has(.sa-neighborhoods) {
  background: #F4F4F4 !important;
}

/* ── EMERGENCY BAR — light grey theme ── */
#emergency-bar { background: #F4F4F4 !important; border-top: 3px solid var(--orange) !important; }
#emergency-bar .emergency-label { color: var(--orange) !important; font-weight: 700; letter-spacing: 0.14em; }
#emergency-bar .emergency-title { color: #231F20 !important; }
#emergency-bar .emergency-phone { color: #231F20 !important; font-family: var(--font-display); font-weight: 900; font-size: 26px; }
#emergency-bar .emergency-phone:hover { color: var(--orange) !important; }
#emergency-bar .btn-white { background: var(--orange) !important; color: #fff !important; }
#emergency-bar .btn-white:hover { background: var(--orange-dark) !important; }

/* ════════════════════════════════════════════════════════════
   LIGHT THEME v4 — Footer, Mobile Menu, Emergency, Materials
   ════════════════════════════════════════════════════════════ */

/* ── FOOTER — single consistent dark color ── */
#colophon { background: #231F20 !important; padding: 60px 0 0; }
#colophon .footer-col-title { color: #fff !important; border-bottom-color: rgba(255,130,0,0.3) !important; }
#colophon .footer-link,
#colophon .footer-link a,
#colophon p,
#colophon address { color: rgba(255,255,255,0.65) !important; }
#colophon .footer-link:hover,
#colophon .footer-link a:hover { color: var(--orange) !important; }
/* Footer phone */
#colophon .footer-phone { color: var(--orange) !important; }
/* Footer bottom bar — same dark color, no contrast split */
.footer-bottom { background: #595959 !important; padding: 20px 0 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; }
.footer-copy, .footer-copy * { color: rgba(255,255,255,0.45) !important; }
.footer-copy a { color: var(--orange) !important; }

/* ── SOCIAL ICONS — orange bg, white icon to match theme ── */
.social-btn {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}
.social-btn:hover {
  background: var(--orange-dark) !important;
  border-color: var(--orange-dark) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255,130,0,0.35) !important;
}
.social-btn svg { color: #fff !important; }

/* ── MOBILE HAMBURGER — styled for dark nav ── */
.menu-toggle {
  background: var(--orange) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px !important;
  color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  display: none;
  align-items: center;
  justify-content: center;
}
.menu-toggle svg { color: #fff !important; width: 22px !important; height: 22px !important; }
@media(max-width:768px) { .menu-toggle { display: flex !important; } }

/* ── EMERGENCY BAR — remove orange bar, keep clean ── */
#emergency-bar { background: #F4F4F4 !important; border-top: 3px solid var(--orange) !important; }
/* Remove the orange vertical accent div by targeting next sibling */
#emergency-bar .emergency-inner > div:first-child[style*="width:6px"] { display: none !important; }
#emergency-bar .emergency-title { color: #231F20 !important; }
#emergency-bar .emergency-label { color: var(--orange) !important; }
#emergency-bar .emergency-phone { color: #231F20 !important; }

/* ── MATERIALS SECTION — grey bg, dark text, black pills ── */
#materials {
  background: var(--orange) !important;
  background-image: none !important;
}
#materials .section-title { color: #fff !important; }
#materials .section-title span {
  color: transparent !important;
  -webkit-text-stroke: 2px rgba(35,31,32,0.25) !important;
}
#materials .rc-tag { color: #fff !important; opacity: 0.9 !important; }
#materials .rc-tag::before { background: #fff !important; }
.material-pill {
  background: #231F20 !important;
  color: #fff !important;
  border-color: #231F20 !important;
}
.material-pill:hover {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}

/* ── MATERIALS — "ROOFING MATERIALS" in black, pills grey on hover ── */
#materials .section-title span {
  -webkit-text-stroke: 2px rgba(0,0,0,0.5) !important;
  color: transparent !important;
}
/* Override the transparent stroke with solid black */
#materials .section-title span {
  -webkit-text-stroke: 0 !important;
  color: #231F20 !important;
}
.material-pill:hover {
  background: #58595B !important;
  border-color: #58595B !important;
  color: #fff !important;
}

/* ── LOGO — remove all glow/shadow effects ── */
.nav-logo-img,
.nav-logo img,
img.nav-logo-img,
.logo-img {
  filter: none !important;
  box-shadow: none !important;
  -webkit-filter: none !important;
}

/* ── SERVICE CARD IMAGE OVERLAYS — always white text (on dark photo bg) ── */
.service-card-cat { color: var(--orange) !important; }
.service-card-title { color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important; }
.service-card-desc { color: rgba(255,255,255,0.85) !important; }
.service-card-body {
  background: linear-gradient(to top, rgba(17,18,20,0.97) 0%, rgba(17,18,20,0.7) 50%, transparent 100%) !important;
}
/* Make image darker so text is always legible */
.service-card-img {
  filter: brightness(0.6) saturate(0.8) !important;
}
.service-card:hover .service-card-img {
  filter: brightness(0.45) saturate(0.7) !important;
}

/* ── CTA BANNER btn-white — white bg, orange text, always visible on orange bg ── */
.sa-cta-banner .btn-white {
  background: #fff !important;
  color: var(--orange) !important;
}
.sa-cta-banner .btn-white:hover {
  background: #fff !important;
  color: var(--orange-dark) !important;
  transform: translateX(4px);
}
.sa-cta-banner .btn-white * { color: var(--orange) !important; }

===============
   THE ROOFING CREW — THEME STYLESHEET v2.0
   ================================================================
   To change primary color: Appearance > Customize > Brand Colors
   To change phone: Appearance > Customize > Phone & Contact Info
   ================================================================ */

:root {
  /* ── Tennessee Vols Color System — Light Mode ── */
  --orange:       #FF8200;   /* Tennessee Orange */
  --orange-light: #FF9E33;   /* Hover orange */
  --orange-dark:  #CC6800;   /* Pressed orange */

  /* Light backgrounds */
  --dark:         #FFFFFF;   /* Main bg — pure white */
  --dark2:        #F4F4F4;   /* Section alt bg — light grey */
  --steel:        #E8E8E8;   /* Card / panel bg — mid grey */

  /* Text & borders */
  --mid:          #9B9B9B;   /* Subtle borders, placeholders */
  --light:        #4A4A4A;   /* Body text on light bg */
  --offwhite:     #231F20;   /* Primary text — UT dark charcoal */
  --white:        #231F20;   /* Was pure white text — now dark for light bg */

  /* Explicit colors for hero/dark sections (used inline) */
  --hero-dark:    #231F20;   /* Dark hero backgrounds */
  --hero-dark2:   #3B3537;   /* Dark section variants */
  --hero-text:    #FFFFFF;   /* White text inside dark sections */

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--offwhite); font-family: var(--font-body); font-weight: 400; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

/* ── UTILITY ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.rc-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; }
.rc-tag::before { content: ''; display: block; width: 24px; height: 2px; background: var(--orange); }
.section-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px,6vw,72px); line-height: 0.95; text-transform: uppercase; color: var(--offwhite); letter-spacing: -0.01em; }
.section-title span { color: var(--orange); }
.section-header { margin-bottom: 60px; }
.section-header-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.section-intro { font-size: 16px; font-weight: 300; color: var(--light); max-width: 420px; line-height: 1.7; }

/* ── BUTTONS ── */
.btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--orange); color: #fff !important; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 32px; border: none; cursor: pointer; clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); transition: background 0.2s, transform 0.2s; }
.btn-primary:hover { background: var(--orange-light); transform: translateX(3px); }
.btn-outline { display: inline-flex; align-items: center; gap: 10px; border: 2px solid rgba(255,255,255,0.35); color: #fff !important; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 30px; background: transparent; transition: border-color 0.2s, color 0.2s; }
.btn-outline:hover { border-color: var(--orange); color: var(--orange) !important; }
.btn-white { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--orange) !important; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; padding: 18px 36px; clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); transition: transform 0.2s; }
.btn-white:hover { transform: translateX(4px); }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── TOP BAR ── */
#topbar { background: var(--orange); padding: 9px 0; }
#topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar-left { display: flex; gap: 20px; align-items: center; }
.topbar-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9); }
.topbar-item svg { width: 14px; height: 14px; }
.topbar-phone { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 0.04em; color: #fff; display: flex; align-items: center; gap: 8px; }
.topbar-phone svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── NAVIGATION ── */
#masthead { position: sticky; top: 0; z-index: 200; background: #231F20; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.nav-logo-wrap { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-logo-img { height: 72px; width: 72px; object-fit: contain; border-radius: 8px; filter: none; box-shadow: none; transition: transform 0.3s; }
.nav-logo-wrap:hover .nav-logo-img { filter: none; transform: scale(1.04); }
.nav-logo-text { display: flex; flex-direction: column; }
.nav-logo-name { font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); line-height: 1; }
.nav-logo-name span { color: var(--orange); }
.nav-logo-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--light); margin-top: 2px; }
#primary-menu { display: flex; align-items: center; gap: 2px; list-style: none; }
#primary-menu li { position: relative; }
#primary-menu > li > a { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); padding: 8px 12px; display: block; transition: color 0.2s; white-space: nowrap; }
#primary-menu > li > a:hover,
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current_page_item > a { color: var(--orange); }
/* Dropdown */
#primary-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--dark2); border-top: 2px solid var(--orange); border-bottom: 1px solid rgba(255,255,255,0.06); list-style: none; z-index: 300; }
#primary-menu li:hover > .sub-menu { display: block; }
#primary-menu .sub-menu li a { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--light); padding: 12px 18px; display: block; border-bottom: 1px solid rgba(255,255,255,0.04); transition: color 0.2s, background 0.2s; white-space: nowrap; }
#primary-menu .sub-menu li a:hover { color: var(--orange); background: rgba(255,130,0,0.08); }
.nav-cta { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--orange); color: #fff !important; padding: 10px 20px; transition: background 0.2s; white-space: nowrap; flex-shrink: 0; }
.nav-cta:hover { background: var(--orange-light); }
.menu-toggle { display: none; background: transparent; border: 2px solid rgba(255,255,255,0.2); padding: 8px; cursor: pointer; color: var(--white); flex-shrink: 0; }
.menu-toggle svg { width: 22px; height: 22px; display: block; }

/* ── MOBILE DRAWER ── */
.mobile-drawer { display: none; position: fixed; top: 0; left: 0; width: min(320px,85vw); height: 100vh; background: var(--dark2); border-right: 2px solid rgba(255,130,0,0.3); z-index: 300; transform: translateX(-100%); transition: transform 0.3s ease; flex-direction: column; overflow-y: auto; }
.mobile-drawer.open { transform: translateX(0); display: flex; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.drawer-logo-img { height: 44px; width: auto; border-radius: 6px; }
.drawer-close { background: transparent; border: none; color: var(--light); cursor: pointer; font-size: 24px; line-height: 1; padding: 4px; }
.drawer-menu { list-style: none; padding: 12px 0; flex: 1; }
.drawer-menu li a { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: color 0.2s, background 0.2s, padding-left 0.2s; }
.drawer-menu li a:hover { color: var(--orange); background: rgba(255,130,0,0.08); padding-left: 30px; }
.drawer-menu .sub-menu { list-style: none; background: rgba(255,255,255,0.03); }
.drawer-menu .sub-menu a { padding-left: 36px; font-size: 14px; }
.drawer-cta { margin: 20px 24px; }
.drawer-phone { padding: 20px 24px; border-top: 1px solid rgba(255,255,255,0.07); }
.drawer-phone a { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--orange); display: flex; align-items: center; gap: 10px; }
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 250; }
.overlay.open { display: block; }

/* ── HERO SLIDER ── */
#hero-slider { position: relative; overflow: hidden; height: 92vh; min-height: 560px; max-height: 920px; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; display: flex; align-items: center; }
.slide.active { opacity: 1; z-index: 1; }
.slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); transition: transform 7s ease; }
.slide.active .slide-bg { transform: scale(1); }
.slide-overlay { position: absolute; inset: 0; background: linear-gradient(105deg,rgba(17,18,20,0.75) 0%,rgba(17,18,20,0.55) 55%,rgba(17,18,20,0.30) 100%); }
.slide-overlay::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.05) 2px,rgba(0,0,0,0.05) 4px); }
.slide-content { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.slide-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s; }
.slide-eyebrow::before { content: ''; display: block; width: 36px; height: 2px; background: var(--orange); }
.slide.active .slide-eyebrow { opacity: 1; transform: translateY(0); }
.slide-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(52px,8vw,100px); line-height: 0.9; text-transform: uppercase; color: var(--white); letter-spacing: -0.02em; margin-bottom: 24px; max-width: 700px; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s; }
.slide-title .accent { color: var(--orange); }
.slide-title .stroke { -webkit-text-stroke: 2px rgba(255,255,255,0.35); color: transparent; }
.slide.active .slide-title { opacity: 1; transform: translateY(0); }
.slide-subtitle { font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.78); line-height: 1.65; max-width: 520px; margin-bottom: 36px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s; }
.slide.active .slide-subtitle { opacity: 1; transform: translateY(0); }
.slide-actions { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease 0.65s, transform 0.5s ease 0.65s; }
.slide.active .slide-actions { opacity: 1; transform: translateY(0); }
.slider-nav { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 12px; align-items: center; }
.slider-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); border: none; cursor: pointer; transition: all 0.3s; padding: 0; }
.slider-dot.active { background: var(--orange); transform: scale(1.35); }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 52px; height: 52px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; backdrop-filter: blur(4px); }
.slider-arrow:hover { background: var(--orange); border-color: var(--orange); }
.slider-arrow-prev { left: 24px; }
.slider-arrow-next { right: 24px; }
.slider-arrow svg { width: 22px; height: 22px; }
/* hero-stats-bar consolidated below */
.hero-stats-inner { display: flex; flex-wrap: wrap; }
.hero-stat { flex: 1 1 120px; padding: 16px 28px; border-right: 1px solid #D8D8D8; }
.hero-stat:last-child { border-right: none; }
.hero-stat-num { font-family: var(--font-display); font-weight: 900; font-size: 34px; color: var(--orange); line-height: 1; letter-spacing: -0.02em; }
.hero-stat-label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #231F20 !important; margin-top: 3px; }
.slider-phone-card { position: absolute; right: 60px; bottom: 90px; z-index: 5; background: var(--orange); padding: 22px 32px; clip-path: polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.slider-phone-label { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 4px; }
.slider-phone-num { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: #fff; letter-spacing: 0.02em; }
.slider-phone-sub { font-size: 11px; color: rgba(255,255,255,0.8); margin-top: 3px; }

/* ── TRUST BAR ── */
#trust-bar { background: var(--dark2); border-top: 3px solid var(--orange); border-bottom: 1px solid rgba(255,255,255,0.06); }
.trust-bar-inner { display: flex; flex-wrap: wrap; }
.trust-item { flex: 1 1 180px; display: flex; align-items: center; gap: 14px; padding: 22px 26px; border-right: 1px solid rgba(255,255,255,0.06); }
.trust-item:last-child { border-right: none; }
.trust-icon { width: 40px; height: 40px; background: rgba(255,130,0,0.12); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-icon svg { width: 20px; height: 20px; color: var(--orange); }
.trust-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); margin-bottom: 2px; }
.trust-desc { font-size: 11px; color: var(--light); }

/* ── SECTIONS ── */
section { padding: 100px 0; }
#materials { padding: 72px 0; }

/* ── SERVICES ── */
#services { background: var(--dark); }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.service-card { position: relative; overflow: hidden; background: var(--dark2); }
.service-card-img { width: 100%; height: 280px; object-fit: cover; transition: transform 0.5s, filter 0.5s; filter: brightness(0.7) saturate(0.8); }
.service-card:hover .service-card-img { transform: scale(1.05); filter: brightness(0.5); }
.service-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px; background: linear-gradient(to top,rgba(17,18,20,0.98),transparent); transition: padding-bottom 0.3s; }
.service-card:hover .service-card-body { padding-bottom: 36px; }
.service-card-cat { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.service-card-title { font-family: var(--font-display); font-weight: 800; font-size: 24px; text-transform: uppercase; color: var(--white); line-height: 1.1; margin-bottom: 8px; }
.service-card-desc { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6; max-height: 0; overflow: hidden; transition: max-height 0.4s, opacity 0.4s; opacity: 0; }
.service-card:hover .service-card-desc { max-height: 80px; opacity: 1; }
.service-card-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-top: 10px; opacity: 0; transition: opacity 0.3s 0.1s; }
.service-card:hover .service-card-link { opacity: 1; }
.sub-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 2px; }
.sub-service { background: var(--dark2); padding: 26px 28px; border-left: 3px solid var(--orange); }
.sub-service h4 { font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; color: var(--white); margin-bottom: 5px; }
.sub-service p { font-size: 13px; color: var(--light); }

/* ── MATERIALS ── */
#materials { background: var(--dark2); }
.materials-header { text-align: center; margin-bottom: 40px; }
.materials-strip { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.material-pill { background: var(--steel); border: 1px solid rgba(255,255,255,0.08); padding: 12px 22px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); transition: all 0.2s; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); cursor: default; }
.material-pill:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

/* ── EMERGENCY BAR ── */
#emergency-bar { position: relative; padding: 72px 0; overflow: hidden; background: var(--orange); }
.emergency-storm-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.12; mix-blend-mode: luminosity; pointer-events: none; }
#emergency-bar::after { content: 'EMERGENCY'; position: absolute; top: -20px; right: -20px; font-family: var(--font-display); font-weight: 900; font-size: 180px; line-height: 1; color: rgba(255,255,255,0.05); pointer-events: none; z-index: 1; }
.emergency-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.emergency-label { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.emergency-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(32px,5vw,60px); text-transform: uppercase; color: #fff; line-height: 0.95; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.emergency-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.emergency-phone { font-family: var(--font-display); font-weight: 900; font-size: 36px; color: #fff; letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(0,0,0,0.25); }

/* ── WHY US ── */
#why-us { background: var(--dark); }
.why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.why-image-wrap { position: relative; }
.why-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; filter: brightness(0.88); }
.why-exp-badge { position: absolute; top: -24px; left: -24px; background: var(--dark2); border: 2px solid var(--orange); padding: 20px 24px; text-align: center; }
.why-exp-num { font-family: var(--font-display); font-weight: 900; font-size: 48px; color: var(--orange); line-height: 1; }
.why-exp-label { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light); }
.why-cert-badge { position: absolute; bottom: -24px; right: -24px; background: var(--orange); padding: 20px; width: 150px; text-align: center; clip-path: polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.why-cert-badge img { width: 80px; margin: 0 auto 6px; border-radius: 4px; }
.why-cert-label { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; line-height: 1.4; }
.why-intro { font-size: 16px; font-weight: 300; color: var(--light); line-height: 1.75; margin-bottom: 36px; }
.why-checklist { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-bottom: 40px; }
.why-check-item { display: flex; gap: 14px; }
.check-dot { width: 26px; height: 26px; background: rgba(255,130,0,0.15); border: 1.5px solid var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.check-dot svg { width: 12px; height: 12px; color: var(--orange); }
.check-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); margin-bottom: 3px; }
.check-desc { font-size: 13px; color: var(--light); line-height: 1.6; }

/* ── SERVICE AREAS ── */
#service-areas { padding: 0; background: var(--dark2); position: relative; overflow: hidden; }
.areas-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; }
.areas-content { padding: 80px 60px 80px 32px; max-width: 600px; margin-left: calc((100vw - 1200px) / 2); padding-left: 32px; }
.areas-desc { font-size: 16px; color: var(--light); line-height: 1.7; margin-bottom: 36px; }
.area-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.area-tag { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); padding: 9px 16px; background: var(--steel); border: 1px solid rgba(255,255,255,0.08); transition: all 0.2s; }
.area-tag:hover { background: var(--orange); border-color: var(--orange); }
.areas-map-panel { position: relative; overflow: hidden; }
.areas-map-panel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; filter: invert(90%) hue-rotate(180deg) saturate(0.8) brightness(0.85); }
.map-badge { position: absolute; top: 20px; left: 20px; z-index: 5; background: var(--orange); padding: 10px 18px; clip-path: polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; box-shadow: 0 4px 20px rgba(255,130,0,0.4); }
.areas-map-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--orange); z-index: 6; }
.map-caption { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 11px; color: rgba(255,255,255,0.4); z-index: 5; }

/* ── ABOUT ── */
#about { background: var(--dark); padding: 80px 0 40px; }
.expertise-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.expertise-lead { font-size: 19px; font-weight: 300; line-height: 1.75; color: var(--offwhite); margin-bottom: 32px; border-left: 3px solid var(--orange); padding-left: 22px; }
.expertise-body { font-size: 15px; font-weight: 300; color: var(--light); line-height: 1.75; margin-bottom: 22px; }
.expertise-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: brightness(0.85); margin-bottom: 2px; }
.expertise-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.expertise-stat { background: var(--dark2); padding: 26px; text-align: center; }
.expertise-stat-num { font-family: var(--font-display); font-weight: 900; font-size: 48px; color: var(--orange); line-height: 1; }
.expertise-stat-label { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light); margin-top: 4px; }

/* ── REVIEWS ── */
#reviews { background: var(--dark2); }
.reviews-header { text-align: center; margin-bottom: 52px; }
.stars-display { display: flex; justify-content: center; gap: 4px; margin: 12px 0 8px; }
.star { color: var(--orange); font-size: 22px; }
.reviews-count { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light); }
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.review-card { background: var(--steel); padding: 32px 28px; position: relative; }
.review-card::before { content: '"'; position: absolute; top: 12px; right: 20px; font-family: var(--font-display); font-size: 72px; font-weight: 900; color: rgba(255,130,0,0.15); line-height: 1; }
.review-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.review-star { color: var(--orange); font-size: 13px; }
.review-text { font-size: 14px; color: var(--light); line-height: 1.7; margin-bottom: 20px; font-style: italic; font-weight: 300; }
.reviewer { display: flex; align-items: center; gap: 12px; }
.reviewer-avatar { width: 40px; height: 40px; background: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; flex-shrink: 0; }
.reviewer-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; color: var(--white); }
.reviewer-loc { font-size: 11px; color: var(--mid); }

/* ── CONTACT ── */
#contact { background: var(--dark); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.contact-desc { font-size: 16px; color: var(--light); line-height: 1.7; margin-bottom: 40px; }
.contact-details { display: flex; flex-direction: column; gap: 24px; }
.contact-detail { display: flex; gap: 14px; align-items: flex-start; }
.contact-detail-icon { width: 40px; height: 40px; background: rgba(255,130,0,0.12); border: 1px solid rgba(255,130,0,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-detail-icon svg { width: 18px; height: 18px; color: var(--orange); }
.contact-detail-label { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; }
.contact-detail-value { font-size: 17px; font-weight: 600; color: var(--white); }
.contact-form-wrap { background: var(--dark2); padding: 44px; border-top: 3px solid var(--orange); }
.form-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.form-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--light); }
.form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  background: var(--steel); border: 1px solid rgba(255,255,255,0.08); color: var(--white); font-family: var(--font-body); font-size: 15px; padding: 13px 15px; outline: none; width: 100%; transition: border-color 0.2s; border-radius: 0;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
input:focus, select:focus, textarea:focus { border-color: var(--orange); }
.form-textarea, textarea { resize: vertical; min-height: 100px; }
select option { background: var(--steel); }
.form-submit, input[type="submit"], button[type="submit"] {
  width: 100%; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--orange); color: #fff; border: none; cursor: pointer; padding: 17px; display: flex; align-items: center; justify-content: center; gap: 10px; clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); transition: background 0.2s; margin-top: 4px;
}
.form-submit:hover { background: var(--orange-light); }
.form-submit:disabled { background: var(--mid); cursor: not-allowed; }
.form-success { display: none; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.4); padding: 16px; text-align: center; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: #4ade80; }
.form-error { display: none; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.4); padding: 16px; text-align: center; margin-top: 14px; font-size: 13px; color: #f87171; }
/* WPForms / CF7 compatibility */
.wpcf7-response-output { margin-top: 14px; padding: 14px; font-size: 13px; }
.wpforms-container .wpforms-field input,
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select { background: var(--steel) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: var(--white) !important; border-radius: 0 !important; }
.wpforms-container .wpforms-submit-container button { background: var(--orange) !important; clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%) !important; border-radius: 0 !important; font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }

/* ── BLOG STRIP (homepage) ── */
#blog-preview { background: var(--dark); }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 44px; }
.blog-card { background: var(--dark2); overflow: hidden; transition: transform 0.3s; }
.blog-card:hover { transform: translateY(-3px); }
.blog-card-img-wrap { overflow: hidden; }
.blog-card-img { width: 100%; height: 200px; object-fit: cover; filter: brightness(0.75); transition: filter 0.3s, transform 0.4s; }
.blog-card:hover .blog-card-img { filter: brightness(1); transform: scale(1.04); }
.blog-card-body { padding: 24px; }
.blog-card-cat { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; display: block; }
.blog-card-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; color: var(--white); line-height: 1.15; margin-bottom: 10px; display: block; transition: color 0.2s; }
.blog-card-title:hover { color: var(--orange); }
.blog-card-excerpt { font-size: 13px; color: var(--light); line-height: 1.6; margin-bottom: 16px; }
.blog-card-footer { display: flex; justify-content: space-between; align-items: center; }
.blog-card-date { font-size: 12px; color: var(--mid); }
.blog-card-read { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); transition: color 0.2s; }

/* ── PAGE HERO (inner pages) ── */
.page-hero { position: relative; overflow: hidden; padding: 80px 0 60px; }
.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(17,18,20,0.75) 0%, rgba(17,18,20,0.55) 100%); }
.page-hero-inner { position: relative; z-index: 1; }
.page-title-text { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px,7vw,88px); line-height: 0.9; text-transform: uppercase; color: var(--white); letter-spacing: -0.02em; }
.page-title-text span { color: var(--orange); }
.page-subtitle { font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.7); max-width: 560px; line-height: 1.65; margin-top: 20px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: var(--mid); flex-wrap: wrap; }
.breadcrumb a { color: var(--light); transition: color 0.2s; }
.breadcrumb a:hover, .breadcrumb .yoast-bc a:hover { color: var(--orange); }
.breadcrumb span.sep { color: var(--mid); }

/* ── POST SINGLE ── */
.post-hero { position: relative; overflow: hidden; padding: 100px 0 72px; }
.post-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.post-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(17,18,20,0.75) 0%, rgba(17,18,20,0.55) 55%, rgba(17,18,20,0.30) 100%); }
.post-hero-inner { position: relative; z-index: 1; }
.post-cat-badge { display: inline-block; background: var(--orange); font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; padding: 5px 14px; margin-bottom: 18px; }
.post-hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(38px,6vw,76px); line-height: 0.95; text-transform: uppercase; color: var(--white); letter-spacing: -0.02em; margin-bottom: 22px; max-width: 900px; }
.post-hero-title span { color: var(--orange); }
.post-meta-bar { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.post-meta-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mid); }
.post-meta-item svg { width: 12px; height: 12px; color: var(--orange); }
.post-layout { padding: 72px 0; background: var(--dark); }
.post-inner { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.post-lead { font-size: 19px; font-weight: 300; line-height: 1.75; color: var(--offwhite); margin-bottom: 36px; border-left: 3px solid var(--orange); padding-left: 22px; }
.post-body p { font-size: 15px; font-weight: 300; color: var(--light); line-height: 1.8; margin-bottom: 22px; }
.post-body h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px,2.2vw,24px); text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); line-height: 1.1; margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,130,0,0.25); }
.post-body h2 span { color: var(--orange); }
.post-body h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--white); margin: 28px 0 10px; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.post-body ul li, .post-body ol li { font-size: 14px; font-weight: 300; color: var(--light); line-height: 1.7; padding: 7px 0 7px 26px; border-bottom: 1px solid rgba(255,255,255,0.04); position: relative; }
.post-body ul li::before { content: '›'; position: absolute; left: 8px; color: var(--orange); font-size: 16px; font-weight: 700; top: 6px; }
.author-box { background: var(--dark2); padding: 28px; border-left: 4px solid var(--orange); margin-top: 36px; display: flex; gap: 20px; }
.author-avatar { width: 56px; height: 56px; background: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 20px; color: #fff; flex-shrink: 0; }
.author-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; color: var(--white); margin-bottom: 3px; }
.author-cred { font-size: 11px; color: var(--orange); letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-display); font-weight: 700; margin-bottom: 8px; }
.author-bio { font-size: 13px; color: var(--light); line-height: 1.65; }
.related-posts { padding: 72px 0; background: var(--dark2); }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 36px; }
.related-card { background: var(--steel); overflow: hidden; }
.related-img { width: 100%; height: 170px; object-fit: cover; filter: brightness(0.7); transition: filter 0.3s; }
.related-card:hover .related-img { filter: brightness(1); }
.related-body { padding: 20px; }
.related-cat { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange); margin-bottom: 7px; }
.related-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; color: var(--white); line-height: 1.15; margin-bottom: 10px; display: block; transition: color 0.2s; }
.related-title:hover { color: var(--orange); }

/* ── BLOG ARCHIVE ── */
.blog-archive { padding: 80px 0; background: var(--dark); }
.blog-archive-layout { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
.posts-grid-archive { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cat-filter { padding: 36px 0; background: var(--dark2); border-bottom: 1px solid rgba(255,255,255,0.06); }
.cat-filter-inner { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cat-btn { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 18px; background: var(--steel); border: none; color: var(--light); cursor: pointer; transition: all 0.2s; }
.cat-btn:hover, .cat-btn.active { background: var(--orange); color: #fff; }

/* ── SIDEBAR ── */
.sidebar-widget { background: var(--dark2); padding: 26px; margin-bottom: 2px; }
.sidebar-cta { background: var(--orange); padding: 32px 26px; text-align: center; margin-bottom: 2px; }
.sidebar-cta-title { font-family: var(--font-display); font-weight: 900; font-size: 26px; text-transform: uppercase; color: #fff; line-height: 1; margin-bottom: 10px; }
.sidebar-cta-desc { font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 20px; line-height: 1.6; }
.sidebar-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--orange); font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 24px; width: 100%; transition: transform 0.2s; clip-path: polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%); }
.sidebar-cta-btn:hover { transform: translateX(3px); }
.widget-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,130,0,0.3); }
.sticky-sidebar { position: sticky; top: 88px; }
.tag-cloud { display: flex; gap: 7px; flex-wrap: wrap; }
.tag-pill { background: var(--steel); color: var(--light); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; transition: all 0.2s; clip-path: polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%); }
.tag-pill:hover { background: var(--orange); color: #fff; }

/* ── PAGINATION ── */
.pagination, .nav-links { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 52px; flex-wrap: wrap; }
.page-numbers, .nav-links a, .nav-links span { min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px; background: var(--dark2); color: var(--light); text-decoration: none; transition: all 0.2s; }
.page-numbers.current, .page-numbers:hover, .nav-links a:hover { background: var(--orange); color: #fff; }

/* ── FOOTER ── */
footer { background: var(--dark2); border-top: 1px solid rgba(255,255,255,0.06); padding: 72px 0 36px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 52px; margin-bottom: 52px; }
.footer-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-logo-img { height: 90px; width: 90px; object-fit: contain; border-radius: 10px; filter: none; box-shadow: none; }
.footer-logo-text-wrap .footer-logo-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); }
.footer-logo-text-wrap .footer-logo-name span { color: var(--orange); }
.footer-logo-text-wrap .footer-logo-sub { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); margin-top: 2px; }
.footer-about { font-size: 13px; font-weight: 300; color: var(--light); line-height: 1.7; margin-bottom: 16px; }
.footer-address { font-size: 13px; color: var(--light); line-height: 1.7; margin-bottom: 16px; display: flex; gap: 8px; align-items: flex-start; }
.footer-address svg { width: 14px; height: 14px; color: var(--orange); flex-shrink: 0; margin-top: 3px; }
.footer-license { font-size: 11px; color: var(--mid); margin-bottom: 20px; }
.footer-col-title { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,130,0,0.3); }
.footer-menu { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-menu a { font-size: 13px; font-weight: 300; color: var(--light); transition: color 0.2s, padding-left 0.2s; display: flex; align-items: center; gap: 7px; }
.footer-menu a::before { content: '›'; color: var(--orange); font-size: 15px; }
.footer-menu a:hover { color: var(--orange); padding-left: 4px; }

/* SOCIAL ICONS */
.social-links { display: flex; gap: 10px; margin-top: 18px; }
.social-btn { width: 38px; height: 38px; background: var(--steel); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--light); transition: all 0.25s; }
.social-btn:hover { background: var(--orange); color: #fff !important; border-color: var(--orange); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,130,0,0.4); }
.social-btn svg { width: 18px; height: 18px; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-copy { font-size: 12px; color: var(--mid); }

/* ── STICKY CALL ── */
#sticky-call { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--orange); padding: 13px 24px; display: none; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-decoration: none; }
#sticky-call svg { width: 18px; height: 18px; }

/* ── 404 ── */
.error-404 { min-height: 70vh; display: flex; align-items: center; background: var(--dark); }
.error-404-num { font-family: var(--font-display); font-weight: 900; font-size: 180px; line-height: 1; color: rgba(255,130,0,0.1); letter-spacing: -0.05em; }
.error-404-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px,5vw,64px); text-transform: uppercase; color: var(--white); margin-top: -40px; margin-bottom: 16px; }
.error-404-title span { color: var(--orange); }

/* ── WP CORE ── */
.aligncenter { display: block; margin: 0 auto 24px; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.wp-caption { background: var(--dark2); padding: 12px; margin-bottom: 24px; }
.wp-caption-text { font-size: 12px; color: var(--mid); text-align: center; margin-top: 8px; }
.yoast-bc { font-size: 13px; margin-bottom: 16px; }
.yoast-bc a { color: var(--light); }
.yoast-bc a:hover { color: var(--orange); }
.screen-reader-text { clip: rect(1px,1px,1px,1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .sub-services { grid-template-columns: 1fr 1fr; }
  .why-inner { grid-template-columns: 1fr; gap: 48px; }
  .why-image-wrap { display: none; }
  .expertise-inner { grid-template-columns: 1fr; gap: 44px; }
  .areas-inner { grid-template-columns: 1fr; min-height: auto; }
  .areas-content { margin-left: 0; padding: 60px 32px; max-width: 100%; }
  .areas-map-panel { height: 400px; }
  .areas-map-panel::before { width: 100%; height: 3px; top: auto; bottom: 0; left: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .contact-inner { grid-template-columns: 1fr; gap: 44px; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .slider-phone-card { display: none; }
  .blog-archive-layout { grid-template-columns: 1fr; }
  .post-inner { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .topbar-left { display: none; }
  #primary-menu { display: none; }
  .nav-cta { display: none; }
  .menu-toggle { display: flex; }
  .services-grid, .sub-services { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .reviews-grid, .blog-grid, .related-grid, .posts-grid-archive { grid-template-columns: 1fr; }
  #sticky-call { display: flex; }
  body { padding-bottom: 52px; }
  .trust-bar-inner { flex-direction: column; }
  .trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); flex: none; width: 100%; }
  .emergency-inner { flex-direction: column; text-align: center; }
  .emergency-actions { justify-content: center; }
  #hero-slider { height: 80vh; min-height: 500px; }
  .slider-arrow { display: none; }
  .slide-title { font-size: clamp(44px,12vw,80px); }
  .contact-inner { grid-template-columns: 1fr; }
  .expertise-stats { grid-template-columns: 1fr 1fr; }
  .nav-logo-text { display: none; }
  .nav-logo-img { height: 46px; }
  section { padding: 72px 0; }
  .contact-form-wrap { padding: 28px 20px; }
  .areas-map-panel { height: 320px; }
}
@media (max-width: 480px) {
  .slide-actions { flex-direction: column; gap: 12px; }
  .slide-actions .btn-primary, .slide-actions .btn-outline { width: 100%; justify-content: center; }
  #hero-slider { height: 85vh; }
  .hero-stat { padding: 12px 16px; }
  .hero-stat-num { font-size: 26px; }
}

/* ══════════════════════════════════════════════
   BUG FIX: DROPDOWN SUBMENUS
   ══════════════════════════════════════════════ */
#primary-menu li { position: relative; }

/* Desktop hover dropdown */
#primary-menu > li > .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 220px;
  background: var(--dark2);
  border-top: 2px solid var(--orange);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  list-style: none;
  z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#primary-menu > li:hover > .sub-menu,
#primary-menu > li:focus-within > .sub-menu {
  display: block;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
#primary-menu .sub-menu li {
  display: block;
  width: 100%;
}
#primary-menu .sub-menu li a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--light);
  padding: 13px 20px;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
}
#primary-menu .sub-menu li a:hover {
  color: var(--orange);
  background: rgba(255,130,0,0.08);
  padding-left: 26px;
}
/* Arrow indicator on parent items with children */
#primary-menu > li.menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 10px;
  opacity: 0.6;
}

/* ══════════════════════════════════════════════
   SERVICE AREAS MAP WITH PINS
   ══════════════════════════════════════════════ */
#service-areas { padding: 0; background: var(--dark2); overflow: hidden; }
.areas-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.areas-content { padding: 80px 60px 80px 32px; max-width: 600px; margin-left: calc((100vw - 1200px) / 2); padding-left: 32px; display: flex; flex-direction: column; justify-content: center; }
.areas-map-panel { position: relative; overflow: hidden; min-height: 600px; }
#rc-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* Dark filter on leaflet tiles */
.leaflet-tile { filter: invert(1) hue-rotate(180deg) saturate(0.6) brightness(0.75) !important; }
.leaflet-container { background: var(--dark) !important; }
/* Custom orange marker */
.rc-map-pin {
  background: var(--orange);
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(255,130,0,0.5);
  transition: transform 0.2s;
}
.rc-map-pin::after {
  content: '🏠';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  font-size: 14px;
}
.leaflet-popup-content-wrapper {
  background: var(--dark2) !important;
  border: 1px solid rgba(255,130,0,0.4) !important;
  border-radius: 0 !important;
  color: var(--white) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-tip { background: var(--dark2) !important; }
.leaflet-popup-content { margin: 14px 18px !important; }
.leaflet-popup-content strong {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
  margin-bottom: 4px;
}
.leaflet-popup-content span { font-size: 12px; color: var(--light); }
.leaflet-popup-close-button { color: var(--orange) !important; font-size: 18px !important; }
.map-badge { position: absolute; top: 20px; left: 20px; z-index: 10; background: var(--orange); padding: 10px 18px; clip-path: polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; box-shadow: 0 4px 20px rgba(255,130,0,0.4); pointer-events: none; }
.areas-map-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--orange); z-index: 10; pointer-events: none; }

/* RESPONSIVE for new sections */
@media (max-width: 1024px) {
  .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-left { position: static; }
  .areas-inner { grid-template-columns: 1fr; min-height: auto; }
  .areas-content { margin-left: 0; padding: 60px 32px; max-width: 100%; }
  .areas-map-panel { min-height: 400px; }
}
@media (max-width: 768px) {
  .faq-question { padding: 18px 20px; }
  .faq-answer { padding: 0 20px 20px 23px; }
  .faq-question-text { font-size: 15px; }
}

/* ══════════════════════════════════════════════
   FAQ SECTION — BOLD CARD GRID
   ══════════════════════════════════════════════ */

/* Header strip */
#faq-section { background: var(--dark); padding-bottom: 0; margin-bottom: 0; }
.faq-header-strip {
  background: var(--dark2);
  padding: 80px 0 60px;
  border-bottom: 3px solid var(--orange);
  position: relative;
  overflow: hidden;
}
.faq-header-strip::before {
  content: '?';
  position: absolute; right: 60px; top: -30px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 320px; line-height: 1;
  color: rgba(255,130,0,0.05);
  pointer-events: none; user-select: none;
}
.faq-header-inner {
  display: flex; justify-content: space-between;
  align-items: flex-end; gap: 40px; flex-wrap: wrap;
}
.faq-header-right {
  max-width: 400px;
}
.faq-header-right p {
  font-size: 16px; font-weight: 300; color: var(--light); line-height: 1.65;
}

/* Grid layout */
.faq-grid-wrap { padding: 60px 0 0; }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 2px;
}

/* Card */
.faq-card {
  background: var(--dark2);
  overflow: hidden;
  transition: background 0.2s;
}
.faq-card.active { background: var(--dark3, #1a1c20); }

.faq-card-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 28px 24px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  border-left: 4px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
.faq-card-header:hover { background: rgba(255,130,0,0.06); border-left-color: rgba(255,130,0,0.4); }
.faq-card.active .faq-card-header { border-left-color: var(--orange); background: rgba(255,130,0,0.08); }

.faq-card-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: 48px; line-height: 1; letter-spacing: -0.03em;
  color: rgba(255,130,0,0.2);
  flex-shrink: 0; width: 52px; text-align: center;
  transition: color 0.2s;
}
.faq-card.active .faq-card-num,
.faq-card-header:hover .faq-card-num { color: var(--orange); }

.faq-card-q {
  font-family: var(--font-display); font-weight: 800;
  font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--white); line-height: 1.2;
  flex: 1;
}
.faq-card.active .faq-card-q { color: var(--orange); }

.faq-card-arrow {
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(255,130,0,0.1); border: 1.5px solid rgba(255,130,0,0.3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.3s;
  margin-top: 2px;
}
.faq-card-arrow svg { width: 16px; height: 16px; color: var(--orange); transition: transform 0.3s; }
.faq-card.active .faq-card-arrow { background: var(--orange); border-color: var(--orange); }
.faq-card.active .faq-card-arrow svg { color: #fff; transform: rotate(180deg); }

/* Answer panel */
.faq-card-body {
  display: none;
  padding: 0 28px 28px 100px;
  border-left: 4px solid var(--orange);
  animation: faqSlide 0.3s ease;
}
.faq-card.active .faq-card-body { display: block; }
@keyframes faqSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-card-answer {
  font-size: 15px; font-weight: 300; color: var(--light);
  line-height: 1.8; margin-bottom: 16px;
}
.faq-card-cta {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); transition: letter-spacing 0.2s;
}
.faq-card-cta:hover { letter-spacing: 0.15em; }

/* Bottom CTA bar */
.faq-bottom-bar {
  background: var(--orange);
  padding: 28px 36px;
  display: flex; justify-content: space-between;
  align-items: center; gap: 24px; flex-wrap: wrap;
}
.faq-bottom-left strong {
  display: block;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.04em; color: #fff; margin-bottom: 4px;
}
.faq-bottom-left span { font-size: 13px; color: rgba(255,255,255,0.8); }
.faq-bottom-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.faq-bottom-phone {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: #fff; letter-spacing: 0.03em;
}
.faq-bottom-phone:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-left { position: static; }
  .areas-inner { grid-template-columns: 1fr; min-height: auto; }
  .areas-content { margin-left: 0; padding: 60px 32px; max-width: 100%; }
  .areas-map-panel { min-height: 400px; }
}
@media (max-width: 768px) {
  .faq-header-inner { flex-direction: column; gap: 24px; }
  .faq-card-body { padding-left: 28px; }
  .faq-card-num { font-size: 36px; width: 40px; }
  .faq-bottom-bar { flex-direction: column; text-align: center; }
  .faq-bottom-right { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   PAGES SIDEBAR — Right sidebar for all inner pages
   ══════════════════════════════════════════════════════════ */

/* Page with sidebar layout */
.page-with-sidebar { padding: 72px 0 100px; background: var(--dark); }
.page-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 52px;
  align-items: start;
}
.page-main-content { min-width: 0; }

/* Pages sidebar wrapper */
.pages-sidebar { position: relative; }
.pages-sidebar-inner { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }

/* ── CTA WIDGET ── */
.sidebar-cta-widget {
  background: #fff !important;
  border: 1px solid #E8E8E8 !important;
  border-top: 3px solid var(--orange) !important;
  padding: 28px 24px !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sidebar-cta-widget::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: rgba(255,130,0,0.05);
  border-radius: 50%;
}
.sidebar-cta-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; background: rgba(255,130,0,0.1);
  border: 2px solid rgba(255,130,0,0.3);
  border-radius: 50%; margin: 0 auto 14px;
}
.sidebar-cta-icon svg { width: 24px; height: 24px; color: var(--orange); }
.sidebar-cta-title {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  text-transform: uppercase; color: var(--orange) !important; line-height: 1; margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.sidebar-cta-desc {
  font-size: 13px; color: #4A4A4A; line-height: 1.65; margin-bottom: 20px;
}
.sidebar-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--orange); color: #fff !important;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 24px; width: 100%; transition: transform 0.2s, background 0.2s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.sidebar-cta-btn:hover { transform: translateX(4px); background: var(--orange-dark); }
.sidebar-cta-phone-wrap { margin-top: 18px; }
.sidebar-cta-phone-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #878787; display: block; margin-bottom: 4px; }
.sidebar-cta-phone-num {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  color: var(--orange); display: block; margin-bottom: 3px;
}
.sidebar-cta-phone-num:hover { text-decoration: underline; }
.sidebar-cta-phone-sub { font-size: 11px; color: #878787; }

/* ── SERVICES LIST WIDGET ── */
.sidebar-service-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 0; }
.sidebar-service-list li { list-style: none !important; }
.sidebar-service-list li::before { content: none !important; display: none !important; }
.sidebar-service-list li::marker { display: none !important; }
.sidebar-service-list li a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--light); padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s, padding-left 0.2s;
}
.sidebar-service-list li:last-child a { border-bottom: none; }
.sidebar-service-list li a:hover { color: var(--orange); padding-left: 6px; }
.ssl-icon { font-size: 16px; flex-shrink: 0; }

/* ── AREA LIST WIDGET ── */
.sidebar-area-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 0; }
.sidebar-area-list li { list-style: none !important; }
.sidebar-area-list li::before { content: none !important; display: none !important; }
.sidebar-area-list li::marker { display: none !important; }
.sidebar-area-list li a {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--light);
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s, padding-left 0.2s;
}
.sidebar-area-list li:last-child a { border-bottom: none; }
.sidebar-area-list li a:hover { color: var(--orange); padding-left: 6px; }

/* ── TRUST BADGES WIDGET ── */
.sidebar-trust-widget { background: var(--dark3, #1a1c20) !important; border-left: 3px solid var(--orange) !important; }
.sidebar-trust-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 14px; }
.sidebar-trust-list li {
  display: flex !important; align-items: flex-start; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.05);
  list-style: none !important;
}
.sidebar-trust-list li::before { display: none !important; content: none !important; }
.sidebar-trust-list li::marker { display: none !important; }
.sidebar-trust-list li:last-child { border-bottom: none; padding-bottom: 0; }
.stl-check {
  width: 24px; height: 24px;
  background: transparent;
  border: 2px solid var(--orange);
  border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  color: var(--orange);
  font-size: 14px; font-weight: 900; line-height: 1;
}
.sidebar-trust-list li div { display: flex; flex-direction: column; gap: 2px; }
.sidebar-trust-list li strong { font-family: var(--font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--white); letter-spacing: 0.04em; }
.sidebar-trust-list li span { font-size: 12px; color: var(--light); }

/* ── EMERGENCY WIDGET ── */
.sidebar-emergency-widget {
  background: var(--steel) !important;
  border-top: 3px solid var(--orange) !important;
  text-align: center;
}
.sidebar-emergency-label {
  font-family: var(--font-display); font-weight: 900; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 10px; display: block;
}
.sidebar-emergency-widget p { font-size: 13px; color: var(--light); line-height: 1.6; margin-bottom: 14px; }
.sidebar-emergency-phone {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  color: var(--white); display: block;
}
.sidebar-emergency-phone:hover { color: var(--orange); }

/* ── WORDPRESS CORE WIDGET STYLING ── */
/* These ensure any widget added via Appearance > Widgets looks great */
.pages-sidebar .widget { background: var(--dark2); padding: 26px; margin-bottom: 2px; }
.pages-sidebar .widget-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,130,0,0.3); }
.pages-sidebar .widget ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pages-sidebar .widget ul li a { color: var(--light); font-size: 14px; transition: color 0.2s; display: flex; align-items: center; gap: 6px; }
.pages-sidebar .widget ul li a::before { content: '›'; color: var(--orange); font-size: 16px; }
.pages-sidebar .widget ul li a:hover { color: var(--orange); }
.pages-sidebar .widget p { font-size: 14px; color: var(--light); line-height: 1.7; }
.pages-sidebar .widget a { color: var(--orange); }
.pages-sidebar .widget a:hover { text-decoration: underline; }
.pages-sidebar .widget input[type="text"],
.pages-sidebar .widget input[type="search"] {
  background: var(--steel); border: 1px solid rgba(255,255,255,0.08); color: var(--white);
  font-family: var(--font-body); font-size: 14px; padding: 10px 14px; width: 100%; outline: none;
}
.pages-sidebar .widget input[type="text"]:focus,
.pages-sidebar .widget input[type="search"]:focus { border-color: var(--orange); }
.pages-sidebar .widget input[type="submit"],
.pages-sidebar .widget button[type="submit"] {
  background: var(--orange); color: #fff; border: none; padding: 10px 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; margin-top: 8px; width: 100%;
}
.pages-sidebar .widget input[type="submit"]:hover { background: var(--orange-light); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .page-sidebar-layout {
    grid-template-columns: 1fr 280px;
    gap: 36px;
  }
}
@media (max-width: 768px) {
  .page-sidebar-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pages-sidebar-inner { position: static; }
  .page-with-sidebar { padding: 48px 0 72px; }
}

/* ── FAQ BOTTOM GAP FIX ── */
#faq-section,
.rc-shortcode-faq { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.faq-bottom-bar { margin-bottom: 0; }
.rc-shortcode-faq .faq-grid-wrap { padding-bottom: 0; }

/* ── SIDEBAR LIST — no bullets anywhere ── */
.pages-sidebar ul,
.pages-sidebar ol { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.pages-sidebar li { list-style: none !important; }
.pages-sidebar li::marker { display: none !important; content: '' !important; }


/* ════════════════════════════════════════════════════════════
   ROOFING COST ESTIMATOR
   ════════════════════════════════════════════════════════════ */
#cost-estimator {
  background: var(--dark2);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
#cost-estimator::before {
  content: '$';
  position: absolute; right: -20px; top: -60px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 400px; line-height: 1; color: rgba(255,255,255,0.02);
  pointer-events: none; user-select: none;
}

/* Header */
.est-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 52px; }
.est-header-left { flex: 1; min-width: 280px; }
.est-title { font-size: clamp(32px,4.5vw,60px); }
.est-header-right { max-width: 400px; }
.est-header-right p { font-size: 15px; font-weight: 300; color: var(--light); line-height: 1.75; margin-bottom: 12px; }
.est-disclaimer { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mid); }
.est-disclaimer svg { flex-shrink: 0; }

/* Main Card */
.est-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2px;
  background: var(--steel);
}

/* Inputs Panel */
.est-inputs { background: var(--dark); padding: 44px 44px 40px; }

/* Sq Ft Slider */
.est-field { margin-bottom: 32px; }
.est-field:last-child { margin-bottom: 0; }
.est-field-label {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--white);
  margin-bottom: 16px;
}
.est-sqft-display {
  font-family: var(--font-display); font-weight: 900; font-size: 20px;
  color: var(--orange); letter-spacing: 0.02em;
}
.est-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: linear-gradient(to right, var(--orange) 0%, var(--orange) 30%, var(--steel) 30%);
  border-radius: 2px; outline: none; cursor: pointer;
}
.est-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); border: 3px solid var(--white);
  box-shadow: 0 2px 10px rgba(255,130,0,0.5);
  cursor: pointer; transition: transform 0.15s;
}
.est-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.est-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); border: 3px solid var(--white);
  cursor: pointer;
}
.est-slider-range {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--mid); margin-top: 8px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Two-column layout */
.est-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* Radio Groups */
.est-radio-group { display: flex; flex-direction: column; gap: 8px; }
.est-radio-row { flex-direction: row; gap: 12px; }
.est-radio {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--dark2);
  border: 1.5px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.est-radio:hover { border-color: rgba(255,130,0,0.4); background: rgba(255,130,0,0.04); }
.est-radio.active { border-color: var(--orange); background: rgba(255,130,0,0.08); }
.est-radio input[type="radio"] { display: none; }
.est-radio-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
.est-radio.active .est-radio-dot {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,130,0,0.2);
}
.est-radio.active .est-radio-dot::after {
  content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%;
}
.est-radio-text { display: flex; flex-direction: column; gap: 1px; }
.est-radio-text strong { font-family: var(--font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); line-height: 1; }
.est-radio-text small { font-size: 11px; color: var(--light); margin-top: 1px; }

/* Results Panel */
.est-results {
  background: var(--orange);
  padding: 44px 40px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.est-results::before {
  content: ''; position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.07); border-radius: 50%;
  pointer-events: none;
}
.est-results::after {
  content: ''; position: absolute;
  bottom: -40px; left: -40px;
  width: 140px; height: 140px;
  background: rgba(255,255,255,0.05); border-radius: 50%;
  pointer-events: none;
}
.est-results-inner { position: relative; z-index: 1; }
.est-results-label {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
}
.est-range-display { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.est-range-low, .est-range-high {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  color: #fff; letter-spacing: -0.02em; line-height: 1;
  transition: all 0.3s ease;
}
.est-range-sep { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: rgba(255,255,255,0.6); }
.est-range-sub { font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 28px; }
.est-breakdown { border-top: 1px solid rgba(255,255,255,0.25); border-bottom: 1px solid rgba(255,255,255,0.25); padding: 18px 0; margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.est-breakdown-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.est-breakdown-row span:first-child { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 400; }
.est-breakdown-row span:last-child { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; }
.est-breakdown-note { opacity: 0.75; }
.est-per-sqft { font-size: 12px; color: rgba(255,255,255,0.85); margin-bottom: 24px; font-style: italic; }
.est-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--orange);
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 16px 24px; width: 100%; margin-bottom: 16px;
  clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);
  transition: transform 0.2s, box-shadow 0.2s;
}
.est-cta:hover { transform: translateX(4px); box-shadow: -4px 0 0 rgba(0,0,0,0.1); }
.est-legal { font-size: 10px; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* Animated update */
.est-range-low.updating, .est-range-high.updating { opacity: 0.5; transform: scale(0.97); }

/* Responsive */
@media (max-width:1024px) {
  .est-card { grid-template-columns: 1fr; }
  .est-results { padding: 36px 32px; }
}
@media (max-width:768px) {
  .est-inputs { padding: 28px 22px; }
  .est-two-col { grid-template-columns: 1fr; gap: 0; }
  .est-header { flex-direction: column; gap: 20px; }
}

/* ════════════════════════════════════════════════════════════
   SERVICE AREA PAGE TEMPLATE
   ════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.sa-hero {
  position: relative; overflow: hidden;
  min-height: 580px; display: flex; align-items: center;
  background: var(--dark) url('') center/cover no-repeat;
}
.sa-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(17,18,20,0.75) 0%, rgba(17,18,20,0.55) 55%, rgba(17,18,20,0.30) 100%);
}
.sa-hero::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px);
  pointer-events: none;
}
.sa-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: center; padding-top: 80px; padding-bottom: 60px;
}
.sa-h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 6vw, 80px); line-height: 0.95;
  text-transform: uppercase; color: var(--white);
  letter-spacing: -0.02em; margin: 16px 0 22px;
}
.sa-h1-accent { color: var(--orange); }
.sa-h1-stroke { -webkit-text-stroke: 2px rgba(255,255,255,0.3); color: transparent; }
.sa-hero-sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.78); line-height: 1.7; max-width: 540px; margin-bottom: 32px; }
.sa-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.sa-hero-stats {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(17,18,20,0.8); border-left: 3px solid var(--orange);
  backdrop-filter: blur(8px); flex-shrink: 0;
}
.sa-hero-stat { padding: 18px 28px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sa-hero-stat:last-child { border-bottom: none; }
.sa-stat-num { font-family: var(--font-display); font-weight: 900; font-size: 32px; color: var(--orange); line-height: 1; letter-spacing: -0.02em; }
.sa-stat-label { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light); margin-top: 3px; }

/* ── TRUST RIBBON ── */
.sa-trust-ribbon { background: var(--dark2); border-top: 3px solid var(--orange); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 16px 0; }
.sa-trust-items { display: flex; gap: 0; overflow-x: auto; flex-wrap: wrap; }
.sa-trust-item { display: flex; align-items: center; gap: 8px; padding: 8px 22px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); border-right: 1px solid rgba(255,255,255,0.06); white-space: nowrap; }
.sa-trust-item:last-child { border-right: none; }
.sa-trust-item span { font-size: 14px; line-height: 1; }

/* ── SECTIONS ── */
.sa-section { padding: 90px 0; }
.sa-section-dark { background: #f1f1f1; }
.sa-section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 52px; }

/* ── SERVICES GRID ── */
.sa-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.sa-service-card {
  background: var(--dark2); padding: 32px 28px;
  border-top: 3px solid transparent;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  text-decoration: none;
}
.sa-service-card:hover { border-top-color: var(--orange); background: var(--steel); transform: translateY(-3px); }
.sa-svc-icon {
  width: 52px; height: 52px;
  background: rgba(255,130,0,0.1);
  border: 1.5px solid rgba(255,130,0,0.3);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.sa-service-card:hover .sa-svc-icon {
  background: rgba(255,130,0,0.18);
  border-color: var(--orange);
}
.sa-svc-icon svg { width: 26px; height: 26px; stroke: var(--orange); }
.sa-svc-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); line-height: 1.2; }
.sa-svc-desc { font-size: 13px; font-weight: 300; color: var(--light); line-height: 1.65; flex: 1; }
.sa-svc-more { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: 6px; margin-top: auto; transition: gap 0.2s; }
.sa-service-card:hover .sa-svc-more { gap: 10px; }

/* ── PAGE CONTENT ── */
.sa-content-section { padding: 72px 0; background: var(--dark); }
.sa-content-layout { display: grid; grid-template-columns: 1fr 320px; gap: 52px; align-items: start; }
.sa-editor-content h2 { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,130,0,0.2); }
.sa-editor-content h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); margin: 22px 0 8px; }
.sa-editor-content h4 { font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange); margin: 16px 0 6px; }
.sa-editor-content p { font-size: 15px; font-weight: 300; color: var(--light); line-height: 1.8; margin-bottom: 18px; }
.sa-editor-content ul { list-style: none; padding: 0; margin: 0 0 20px; }
.sa-editor-content ul li { font-size: 14px; font-weight: 300; color: var(--light); padding: 7px 0 7px 20px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.04); }
.sa-editor-content ul li::before { content: '›'; position: absolute; left: 4px; color: var(--orange); font-size: 16px; font-weight: 700; }
.sa-editor-content blockquote { border-left: 3px solid var(--orange); padding: 16px 22px; background: #f4f4f4; margin: 24px 0; font-size: 16px; font-weight: 300; color: #4A4A4A; font-style: italic; line-height: 1.7; }
.sa-editor-content a { color: var(--orange); }
.sa-editor-content strong { color: var(--white); font-weight: 600; }

/* ── WHY CHOOSE US ── */
.sa-why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.sa-why-list { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-direction: column; gap: 14px; }
.sa-why-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 300; color: var(--light); line-height: 1.6; }
.sa-why-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; color: var(--orange); }
.sa-why-image { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.sa-why-badge { position: absolute; bottom: -10px; right: -10px; background: var(--orange); padding: 18px; width: 140px; clip-path: polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); }

/* ── MID CTA ── */
.sa-cta-banner { background: var(--orange); padding: 52px 0; }
.sa-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.sa-cta-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px,3.5vw,42px); text-transform: uppercase; color: #fff; line-height: 1; }
.sa-cta-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sa-cta-phone { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: #fff; letter-spacing: 0.02em; white-space: nowrap; }
.sa-cta-phone:hover { text-decoration: underline; }

/* ── NEIGHBORHOODS ── */
.sa-neighborhoods { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sa-neighborhood-pill { background: var(--dark2); border: 1px solid rgba(255,255,255,0.08); padding: 12px 22px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--light); display: flex; align-items: center; gap: 8px; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); transition: all 0.2s; }
.sa-neighborhood-pill:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.sa-map-wrap { overflow: hidden; border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid var(--orange); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .sa-hero-inner { grid-template-columns: 1fr; }
  .sa-hero-stats { flex-direction: row; border-left: none; border-top: 3px solid var(--orange); }
  .sa-hero-stat { border-right: 1px solid rgba(255,255,255,0.06); border-bottom: none; }
  .sa-services-grid { grid-template-columns: 1fr 1fr; }
  .sa-content-layout { grid-template-columns: 1fr; }
  .sa-why-inner { grid-template-columns: 1fr; gap: 40px; }
  .sa-why-image { display: none; }
}
@media (max-width: 768px) {
  .sa-hero { min-height: auto; }
  .sa-hero-inner { padding-top: 56px; padding-bottom: 40px; }
  .sa-services-grid { grid-template-columns: 1fr; }
  .sa-hero-stats { overflow-x: auto; flex-wrap: nowrap; }
  .sa-cta-inner { flex-direction: column; text-align: center; }
  .sa-cta-actions { justify-content: center; }
  .sa-section { padding: 64px 0; }
  .sa-content-section { padding: 48px 0; }
}

/* ════════════════════════════════════════════════════════════
   CONTACT PAGE TEMPLATE
   ════════════════════════════════════════════════════════════ */
.ct-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-items: start; }

.ct-tagline { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px,3vw,34px); text-transform: uppercase; color: var(--white); line-height: 1.1; margin-bottom: 32px; }
.ct-tagline span { color: var(--orange); }

.ct-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 24px; }
.ct-info-cell { display: flex; align-items: flex-start; gap: 14px; background: var(--dark2); padding: 22px 20px; }
.ct-info-icon { width: 44px; height: 44px; background: rgba(255,130,0,0.1); border: 1.5px solid rgba(255,130,0,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--orange); }
.ct-info-label { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 5px; }
.ct-info-value { font-size: 14px; font-weight: 300; color: var(--light); line-height: 1.5; }
.ct-info-link { font-size: 15px; font-weight: 600; color: var(--white); display: block; transition: color 0.2s; }
.ct-info-link:hover { color: var(--orange); }
.ct-info-link-phone { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--orange); }
.ct-map { overflow: hidden; border-left: 3px solid var(--orange); }

.ct-photo-wrap { position: relative; overflow: hidden; }
.ct-photo-badge { position: absolute; bottom: 20px; left: 20px; background: var(--orange); padding: 14px 20px; clip-path: polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%); }

.ct-form-box { background: var(--dark2); padding: 36px 32px; border-top: 3px solid var(--orange); }
.ct-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--light); display: block; margin-bottom: 7px; }
.ct-input { background: var(--steel); border: 1px solid rgba(255,255,255,0.08); color: var(--white); font-family: var(--font-body); font-size: 14px; padding: 12px 14px; outline: none; width: 100%; transition: border-color 0.2s; border-radius: 0; }
.ct-input:focus { border-color: var(--orange); }

/* Responsive */
@media (max-width: 900px) {
  .ct-layout { grid-template-columns: 1fr; }
  .ct-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ct-form-box { padding: 24px 18px; }
}

/* ════════════════════════════════════════════════════════════
   ESTIMATOR RADIO BUTTONS — global (front page + contact page)
   ════════════════════════════════════════════════════════════ */
.est-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--dark2);
  border: 1.5px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
}
.est-opt:hover { border-color: rgba(255,130,0,0.5); background: rgba(255,130,0,0.06); }
.est-opt-active { border-color: var(--orange) !important; background: rgba(255,130,0,0.1) !important; }
.est-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
.est-opt-active .est-dot { border-color: var(--orange); background: var(--orange); }
.est-opt-active .est-dot::after { content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; display: block; }
.est-opt-active span { color: var(--white) !important; }
.rc-est-card { background: var(--steel); }
#est-slider::-webkit-slider-thumb, #est2-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(255,130,0,0.6); cursor: pointer;
}
#est-slider::-moz-range-thumb, #est2-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); border: 3px solid #fff; cursor: pointer;
}
@media(max-width:900px){ .rc-est-card { grid-template-columns: 1fr !important; } }
@media(max-width:640px){ .rc-est-card > div:first-child { padding: 28px 22px !important; } .rc-est-card > div:last-child { padding: 32px 22px !important; } }


/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — About, Services, Roofing Service pages
   ════════════════════════════════════════════════════════════ */

/* Force full-width containers on mobile */
@media (max-width: 768px) {

  /* About page: hero stats strip */
  .about-stats-strip { flex-direction: column !important; flex-wrap: wrap !important; }

  /* All 4-column grids → 2 col on tablet, 1 col on phone */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* All 3-column grids → 1 col on phone */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 2-column layouts → 1 col */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Content + sidebar → hide sidebar, full-width content */
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 320px"] {
    grid-template-columns: 1fr !important;
  }

  /* Hide sidebar on mobile */
  [style*="grid-template-columns:1fr 320px"] aside,
  [style*="grid-template-columns: 1fr 320px"] aside {
    display: none !important;
  }

  /* Feature cards — stack vertically, remove side borders */
  [style*="border-right:1px solid rgba(255,255,255,0.06)"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  /* About hero stats — horizontal scroll not stack */
  [style*="position:absolute;bottom:0;right:0;display:flex"] {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    border-left: none !important;
    border-top: 3px solid var(--orange) !important;
    width: 100% !important;
  }

  /* Hero min-height shrink on mobile */
  [style*="min-height:420px"],
  [style*="min-height:480px"],
  [style*="min-height:580px"] {
    min-height: 300px !important;
  }

  /* Stat badge in hero — hide on mobile */
  [style*="position:absolute;top:80px;right:5%"] {
    display: none !important;
  }

  /* Bottom CTA flex → column */
  [style*="justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px !important;
  }

  /* Container padding on mobile */
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Service area hero two-column → one column */
  .sa-hero-inner { grid-template-columns: 1fr !important; }
  .sa-hero-stats { flex-direction: row !important; overflow-x: auto !important; flex-wrap: nowrap !important; }

  /* Values strip → 2 col */
  .sa-services-grid { grid-template-columns: 1fr !important; }
  .sa-why-inner { grid-template-columns: 1fr !important; }
  .sa-why-image { display: none !important; }

  /* Estimator on mobile */
  .rc-est-card { grid-template-columns: 1fr !important; }
  .ct-layout { grid-template-columns: 1fr !important; }

  /* Section headings scale down */
  .section-title { font-size: clamp(28px, 8vw, 48px) !important; }

  /* Typography */
  .rs-body h2 { font-size: 17px !important; }
  .rs-body h3 { font-size: 14px !important; }
  .rs-body p, .rs-body li { font-size: 14px !important; }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 320px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1fr 320px"] aside {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   WORDPRESS BLOCK EDITOR — strip all default borders & outlines
   These WP defaults cause the unwanted outlined boxes on content pages
   ════════════════════════════════════════════════════════════ */

/* Remove all borders/outlines from WP block elements */
.wp-block,
.wp-block-group,
.wp-block-group__inner-container,
.wp-block-columns,
.wp-block-column,
.entry-content .wp-block,
.rs-body .wp-block,
.rs-body .wp-block-group,
.sa-editor-content .wp-block,
.sa-editor-content .wp-block-group,
.post-body .wp-block,
.page-main-content .wp-block,
.page-main-content .wp-block-group {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Specifically kill the rounded outline that WP adds to block groups */
.wp-block-group:where(.has-background) {
    padding: 0 !important;
    background: transparent !important;
}

/* WP adds a border to table blocks */
.wp-block-table,
.wp-block-table table,
.rs-body .wp-block-table td,
.rs-body .wp-block-table th,
.sa-editor-content .wp-block-table td,
.sa-editor-content .wp-block-table th {
    border-color: rgba(255,255,255,0.1) !important;
}

/* Kill sidebar/aside default borders from WP */
.pages-sidebar .wp-block,
.pages-sidebar .wp-block-group {
    border: none !important;
    outline: none !important;
}

/* Remove the outline from the left inner column in the editor content layout */
.sa-content-layout aside,
.sa-content-layout .pages-sidebar,
.pages-sidebar-inner {
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Ensure .rs-body content never has outer borders */
.rs-body {
    border: none !important;
    outline: none !important;
}

/* Kill any remaining WP editor frame artifacts */
[class*="wp-block-"] {
    box-sizing: border-box;
}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100% !important;
}

/* ═══ BLOCKQUOTE — single orange line only, kill ALL WP stacking ═══ */
/* WP outputs: <blockquote class="wp-block-quote"><p>text</p></blockquote>
   Both elements get borders → triple line. Reset everything, re-apply once. */
.wp-block-quote,
.wp-block-pullquote,
.wp-block-quote.is-style-large,
.wp-block-quote blockquote,
blockquote.wp-block-quote {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Apply our single border to the paragraph INSIDE the block quote */
.wp-block-quote > p,
.rs-body .wp-block-quote > p,
.sa-editor-content .wp-block-quote > p,
.post-body .wp-block-quote > p {
    border-left: 3px solid var(--orange) !important;
    padding: 14px 20px !important;
    background: #f4f4f4 !important;
    margin: 24px 0 !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    color: #4A4A4A !important;
    font-style: italic !important;
    line-height: 1.7 !important;
    display: block !important;
}
/* Also handle plain blockquote (non-Gutenberg) */
.rs-body blockquote:not(.wp-block-quote),
.sa-editor-content blockquote:not(.wp-block-quote),
.post-body blockquote:not(.wp-block-quote) {
    border-left: 3px solid var(--orange) !important;
    padding: 14px 20px !important;
    background: var(--dark2) !important;
    margin: 24px 0 !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    color: var(--light) !important;
    font-style: italic !important;
    line-height: 1.7 !important;
}

/* ════════════════════════════════════════════════════════════
   TEAM SHOWCASE — homepage + about us
   ════════════════════════════════════════════════════════════ */
.rc-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3px;
  align-items: end;
}
.rc-team-card {
  position: relative;
  overflow: hidden;
  height: 480px;
  cursor: pointer;
}
.rc-team-card--tall {
  height: 560px;
  margin-top: -80px;
}
.rc-team-photo {
  position: absolute;
  inset: 0;
}
.rc-team-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.rc-team-card:hover .rc-team-photo img { transform: scale(1.07); }
.rc-team-overlay-base {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17,18,20,0.97) 0%, rgba(17,18,20,0.5) 40%, rgba(17,18,20,0.1) 70%, transparent 100%);
  pointer-events: none;
}
.rc-team-overlay-hover {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(17,18,20,0.98) 0%, rgba(17,18,20,0.95) 60%, rgba(17,18,20,0.7) 100%);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  padding: 20px 24px 90px;
}
.rc-team-card:hover .rc-team-overlay-hover { transform: translateY(0); }
.rc-team-bio { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.82); line-height: 1.7; margin: 0 0 14px; }
.rc-team-specs { display: flex; flex-direction: column; gap: 6px; }
.rc-team-spec { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); display: flex; align-items: center; }
.rc-team-nameplate { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px 22px; z-index: 2; }
.rc-team-name { font-family: var(--font-display); font-weight: 900; font-size: 20px; text-transform: uppercase; color: #fff; letter-spacing: -0.01em; line-height: 1; }
.rc-team-role { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-top: 5px; }
.rc-team-tag { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: var(--orange); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 3; }
.rc-team-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--orange); transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s ease; z-index: 4; }
.rc-team-card:hover::before { transform: scaleY(1); }
@media (max-width: 1024px) {
  .rc-team-grid { grid-template-columns: 1fr 1fr; }
  .rc-team-card--tall { height: 480px; margin-top: 0; }
}
@media (max-width: 640px) {
  .rc-team-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .rc-team-card { height: 300px; }
  .rc-team-card--tall { height: 300px; }
  .rc-team-name { font-size: 14px; }
  .rc-team-role { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES — White/Grey backgrounds
   ════════════════════════════════════════════════════════════ */

/* Primary text color on white background */
body { color: #231F20; }
p, li, td, th { color: #4A4A4A; }

/* Headings dark on white */
h1, h2, h3, h4, h5, h6 { color: #231F20; }
.section-title { color: #231F20; }
.section-title span { color: var(--orange); }
.section-intro { color: #4A4A4A; }

/* Trust bar — dark text on white */
#trustbar { background: var(--dark2); border-bottom: 2px solid var(--orange); }
.trust-item { color: #231F20; }

/* Services section */
.service-card-title { color: #231F20; }
.service-card-desc { color: #4A4A4A; }

/* Reviews */
.review-card { background: var(--dark2); }
.review-text { color: #4A4A4A; }
.reviewer-name { color: #231F20; }
.reviewer-loc { color: #878787; }

/* Sidebar widgets */
.sidebar-widget { background: var(--dark2); }
.sidebar-widget h3, .sidebar-widget .widget-title { color: #231F20; }
.sidebar-services a, .sidebar-areas a { color: #4A4A4A; }
.sidebar-services a:hover, .sidebar-areas a:hover { color: var(--orange); }

/* FAQ on light bg */
.faq-question { color: #231F20; background: var(--dark2); }
.faq-answer { color: #4A4A4A; background: var(--steel); }

/* Service area pills */
.sa-neighborhood-pill { background: var(--steel); color: #231F20; border-color: #D0D0D0; }
.sa-neighborhood-pill:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

/* Why list items */
.sa-why-item { color: #4A4A4A; }

/* Trust ribbon */
.sa-trust-ribbon { background: var(--dark2); border-top-color: var(--orange); }
.sa-trust-item { color: #231F20; }

/* Estimator radio buttons */
.est-opt { background: var(--dark2) !important; border-color: #D0D0D0 !important; }
.est-opt:hover { border-color: rgba(255,130,0,0.5) !important; background: rgba(255,130,0,0.06) !important; }
.est-opt-active { border-color: var(--orange) !important; background: rgba(255,130,0,0.1) !important; }
.est-opt > span:last-child { color: #4A4A4A; }
.est-opt-active > span:last-child { color: #231F20 !important; }
.est-dot { border-color: #AAAAAA; }

/* Post body / editor content on light bg */
.post-body p, .rs-body p, .sa-editor-content p { color: #4A4A4A; }
.post-body h2, .rs-body h2, .sa-editor-content h2 { color: #231F20; }
.post-body h3, .rs-body h3, .sa-editor-content h3 { color: #231F20; }
.post-body ul li, .rs-body ul li, .sa-editor-content ul li { color: #4A4A4A; }
.post-body blockquote, .rs-body blockquote { background: #f4f4f4 !important; color: #4A4A4A !important; }

/* Btn-outline for light backgrounds */
.btn-outline { color: #231F20 !important; border-color: #231F20; }
.btn-outline:hover { border-color: var(--orange) !important; color: var(--orange) !important; }

/* Estimator slider track on light bg */
#est-slider, #est2-slider {
  background: linear-gradient(to right, var(--orange) 40%, #D0D0D0 40%);
}

/* Navigation links */
#primary-menu > li > a { color: #FFFFFF; }
#primary-menu > li > a:hover { color: var(--orange); }

/* Footer stays dark */
#colophon { background: #231F20 !important; }
#colophon * { color: rgba(255,255,255,0.7); }
.footer-logo-name { color: #fff !important; }
.footer-logo-name span { color: var(--orange) !important; }
.footer-col-title { color: #fff !important; }
.footer-link:hover { color: var(--orange) !important; }
.footer-bottom { background: #595959 !important; }
.footer-copy { color: rgba(255,255,255,0.5) !important; }
.footer-copy a { color: var(--orange) !important; }

/* Hero sections stay dark — override white bg for full-bleed heroes */
.sa-hero, #rc-video-wrap, .rs-hero-section, #hero-slider {
  background-color: #231F20 !important;
}
.sa-hero .section-title, .sa-hero h1 { color: #fff !important; }

/* Service cards (homepage) */
.service-card { background: var(--dark2); border-top: 3px solid transparent; }
.service-card:hover { border-top-color: var(--orange); }
.service-cat { color: var(--orange); }
.service-title { color: #231F20; }
.service-desc { color: #4A4A4A; }
.service-link { color: var(--orange); }

/* Materials strip */
#materials { background: var(--orange); }

/* Emergency bar stays orange */
#emergency { background: var(--orange); }

/* Why Choose Us section */
#why { background: var(--dark2); }
#why .section-title { color: #231F20; }
#why .why-point { color: #4A4A4A; }

/* Orange topbar — keep */
#topbar { background: var(--orange); }
#topbar * { color: #fff !important; }

/* Contact form inputs on light bg */
.ct-input { background: var(--dark2) !important; color: #231F20 !important; border-color: #D0D0D0 !important; }
.ct-label { color: #4A4A4A !important; }

/* Map on light bg */
.sa-map-wrap iframe, #ct-map { filter: none !important; }

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — COMPREHENSIVE FIXES v2
   ════════════════════════════════════════════════════════════ */

/* ── Hero/slider stroke text → white ── */
.slide-title .stroke,
.sa-h1-stroke,
[style*="-webkit-text-stroke"][style*="rgba(255,255,255"] {
  -webkit-text-stroke: 2px rgba(255,255,255,0.45) !important;
  color: transparent !important;
}
/* All hero h1 text → white */
.slide-title, .sa-h1, .sa-hero h1,
[style*="position:absolute"] .section-title,
#rc-video-wrap .section-title,
#rc-video-wrap h2 {
  color: #fff !important;
}

/* ── Video showcase section → darker bg ── */
#video-showcase {
  background: #1a1718 !important;
}
#video-showcase .section-title,
#video-showcase h2,
#video-showcase p {
  color: #fff !important;
}
#video-showcase .rc-tag { color: var(--orange) !important; }

/* ── FAQ section — light theme ── */
#faq-section { background: var(--dark2) !important; }
/* faq-header-strip dark override removed v76 */


.faq-header-right p { color: rgba(255,255,255,0.75) !important; }
.faq-card { background: #fff !important; border: 1px solid #E8E8E8 !important; }
.faq-card.active { background: #FFF5EC !important; }
.faq-card-q { color: #231F20 !important; }
.faq-card.active .faq-card-q { color: var(--orange) !important; }
.faq-card-num { color: rgba(255,130,0,0.25) !important; }
.faq-card.active .faq-card-num { color: var(--orange) !important; }
.faq-card-header:hover { background: rgba(255,130,0,0.04) !important; }
.faq-card.active .faq-card-header { background: rgba(255,130,0,0.06) !important; }
.faq-card-body { background: #fff !important; border-left-color: var(--orange) !important; }
.faq-card-answer { color: #4A4A4A !important; }
.faq-grid-wrap { background: var(--dark2) !important; padding-bottom: 60px; }

/* ── Pages sidebar — light theme ── */
.pages-sidebar-inner,
.pages-sidebar .widget,
.sidebar-widget,
.sidebar-cta-widget {
  background: #F4F4F4 !important;
  border: 1px solid #E0E0E0 !important;
}
.pages-sidebar .widget-title,
.sidebar-widget h3,
.pages-sidebar .widget h3 {
  color: #231F20 !important;
  border-bottom-color: rgba(255,130,0,0.3) !important;
}
.pages-sidebar .widget ul li a,
.sidebar-widget a,
.sidebar-services a,
.sidebar-areas a {
  color: #4A4A4A !important;
}
.pages-sidebar .widget ul li a:hover { color: var(--orange) !important; }
.pages-sidebar .widget p,
.sidebar-widget p { color: #4A4A4A !important; }
/* Sidebar CTA widget — keep orange */
.sidebar-cta { background: var(--orange) !important; }
.sidebar-cta * { color: #fff !important; }

/* ── Why Choose Us sidebar on service pages ── */
.sa-why-list li,
.sa-why-item { color: #4A4A4A !important; }
.sa-why-content .section-title,
.sa-why-content h2 { color: #231F20 !important; }

/* ── Breadcrumb text ── */
.breadcrumb a, .breadcrumb span { color: #4A4A4A !important; }
.breadcrumb a:hover { color: var(--orange) !important; }

/* ── Service area hero — keep white text ── */
.sa-hero .sa-h1,
.sa-hero .rc-tag,
.sa-hero p { color: #fff !important; }
.sa-hero-sub { color: rgba(255,255,255,0.8) !important; }
.sa-stat-num { color: var(--orange) !important; }
.sa-stat-label { color: rgba(255,255,255,0.8) !important; }

/* ── Roofing service page hero ── */
.rs-hero-section h1,
[style*="min-height:420px"] h1,
[style*="min-height:420px"] .section-title,
[style*="min-height:420px"] p.rs-sub { color: #fff !important; }

/* ── About / Services hero text ── */
[style*="min-height:420px"] [style*="color:var(--white)"],
[style*="position:absolute;inset:0"] + * h1 { color: #fff !important; }

/* ── Contact page hero ── */
[style*="min-height:480px"] h1,
[style*="min-height:480px"] .section-title { color: #fff !important; }

/* ── Section titles in dark hero areas ── */
.sa-cta-banner .sa-cta-title { color: #fff !important; }
.sa-cta-banner * { color: #fff !important; }
#emergency * { color: #fff !important; }

/* ── Review cards on light bg ── */
.review-card { background: #fff !important; border: 1px solid #E8E8E8 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.review-text { color: #4A4A4A !important; }
.reviewer-name { color: #231F20 !important; }

/* ── Trust ribbon ── */
.sa-trust-ribbon { background: #231F20 !important; }
.sa-trust-item { color: rgba(255,255,255,0.85) !important; }

/* ── Why section on homepage ── */
#why { background: #F4F4F4 !important; }
#why .section-title, #why h2 { color: #231F20 !important; }
#why .why-point, #why p { color: #4A4A4A !important; }

/* ── Services grid ── */
.service-card, .sa-service-card { background: #fff !important; border: 1px solid #E8E8E8 !important; }
.service-card:hover, .sa-service-card:hover { border-top-color: var(--orange) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.sa-svc-title, .service-title { color: #231F20 !important; }
.sa-svc-desc, .service-desc { color: #4A4A4A !important; }

/* ── Contact form on light bg ── */
.ct-form-box { background: #F4F4F4 !important; border-top-color: var(--orange) !important; }
.ct-label { color: #231F20 !important; }
.ct-input { background: #fff !important; color: #231F20 !important; border-color: #D0D0D0 !important; }
.ct-tagline { color: #231F20 !important; }
.ct-info-label { color: var(--orange) !important; }
.ct-info-value { color: #4A4A4A !important; }
.ct-info-link { color: #231F20 !important; }

/* ── Homepage about section ── */
#about { background: #fff !important; }
.expertise-lead { color: #231F20 !important; }
.expertise-body { color: #4A4A4A !important; }

/* ── Homepage services section ── */
#services { background: #F4F4F4 !important; }
#services .section-title, #services h2 { color: #231F20 !important; }

/* ── Homepage materials ── */
#materials { background: var(--orange) !important; }

/* ── Homepage trust bar ── */
#trustbar { background: #231F20 !important; }
.trust-item { color: #fff !important; }

/* ── Blog post cards ── */
.post-card { background: #fff !important; border: 1px solid #E8E8E8 !important; }
.post-title a { color: #231F20 !important; }
.post-excerpt { color: #4A4A4A !important; }

/* Materials section on orange bg — section title all white */
#materials .section-title { color: #fff !important; }
#materials .section-title span { color: transparent !important; -webkit-text-stroke: 2px rgba(255,255,255,0.5) !important; }
#materials .rc-tag { color: #fff !important; opacity: 0.9; }
#materials .rc-tag::before { background: #fff !important; }

/* ════════════════════════════════════════════════════════════
   LIGHT THEME v3 — Estimator, Maps, Service Cards
   ════════════════════════════════════════════════════════════ */

/* ── ESTIMATOR left panel — white bg, dark text ── */
.rc-est-card > div:first-child,
#cost-estimator > .container > div > div:first-child,
#cost-estimator-contact > .container > div > div:first-child {
  background: #fff !important;
}
/* Slider range labels */
#cost-estimator .est-slider-range span,
#cost-estimator [style*="est-sq-min"],
#cost-estimator [style*="est-sq-max"],
[id*="est-sq-min-label"], [id*="est-sq-max-label"] { color: #4A4A4A !important; }

/* Estimator radio options on white bg */
.est-opt { background: #F4F4F4 !important; border-color: #D8D8D8 !important; }
.est-opt:hover { border-color: rgba(255,130,0,0.5) !important; background: rgba(255,130,0,0.05) !important; }
.est-opt-active { border-color: var(--orange) !important; background: rgba(255,130,0,0.08) !important; }
.est-opt > span:last-child { color: #4A4A4A !important; }
.est-opt-active > span:last-child { color: #231F20 !important; }
.est-dot { border-color: #BBBBBB; }

/* Field labels in estimator */
[id*="est-sqft"], [id*="est2-sqft"] { color: var(--orange) !important; }

/* ── LEAFLET MAPS — light theme (remove dark filter) ── */
.leaflet-tile { filter: none !important; }
.leaflet-container { background: #f0f0f0 !important; }

/* Overide all dark-filter map containers */
#main-map, #ct-map, #sa-area-map,
.sa-map-wrap, .ct-map,
[style*="invert(90%)"] { filter: none !important; }

/* ── SERVICE AREA — services grid section → light grey bg ── */
.sa-services-grid,
.sa-section.sa-section-dark,
section.sa-section.sa-section-dark {
  background: #F4F4F4 !important;
}
.sa-service-card {
  background: #fff !important;
  border: 1px solid #E8E8E8 !important;
  border-top: 3px solid transparent !important;
}
.sa-service-card:hover {
  border-top-color: var(--orange) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  background: #fff !important;
  transform: translateY(-3px) !important;
}
.sa-svc-title { color: #231F20 !important; }
.sa-svc-desc { color: #4A4A4A !important; }
.sa-svc-more { color: var(--orange) !important; }
/* Section heading on grey */
.sa-section.sa-section-dark .section-title,
.sa-section.sa-section-dark h2 { color: #231F20 !important; }
.sa-section.sa-section-dark .section-intro,
.sa-section.sa-section-dark p { color: #4A4A4A !important; }

/* Service area neighborhoods section → also light grey */
.sa-neighborhoods,
section.sa-section.sa-section-dark:has(.sa-neighborhoods) {
  background: #F4F4F4 !important;
}

/* ── EMERGENCY BAR — light grey theme ── */
#emergency-bar { background: #F4F4F4 !important; border-top: 3px solid var(--orange) !important; }
#emergency-bar .emergency-label { color: var(--orange) !important; font-weight: 700; letter-spacing: 0.14em; }
#emergency-bar .emergency-title { color: #231F20 !important; }
#emergency-bar .emergency-phone { color: #231F20 !important; font-family: var(--font-display); font-weight: 900; font-size: 26px; }
#emergency-bar .emergency-phone:hover { color: var(--orange) !important; }
#emergency-bar .btn-white { background: var(--orange) !important; color: #fff !important; }
#emergency-bar .btn-white:hover { background: var(--orange-dark) !important; }

/* ════════════════════════════════════════════════════════════
   LIGHT THEME v4 — Footer, Mobile Menu, Emergency, Materials
   ════════════════════════════════════════════════════════════ */

/* ── FOOTER — single consistent dark color ── */
#colophon { background: #231F20 !important; padding: 60px 0 0; }
#colophon .footer-col-title { color: #fff !important; border-bottom-color: rgba(255,130,0,0.3) !important; }
#colophon .footer-link,
#colophon .footer-link a,
#colophon p,
#colophon address { color: rgba(255,255,255,0.65) !important; }
#colophon .footer-link:hover,
#colophon .footer-link a:hover { color: var(--orange) !important; }
/* Footer phone */
#colophon .footer-phone { color: var(--orange) !important; }
/* Footer bottom bar — same dark color, no contrast split */
.footer-bottom { background: #595959 !important; padding: 20px 0 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; }
.footer-copy, .footer-copy * { color: rgba(255,255,255,0.45) !important; }
.footer-copy a { color: var(--orange) !important; }

/* ── SOCIAL ICONS — orange bg, white icon to match theme ── */
.social-btn {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}
.social-btn:hover {
  background: var(--orange-dark) !important;
  border-color: var(--orange-dark) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255,130,0,0.35) !important;
}
.social-btn svg { color: #fff !important; }

/* ── MOBILE HAMBURGER — styled for dark nav ── */
.menu-toggle {
  background: var(--orange) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px !important;
  color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  display: none;
  align-items: center;
  justify-content: center;
}
.menu-toggle svg { color: #fff !important; width: 22px !important; height: 22px !important; }
@media(max-width:768px) { .menu-toggle { display: flex !important; } }

/* ── EMERGENCY BAR — remove orange bar, keep clean ── */
#emergency-bar { background: #F4F4F4 !important; border-top: 3px solid var(--orange) !important; }
/* Remove the orange vertical accent div by targeting next sibling */
#emergency-bar .emergency-inner > div:first-child[style*="width:6px"] { display: none !important; }
#emergency-bar .emergency-title { color: #231F20 !important; }
#emergency-bar .emergency-label { color: var(--orange) !important; }
#emergency-bar .emergency-phone { color: #231F20 !important; }

/* ── MATERIALS SECTION — grey bg, dark text, black pills ── */
#materials {
  background: var(--orange) !important;
  background-image: none !important;
}
#materials .section-title { color: #fff !important; }
#materials .section-title span {
  color: transparent !important;
  -webkit-text-stroke: 2px rgba(35,31,32,0.25) !important;
}
#materials .rc-tag { color: #fff !important; opacity: 0.9 !important; }
#materials .rc-tag::before { background: #fff !important; }
.material-pill {
  background: #231F20 !important;
  color: #fff !important;
  border-color: #231F20 !important;
}
.material-pill:hover {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}

/* ── MATERIALS — "ROOFING MATERIALS" in black, pills grey on hover ── */
#materials .section-title span {
  -webkit-text-stroke: 2px rgba(0,0,0,0.5) !important;
  color: transparent !important;
}
/* Override the transparent stroke with solid black */
#materials .section-title span {
  -webkit-text-stroke: 0 !important;
  color: #231F20 !important;
}
.material-pill:hover {
  background: #58595B !important;
  border-color: #58595B !important;
  color: #fff !important;
}

/* ── LOGO — remove all glow/shadow effects ── */
.nav-logo-img,
.nav-logo img,
img.nav-logo-img,
.logo-img {
  filter: none !important;
  box-shadow: none !important;
  -webkit-filter: none !important;
}

/* ── SERVICE CARD IMAGE OVERLAYS — always white text (on dark photo bg) ── */
.service-card-cat { color: var(--orange) !important; }
.service-card-title { color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important; }
.service-card-desc { color: rgba(255,255,255,0.85) !important; }
.service-card-body {
  background: linear-gradient(to top, rgba(17,18,20,0.97) 0%, rgba(17,18,20,0.7) 50%, transparent 100%) !important;
}
/* Make image darker so text is always legible */
.service-card-img {
  filter: brightness(0.6) saturate(0.8) !important;
}
.service-card:hover .service-card-img {
  filter: brightness(0.45) saturate(0.7) !important;
}

/* ── CTA BANNER btn-white — white bg, orange text, always visible on orange bg ── */
.sa-cta-banner .btn-white {
  background: #fff !important;
  color: var(--orange) !important;
}
.sa-cta-banner .btn-white:hover {
  background: #fff !important;
  color: var(--orange-dark) !important;
  transform: translateX(4px);
}
.sa-cta-banner .btn-white * { color: var(--orange) !important; }

/* ════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════
   THE ROOFING CREW — v76 COLOR & DESIGN SYSTEM
   All approved changes from design session
   ═══════════════════════════════════════════════════════════════ */

/* ── ROOT OVERRIDES ── */
:root {
  --dark2: #373a36;
}

/* ── NAV — light grey ── */
#masthead {
  background: #f1f1f1 !important;
  border-bottom: 2px solid #D8D8D8 !important;
}
#primary-menu > li > a { color: #231F20 !important; }
#primary-menu > li > a:hover,
#primary-menu > li.current_page_item > a,
#primary-menu > li.current-menu-item > a { color: var(--orange) !important; }
#primary-menu .sub-menu { background: #231F20 !important; }
#primary-menu .sub-menu li a { color: rgba(255,255,255,0.85) !important; }
#primary-menu .sub-menu li a:hover { color: var(--orange) !important; }
.nav-arrow, .menu-arrow { color: #231F20 !important; }
.menu-toggle { background: var(--orange) !important; border: none !important; border-radius: 4px !important; color: #fff !important; }

/* ── LOGO — no filter/shadow ── */
.nav-logo-img, .footer-logo-img { filter: none !important; box-shadow: none !important; }

/* ── BTN-OUTLINE — transparent, white border, white text ── */
.btn-outline {
  border: 2px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  background: transparent !important;
}
.btn-outline:hover {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
}

/* ── CREDENTIAL BAR ── */
#credential-bar { background: #f1f1f1 !important; border-bottom: 3px solid var(--orange) !important; }

/* ── HERO STATS BAR ── */
.hero-stats-bar { background: #f1f1f1 !important; border-top: 3px solid var(--orange) !important; }
.hero-stat-num { color: var(--orange) !important; }
.hero-stat-label { color: #231F20 !important; }
.hero-stat { border-right-color: #D8D8D8 !important; }

/* ── TRUST BAR — gradient white to #f1f1f1 ── */
#trust-bar {
  background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 100%) !important;
  border-top: 3px solid var(--orange) !important;
  border-bottom: 1px solid #D8D8D8 !important;
}
.trust-item { border-right-color: rgba(0,0,0,0.08) !important; }
.trust-title { color: #231F20 !important; }
.trust-desc { color: #231F20 !important; }

/* ── SERVICES ── */
#services { background: #f1f1f1 !important; }
.service-card { background: #222 !important; }
.service-card-cat { color: var(--orange) !important; }
.service-card-title { color: #fff !important; }
.sub-service { background: #f1f1f1 !important; border-left: 3px solid var(--orange) !important; border-right: 1px solid #e0e0e0 !important; }
.sub-service h4 { color: var(--orange) !important; }
.sub-service p { color: #6B6B6B !important; }

/* ── MATERIALS ── */
#materials { background: var(--orange) !important; }
#materials .rc-tag { color: rgba(255,255,255,0.85) !important; }
#materials .rc-tag::before { background: rgba(255,255,255,0.85) !important; }
#materials .materials-header .section-title { color: #231F20 !important; }
#materials .materials-header .section-title span { color: #fff !important; -webkit-text-stroke: 0 !important; }
.material-pill { background: #231F20 !important; color: #fff !important; border-color: #231F20 !important; }
.material-pill:hover { background: #000 !important; border-color: #000 !important; color: #fff !important; }

/* ── EMERGENCY BAR ── */
#emergency-bar { background: #F4F4F4 !important; border-top: 3px solid var(--orange) !important; }
#emergency-bar .emergency-title { color: #231F20 !important; }
#emergency-bar .emergency-label { color: var(--orange) !important; }
#emergency-bar .emergency-phone { color: #231F20 !important; }

/* ── WHY US — light grey bg ── */
#why-us { background: #f1f1f1 !important; }
.why-exp-badge { background: #fff !important; border-color: var(--orange) !important; }
.why-exp-num { color: var(--orange) !important; }
.why-exp-label { color: #231F20 !important; }
.why-intro { color: #4A4A4A !important; }
.check-title { color: #231F20 !important; }
.check-desc { color: #6B6B6B !important; }

/* ── SERVICE AREAS — light grey bg ── */
#service-areas { background: #f1f1f1 !important; }
.areas-desc { color: #6B6B6B !important; }
.area-tag { background: #fff !important; border-color: #D8D8D8 !important; color: #231F20 !important; }
.area-tag:hover { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; }
.areas-map-panel iframe { filter: none !important; }

/* ── ABOUT ── */
#about { background: #fff !important; }
.expertise-lead { color: #231F20 !important; border-left-color: var(--orange) !important; }
.expertise-body { color: #6B6B6B !important; }
.expertise-stat { background: #f4f4f4 !important; border: 1px solid #e8e8e8 !important; }
.expertise-stat-num { color: var(--orange) !important; }
.expertise-stat-label { color: #9B9B9B !important; }

/* ── TEAM SHOWCASE — white bg ── */
#team-showcase { background: #fff !important; }
#team-showcase .section-title { color: #231F20 !important; }
#team-showcase .section-title span { color: var(--orange) !important; }
#team-showcase p { color: #6B6B6B !important; } #team-showcase .rc-team-hover-panel p { color: #fff !important; }
#team-showcase .rc-tag { color: var(--orange) !important; }

/* ── COST ESTIMATOR — light grey bg ── */
#cost-estimator { background: #f1f1f1 !important; }
#cost-estimator .section-title,
#cost-estimator h2 { color: #231F20 !important; }

/* ── REVIEWS — light grey bg ── */
#reviews { background: #f1f1f1 !important; }
.review-card { background: #fff !important; border: 1px solid #e8e8e8 !important; }
.review-text { color: #4A4A4A !important; }
.reviewer-name { color: #231F20 !important; }
.reviewer-loc { color: #9B9B9B !important; }

/* ── FAQ — gradient header, light grid ── */
#faq-section { background: #f1f1f1 !important; }
.faq-header-strip {
  background: linear-gradient(to bottom, #f1f1f1 0%, #d0d0d0 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.faq-header-strip::after {
  content: '?' !important;
  position: absolute !important;
  bottom: -40px !important;
  right: 80px !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 300px !important;
  line-height: 1 !important;
  color: rgba(0,0,0,0.08) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.faq-header-strip .section-title,
.faq-header-strip h2 { color: #231F20 !important; }
.faq-header-right p { color: #231F20 !important; }
.faq-grid-wrap { background: #f1f1f1 !important; padding-bottom: 60px !important; }
.faq-card { background: #fff !important; border: 1px solid #E8E8E8 !important; }
.faq-card.active { background: #FFF5EC !important; }
.faq-card-q { color: #231F20 !important; }
.faq-card.active .faq-card-q { color: var(--orange) !important; }
.faq-card-answer { color: #4A4A4A !important; }
.faq-card-num { color: rgba(255,130,0,0.2) !important; }
.faq-card.active .faq-card-num { color: var(--orange) !important; }
.faq-bottom-bar { background: var(--orange) !important; border: none !important; }
.faq-bottom-left strong { color: #fff !important; }
.faq-bottom-left span { color: rgba(255,255,255,0.85) !important; }
.faq-bottom-phone { color: #fff !important; }

/* ── CONTACT — light grey bg ── */
#contact { background: #f1f1f1 !important; }
.contact-form-wrap { background: #fff !important; border-top-color: var(--orange) !important; }
.contact-desc { color: #6B6B6B !important; }
.form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  background: #f4f4f4 !important;
  border-color: #E8E8E8 !important;
  color: #231F20 !important;
}
.form-label { color: #9B9B9B !important; }

/* ── FOOTER — #595959 ── */
footer#colophon,
footer { background: #595959 !important; }
.footer-about { color: rgba(255,255,255,0.65) !important; }
.footer-address { color: rgba(255,255,255,0.55) !important; }
.footer-license { color: rgba(255,255,255,0.4) !important; }
.footer-copy { color: rgba(255,255,255,0.35) !important; }
.footer-menu li a { color: rgba(255,255,255,0.6) !important; }
.footer-menu li a:hover { color: var(--orange) !important; }
.social-btn { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.6) !important; }
.social-btn:hover { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; }

/* ── SIDEBAR WIDGETS — light grey ── */
.sidebar-widget,
.pages-sidebar .widget,
.pages-sidebar-inner .widget { background: #f4f4f4 !important; border-color: #E8E8E8 !important; }
.pages-sidebar .widget-title,
.widget-title { color: #231F20 !important; }
.pages-sidebar .widget ul li a { color: #4A4A4A !important; }
.pages-sidebar .widget ul li a:hover { color: var(--orange) !important; }
.pages-sidebar .widget p { color: #6B6B6B !important; }
.sidebar-cta { background: var(--orange) !important; }

/* ── SERVICE CARD images ── */
.service-card-img { filter: brightness(0.72) saturate(0.9) !important; }
.service-card:hover .service-card-img { filter: brightness(0.5) !important; }

/* ── SA PAGES ── */
.sa-trust-ribbon { background: #f1f1f1 !important; }
.sa-cta-banner { background: var(--orange) !important; }


/* ── BLOG PREVIEW v76 ── */
#blog-preview { background: #fff !important; }
.blog-card { background: #fff !important; border: 1px solid #E8E8E8 !important; }
.blog-card-img { filter: brightness(1) !important; }
.blog-card-title { color: #231F20 !important; }
.blog-card-excerpt { color: #6B6B6B !important; }
.blog-card-date { color: #9B9B9B !important; }
.blog-card-footer { border-top: 1px solid #E8E8E8 !important; padding-top: 12px !important; }

/* ── CONTENT BLOCKQUOTES — light bg v76 ── */
.rs-body blockquote,
.rs-body .wp-block-quote > p,
.rs-body .wp-block-quote blockquote,
.post-body blockquote,
.sa-editor-content blockquote {
  background: #f4f4f4 !important;
  color: #4A4A4A !important;
  border-left: 3px solid var(--orange) !important;
}

/* ── FOOTER BOTTOM BAR — match footer bg ── */
.footer-bottom { background: #595959 !important; }

/* ── SERVICE AREA — Why Choose Us section v76 ── */
.sa-section { background: #fff !important; }
.sa-section.sa-section-dark { background: #f1f1f1 !important; }
section.sa-section[style*="background:var(--dark2)"],
section.sa-section[style*="background: var(--dark2)"] { background: #fff !important; }
.sa-why-content .section-title,
.sa-why-content h2 { color: #231F20 !important; }
.sa-why-content .section-title span,
.sa-why-content h2 span { color: var(--orange) !important; }
.sa-why-item { color: #4A4A4A !important; }
.sa-why-check { border-color: var(--orange) !important; color: var(--orange) !important; }
.sa-neighborhood-pill { background: #f4f4f4 !important; border-color: #D8D8D8 !important; color: #231F20 !important; }
.sa-neighborhood-pill:hover { background: var(--orange) !important; color: #fff !important; border-color: var(--orange) !important; }
.btn-outline[href*="/about/"] { border-color: #231F20 !important; color: #231F20 !important; }

/* ── SA SECTION BACKGROUNDS — v76 final overrides ── */
.sa-section,
section.sa-section { background: #fff !important; }
.sa-section.sa-section-dark,
section.sa-section.sa-section-dark { background: #f1f1f1 !important; }

/* ── SA WHY SECTION — #f1f1f1 ── */
.sa-section,
section.sa-section { background: #f1f1f1 !important; }

/* ── ESTIMATOR — seamless bg ── */
.rc-est-card { background: #D8D8D8 !important; }

/* ── FAQ → CONTACT gap fix ── */
.faq-grid-wrap { padding-bottom: 0 !important; }
#contact { padding-top: 60px !important; }

/* ── FOOTER — address and 24/7 text white ── */
.footer-address { color: rgba(255,255,255,0.85) !important; }
.footer-address div { color: rgba(255,255,255,0.85) !important; }
.footer-address svg { color: var(--orange) !important; }
footer .footer-menu li[style*="Available"] { color: rgba(255,255,255,0.75) !important; }

/* ── REVIEWS — reduce top gap ── */
#reviews { padding-top: 40px !important; }

/* ── TIGHTEN SECTION GAPS ── */
#emergency-bar { padding: 52px 0 !important; }
#why-us { padding-top: 52px !important; }

/* ── FAQ HEADER STRIP — reduce height, smaller ? mark ── */
.faq-header-strip::after {
  font-size: 180px !important;
  bottom: -20px !important;
}
.rc-shortcode-faq .faq-header-strip {
  padding: 0 !important;
}

/* ── SA HERO STATS — #595959 footer colour, white labels ── */
.sa-hero-stats { background: #595959 !important; backdrop-filter: none !important; border-left: 3px solid var(--orange) !important; }
.sa-hero-stat { border-bottom-color: rgba(255,255,255,0.12) !important; }
.sa-stat-label { color: #fff !important; }

/* ── SA REVIEWS → FAQ gap fix ── */
.rc-shortcode-faq { margin-top: 0 !important; padding-top: 0 !important; }
.rc-shortcode-faq .faq-header-strip { margin-top: 0 !important; }

/* ── SA REVIEWS section — no bottom padding before FAQ ── */
section.sa-section[style*="padding-bottom:0"] { padding-bottom: 0 !important; }

/* ── SA SECTIONS — tighter padding ── */
.sa-section,
section.sa-section { padding: 60px 0 !important; }
section.sa-section[style*="padding-bottom:0"] { padding-bottom: 0 !important; }
section.sa-section[style*="padding-bottom:40px"] { padding-bottom: 40px !important; }
section.sa-section[style*="padding-top:40px"] { padding-top: 40px !important; }

/* ── SA REVIEWS — tighter top padding ── */
section.sa-section[style*="padding-top:40px"] { padding-top: 40px !important; }
section.sa-section.sa-section-dark[style*="padding-bottom:40px"] { padding-bottom: 40px !important; }

/* ── SA MAP→REVIEWS gap — tight ── */
section.sa-section[style*="padding-bottom:20px"] { padding-bottom: 20px !important; }
section.sa-section[style*="padding-top:20px"] { padding-top: 20px !important; }

/* ── REVIEWS→FAQ zero gap ── */
section.sa-section[style*="padding-top:0"] { padding-top: 0 !important; }
.rc-shortcode-faq,
#faq-section.rc-shortcode-faq { margin-top: 0 !important; }

/* ── SA TRUST RIBBON — dark text on light bg ── */
.sa-trust-ribbon { background: #f1f1f1 !important; border-bottom: 1px solid #D8D8D8 !important; }
.sa-trust-item { color: #231F20 !important; border-right-color: #D8D8D8 !important; }
.sa-trust-item svg { color: var(--orange) !important; }

/* ── SA TRUST RIBBON — #595959 footer colour, white text ── */
.sa-trust-ribbon { background: #595959 !important; border-bottom: none !important; }
.sa-trust-item { color: #fff !important; border-right-color: rgba(255,255,255,0.15) !important; }
.sa-trust-item svg { color: var(--orange) !important; }

/* ── SA MAP→REVIEWS zero gap — nuclear ── */
.sa-section + .sa-section { padding-top: 0 !important; }

/* ── ESTIMATOR title area — no white box ── */
#cost-estimator .container > div:first-child { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
#cost-estimator { background: #f1f1f1 !important; }

/* ── ESTIMATOR — remove any white boxes ── */
#cost-estimator,
#cost-estimator .container,
#cost-estimator .container > div { background: transparent !important; }
#cost-estimator .rc-est-card { background: #D8D8D8 !important; }
#cost-estimator .rc-est-card > div:first-child { background: #fff !important; }
#cost-estimator .rc-est-card > div:last-child { background: var(--orange) !important; }

/* ── BLOG→FAQ gap fix ── */
#blog-preview { padding-bottom: 0 !important; }

/* ── BLOCKQUOTES — light bg nuclear override ── */
blockquote,
.rs-body blockquote,
.post-body blockquote,
.wp-block-quote,
.wp-block-quote > p,
.wp-block-pullquote,
.rs-body .wp-block-quote > p,
.sa-editor-content blockquote,
section blockquote,
article blockquote {
  background: #f4f4f4 !important;
  color: #4A4A4A !important;
  border-left: 3px solid var(--orange) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

/* ── FAQ HEADER STRIP — breathing room above ── */
.faq-header-strip { padding-top: 48px !important; }

/* ── NAV DROPDOWN — #595959 footer colour ── */
#primary-menu .sub-menu { background: #595959 !important; border-top: 2px solid var(--orange) !important; }
#primary-menu .sub-menu li a { color: rgba(255,255,255,0.85) !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
#primary-menu .sub-menu li a:hover { color: var(--orange) !important; background: rgba(255,255,255,0.06) !important; }

/* ── MOBILE DRAWER — white links, orange hover ── */
.mobile-drawer { background: #595959 !important; }
.drawer-menu li a { color: #fff !important; border-bottom-color: rgba(255,255,255,0.1) !important; }
.drawer-menu li a:hover { color: var(--orange) !important; background: rgba(255,130,0,0.08) !important; }
.drawer-menu .sub-menu { background: rgba(0,0,0,0.15) !important; }
.drawer-menu .sub-menu a { color: rgba(255,255,255,0.85) !important; }
.drawer-close { color: #fff !important; }

/* ── TEAM SHOWCASE hover panel — white text ── */
.rc-team-hover-panel p,
.rc-team-hover-panel div,
.rc-team-hover-panel span { color: #fff !important; }
.rc-team-hover-panel span[style*="orange"] { color: var(--orange) !important; }

/* ── BLOCKQUOTES — absolute nuclear override ── */
.wp-block-quote,
.wp-block-quote *,
.wp-block-pullquote,
.wp-block-pullquote *,
blockquote,
blockquote * {
  background: #f4f4f4 !important;
  color: #4A4A4A !important;
}
.wp-block-quote,
.wp-block-pullquote,
blockquote {
  border-left: 3px solid var(--orange) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 14px 20px !important;
}

/* ── FAQ HEADER STRIP — reduce top padding ── */
.faq-header-strip { padding-top: 24px !important; }

/* ── HOMEPAGE FAQ — no top gap ── */
#faq-section { padding-top: 0 !important; margin-top: 0 !important; }
#faq-section .faq-header-strip { padding-top: 36px !important; }

/* ── TEAM HOVER PANEL — white text FINAL ── */
.rc-team-hover-panel,
.rc-team-hover-panel p,
.rc-team-hover-panel div,
.rc-team-hover-panel span { color: #fff !important; background: transparent !important; }
.rc-team-hover-panel > div { background: transparent !important; }
.rc-team-hover-panel span:has(> svg) { color: var(--orange) !important; }

/* ── TEAM HOVER — orange accent keeps colour ── */
.rc-team-hover-panel span[style*="FF8200"],
.rc-team-hover-panel span[style*="orange"] { color: var(--orange) !important; background: transparent !important; }

/* ── TEAM HOVER PANEL — fix background + white text ── */
.rc-team-hover-panel { background: linear-gradient(to top,rgba(17,18,20,0.98) 0%,rgba(17,18,20,0.95) 60%,rgba(17,18,20,0.7) 100%) !important; }
.rc-team-hover-panel p { color: #fff !important; background: transparent !important; }
.rc-team-hover-panel > div { background: transparent !important; }
.rc-team-hover-panel > div div { color: #fff !important; background: transparent !important; }
.rc-team-hover-panel > div div span { color: var(--orange) !important; background: transparent !important; }

/* ── TEAM HOVER PANEL — white text beats all ── */
#team-showcase .rc-team-hover-panel p { color: #fff !important; }
#team-showcase .rc-team-hover-panel div { color: #fff !important; }
#team-showcase .rc-team-hover-panel span { color: #fff !important; }
#team-showcase .rc-team-hover-panel span[style*="FF8200"],
#team-showcase .rc-team-hover-panel span[style*="orange"] { color: var(--orange) !important; }

/* ── FAQ PHONE BUTTON — orange outline, black on hover ── */
.faq-phone-btn { border-color: var(--orange) !important; color: var(--orange) !important; background: transparent !important; }
.faq-phone-btn:hover { border-color: #231F20 !important; color: #231F20 !important; background: transparent !important; }
.faq-phone-btn svg { color: inherit !important; }

/* ── ABOUT → TEAM gap fix ── */
#about { background: #fff !important; padding: 80px 0 20px !important; }
#team-showcase { padding-top: 20px !important; }