/* Base styles (unchanged from your working version) */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: "Segoe UI", Roboto, sans-serif; color: #00205B; overflow-x: hidden; }

/* Fullscreen video background */
#bgVideo {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none; /* NEW: never block taps */
}

/* Overlay gradient */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
  z-index: -1;
  pointer-events: none; /* NEW: never block taps */
}

/* Centered content (keep your original behavior; iPhone-safe height now in HTML) */
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  padding: 0 20px;
}

.logo { width: 150px; margin-bottom: 20px; filter: drop-shadow(0 0 6px rgba(0,0,0,0.4)); }

/* --- About Section --- */
#about {
  position: relative;
  margin-top: 20px;
  display: flex; justify-content: center; align-items: flex-start;
  width: 100%;
  scroll-margin-top: 30px;
  z-index: 2;
}

.about-card {
  max-width: 800px;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  color: #00205B;
  padding: 20px 30px;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  line-height: 1.55;
  text-align: left;
  animation: fadeInUp 1s ease both;
}

.about-card h2 { text-align: center; margin: 0 0 12px 0; font-size: 1.6rem; font-weight: 700; }
.about-card ul { list-style-type: disc; margin: 0; padding-left: 25px; }
.about-card li { margin-bottom: 6px; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px);} to {opacity: 1; transform: translateY(0);} }

h1 { font-size: 1.9rem; font-weight: 600; margin-bottom: 10px; text-shadow: 1px 1px 2px rgba(255,255,255,0.6); }
p  { font-size: 1rem; margin-bottom: 25px; text-shadow: 1px 1px 2px rgba(255,255,255,0.6); }

.btn { background:#00205B; color:#fff; padding:12px 30px; border-radius:6px; text-decoration:none; font-weight:500; transition:background .3s; }
.btn:hover { background:#003580; }

#quoteBtn { background:#00205B; color:#fff; padding:12px 30px; border-radius:6px; text-decoration:none; font-weight:500; display:inline-block; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.25); transition:transform .15s ease, box-shadow .15s ease; }
#quoteBtn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.35); background-color:#0A3C91; }
#quoteBtn:active { transform: scale(0.96); box-shadow: 0 0 20px rgba(0,32,91,0.6); }

/* Footer */
footer { text-align:center; font-size:.9rem; color:#00205B; background:rgba(255,255,255,0.15); padding:20px; position:relative; z-index:5; }
footer a { color:#00205B; text-decoration:underline; }

/* (Rest of your form/quote styles kept as in your working file) */
/* ==== Sticky, non-overlapping footer (desktop + iPhone) ==== */
:root {
  /* footer height you want visible; tweak if you change its text size */
  --footer-h: 88px;
}

/* Keep the footer always visible */
footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
  background: rgba(255,255,255,0.18);
  /* blur is optional; safe to keep or remove */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 4; /* above video/overlay and page content */
}

/* Reserve space so content never hides behind the fixed footer */
html, body { height: auto; min-height: 100%; }
body { padding-bottom: var(--footer-h); }

/* Give the About card a little extra bottom breathing room */
.about-card { margin-bottom: 20px; }

/* iPhone/phone tweaks: footer a touch taller + more space below content */
@media (max-width: 768px){
  :root { --footer-h: 96px; }         /* slightly taller footer on phones */
  .about-card { margin-bottom: calc(16px + var(--footer-h)); }
}
/* === Footer: sticky, centered, non-overlapping on all pages === */
:root { --footer-h: 92px; }

footer{
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 8px 16px;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 4;
  line-height: 1.35;
}

/* reserve space so content never hides behind the fixed footer */
body { padding-bottom: var(--footer-h); }

/* normalize link alignment inside the footer */
footer a{
  float: none !important;
  display: inline !important;
  margin: 0 !important;
}

/* === QUOTE PAGE: keep content clear of sticky footer === */
/* If you already set --footer-h earlier, keep it; this just uses it */
:root { --footer-h: 92px; } /* adjust if your footer gets taller */

/* The quote page main uses .quote-hero — give it bottom padding
   so the Back to Home link and form never sit under the fixed footer */
.quote-hero{
  padding-bottom: calc(var(--footer-h) + 24px) !important;
}

/* Extra breathing room for the form card block on this page */
#quote{
  margin-bottom: calc(var(--footer-h) + 24px) !important;
}

/* Phones: footer is a bit taller; add a little more space */
@media (max-width: 768px){
  :root { --footer-h: 100px; }
  .quote-hero{ padding-bottom: calc(var(--footer-h) + 28px) !important; }
  #quote{ margin-bottom: calc(var(--footer-h) + 28px) !important; }
}
/* ===== QUOTE PAGE LAYOUT RESTORE (no HTML changes) ===== */

/* Keep the quote page centered like before */
.hero.quote-hero{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  min-height: 100vh;               /* desktop */
  min-height: 100svh;              /* iPhone safe height */
  padding: 24px 16px calc(var(--footer-h, 92px) + 28px);  /* room for sticky footer */
}

/* Ensure the card is centered and not squished */
#quote { width: 100%; }
#quote .about-card{
  max-width: 640px !important;
  width: 100%;
  margin: 0 auto !important;
  padding: 20px 18px;
}

/* Form back to full-width stacked fields */
#quoteForm{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px;
}
#quoteForm input,
#quoteForm textarea,
#quoteForm button{
  width: 100% !important;
  box-sizing: border-box;
}

