/* Base nav style */
.nav {
  background: #fff;
  border-bottom: 1px solid #ddd;
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}
.logo-img {
  max-width: 150px;
  height: auto;
}

/* Nav links */
.nav-links {
  display: flex;
  gap: 15px;
}
.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

/* Hamburger button */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 22px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  height: 3px;
  width: 100%;
  background: #333;
  left: 0;
  transition: 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 18px; }

/* Animate into X when active */
.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
}

/* Mobile: hide until toggled, with animation */
@media (max-width: 768px) {
  .nav-links {
    display: flex;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 60px;
    right: 15px;
    width: 200px;
    border: none;
    border-radius: 8px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, border 0.3s ease;
  }

  .nav-links.active {
    max-height: 500px; /* large enough to fit links */
    padding: 10px;
    border: 1px solid #ddd;
  }

  .nav-toggle {
    display: block;
  }

  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .img-hero { height: 240px; }
  .nav-inner { padding: 10px; }}

/* ===== Site Styles (mirrors index.html look & feel) ===== */
html { scroll-behavior: smooth; }
:root {
  --primary: #F26600; --primary-dark: #B84C00; --primary-light: #FF944D;
  --secondary: #116DB6; --secondary-dark: #0D4A7A; --secondary-light: #5CA8E0;
  --neutral-100: #FFFFFF; --neutral-200: #F5F5F5; --neutral-300: #EEEEEE; --neutral-400: #E0E0E0;
  --neutral-600: #666666; --neutral-800: #222222; --neutral-900: #000000;
  --radius: 8px; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 8px 24px rgba(0,0,0,.10); --transition: .2s ease;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, Arial, sans-serif; color: var(--neutral-800); background: var(--neutral-100); }
a { color: var(--secondary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--secondary-dark); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 42px 0; }
.section.alt { background: var(--neutral-200); }
.grid { display: grid; gap: 24px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
.card { background: var(--neutral-100); border: 1px solid var(--neutral-400); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.badge { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-primary { background: var(--primary-light); color: var(--neutral-900); }
.badge-secondary { background: var(--secondary-light); color: var(--neutral-900); }
h1 { font-size: 48px; line-height: 1.1; margin: 0 0 12px; color: var(--primary); font-weight: 800; }
h2 { font-size: 36px; line-height: 1.2; margin: 0 0 12px; color: var(--secondary); font-weight: 700; }
h3 { font-size: 24px; line-height: 1.3; margin: 0 0 8px; color: var(--neutral-800); font-weight: 700; }
p.lead { font-size: 20px; color: var(--neutral-600); margin: 0 0 16px; }
p { margin: 0 0 12px; }
.small { font-size: 14px; color: var(--neutral-600); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 10px; border: none; cursor: pointer; transition: all var(--transition); text-decoration: none; font-weight: 700; letter-spacing: .3px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--secondary); color: #fff; }
.btn-secondary:hover { background: var(--secondary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--secondary); border: 2px solid var(--secondary); }
.btn-outline:hover { color: #fff; background: var(--secondary); }
.nav {  top: 0; background: rgba(255,255,255,.9); backdrop-filter: saturate(120%) blur(10px); border-bottom: 1px solid var(--neutral-400); z-index: 10; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-links { display: flex; gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--neutral-900); }
.logo-dot { width: 12px; height: 12px; background: var(--primary); border-radius: 50%; display: inline-block; }
.hero { padding: 50px 0 60px; background: linear-gradient(180deg, rgba(17,109,182,.08), rgba(242,102,0,.04)); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.faq { border: 1px solid var(--neutral-400); border-radius: var(--radius); padding: 16px 18px; background: #fff; }
.faq + .faq { margin-top: 12px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 16px; border-bottom: 1px solid var(--neutral-400); text-align: left; }
.table thead th { color: var(--neutral-600); font-weight: 600; }
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--neutral-400); }
.img-hero { width: 100%; height: 420px; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--neutral-400); }
.img-square { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--neutral-400); }
.img-tall { width: 100%; height: 360px; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--neutral-400); }

/* Form helpers */
label { display: block; font-weight: 600; margin: 0 0 8px; }
.input { width: 100%; padding: 14px 16px; border: 1px solid var(--neutral-400); border-radius: 10px; outline: none; font: inherit; }
.input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(17,109,182,.15); }
textarea.input { min-height: 120px; resize: vertical; }
.form-group { margin-bottom: 16px; }
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-option { display: flex; align-items: center; gap: 8px; }
.required::after { content: " *"; color: var(--primary); }

.strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed var(--neutral-400); border-radius: 999px; background: #fff; width: fit-content; margin: 24px 0; }
.star { width: 14px; height: 14px; background: var(--primary); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

.step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.step-num { width: 56px; height: 56px; border-radius: 14px; background: var(--secondary); color: #fff; display: grid; place-items: center; font-weight: 800; }
.faq h4 { margin: 0 0 6px; font-size: 18px; color: var(--neutral-800); }
.footer { background: var(--neutral-900); color: #fff; padding: 48px 0; }
.footer a { color: #fff; opacity: .85; }
.footer a:hover { opacity: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; border: 1px solid var(--neutral-400); border-radius: 999px; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); }

/* --- Fix overlap on About cards --- */
.about-cards .card {
  display: flex;
  flex-direction: column;
}

.about-cards .card .img-cover {
  height: auto;           /* stop filling the card */
  aspect-ratio: 16 / 9;   /* keeps a nice, consistent thumb shape */
  margin-bottom: 12px;    /* space before the heading */
}
/* --- Responsive Grids --- */

/* General grid fixes */
.grid {
  display: grid;
  gap: 20px;
}

/* About cards (cols-2 by default) */
.about-cards {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
  .about-cards {
    grid-template-columns: 1fr; /* stack on small screens */
  }
}

/* Steps to being a Contractor (cols-2 by default) */
#contracting .grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
  #contracting .grid.cols-2 {
    grid-template-columns: 1fr; /* stack steps */
  }
}

/* Testimonials (cols-3) */
#testimonials .grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  #testimonials .grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  #testimonials .grid.cols-3 {
    grid-template-columns: 1fr;
  }
}


/* --- Fix overlap in Testimonials --- */
#testimonials .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#testimonials .card .img-cover {
  width: 100%;
  height: auto;
  margin-bottom: 12px;
  display: block;
}



/* --- Contact layout & map --- */
.contact-list { display: flex; flex-direction: column; gap: 10px; }
.contact-list .item { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.contact-list .label { font-weight: 700; min-width: 64px; }
.map { width: 100%; height: 320px; border: 0; border-radius: var(--radius); }
@media (max-width: 600px) { .map { height: 240px; } }


/* --- Mobile-friendly enhancements --- */

/* Improve tap targets */
.btn { min-height: 44px; }
.nav-links a { padding: 10px 12px; }

/* Responsive typography & spacing */
@media (max-width: 900px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  .section { padding: 36px 0; }
  .img-hero { height: 300px; }
}
@media (max-width: 600px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  .section { padding: 28px 0; }
  .container { padding: 0 16px; }
  .img-hero { height: 220px; }
  .btn { width: 100%; } /* easier tapping on phones */
}

/* Ensure testimonial stars don't overlap text */
#testimonials .card { display: flex; flex-direction: column; align-items: flex-start; }
#testimonials .card .img-cover {
  width: 100%;
  height: auto;
  margin-bottom: 12px;
  display: block;
}


/* Keep About cards neat */
.about-cards .card { display: flex; flex-direction: column; }
.about-cards .card .img-cover {
  height: auto;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
}

/* Grid responsiveness (unified) */
#testimonials .grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { #testimonials .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { #testimonials .grid.cols-3 { grid-template-columns: 1fr; } }

.about-cards { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .about-cards { grid-template-columns: 1fr; } }

