/* Base nav style */
.nav {
  background: #fff;
  border-bottom: 1px solid #ddd;
}
.nav-inner { display:flex; justify-content:space-between; align-items:center; padding:2.5px 0; line-height:1; } /* reduced height */
.logo-img { max-width:220px; height:auto; width:100%; display:block; } /* reduced logo size */

/* 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: 18px;
    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;
    padding: 10px;
    border: 1px solid #ddd;
  }

  .nav-toggle {
    display: block;
  }

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

/* ===== 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); }

/* === 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);
}

body { padding-top: 18px !important; } /* reduced from 72px */
html { scroll-padding-top: 18px; }

/* Mobile dropdown sits below header */
@media (max-width: 768px){
  .nav-links { top: 18px !important; }
}

.nav a { display:inline-block; padding:4px 8px; line-height:1.1; vertical-align:middle; }

/* Responsive logo scaling */
@media (max-width: 900px){
  .logo-img{ max-width:180px; }
}
@media (max-width: 600px){
  .logo-img{ max-width:150px; }
}

/* Footer styles preserved */

.footer .logo { color: #fff !important; font-weight: 600; font-size: 1.2rem; }
.footer a { color: #fff; opacity: .85; }
.footer a:hover { opacity: 1; }


/* === FORCE SMALLER TOP NAVIGATION === */
.nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid #E0E0E0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* tighten the nav bar height */
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0 !important; /* force smaller height */
  line-height: 1 !important;
  min-height: 28px !important;
}

/* smaller logo to match reduced nav */
.logo-img {
  max-height: 26px !important;
  width: auto !important;
}

/* fix body offset so content isn't hidden */
body {
  padding-top: 40px !important; /* matches the new nav height */
}
html {
  scroll-padding-top: 40px !important;
}

/* adjust mobile dropdown */
@media (max-width: 768px) {
  .nav-links {
    top: 40px !important;
  }
}

/* --- Slightly enlarge logo (30% bigger) --- */
.logo-img {
  max-height: 50px !important; /* was around 30px */
  width: auto !important;
  margin-top: 1px;
}
/* --- Adjust hero heading spacing below fixed nav --- */
.hero {
  padding-top: 50px !important; /* increased from 80px for a bit more breathing room */
}



/* === Contact section & form — refined styles === */

/* Align left column (details/map) with right form */
#contact .container {
  align-items: start;
}

/* Form card becomes a clean vertical stack */
#contact form.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

/* Two-up rows with tight, consistent spacing */
#contact form.card .grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Inputs: comfortable tap size + crisp focus */
#contact .input {
  min-height: 44px;
  font-size: 16px; /* prevents iOS zoom */
  border-radius: 10px;
  border: 1px solid var(--neutral-400);
  transition: box-shadow var(--transition), border-color var(--transition);
}
#contact .input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(17,109,182,.15);
  outline: none;
}

/* Validation helpers (apply .valid / .error via JS/server) */
#contact .input.valid {
  border-color: #2e7d32;
  box-shadow: 0 0 0 3px rgba(46,125,50,.18);
}
#contact .input.error {
  border-color: #c62828;
  box-shadow: 0 0 0 3px rgba(198,40,40,.15);
}

/* Textarea a bit taller by default */
#contact textarea.input {
  min-height: 140px;
  resize: vertical;
}

/* Helper text under fields */
#contact .help {
  font-size: 12px;
  color: var(--neutral-600);
  margin-top: -6px;
  margin-bottom: 6px;
}

/* Button spacing and mobile sizing */
#contact form.card .btn {
  margin-top: 4px;
}
@media (max-width: 600px) {
  #contact form.card .btn {
    width: 100%;
  }
}

/* Google reCAPTCHA / misc widgets spacing */
#contact .g-recaptcha,
#contact .captcha-slot {
  margin: 8px 0 4px;
}

/* When stacked on smaller screens, ensure good spacing */
@media (max-width: 900px) {
  #contact .container {
    grid-template-columns: 1fr !important;
  }
  #contact .card + .card {
    margin-top: 12px;
  }
}

/* Map block keeps its shape and doesn’t overflow */
#contact .map {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--radius);
  display: block;
}
@media (max-width: 600px) {
  #contact .map { height: 240px; }
}

/* Title + lead spacing harmony */
#contact h2 {
  margin-top: 0;
  margin-bottom: 6px;
}
#contact .lead {
  margin-bottom: 14px;
}

/* Ensure long lines don’t push the layout */
#contact p, #contact .small {
  overflow-wrap: anywhere;
  word-break: break-word;
}



/* =========================
   POP UPGRADE — Visual Polish
   ========================= */