/* The “Back to Home” link stays visible and centered */
#quote + p{
  text-align: center;
  margin-top: 16px;
  margin-bottom: 0;
}

/* Extra breathing room on phones */
@media (max-width: 768px){
  .hero.quote-hero{
    padding: 18px 14px calc(var(--footer-h, 100px) + 28px);
  }
  #quote .about-card{ padding: 18px 14px; }
}

/* ===== Professional quote form polish (no HTML changes) ===== */

/* Card: brighter glass, softer corners, better shadow */
#quote .about-card{
  max-width: 680px !important;
  width: 100%;
  margin: 0 auto !important;
  padding: 22px 22px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.94) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
}

/* Typography/sizing above the card */
.hero.quote-hero h1{ margin-bottom: 8px; }
.hero.quote-hero p{
  max-width: 720px;
  margin: 0 auto 16px !important;
  color: #0f2a52;
  text-shadow: 1px 1px 2px rgba(255,255,255,.5);
}

/* Form layout */
#quoteForm{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* Inputs & textarea: clean borders, consistent height, subtle focus ring */
#quoteForm input,
#quoteForm textarea{
  -webkit-appearance: none;
  appearance: none;
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(2, 23, 58, .22) !important;
  background: #ffffff !important;
  color: #0b1f44 !important;
  font-size: 16px !important;  /* avoids iOS zoom on focus */
  line-height: 1.25 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#quoteForm input::placeholder,
#quoteForm textarea::placeholder{ color: #64748b; }

#quoteForm input:focus,
#quoteForm textarea:focus{
  outline: none !important;
  border-color: #0A3C91 !important;
  box-shadow: 0 0 0 3px rgba(10,60,145,.18) !important;
  background: #fff !important;
}

#quoteForm textarea{
  min-height: 140px !important;
  resize: vertical !important;
}

/* Submit button: bold, full width, elevated */
#sendBtn{
  width: 100% !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #0A3C91 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  box-shadow: 0 10px 22px rgba(0,32,91,.20) !important;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
#sendBtn:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,32,91,.24) !important; }
#sendBtn:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(0,32,91,.20) !important; }

/* “Back to Home” spacing/centering */
#quote + p{
  margin-top: 14px !important;
  text-align: center !important;
}

/* Phone tweaks */
@media (max-width: 768px){
  #quote .about-card{ padding: 18px 16px !important; border-radius: 16px !important; }
  #sendBtn{ height: 46px !important; }
}

/* === Quote page: make the form card glassy like the About box
      and make the free-form textarea use the same font as inputs === */

/* Glass card like home About */
#quote .about-card{
  background: rgba(255,255,255,0.28) !important; /* transparent like home */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 12px 32px rgba(0,0,0,.18) !important;
}

/* Ensure textarea typography matches the inputs */
#quoteForm textarea{
  font-family: inherit !important;      /* match inputs/body */
  font-size: 16px !important;           /* same size as inputs (prevents iOS zoom) */
  color: #0b1f44 !important;
  line-height: 1.35 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(2,23,58,.22) !important;
  background: #ffffff !important;       /* keep inputs readable on glass card */
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset !important;
}

#quoteForm textarea::placeholder{
  color: #64748b !important;            /* same placeholder tone as inputs */
}
/* ==== iPhone-safe sticky footer (no overlap, always visible) ==== */
:root { --footer-h: 92px; }

/* keep footer fixed AND above the iPhone home indicator */
footer{
  position: fixed !important;
  left: 0; right: 0;
  bottom: max(0px, env(safe-area-inset-bottom, 0px));
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 8px 16px calc(env(safe-area-inset-bottom, 0px)) !important;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 4;
  transform: translateZ(0);       /* iOS paint fix */
}

/* reserve vertical space so content never sits under the fixed footer */
body{
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px)) !important;
}

/* extra breathing room so the About card never touches the footer */
#about{
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px) + 24px) !important;
}

/* quote page also reserves space */
.hero.quote-hero{
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px) + 28px) !important;
}