/*==============================================================
  West LA Mobile Auto Glass — Service Page Styles
  service-style.css | premium light & airy system (sv- prefix)
  Loads after style.css. Mirrors the homepage design language.
==============================================================*/
:root {
  --sv-teal:       #2bbf9f;
  --sv-teal-dark:  #1a8f80;
  --sv-teal-light: #7fe3cc;
  --sv-ink:        #112e2a;
  --sv-body:       #51635e;
  --sv-muted:      #66756f;
  --sv-line:       #edf2f0;
  --sv-ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-page { background: #fff; overflow-x: hidden; }
.sv-page * { box-sizing: border-box; }

/* shared kicker / titles */
.sv-kicker {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #18796d;
  background: rgba(89,212,185,0.13);
  border: 1px solid rgba(89,212,185,0.3);
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 18px;
}
.sv-h2 {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.2;
  color: var(--sv-ink);
  margin: 0 0 16px;
}
.sv-h3 {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--sv-ink);
  margin: 0 0 10px;
}
.sv-p {
  font-family: "Open Sans", sans-serif;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--sv-body);
  margin: 0 0 16px;
}
.sv-p:last-child { margin-bottom: 0; }

.sv-section { padding: 84px 0; }
.sv-section-tint {
  background:
    radial-gradient(ellipse 50% 45% at 100% 0%, rgba(89,212,185,0.07), transparent 55%),
    linear-gradient(180deg, #f6fefc 0%, #ffffff 100%);
}
.sv-section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.sv-section-head .sv-h2 { margin-bottom: 14px; }
.sv-section-head .sv-p { color: var(--sv-muted); }


/*───────────────────────────────────────────────
  HERO
───────────────────────────────────────────────*/
.sv-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* The topbar (51px) is in normal flow and pushes #main down by 51px.
     Pull the hero up by that 51px so its tinted bg starts flush at the very
     top (under the topbar), then pad past the fixed header (bottom ≈127px =
     topbar 51 + header 76) so the breadcrumb/H1 clear it with a comfortable gap. */
  margin-top: -51px;
  padding: calc(127px + 36px) 0 80px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f4fdfa 48%, #effdf8 100%);
}
.sv-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sv-blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5;
}
.sv-blob-1 { width: 480px; height: 480px; top: -150px; left: -120px;
  background: radial-gradient(circle, rgba(89,212,185,0.4), transparent 68%); }
.sv-blob-2 { width: 420px; height: 420px; bottom: -160px; right: -110px;
  background: radial-gradient(circle, rgba(53,177,164,0.28), transparent 70%); }

.sv-hero-content { max-width: 560px; }
.sv-breadcrumb {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  color: #7a8c87;
  margin-bottom: 16px;
}
.sv-breadcrumb a { color: #18796d; text-decoration: none; }
.sv-breadcrumb a:hover { text-decoration: underline; }

.sv-h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 1.16;
  letter-spacing: -0.9px;
  color: var(--sv-ink);
  margin: 0 0 18px;
}
.sv-h1 .sv-h1-accent {
  background: linear-gradient(100deg, #1a8f80, #2bbf9f 60%, #35b1a4);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sv-hero-lead {
  font-family: "Open Sans", sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--sv-body);
  margin: 0 0 26px;
}

/* hero checklist */
.sv-checklist {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
}
.sv-checklist li {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px; font-weight: 600; color: #2f4a44;
}
.sv-checklist li i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sv-teal), var(--sv-teal-dark));
  color: #fff; border-radius: 50%; font-size: 11px;
}

.sv-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sv-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15.5px;
  color: #fff; background: linear-gradient(135deg, var(--sv-teal), var(--sv-teal-dark));
  padding: 0 28px; height: 58px; border-radius: 15px; text-decoration: none;
  box-shadow: 0 16px 34px -12px rgba(26,143,128,0.7);
  transition: transform 0.3s var(--sv-ease), box-shadow 0.3s var(--sv-ease);
}
.sv-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 22px 42px -12px rgba(26,143,128,0.8); }
.sv-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15.5px;
  color: var(--sv-ink); background: #fff; border: 1px solid rgba(26,59,54,0.12);
  padding: 0 26px; height: 58px; border-radius: 15px; text-decoration: none;
  box-shadow: 0 10px 26px -14px rgba(18,46,42,0.35);
  transition: transform 0.3s var(--sv-ease), border-color 0.3s;
}
.sv-btn-ghost i { color: var(--sv-teal); font-size: 17px; }
.sv-btn-ghost:hover { color: var(--sv-ink); transform: translateY(-3px); border-color: rgba(89,212,185,0.55); }

