/***************************************
 * Razorback Electric • Global Theme CSS
 * Brand: Red / Gray / Black
 ***************************************/

/* ===== Root Tokens ===== */
:root{
  /* Layout offset for sticky header (script updates this) */
  --header-offset: 0px;

  /* Brand core */
  --primary: #cc0000;         /* main Razorback Red */
  --primary-dark: #990000;    /* hover/active red */
  --accent: #e53935;          /* optional accent red */

  /* Neutrals */
  --gray-900:#111111;
  --gray-800:#1f1f1f;
  --gray-700:#2a2a2a;
  --gray-600:#3a3a3a;
  --gray-500:#555555;
  --gray-400:#777777;
  --gray-300:#aaaaaa;
  --gray-200:#d9d9d9;
  --gray-100:#f5f5f5;

  /* Semantic */
  --success:#198754;
  --warning:#f59e0b;
  --danger:#dc3545;
  --info:#0dcaf0;

  /* Text & base */
  --text:#111111;
  --muted:#666666;
  --link:#cc0000;
  --link-hover:#990000;
  --body-bg:#f5f5f5;
  --card-bg:#ffffff;

  /* Elevation */
  --shadow-sm:0 6px 14px rgba(0,0,0,.08);
  --shadow-md:0 12px 28px rgba(0,0,0,.12);
  --shadow-lg:0 16px 36px rgba(0,0,0,.16);

  /* Bootstrap bridge */
  --bs-primary:var(--primary);
  --bs-secondary:#000000;
  --bs-light:var(--gray-100);
  --bs-dark:var(--gray-900);
  --bs-link-color:var(--link);
  --bs-link-hover-color:var(--link-hover);
}

/* ===== Base ===== */
/* Apply the header offset globally (safe-area friendly) */
body { padding-top: max(var(--header-offset), env(safe-area-inset-top)); }
html { scroll-padding-top: var(--header-offset); }

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--body-bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  line-height:1.55;
  margin:0;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:none}
::selection{background:rgba(204,0,0,.15)}

