/* ============================================================
   South Coast Repairs — styles.css
   Font: Plus Jakarta Sans via Google Fonts
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:       #ECEAE5;
  --navy:     #0D1B3E;
  --green:    #2AB87A;
  --green-bg: #D1F5E5;
  --white:    #FFFFFF;
  --muted:    #68737F;
  --blue:     #BDD9FF;
  --peach:    #FFE0C6;
  --yellow:   #FFF0B8;
  --mint:     #C0F0DC;
  --lav:      #E2D8FF;
  --pink:     #FFD4D4;
  --r:        16px;
  --r-lg:     24px;
  --r-pill:   100px;
  --shadow:   0 4px 24px rgba(13,27,62,.10);
  --shadow-sm:0 2px 10px rgba(13,27,62,.08);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; flex-shrink: 0; }

/* ── Typography ────────────────────────────────────────────── */
h1 {
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.08;
  color: var(--navy);
}
h2, .s-title {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: var(--navy);
}
h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}
p { color: var(--muted); font-size: 15px; }

/* ── Utility ───────────────────────────────────────────────── */
.accent { color: var(--green); }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.pill-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}

/* ── Reveal animation ──────────────────────────────────────── */
.rev {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.rev.visible { opacity: 1; transform: none; }

/* ── Mobile call bar ───────────────────────────────────────── */
.mbar {
  display: none;
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 200;
}
.mbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 20px;
}
.mbar svg { width: 18px; height: 18px; fill: #fff; }

/* ── Nav ───────────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 20px;
  z-index: 100;
  padding: 0 20px;
  pointer-events: none;
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 24px;
  pointer-events: all;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
  white-space: nowrap;
}
.nav-logo svg { width: 22px; height: 22px; stroke: var(--green); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: background .2s;
}
.nav-links a:hover { background: var(--bg); }
.nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: var(--r-pill);
  font-weight: 700 !important;
  font-size: 14px !important;
  transition: opacity .2s !important;
}
.nav-cta:hover { opacity: .85 !important; }
.nav-cta svg { width: 15px; height: 15px; fill: #fff; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 32px;
  border-radius: var(--r-pill);
  transition: opacity .2s;
  white-space: nowrap;
}
.btn-primary:hover { opacity: .85; }
.btn-primary svg { width: 18px; height: 18px; fill: #fff; }

.btn-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 32px;
  border-radius: var(--r-pill);
  transition: opacity .2s;
  white-space: nowrap;
}
.btn-light:hover { opacity: .85; }
.btn-light svg { width: 18px; height: 18px; fill: var(--navy); }

/* ── Hero (Homepage) ───────────────────────────────────────── */
.hero {
  padding: 32px 24px 80px;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-left { display: flex; flex-direction: column; gap: 24px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-bg);
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  width: fit-content;
}
.hero-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.4); }
}
.hero-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 480px;
  margin: 0;
}
.trust-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.tp {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.tp-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tp-check svg { width: 10px; height: 10px; stroke: var(--green); stroke-width: 2.5; fill: none; }

/* Hero right — trust badge cards */
.hero-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.trust-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trust-card:nth-child(2) { margin-top: 28px; }
.trust-card:nth-child(4) { margin-top: -28px; }
.tc-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.tc-icon svg { width: 22px; height: 22px; }
.tc-icon.green { background: var(--green-bg); }
.tc-icon.green svg { stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-icon.navy { background: #e8ecf5; }
.tc-icon.navy svg { stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trust-card strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.trust-card span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* ── Proof strip ───────────────────────────────────────────── */
.proof {
  background: var(--navy);
  padding: 20px 24px;
}
.proof-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.pi {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.pi strong { color: #fff; font-weight: 700; }
.stars { color: #F5C518; letter-spacing: 2px; font-size: 15px; }
.pi-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pi-check svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 2.5; fill: none; }

/* ── Sections ──────────────────────────────────────────────── */
.section {
  padding: 80px 24px;
}
.section-inner {
  max-width: 1160px;
  margin: 0 auto;
}
.s-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 560px;
  margin: 12px 0 40px;
}

/* ── Service cards ─────────────────────────────────────────── */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.scard {
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .2s, box-shadow .2s;
}
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.scard.blue   { background: var(--blue);   }
.scard.peach  { background: var(--peach);  }
.scard.yellow { background: var(--yellow); }
.scard.mint   { background: var(--mint);   }
.sc-icon {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.7);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-icon svg { width: 24px; height: 24px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scard h3 { font-size: 19px; font-weight: 700; color: var(--navy); }
.scard p { font-size: 14px; color: rgba(13,27,62,.7); margin: 0; }
.sc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  margin-top: 4px;
}
.sc-link svg { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2.5; transition: transform .2s; }
.scard:hover .sc-link svg { transform: translateX(3px); }

/* ── Mid CTA ───────────────────────────────────────────────── */
.mcta {
  background: var(--navy);
  text-align: center;
  padding: 64px 24px;
}
.mcta h2 { color: #fff; margin-bottom: 12px; }
.mcta > p { color: rgba(255,255,255,.75); font-size: 16px; margin-bottom: 28px; }
.mcta-note { color: rgba(255,255,255,.55) !important; font-size: 13px !important; margin-top: 16px !important; margin-bottom: 0 !important; }

/* ── Steps (How it works) ──────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}
.step {
  border-radius: var(--r-lg);
  padding: 32px 28px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step.pink   { background: var(--pink);   }
.step.yellow { background: var(--yellow); }
.step.mint   { background: var(--mint);   }
.step-n {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 52px;
  font-weight: 800;
  color: rgba(13,27,62,.07);
  line-height: 1;
  letter-spacing: -2px;
  pointer-events: none;
}
.step-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.7);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  width: fit-content;
}
.step h3 { font-size: 20px; font-weight: 800; color: var(--navy); }
.step p { font-size: 14px; color: rgba(13,27,62,.7); margin: 0; }

/* ── Reviews ───────────────────────────────────────────────── */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rcard {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rcard-stars { color: #F5C518; font-size: 16px; letter-spacing: 2px; }
.rcard-body { font-size: 15px; color: var(--navy); line-height: 1.6; flex: 1; }
.rcard-author { font-size: 13px; font-weight: 700; color: var(--muted); }
.rcard-source { font-size: 12px; color: var(--muted); opacity: .7; }

/* ── Coverage grid ─────────────────────────────────────────── */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.cov-card {
  background: var(--white);
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  transition: background .2s, transform .2s;
}
.cov-card:hover { background: var(--green-bg); transform: translateY(-2px); }
.cov-card svg { width: 14px; height: 14px; stroke: var(--green); fill: none; stroke-width: 2.5; }

/* ── Final CTA ─────────────────────────────────────────────── */
.fcta {
  padding: 80px 24px;
}
.fcta-inner {
  max-width: 760px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: 32px;
  padding: 60px 48px;
  text-align: center;
}
.fcta-inner h2 { color: #fff; margin-bottom: 8px; }
.fcta-inner > p { color: rgba(255,255,255,.65); font-size: 15px; margin-bottom: 32px; }
.fcta-phone {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  display: block;
  margin: 20px 0;
  transition: opacity .2s;
}
.fcta-phone:hover { opacity: .85; }
.fcta-note { color: rgba(255,255,255,.45) !important; font-size: 13px !important; margin-top: 16px !important; }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: var(--white);
  padding: 40px 24px;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.foot-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
}
.foot-logo svg { width: 22px; height: 22px; stroke: var(--green); }
.foot-copy { font-size: 13px; color: var(--muted); margin: 0; }
.foot-links {
  display: flex;
  gap: 20px;
}
.foot-links a { font-size: 13px; color: var(--muted); font-weight: 500; transition: color .2s; }
.foot-links a:hover { color: var(--navy); }

/* ── Location hero variant ─────────────────────────────────── */
.hero-loc {
  grid-template-columns: 1fr;
  max-width: 820px;
  padding-bottom: 48px;
}
.hero-loc .hero-left { max-width: 680px; }

/* ── Breadcrumb ────────────────────────────────────────────── */
.bc {
  padding: 20px 24px 0;
}
.bc-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.bc-inner a { color: var(--muted); transition: color .2s; }
.bc-inner a:hover { color: var(--navy); }
.bc-inner svg { width: 12px; height: 12px; stroke: var(--muted); fill: none; stroke-width: 2; }

/* ── Emergency bar ─────────────────────────────────────────── */
.ebar {
  background: var(--green);
  padding: 14px 24px;
  text-align: center;
}
.ebar p {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  margin: 0;
}
.ebar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ── Feature cards (service+town pages) ───────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fcard {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fcard-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fcard-icon svg { width: 22px; height: 22px; stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fcard h3 { font-size: 16px; font-weight: 700; }
.fcard p { font-size: 13px; color: var(--muted); margin: 0; }

/* ── Also-need links ───────────────────────────────────────── */
.also-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.also-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border-radius: var(--r);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  transition: background .2s, transform .2s;
}
.also-links a:hover { background: var(--green-bg); transform: translateX(3px); }
.also-links svg { width: 14px; height: 14px; stroke: var(--green); fill: none; stroke-width: 2.5; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .review-grid  { grid-template-columns: 1fr 1fr; }
  .steps        { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .mbar { display: block; }
  nav   { display: none; }

  .hero {
    grid-template-columns: 1fr;
    padding: 24px 20px 60px;
    gap: 32px;
  }
  .hero-right {
    order: -1;
    grid-template-columns: 1fr 1fr;
  }
  .trust-card:nth-child(2),
  .trust-card:nth-child(4) { margin-top: 0; }

  .service-grid { grid-template-columns: 1fr; }
  .review-grid  { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .coverage-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .steps        { grid-template-columns: 1fr; }

  .fcta-inner {
    padding: 40px 28px;
    border-radius: 24px;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .proof-inner { gap: 18px; }

  h1 { letter-spacing: -.8px; }
}

@media (max-width: 480px) {
  .hero-right { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 20px; }
  .s-sub { font-size: 15px; }
  .btn-primary, .btn-light { font-size: 15px; padding: 14px 24px; }
}