:root {
  /* Primary Colors */
  --blue: #001226;
  /* Primary Blue */
  --red: #791724;
  /* Primary Red */
  --white: #ffffff;
  --off-white: #F7F7F7;
  /* Primary Grey */
  --text-main: #000000;

  /* Secondary & Accent Colors */
  --blue-secondary: #002147;
  --blue-tertiary: #003D82;
  --blue-light: #0058BD;
  --accent-primary: #94BDED;
  --red-secondary: #B22234;
  --accent-secondary: #D1797B;
  --accent-yellow: #F5D33F;
  --accent-green: #156715;
}

body {
  margin: 0;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  background: var(--white);
  color: var(--text-main);
  line-height: 1.6;
}

body.dark-mode {
  /* Invert Backgrounds and Text */
  --white: #121212;
  --off-white: #1e1e1e;
  --text-main: #e0e0e0;

  /* Invert Brand Colors (Dark -> Light) */
  --blue: #94BDED;
  /* Was dark blue, now light blue */
  --red: #D1797B;
  /* Was dark red, now light red */

  /* Invert Accents (Light -> Dark) */
  --blue-secondary: #0058BD;
  --blue-tertiary: #003D82;
  --blue-light: #001226;
  /* Was light blue, now dark blue */
  --accent-primary: #001226;
  --red-secondary: #e57373;
  --accent-secondary: #791724;
  /* Was light red, now dark red */
}

/* Reset */
* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin-top: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Header - Side Navigation Style */
.site-header {
  background: var(--blue);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px 40px;
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  /* Wider container */
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--white);
  line-height: 1.2;
  white-space: nowrap;
}

.logo-icon {
  height: 50px;
  width: auto;
}

.site-header nav {
  display: flex;
  gap: 30px;
  align-items: center;
  color: var(--white);
  white-space: nowrap;
}

.site-header nav a {
  color: var(--white);
  white-space: nowrap;
}

.site-header nav a:hover {
  color: var(--off-white);
}

.site-header nav a.cta {
  background: var(--white);
  /* Contrast button */
  color: var(--blue);
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
}

.site-header nav a.cta:hover {
  background: #e6e6e6;
}

.site-header nav a.cta-secondary {
  color: var(--white);
  padding: 10px 20px;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  margin-right: 10px;
}

.site-header nav a.cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
}

.secondary-nav {
  background: #f0f0f0;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

.secondary-nav .container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.secondary-nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}

.secondary-nav a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s;
  white-space: nowrap;
}

.secondary-nav a:hover {
  color: var(--red);
}

/* Split Hero Section */
.split-hero {
  position: relative;
  min-height: 40vh;
  /* max-width removed to allow full screen width if desired, or kept if container constraint is needed. 
     User said "front page can you make the hero image extend the width of both itself and the your peace of mind pane"
     Currently it's constrained by max-width: 1400px. I will keep the constraint for now but fill it.
  */
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  /* Center text vertically */
  overflow: hidden;
  margin-top: 20px;
  border-radius: 10px;
}

.hero-text {
  position: relative;
  z-index: 2;
  width: 50%;
  /* OR max-width: 600px; */
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Semi-transparent background */
  background: rgba(249, 249, 249, 0.85);
  height: 100%;
  min-height: 80vh;
  /* Match hero height */
  backdrop-filter: blur(5px);
  /* Optional: adds nice blur effect */
}

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

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 1s ease-in-out;
}

.hero-text h1 {
  font-size: 3.5rem;
  /* Large Headline */
  color: var(--blue);
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-text p {
  font-size: 1.25rem;
  color: #555;
  margin-bottom: 40px;
  max-width: 500px;
}

.hero-text .btn-primary {
  align-self: flex-start;
}

.btn-primary {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  padding: 15px 35px;
  font-weight: bold;
  border-radius: 8px;
  /* align-self: flex-start;  Removed to allow centering in pricing cards */
  letter-spacing: 0.5px;
}

.btn-primary:hover {
  background: #00152e;
}

/* Services Grid using Flex for a cleaner look */
.services-section {
  padding: 100px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.section-title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--red);
  margin-bottom: 10px;
  display: block;
  font-weight: bold;
}