/* hero image */
.sv-hero-visual { position: relative; padding: 10px; }
.sv-hero-img {
  display: block; width: 100%; height: 460px; object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 40px 80px -28px rgba(18,46,42,0.45), 0 0 0 1px rgba(26,59,54,0.04);
}


/*───────────────────────────────────────────────
  FORM SECTION (section 2)
───────────────────────────────────────────────*/
.sv-form-section {
  padding: 84px 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(89,212,185,0.10), transparent 60%),
    linear-gradient(180deg, #effdf8 0%, #ffffff 60%);
}
.sv-form-card {
  border-radius: 26px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 90px -36px rgba(18,46,42,0.45), 0 0 0 1px rgba(26,59,54,0.05);
}
.sv-form-info {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 40% at 100% 0%, rgba(89,212,185,0.16), transparent 60%),
    linear-gradient(160deg, #0c211d 0%, #143a34 55%, #1b5247 100%);
}
.sv-form-info::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px; pointer-events: none;
}
.sv-form-info-inner { position: relative; padding: 52px 42px; height: 100%; display: flex; flex-direction: column; }
.sv-form-info .sv-kicker { color: var(--sv-teal-light); background: rgba(89,212,185,0.12); border-color: rgba(89,212,185,0.28); width: fit-content; }
.sv-form-info h2 {
  font-family: "Poppins", sans-serif; font-size: 25px; font-weight: 800;
  color: #fff; line-height: 1.3; margin: 0 0 18px; letter-spacing: -0.3px;
}
.sv-form-info p {
  font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 1.75;
  color: rgba(255,255,255,0.6); margin: 0 0 14px;
}
.sv-form-info p:last-of-type { margin-bottom: 0; }
.sv-form-call {
  margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 13px;
}
.sv-form-call > i {
  width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sv-teal), var(--sv-teal-dark)); color: #fff;
  border-radius: 13px; font-size: 18px; box-shadow: 0 10px 22px -8px rgba(43,191,159,0.7);
}
.sv-form-call span { display: flex; flex-direction: column; line-height: 1.2; font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 800; color: #fff; text-decoration: none; }
.sv-form-call small { font-family: "Open Sans", sans-serif; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.5); }
a.sv-form-call { text-decoration: none; }

.sv-form-fields-col { background: #fff; }
.sv-form-fields-inner { padding: 44px 42px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sv-form-shell {
  background: #fff; border: 1px solid var(--sv-line); border-radius: 20px;
  padding: 34px 32px; box-shadow: 0 24px 60px -30px rgba(18,46,42,0.30);
  position: relative; overflow: hidden;
}
.sv-form-shell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #59d4b9, #35b1a4, #1a8f80);
}


/*───────────────────────────────────────────────
  PROSE BLOCK (single H2 + paragraphs)
───────────────────────────────────────────────*/
.sv-prose { max-width: 860px; margin: 0 auto; }
.sv-prose-wide { max-width: 980px; margin: 0 auto; }


/*───────────────────────────────────────────────
  CARD GRID (H3 cards)
───────────────────────────────────────────────*/
.sv-card {
  height: 100%; padding: 30px 26px; background: #fff;
  border: 1px solid var(--sv-line); border-radius: 18px;
  box-shadow: 0 10px 30px -18px rgba(18,46,42,0.28);
  position: relative; overflow: hidden;
  transition: transform 0.4s var(--sv-ease), box-shadow 0.4s var(--sv-ease), border-color 0.3s;
}
.sv-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sv-teal), var(--sv-teal-dark));
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--sv-ease);
}
.sv-card:hover { transform: translateY(-6px); border-color: rgba(89,212,185,0.4); box-shadow: 0 28px 56px -26px rgba(18,46,42,0.38); }
.sv-card:hover::before { transform: scaleX(1); }
.sv-card-icon {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border-radius: 15px; margin-bottom: 18px; font-size: 24px; color: #fff;
  background: linear-gradient(135deg, var(--sv-teal), var(--sv-teal-dark));
  box-shadow: 0 12px 24px -10px rgba(26,143,128,0.65);
  transition: transform 0.4s var(--sv-ease);
}
.sv-card:hover .sv-card-icon { transform: translateY(-3px) rotate(-5deg) scale(1.05); }
.sv-card p {
  font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 1.7; color: var(--sv-muted); margin: 0;
}


