/* Bubbles Car Wash — shared styles (classic palette, production static) */
:root{
  --navy:#0b1a3d; --navy-2:#13265a; --blue:#2563eb; --blue-2:#1d4ed8;
  --blue-soft:#dbeafe; --sky:#eaf2fc; --sky-2:#f4f8fd;
  --ink:#0b1a3d; --text:#1e293b; --mute:#64748b;
  --line:#e2e8f0; --line-2:#eef2f7; --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.5;
  background-image:
    linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.72)),
    url("whitefish.webp");
  background-size:auto, cover;
  background-position:center, center center;
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* hero gradient background (from the original design) */
.hero-bg{
  background:
    radial-gradient(ellipse at 75% -10%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(ellipse at 15% 0%, rgba(255,255,255,.4), transparent 60%),
    linear-gradient(180deg, rgba(217,231,248,.55) 0%, rgba(234,242,252,.4) 40%, transparent 100%);
}

/* typography helpers */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.h1{font-size:45px;font-weight:800;line-height:1.06;color:var(--ink);letter-spacing:-.01em;margin:0}
.h2{font-size:32px;font-weight:800;line-height:1.14;color:var(--ink);letter-spacing:-.01em;margin:0}
.h3{font-weight:800;color:var(--ink);margin:0}
.lead{font-size:17px;line-height:1.6;color:#475569;margin:0}
.script{font-family:"Caveat",cursive}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:10px;
  font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease,opacity .15s ease;white-space:nowrap}
.btn svg{display:block}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 12px 26px -12px rgba(37,99,235,.6)}
.btn-primary:hover{background:var(--blue-2)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--blue)}

/* header / nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.wordmark .mk-name{display:flex;flex-direction:column;line-height:1}
.wordmark .mk-name b{font-weight:800;letter-spacing:.02em;font-size:25px;color:var(--ink)}
.wordmark .mk-name span{font-weight:600;letter-spacing:.22em;font-size:14px;margin-top:3px;opacity:.8;text-align:center;color:var(--ink)}
.mainnav{display:flex;gap:36px;font-size:15px;font-weight:500;flex-wrap:wrap}
.mainnav a{color:var(--text);text-decoration:none;transition:color .15s ease}
.mainnav a:hover{color:var(--blue)}
.mainnav a.active{color:var(--blue);font-weight:700}

/* generic card grids */
.section{padding:96px 0}
.center-head{text-align:center;max-width:680px;margin:0 auto 56px}

/* footer */
.site-footer{background:var(--navy);color:#fff;padding:48px 0 28px}
.site-footer .frow{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer nav{display:flex;gap:32px;font-size:14px;font-weight:500;justify-content:center;flex-wrap:wrap}
.site-footer nav a{color:rgba(255,255,255,.85);text-decoration:none}
.site-footer nav a:hover{color:#fff}
.site-footer .copy{text-align:center;font-size:13px;color:rgba(255,255,255,.6);padding-top:22px}
.wordmark.light .mk-name b{color:#fff}
.wordmark.light .mk-name span{color:rgba(255,255,255,.75)}

/* dark band */
.band{position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.band .bg{position:absolute;inset:0;opacity:.22;mix-blend-mode:luminosity}
.band .bg img{width:100%;height:100%;object-fit:cover}
.band .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,26,61,.72),rgba(11,26,61,.9))}
.band .inner{position:relative}

/* responsive */
@media (max-width:900px){
  .h1{font-size:36px}
  .h2{font-size:27px}
  .section{padding:64px 0}
}
@media (max-width:760px){
  body{background-attachment:scroll, scroll}
  .site-header .bar{flex-direction:column;height:auto;padding:14px 0;gap:10px}
  .mainnav{gap:20px;font-size:14px;justify-content:center}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important}
  .reverse-mobile{direction:ltr}
}