.services-grid {
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.service-item {
  flex: 1;
  padding: 30px;
  /* Less padding, cleaner */
  border-left: 2px solid #eee;
  transition: border-color 0.3s;
}

.service-item:hover {
  border-left-color: var(--red);
}

.service-item h3 {
  font-size: 1.5rem;
  color: var(--blue);
  margin-bottom: 15px;
}

/* Trust - Side by Side */
.trust-split {
  display: flex;
  background: var(--blue);
  color: var(--white);
  max-width: 1400px;
  /* Layout Fix: Max width for large screens */
  margin: 0 auto;
  /* Center */
  border-radius: 10px;
  overflow: hidden;
}

.trust-content {
  flex: 1;
  padding: 80px 60px;
}

.trust-visual {
  flex: 1;
  background-image: url('../img/generacgen.jpeg');
  /* Using a different image if available, or fallback */
  background-size: cover;
  background-position: center;
  min-height: 400px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Generac Banner */
.generac-banner {
  background: transparent;
  padding: 0 40px;
  /* Align with other containers if needed, or let container handle it */
  margin-top: 20px;
}

.generac-banner .container {
  background: var(--blue);
  padding: 20px 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  text-align: left;
}

.generac-banner-logo {
  height: 40px;
  width: auto;
}

.generac-banner .banner-text h3 {
  color: var(--white);
  margin: 0 0 5px 0;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.generac-banner .banner-text p {
  margin: 0;
  color: #ddd;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .generac-banner .container {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}

.trust-content ul {
  list-style: none;
  padding: 0;
  margin-top: 30px;
}

.trust-content li {
  margin-bottom: 15px;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

/* Footer */
.site-footer {
  background: var(--blue);
  color: var(--white);
  padding: 40px;
  text-align: center;
}

.site-footer a {
  color: var(--white);
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--off-white);
  text-decoration: none;
}

/* Responsive */
@media (max-width: 900px) {

  /* Header Fixes */
  .site-header {
    padding: 15px 20px;
    position: relative;
  }

  .site-header .container {
    flex-direction: row;
    /* Keep logo and hamburger side-by-side */
    gap: 15px;
    justify-content: space-between;
    align-items: center;
  }

  .logo-text {
    font-size: 1.1rem;
    white-space: normal;
    line-height: 1.2;
  }

  .logo-icon {
    height: 38px;
  }

  .mobile-menu-btn {
    display: block;
    z-index: 1001;
  }

  .site-header nav {
    display: none;
    /* Hide default flex layout */
    flex-direction: column;
    gap: 15px;
    width: 250px;
    position: fixed;
    top: 0;
    right: -250px;
    height: 100vh;
    background: var(--blue-secondary);
    padding: 80px 20px 20px 20px;
    transition: right 0.3s ease;
    z-index: 1000;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    align-items: flex-start;
  }

  .site-header nav.menu-open {
    display: flex;
    right: 0;
  }

  .site-header nav span {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: var(--accent-yellow);
  }

  .site-header nav a.cta,
  .site-header nav a.cta-secondary {
    width: 100%;
    text-align: center;
    margin: 0;
    display: block;
  }

  /* Secondary Nav Fixes */
  .secondary-nav .container {
    padding: 0 20px;
    justify-content: flex-start;
  }

  .secondary-nav-links {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 5px;
    /* space for scrollbar on some devices */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
  }

  .secondary-nav-links::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
  }

  /* Hero Fixes */
  .split-hero {
    flex-direction: column;
    min-height: auto;
    /* Allow content to dictate height on mobile */
  }

  .hero-text {
    width: 100%;
    /* FIX: Was stuck at 50% */
    padding: 40px 20px;
    /* Reduce padding */
    min-height: auto;
    background: rgba(249, 249, 249, 0.95);
    /* More opaque on mobile */
  }

  .hero-image {
    position: relative;
    /* Stack it */
    width: 100%;
    height: 300px;
    /* Fixed height for image on mobile */
  }

  .hero-text h1 {
    font-size: 2.2rem;
    /* Smaller heading */
    margin-bottom: 15px;
  }

  .hero-text p {
    font-size: 1.1rem;
  }

  /* Trust Section Fixes */
  .trust-split {
    flex-direction: column;
  }

  .trust-content {
    padding: 40px 20px;
  }

  .trust-visual {
    width: 100%;
    min-height: 250px;
  }

  /* Services Grid */
  .services-section {
    padding: 60px 20px;
  }

  .services-grid {
    flex-direction: column;
    gap: 20px;
  }
}

/* Services Page Styles */
.page-hero {
  background: var(--blue);
  color: var(--white);
  padding: 60px 40px;
  text-align: center;
}

.page-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.service-detail-section {
  padding: 60px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-detail {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 80px;
}

.service-detail:nth-child(even) {
  flex-direction: row-reverse;
}

.service-text {
  flex: 1;
}

.service-text h2 {
  font-size: 2rem;
  color: var(--blue);
  margin-bottom: 20px;
}

.service-text p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 15px;
}

.service-image-placeholder {
  flex: 1;
  height: 300px;
  background: #eee;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-weight: bold;
}

.cta-banner {
  background: var(--blue-secondary);
  color: var(--white);
  padding: 60px 40px;
  text-align: center;
  margin-top: 40px;
}

.cta-banner h2 {
  margin-bottom: 20px;
}

@media (max-width: 900px) {

  .service-detail,
  .service-detail:nth-child(even) {
    flex-direction: column;
    gap: 30px;
  }

  .service-image-placeholder {
    width: 100%;
    height: 250px;
  }
}

/* Contact Page Styles */
.contact-container {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 40px;
  display: flex;
  gap: 60px;
}

.contact-info {
  flex: 1;
}

.contact-form-wrapper {
  flex: 1;
  background: #fafafa;
  padding: 40px;
  border-radius: 10px;
  border: 1px solid #eee;
}

.info-item {
  margin-bottom: 30px;
}

.info-item h3 {
  color: var(--blue);
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.info-item p,
.info-item a {
  font-size: 1.1rem;
  color: #555;
  text-decoration: none;
}

form label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: var(--blue);
}

form input,
form textarea,
form select {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
}

.map-placeholder {
  width: 100%;
  height: 300px;
  background: #eee;
  border-radius: 10px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-weight: bold;
}

@media (max-width: 900px) {
  .contact-container {
    flex-direction: column;
  }
}

/* Pricing Page Styles height 0 */
.pricing-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 30px;
  padding-right: 30px;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.pricing-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 40px;
  width: 350px;
  text-align: center;
  position: relative;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured {
  border: 2px solid var(--blue);
  transform: scale(1.05);
}

.pricing-card.featured:hover {
  transform: scale(1.05) translateY(-10px);
}

.badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.tier-name {
  font-size: 1.5rem;
  color: var(--blue);
  font-weight: bold;
  margin-bottom: 10px;
}

.pricing-card .price {
  font-size: 3rem;
  color: #333;
  margin-bottom: 20px;
}

.pricing-card .price span {
  font-size: 1rem;
  color: #999;
}

.features {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
  text-align: left;
  flex-grow: 1;
  width: 100%;
}

.features li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.features li:last-child {
  border-bottom: none;
}

@media (max-width: 900px) {
  .pricing-container {
    flex-direction: column;
    align-items: center;
  }

  .pricing-card.featured {
    transform: scale(1);
  }
}

/* About Us Styles */
.content-section {
  padding: 60px 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.content-section p {
  margin-bottom: 20px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
}

.content-section h2 {
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--blue);
}

.content-section ul {
  list-style-type: none;
  padding: 0;
}

.content-section li {
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.team-grid {
  display: flex;
  gap: 30px;
  margin-top: 40px;
}

.team-member {
  flex: 1;
  text-align: center;
}

.team-photo {
  width: 100%;
  height: 200px;
  background: #eee;
  border-radius: 10px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  color: #999;
}

@media (max-width: 768px) {
  .team-grid {
    flex-direction: column;
  }
}

/* Frontend instances of backend UI standards */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e1e4e8;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.header-bar h1 {
  margin: 0;
  font-size: 2rem;
  color: var(--blue);
}

.action-btn-text,
.action-btn {
  font-size: 0.9em;
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s;
  border: none;
  white-space: nowrap;
}

.action-btn-text:hover,
.action-btn:hover {
  filter: brightness(1.15) saturate(1.1);
}

.action-btn-text.btn-clear,
.action-btn.btn-clear {
  background: #f8f9fa !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
  font-weight: 400 !important;
}

.action-btn-text.btn-clear:hover,
.action-btn.btn-clear:hover {
  background: #e2e8f0 !important;
  border-color: #cbd5e0 !important;
}