/*───────────────────────────────────────────────
  FAQ (accordion-style cards)
───────────────────────────────────────────────*/
.sv-faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.sv-faq-item {
  background: #fff; border: 1px solid var(--sv-line); border-radius: 16px;
  padding: 24px 26px; box-shadow: 0 8px 24px -18px rgba(18,46,42,0.3);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.sv-faq-item:hover { border-color: rgba(89,212,185,0.4); box-shadow: 0 16px 36px -22px rgba(18,46,42,0.34); }
.sv-faq-q {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: "Poppins", sans-serif; font-size: 16.5px; font-weight: 700; color: var(--sv-ink);
  margin: 0 0 10px; letter-spacing: -0.2px;
}
.sv-faq-q i { color: var(--sv-teal); font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.sv-faq-a {
  font-family: "Open Sans", sans-serif; font-size: 14.5px; line-height: 1.74; color: var(--sv-body);
  margin: 0; padding-left: 30px;
}


/*───────────────────────────────────────────────
  WHY (split: text + checklist panel)
───────────────────────────────────────────────*/
.sv-why-panel {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(89,212,185,0.10), transparent 60%),
    linear-gradient(160deg, #0c211d 0%, #143a34 60%, #1b5247 100%);
  border-radius: 24px; padding: 44px 40px; height: 100%;
}
.sv-why-panel h3,
.sv-why-panel-label { font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 18px; }
.sv-why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sv-why-list li { display: flex; align-items: flex-start; gap: 12px; font-family: "Open Sans", sans-serif; font-size: 14.5px; color: rgba(255,255,255,0.72); line-height: 1.55; }
.sv-why-list li i {
  width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(89,212,185,0.15); border: 1px solid rgba(89,212,185,0.3); border-radius: 8px;
  color: var(--sv-teal-light); font-size: 13px;
}


/*───────────────────────────────────────────────
  FINAL CTA
───────────────────────────────────────────────*/
.sv-cta-section { padding: 30px 0 90px; background: #fff; }
.sv-cta-box {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px; padding: 64px 48px; text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(89,212,185,0.14), transparent 60%),
    radial-gradient(ellipse 50% 70% at 0% 100%, rgba(89,212,185,0.10), transparent 60%),
    linear-gradient(180deg, #f4fdfa 0%, #ffffff 100%);
  border: 1px solid rgba(89,212,185,0.3);
  box-shadow: 0 30px 70px -36px rgba(18,46,42,0.3);
}
.sv-cta-box .sv-h2 { margin-bottom: 14px; }
.sv-cta-box .sv-p { max-width: 660px; margin-left: auto; margin-right: auto; color: var(--sv-body); }
.sv-cta-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 26px; }


/*───────────────────────────────────────────────
  RESPONSIVE
───────────────────────────────────────────────*/
@media (max-width: 991px) {
  .sv-section { padding: 56px 0; }
  .sv-form-section { padding: 56px 0; }
  /* 768–991px: chrome still 127px (topbar 51 + header 76), margin -51 from base */
  .sv-hero { padding: calc(127px + 24px) 0 56px; }
  .sv-h1 { font-size: 32px; }
  .sv-h2 { font-size: 27px; }
  .sv-hero-img { height: 380px; }
  .sv-hero-content { max-width: 100%; }
  .sv-form-info-inner { padding: 44px 32px; }
  .sv-form-fields-inner { padding: 36px 32px; }
}
@media (max-width: 767px) {
  .sv-section { padding: 44px 0; }
  .sv-form-section { padding: 40px 0; }
  /* On mobile the topbar is position:fixed (out of flow), so #main already
     starts at y=0 — NO negative margin needed. Just pad past the fixed chrome
     (topbar 48 + header 64 = 112px) so content isn't hidden under the header. */
  .sv-hero { margin-top: 0; padding: calc(112px + 24px) 0 44px; }
  .sv-h1 { font-size: 26px; }
  .sv-h2 { font-size: 23px; }
  .sv-section-head { margin-bottom: 34px; }
  .sv-checklist { grid-template-columns: 1fr; }
  .sv-hero-actions { flex-direction: column; align-items: stretch; }
  .sv-btn-primary, .sv-btn-ghost { width: 100%; justify-content: center; }
  .sv-hero-img { height: 280px; }
  .sv-form-card { border-radius: 22px; }
  .sv-form-info-inner { padding: 36px 22px; }
  .sv-form-fields-inner { padding: 28px 18px; }
  .sv-form-shell { padding: 28px 20px; }
  .sv-cta-box { padding: 44px 22px; border-radius: 22px; }
  .sv-cta-actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-card, .sv-card-icon { transition: none; }
}