#contracting .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { #contracting .grid.cols-2 { grid-template-columns: 1fr; } }

/* Map responsiveness (already set height; ensure it can't overflow) */
.map { width: 100%; display: block; }


/* --- Align contact form with contact card --- */
@media (min-width: 992px) {
  #contact .container { align-items: start; }
  #contact form.card { margin-top: 96px; } /* offset ~ h2 + lead + card spacing */
}
@media (min-width: 768px) and (max-width: 991px) {
  #contact form.card { margin-top: 72px; }
}


/* --- Mobile-friendly Contact & Form --- */
#contact .container { align-items: start; }

/* Make the form a vertical stack with consistent spacing */
#contact form.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Slightly tighter gaps inside 2-up rows */
#contact form.card .form-grid { gap: 12px; }

/* Inputs: ensure comfortable tap size & avoid iOS zoom */
#contact .input {
  min-height: 44px;
  font-size: 16px;
}

/* Textarea a bit taller on mobile */
#contact textarea.input {
  min-height: 140px;
}

/* Button full-width on phones for easy tapping */
@media (max-width: 600px) {
  #contact form.card .btn {
    width: 100%;
  }
}

/* Ensure the 2-column rows collapse to 1 column on smaller screens */
@media (max-width: 900px) {
  #contact form.card .grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Add some breathing room between contact list, map, and form when stacked */
@media (max-width: 900px) {
  #contact .card + .card { margin-top: 12px; }
}


/* --- Mobile overflow fixes --- */

/* Contain any accidental horizontal overflow */
html, body { max-width: 100%; overflow-x: hidden; }

/* Ensure grid children can shrink and not force overflow */
.grid > * { min-width: 0; }

/* Make media never overflow */
img, video, iframe { max-width: 100%; height: auto; display: block; }

/* Avoid long text pushing layout */
p, .small, .chip { overflow-wrap: anywhere; word-break: break-word; }

/* Tighter, fluid mobile nav menu to prevent off-screen overflow */
@media (max-width: 768px) {
  .nav-links {
    width: auto !important;
    left: 12px;
    right: 12px;
  }
}

/* Contact section: ensure clean stack on mobile */
@media (max-width: 900px) {
  #contact .container {
    grid-template-columns: 1fr !important;
  }
}

/* Cards shouldn't overflow due to inner content */
.card { min-width: 0; overflow: hidden; }

/* Cookie banner styles */

@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
#cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#fff;color:#222;padding:16px;display:none;z-index:9999;
box-shadow:0 -2px 12px rgba(0,0,0,.1);font-family:inherit;animation:slideUpFade .5s ease forwards;}
.cookie-inner{max-width:1100px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
#cookie-banner .btn{border-radius:8px;padding:10px 14px;cursor:pointer;transition:all .2s ease;font:inherit;}
#cookie-accept{background:#116DB6;color:#fff;border:1px solid #116DB6;}
#cookie-accept:hover{background:#0d5c99;}
#cookie-reject{background:transparent;color:#116DB6;border:1px solid #116DB6;}
#cookie-reject:hover{background:#116DB6;color:#fff;}
@media(max-width:640px){.cookie-inner{flex-direction:column;align-items:stretch;gap:10px;}
#cookie-banner p{line-height:1.4;}
.cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
#cookie-banner .btn{width:100%;}}

/* Cookie banner fade-out */
@keyframes slideDownFadeOut{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(10px);}}
#cookie-banner.closing{animation:slideDownFadeOut .35s ease forwards;}

@keyframes slideDownFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* === FINAL: Fixed top navigation (always on) === */
.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10000 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid var(--neutral-400, #E0E0E0);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-left: auto;
  justify-content: flex-end;
}
/* Keep content clear of the fixed bar */
body { padding-top: 72px !important; }
html { scroll-padding-top: 72px; }
/* Mobile dropdown sits below header */
@media (max-width: 768px){
  .nav-links { top: 72px !important; }
}