/* ===== Utilities ===== */
.text-muted{color:var(--muted)!important}
.bg-light{background:var(--gray-100)!important}
.bg-dark{background:var(--gray-900)!important;color:#fff!important}
.bg-primary{background:var(--primary)!important;color:#fff!important}
.text-primary{color:var(--primary)!important}
.border-primary{border-color:var(--primary)!important}
.shadow-sm{box-shadow:var(--shadow-sm)!important}
.shadow-md{box-shadow:var(--shadow-md)!important}
.shadow-lg{box-shadow:var(--shadow-lg)!important}
.rounded-12{border-radius:12px}

/* ===== Buttons ===== */
.btn{
  font-weight:600;
  border-radius:.5rem;
  transition:all .25s ease;
}
.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.btn-primary:hover,
.btn-primary:focus{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
  color:#fff;
  transform:translateY(-1px);
}
.btn-outline-primary{
  color:var(--primary);
  border-color:var(--primary);
  background:transparent;
}
.btn-outline-primary:hover{ background:var(--primary); color:#fff; }
.btn-dark{background:#000;border-color:#000}
.btn-dark:hover{background:#222;border-color:#222}
.btn-light{background:#fff;border-color:#e5e5e5}
.btn-light:hover{background:#f2f2f2}

/* Square sizes */
.btn-square,.btn-sm-square,.btn-lg-square{
  display:flex;align-items:center;justify-content:center;padding:0
}
.btn-square{width:38px;height:38px}
.btn-sm-square{width:32px;height:32px}
.btn-lg-square{width:48px;height:48px}

/* Back to top */
.back-to-top{
  position:fixed;right:20px;bottom:20px;display:none;z-index:999;
}
.back-to-top.show{display:flex}

/* ===== Header / Navbar ===== */
/* Keep header above content & dropdowns */
.sticky-top{ z-index:1030; }

/* Single, unambiguous navbar styling (white) */
.navbar { background:#ffffff; }
.navbar .navbar-brand img{height:32px;width:auto}
.navbar .nav-link{
  color:#111;
  letter-spacing:.02em;
  font-weight:700;
  padding:.9rem 1rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active{ color:var(--primary) }
.navbar .btn-primary{ background:var(--primary); border-color:var(--primary); }
.navbar .btn-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark) }

/* Desktop hover dropdown */
@media (min-width:992px){
  .navbar .dropdown:hover .dropdown-menu{display:block;margin-top:0}
}
/* Ensure dropdown sits above carousels/hero */
.dropdown-menu{
  z-index:1080;
  border:1px solid var(--gray-200);
  border-radius:.5rem;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.dropdown-item{padding:.55rem 1rem}
.dropdown-item:hover{background:rgba(204,0,0,.08);color:var(--primary)}

/* ===== Hero (image + overlay + centered text) ===== */
.hero{ position:relative; overflow:hidden; isolation:isolate; }
.hero > img{
  width:100%;
  height:clamp(380px,55vw,560px);
  object-fit:cover;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 100%);
  z-index:1;
}
.hero-content{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;padding:0 1rem;max-width:960px;text-align:center;
}
.hero h1,.hero p{color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.35)}
.hero-cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.hero-cta .btn{min-width:220px;padding:12px 18px}

@media (max-width:575.98px){
  .hero-content{bottom:1.25rem;top:auto;transform:translateX(-50%)}
  .hero h1{font-size:1.75rem}
  .hero p{font-size:1rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;min-width:0}
}

/* Page Header (breadcrumb-style band) */
.page-header{
  background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(../img/hero-electric.jpg) center/cover no-repeat;
  color:#fff;
}
.page-header .breadcrumb-item+.breadcrumb-item::before{color:#bfbfbf}
.page-header .display-4{ text-shadow:0 3px 12px rgba(0,0,0,.35) }

/* ===== Facts (4 tiles) ===== */
.facts-card{color:inherit;text-decoration:none}
.facts-item{
  position:relative;overflow:hidden;height:320px;border-radius:.75rem;
}
.facts-img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .5s}
.facts-overlay{
  position:absolute;inset:0;padding:28px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.facts-overlay h1.display-1{
  position:absolute;top:-18px;right:8px;
  font-size:6rem;line-height:1;color:rgba(255,255,255,.2);font-weight:800;pointer-events:none;
}
.facts-item:hover .facts-img{transform:scale(1.08)}
.facts-card:hover .facts-cta{text-decoration:underline}

@media (max-width:575.98px){
  .facts-item{height:260px}
  .facts-overlay h1.display-1{font-size:4.5rem}
}

/* ===== Services Grid / Cards ===== */
.service-item{
  border:1px solid var(--gray-200);
  border-radius:.75rem;
  overflow:hidden;
  background:var(--card-bg);
  display:flex;flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.service-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.service-media{overflow:hidden}
.service-img{width:100%;height:220px;object-fit:cover;transition:transform .45s}
.service-item:hover .service-img{transform:scale(1.05)}
.service-text{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.service-text .small{letter-spacing:.08em;font-weight:700;color:var(--primary);margin-top:auto}
.service-text .small i{transition:transform .2s}
.service-text .small:hover i{transform:translateX(4px)}

/* hover overlay version (if used) */
.service-text::before{
  content:"";position:absolute;inset:0;height:0;background:var(--primary);opacity:0;transition:.5s
}
.service-item:hover .service-text::before{height:100%;opacity:1}
.service-text *{position:relative;z-index:1;transition:color .3s}
.service-item:hover .service-text *{color:#fff!important}

/* ===== Appointment / Lead band (dark photo + red brand) ===== */
.appointment{
  background:
    linear-gradient(to right, rgba(0,0,0,.70), rgba(0,0,0,.70)),
    url("../img/electric-hero.jpg") center/cover no-repeat;
  color:#fff;
  border-top:2px solid #2a2a2a;border-bottom:2px solid #2a2a2a;
}
.appointment .form-floating > .form-control.bg-form,
.appointment .form-floating > .form-select.bg-form{
  background:rgba(255,255,255,.1);color:#fff;
}
.appointment .form-floating > label{color:rgba(255,255,255,.8)}
.appointment .form-control:focus,
.appointment .form-select:focus{
  outline:none;box-shadow:0 0 0 .2rem rgba(204,0,0,.25);
}

/* ===== Forms (generic) ===== */
.form-control, .form-select{
  border:1px solid var(--gray-300);
  border-radius:.6rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(204,0,0,.15);
}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}

/* ===== Testimonials / Owl ===== */
.testimonial-item{
  background:#fff;border:1px solid var(--gray-200);
  border-radius:.75rem;padding:28px;min-height:260px
}
.testimonial-item img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.owl-dots .owl-dot span{
  width:10px;height:10px;background:#d9d9d9;border-radius:50%;display:block
}
.owl-dots .owl-dot.active span{background:var(--primary)}
.owl-nav{margin-top:24px;display:flex;gap:10px}
.owl-nav .owl-prev, .owl-nav .owl-next{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--primary);
  color:var(--gray-800);display:flex;align-items:center;justify-content:center;
  transition:.3s
}
.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover{
  background:var(--primary);color:#fff
}

/* ===== Footer ===== */
.site-footer{
  color:#d6d6d6;background:var(--gray-900);
}
.site-footer a{color:#d6d6d6}
.site-footer a:hover{color:#fff}
.footer-top{
  padding:64px 0 48px;
  background:linear-gradient(180deg, #151515 0%, #0f0f0f 100%);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-bottom{
  padding:18px 0;background:#0b0b0b;font-size:.95rem;color:#bdbdbd;
}
.footer-heading{color:#fff;font-weight:800;letter-spacing:.2px;margin-bottom:14px}
.footer-list,.footer-links,.footer-hours{list-style:none;margin:0;padding:0}
.footer-list li,.footer-links li{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.footer-links li a::before{
  content:"›";color:var(--primary);margin-right:8px;display:inline-block;transform:translateY(-1px)
}
.footer-hours span{font-weight:700;color:#fff}
.footer-hours em{font-style:normal;color:#cfcfcf;font-size:.95rem}
.social-list{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.social-list a{
  display:inline-flex;width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.15);transition:all .25s;background:rgba(255,255,255,.03)
}
.social-list a:hover{border-color:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(204,0,0,.25)}
@media (min-width:992px){ .footer-top .col-lg-4{padding-right:48px} }
@media (max-width:767.98px){ .footer-top{padding:48px 0 36px} }

/* ===== Breadcrumbs, Badges, Alerts, Tables ===== */
.breadcrumb .breadcrumb-item + .breadcrumb-item::before{color:var(--gray-400)}
.badge.bg-primary{background:var(--primary)!important}
.alert-primary{background:rgba(204,0,0,.06);border:1px solid rgba(204,0,0,.25);color:#4b0000}
.table thead th{border-bottom:2px solid var(--gray-300)}
.table td,.table th{border-color:var(--gray-200)}
.table-striped tbody tr:nth-of-type(odd){background:rgba(0,0,0,.02)}

/* ===== Accordion / FAQ ===== */
.accordion-button{font-weight:600}
.accordion-button:not(.collapsed){color:#fff;background:var(--primary)}
.accordion-button:focus{box-shadow:0 0 0 .2rem rgba(204,0,0,.15)}

/* ===== Pagination / Progress / Tabs ===== */
.page-link{color:var(--primary)}
.page-link:hover{color:var(--primary-dark)}
.page-item.active .page-link{background:var(--primary);border-color:var(--primary)}
.progress-bar{background:var(--primary)}
.nav-tabs .nav-link.active{border-color:var(--gray-300) var(--gray-300) #fff;color:var(--primary)}
.nav-tabs .nav-link:hover{border-color:var(--gray-300)}

/* ===== Modals (light weight theming) ===== */
.modal-content{border:1px solid var(--gray-300);border-radius:.75rem;box-shadow:var(--shadow-md)}
.modal-header{border-bottom:1px solid var(--gray-200)}
.modal-footer{border-top:1px solid var(--gray-200)}

/* ===== Page-specific helpers ===== */
.hero-band{min-height:360px}
.hero-band .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-band .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55));z-index:1}
.hero-band .container{z-index:2}

.services .row.g-4 > [class*="col-"]{display:flex}
.services .service-item{width:100%}

/* Contact band variant */
.contact-section .contact-form-section{
  background:var(--primary);
  color:#fff;
  border-radius:10px;
}
.contact-section .bg-form{background:rgba(255,255,255,.15)!important}
.contact-section .form-floating label{color:#f0f0f0}

/* Gallery helper */
.work-gallery img{width:100%;height:250px;object-fit:cover;border-radius:8px}

/* ===== Animations (subtle) ===== */
.fade-in{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== Responsive spacing polish ===== */
section + section{scroll-margin-top:96px}
@media (max-width:575.98px){
  .container-xxl.py-5, .services.container-xxl.py-5{padding-top:40px!important;padding-bottom:40px!important}
}

/* ===== Carousels (Bootstrap controls) ===== */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  width:3.2rem;height:3.2rem;
  background-color:#000;border:12px solid #000;border-radius:50px;
}

/* ===== Spinner ===== */
#spinner{opacity:0;visibility:hidden;transition:opacity .5s, visibility 0s .5s;z-index:99999}
#spinner.show{visibility:visible;opacity:1;transition:opacity .5s, visibility 0s}

/* ===== Footer legacy links ===== */
.footer .btn.btn-link{
  display:block;margin-bottom:5px;padding:0;text-align:left;color:#333;font-weight:500;text-transform:none;transition:.25s
}
.footer .btn.btn-link:hover{color:var(--primary);letter-spacing:.5px}

/* ===== Small helpers ===== */
.opacity-75{opacity:.75}
.opacity-50{opacity:.5}

/* Topbar buttons */
.topbar .btn.btn-square { color:#111; background:#fff; }
.topbar .btn.btn-square:hover { color:#fff; background:#cc0000; border-color:#cc0000; }

/* ===== Footer Styling (site-footer v2) ===== */
.site-footer { background:#111; color:#ddd; font-size:15px; }
.site-footer a { color:#ddd; text-decoration:none; transition:color .3s ease; }
.site-footer a:hover { color:#e30613; }

.footer-top { padding:50px 0; border-bottom:2px solid #333; }
.footer-heading { font-size:16px; font-weight:600; margin-bottom:15px; color:#fff; }

.footer-list, .footer-links, .footer-hours { list-style:none; padding:0; margin:0; }
.footer-list li, .footer-links li, .footer-hours li { margin-bottom:10px; display:flex; align-items:center; }
.footer-list i, .footer-hours span { color:#e30613; margin-right:8px; }

.footer-hours span { min-width:80px; display:inline-block; font-weight:600; color:#fff; }
.footer-hours em { font-style:normal; color:#bbb; }

.footer-brand .brand-row { display:flex; align-items:center; font-size:20px; color:#fff; margin-bottom:15px; }
.footer-brand .brand-row i { font-size:26px; color:#e30613; margin-right:10px; }
.footer-brand .brand-title { font-weight:700; line-height:1.2; }
.footer-brand .brand-blurb { color:#bbb; margin-bottom:15px; }

.social-list { display:flex; gap:10px; }
.social-list a { width:36px; height:36px; background:#222; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.social-list a:hover { background:#e30613; color:#fff; }

.footer-bottom { background:#0a0a0a; padding:15px 0; font-size:14px; color:#aaa; }
.footer-bottom .copy { color:#777; }
.footer-bottom .mini-links { list-style:none; display:flex; gap:15px; margin:0; padding:0; }
.footer-bottom .mini-links a { color:#aaa; font-size:14px; }
.footer-bottom .mini-links a:hover { color:#e30613; }

/* Alternating section backgrounds */
section:nth-of-type(even) { background-color:#f5f5f5; }
section:nth-of-type(odd)  { background-color:#ffffff; }

/* Detail image helper */
.detail-img{
  width:100%;
  height:360px;
  object-fit:cover;
  border-radius:.75rem;
  box-shadow:var(--shadow-sm);
}
@media (max-width: 767.98px){
  .detail-img{ height:240px; }
}

/* ===== Contact page hero variant (solid brand gradient) ===== */
.page-header-contact{
  position:relative;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  min-height:320px;
}
.page-header-contact::before{
  content:"";
  position:absolute; inset:0;
  background:transparent; /* keep text crisp */
  z-index:0;
}
.page-header-contact .container{ position:relative; z-index:1; }

/* ===== Contact band – dark charcoal look ===== */
.contact-form-section{
  background:linear-gradient(180deg, #141414 0%, #1f1f1f 100%);
  color:#fff;
}
.contact-form-section h3{ font-weight:800; letter-spacing:.2px; }
.contact-form-section .text-white-50{ color:rgba(255,255,255,.8)!important; }
.contact-form-section .text-warning{ color:#ffd166 !important; }

.contact-form-section .form-control,
.contact-form-section .form-select{
  background:#ffffff;
  color:var(--text);
  border:2px solid transparent;
  border-radius:.6rem;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(204,0,0,.20);
}
.contact-form-section .form-floating > label{ color:#374151; }
.contact-form-section .form-check-label{ color:rgba(255,255,255,.85); }

.contact-form-section .btn.btn-light{
  color:#111; font-weight:700; border:2px solid #fff;
}
.contact-form-section .btn.btn-light:hover{
  background:#fff; color:#111; filter:brightness(.95);
}
.contact-meta .badge{ background:#fff; color:var(--primary-dark); }

.contact-map{ width:100%; height:350px; border:0; }
@media (min-width:992px){ .contact-map{ height:420px; } }

/* Header polish */
.topbar small a:hover { text-decoration: underline; }
.navbar .nav-link { letter-spacing:.02em; }
@media (max-width: 991.98px){
  .navbar .nav-link { padding-top:.5rem; padding-bottom:.5rem; }
}
@media (max-width: 991.98px) {
  .navbar .navbar-nav .nav-link {
    color: #111;          /* dark text for white background */
    font-weight: 600;     /* lighter than desktop’s 700 */
    padding: 0.75rem 1rem;
  }

  .navbar .navbar-nav .nav-link:hover {
    color: var(--primary);
    background: rgba(204,0,0,0.05); /* subtle hover background */
  }

  .navbar .navbar-nav .btn {
    width: 100%;          /* full width call-to-action button */
    margin-top: 0.5rem;
  }
}
.navbar .navbar-brand {
  flex-grow: 1; /* pushes brand to the left */
}
.navbar-collapse.show {
  margin-top: 0.5rem; /* pushes dropdown a bit below hero */
}
/* Floating Sidebar (Desktop) */
.floating-bar {
  position: fixed;
  top: 40%;
  right: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 9999;
}

.floating-bar a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #eee;
  transition: background .2s;
}

.floating-bar a:hover {
  background: #cc0000;
  color: #fff;
}

.floating-bar a:last-child {
  border-bottom: none;
}

/* FAB (Mobile) */
.fab-mobile {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000;
}

.fab-container {
  position: relative;
}

.fab-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #cc0000;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: background .2s;
}

.fab-toggle:hover {
  background: #990000;
}

.fab-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  bottom: 70px;
  right: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  overflow: hidden;
}

.fab-menu a {
  padding: 10px 14px;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.fab-menu a:hover {
  background: #cc0000;
  color: #fff;
}

.fab-menu a:last-child {
  border-bottom: none;
}

/* Show/hide by screen size */
@media (max-width: 991.98px) {
  .fab-desktop { display: none; }
}

@media (min-width: 992px) {
  .fab-mobile { display: none; }
}
/* ===== Breaker Post Hero ===== */
.hero-breaker {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(280px, 40vw, 440px);
  display: grid;
  align-items: end;
  padding: 48px 0;
}

.hero-breaker .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.05) saturate(1.15);
  z-index: 0;
}

/* Dark gradient overlay */
.hero-breaker__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.8) 100%);
  z-index: 1;
}

/* Red hazard glow */
.hero-breaker::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -15%, rgba(255,0,0,.25) 0%, rgba(255,0,0,0) 60%);
  z-index: 1;
}

/* Content */
.hero-breaker .container {
  z-index: 2;
}

/* Red badge */
.badge-pill-breaker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background:
    linear-gradient(135deg, #ff5e5e 0%, #d60000 60%, #990000 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.25) inset,
    0 6px 18px rgba(0,0,0,.35);
}
.badge-pill-breaker i {
  font-size: 1rem;
}

/* Title + meta */
.hero-breaker h1 {
  text-shadow: 0 6px 22px rgba(0,0,0,.55);
}
.hero-breaker .blog-meta {
  font-size: .975rem;
  letter-spacing: .02em;
}

/* Edge fade */
.hero-breaker::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 42px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 20%, var(--body-bg, #f5f5f5) 100%);
  z-index: 1;
}

/* Mobile tweaks */
@media (max-width: 575.98px) {
  .hero-breaker { padding: 36px 0; }
  .badge-pill-breaker { font-size: .9rem; }
  .hero-breaker h1 { font-size: 1.5rem; }
}
/* ===== Lighting Post Hero ===== */
.hero-lighting {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(280px, 40vw, 440px);
  display: grid;
  align-items: end;
  padding: 48px 0;
}

.hero-lighting .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.05) saturate(1.1);
  z-index: 0;
}

/* Overlay for readability */
.hero-lighting__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%);
  z-index: 1;
}

/* Subtle glow overlay */
.hero-lighting::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -15%, rgba(255,215,128,.25) 0%, rgba(255,215,128,0) 60%);
  z-index: 1;
}

/* Content */
.hero-lighting .container {
  z-index: 2;
}

/* Golden badge */
.badge-pill-lighting {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #111;
  background:
    linear-gradient(135deg, #ffe17a 0%, #ffc14d 40%, #ff9d00 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.25) inset,
    0 6px 18px rgba(0,0,0,.25);
}
.badge-pill-lighting i {
  font-size: 1rem;
}

/* Title + meta */
.hero-lighting h1 {
  text-shadow: 0 6px 22px rgba(0,0,0,.55);
}
.hero-lighting .blog-meta {
  font-size: .975rem;
  letter-spacing: .02em;
}

/* Edge fade into background */
.hero-lighting::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 42px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 20%, var(--body-bg, #f5f5f5) 100%);
  z-index: 1;
}

/* Mobile tweaks */
@media (max-width: 575.98px) {
  .hero-lighting { padding: 36px 0; }
  .badge-pill-lighting { font-size: .9rem; }
  .hero-lighting h1 { font-size: 1.5rem; }
}
/* ===== EV Post Hero ===== */
.hero-ev {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(280px, 40vw, 440px);
  display: grid;
  align-items: end;  /* content sits lower for drama */
  padding: 48px 0;  /* top/bottom breathing room */
}

.hero-ev .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  z-index: 0;
}

/* Dark → transparent overlay for legibility */
.hero-ev__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%);
  z-index: 1;
}

/* Optional: soft top sheen */
.hero-ev::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 60%);
  z-index: 1;
}

/* Content */
.hero-ev .container {
  z-index: 2;
}

/* Neon EV badge */
.badge-pill-ev {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #0f172a; /* slate-900 text */
  background:
    linear-gradient(135deg, #b6ffbf 0%, #8ef7a5 30%, #65e1ff 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.25) inset,
    0 6px 18px rgba(0,0,0,.25);
}
.badge-pill-ev i {
  font-size: 1rem;
}

/* Title + meta polish */
.hero-ev h1 {
  text-shadow: 0 6px 22px rgba(0,0,0,.55);
}
.hero-ev .blog-meta {
  font-size: .975rem;
  letter-spacing: .02em;
}

/* Edge fade for classy bottom transition */
.hero-ev::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 42px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 20%, var(--body-bg, #f5f5f5) 100%);
  z-index: 1;
}

/* Mobile tweaks */
@media (max-width: 575.98px) {
  .hero-ev { padding: 36px 0; }
  .badge-pill-ev { font-size: .9rem; }
  .hero-ev h1 { font-size: 1.5rem; }
}
/* Style the select dropdown background and text */
.form-select.bg-form {
  background-color: #b42b1d !important; /* matches your red form */
  color: #fff !important; /* white text */
  border: none;
}

/* Style the dropdown options */
.form-select.bg-form option {
  background-color: #b42b1d; /* red background for dropdown */
  color: #fff; /* white text */
}

/* On hover/focus */
.form-select.bg-form:focus {
  background-color: #b42b1d;
  color: #fff;
  box-shadow: 0 0 0 0.25rem rgba(255,255,255,.25);
}