/* 1) Hero gets subtle gradient + extra breathing room and better layout for text + image */
.hero {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(17,109,182,0.12), transparent 60%),
    radial-gradient(900px 500px at 90% -10%, rgba(242,102,0,0.10), transparent 55%),
    linear-gradient(180deg, rgba(17,109,182,0.06), rgba(242,102,0,0.04));
  padding-top: 96px !important; /* ensure under fixed nav and airy */
  padding-bottom: 72px;
}
.hero .container { display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items:center; }
.hero .intro { max-width: 720px; }
@media (max-width: 991px){
  .hero .container { grid-template-columns: 1fr; }
  .hero { padding-bottom: 42px; }
}

/* 2) Headings get an accent underline for sections (not the main H1) */
.section h2 {
  position: relative;
  padding-bottom: 6px;
}
.section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 68px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  opacity: .85;
}

/* 3) Buttons: livelier hover/focus */
.btn { transition: transform var(--transition), box-shadow var(--transition), background var(--transition); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,109,182,.18); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(242,102,0,.18); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(17,109,182,.25); }

/* 4) Cards: subtle lift on hover and crisper borders */
.card {
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}

/* 5) Navigation links: animated underline on hover */
.nav-links a {
  position: relative;
  padding-bottom: 6px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  transition: transform .25s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

/* 6) Price numbers: bigger and bolder */
.price {
  font-size: 34px;
  font-weight: 800;
  color: var(--secondary);
}
.price .small { font-weight: 600; color: var(--neutral-600); }

/* 7) FAQ cards spacing: breathe just a bit more on desktop */
#faq .grid { gap: 18px; }
@media (max-width: 700px){ #faq .grid { gap: 12px; } }

/* 8) Hero image gets a soft frame */
.img-hero {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 42px rgba(0,0,0,.10);
}

/* 9) Section separators: barely-there rule for rhythm */
.section + .section { position: relative; }
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,0));
}

/* 10) Gentle scroll-fade animation for key blocks (respects reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .section .card, .hero .intro, .img-hero { 
    opacity: 0; transform: translateY(8px);
    animation: fadeUp .6s ease forwards;
  }
  .section .card:nth-child(2){ animation-delay: .05s; }
  .section .card:nth-child(3){ animation-delay: .10s; }
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* 11) Contact section polish */
#contact h2 { letter-spacing: .2px; }
#contact .lead { color: var(--neutral-600); }
#contact .contact-list p { margin: 0; }
#contact form.card { border-width: 1px; }
#contact form.card .btn { font-size: 16px; }

/* 12) Footer links: clearer hover */
.footer a { transition: opacity .2s ease, text-decoration-color .2s ease; text-decoration-color: transparent; }
.footer a:hover { opacity: 1; text-decoration: underline; text-decoration-color: rgba(255,255,255,.75); }


/* === Full-width hero headline and image === */
.hero {
  padding-top: 40px !important; /* clears nav */
  padding-bottom: 5px;
  background:
    linear-gradient(180deg, rgba(17,109,182,0.05), rgba(242,102,0,0.02));
}

/* Remove the container limit so the hero fills the page width */
.hero .container {
  max-width: none !important;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Make headline and lead text centered and wider */
.hero .intro {
  max-width: 1200px;
  width: 100%;
  padding: 0 4vw;
}

.hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
  margin-bottom: 12px;
}

.hero .lead {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 900px;
  margin: 0 auto 28px;
}

/* Hero image now full-width with softer edges */
.hero .img-hero {
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  border: none;
  margin-top: 8px;
}



/* === Minimal / Clean Enhancements (A style) === */
:root{
  --primary:#F26600;
  --secondary:#116DB6;
}
/* Secondary button (simple outline) */
.btn-secondary{
  display:inline-block;
  padding:10px 18px;
  background:#fff;
  border:2px solid var(--secondary);
  border-radius:4px;
  color:var(--secondary);
  font-weight:600;
  text-decoration:none;
  transition:.2s;
}
.btn-secondary:hover{
  background:var(--secondary);
  color:#fff;
}
/* Section spacing */
.section{padding-top:70px;padding-bottom:70px;}
/* Blog / Resources layout */
#blog .card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:260px;
}
#blog .card h3{margin-top:0;}
/* Hero image refinement */
.img-hero{max-width:100%;border-radius:6px;}
/* Footer clarity */

.footer a{color:#fff;text-decoration:none;}
.footer a:hover{text-decoration:underline;}
/* Mobile blog responsiveness */
@media (max-width:768px){
  #blog .grid.cols-3{grid-template-columns:1fr !important;gap:20px !important;}
}
/* Gentle load fade-in */
@media (prefers-reduced-motion:no-preference){
  body:not(.loaded) .section{opacity:0;transform:translateY(6px);}
  body.loaded .section{opacity:1;transform:none;transition:opacity .35s ease, transform .35s ease;}
}

.footer { background: var(--neutral-900); color:#fff; }