/* ============================================================
   Sabato's Paint & Maintenance — brand layer
   Loads AFTER tailwind.min.css (Aqua Cat static prebuild), so
   everything here wins the cascade.

   PALETTE — sampled visually from the generated logo badge;
   true these against the real PNG when the file arrives:
     deep teal (badge field) .... #0d4852
     teal rim (badge edge) ...... #39929e
     gold (letterforms) ......... #d4a94f
     gold light (highlights) .... #ecd28c
     cream (page background) .... #f8f4ed  (kept from template)
   ============================================================ */

:root{
  --sb-teal-deep:#0d4852;
  --sb-teal-deeper:#0a3a42;
  --sb-teal-rim:#39929e;
  --sb-gold:#d4a94f;
  --sb-gold-light:#ecd28c;
  --sb-gold-deep:#b8873b;
  --sb-cream:#f8f4ed;
  --sb-ink:#20302f;
}

/* ---- recolor the template brand utilities used on these pages ---- */
.bg-brand-navy{background-color:var(--sb-teal-deep)}
.text-brand-navy{color:var(--sb-teal-deep)}
.bg-brand-teal{background-color:var(--sb-teal-rim)}
.text-brand-teal{color:var(--sb-teal-rim)}
.bg-brand-cream{background-color:var(--sb-cream)}

/* ---- structural components ---- */
.sb-topbar{background:var(--sb-teal-deeper);color:#fff;font-size:.8rem;letter-spacing:.02em}
.sb-topbar strong{color:var(--sb-gold-light)}
.sb-hero{background:
  radial-gradient(1200px 500px at 85% -10%, rgba(57,146,158,.28), transparent 60%),
  linear-gradient(150deg,var(--sb-teal-deep) 0%,var(--sb-teal-deeper) 60%,#0b3d46 100%)}
.sb-chip{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.08);
  border:1px solid rgba(236,210,140,.35);border-radius:9999px;padding:.45rem 1rem;
  font-size:.82rem;font-weight:600;color:#fff}
.sb-chip svg{flex:none}
.sb-card{transition:transform .2s ease, box-shadow .2s ease}
.sb-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(13,72,82,.14)}
.sb-icon{width:2.9rem;height:2.9rem;border-radius:.8rem;display:flex;align-items:center;
  justify-content:center;background:rgba(212,169,79,.14);color:var(--sb-gold-deep);font-size:1.3rem}
.sb-quote{border-left:4px solid var(--sb-gold)}
.sb-verify{border:1.5px dashed rgba(184,135,59,.55);border-radius:1rem;background:rgba(212,169,79,.05)}
.sb-anchor{scroll-margin-top:5rem}

/* ---- buttons ---- */
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;border-radius:.75rem;padding:.9rem 1.6rem;transition:all .2s ease}
.sb-btn-gold{background:linear-gradient(160deg,var(--sb-gold-light) 0%,var(--sb-gold) 55%,var(--sb-gold-deep) 100%);
  color:var(--sb-teal-deeper);box-shadow:0 4px 14px rgba(184,135,59,.35)}
.sb-btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.sb-btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}
.sb-btn-ghost:hover{background:rgba(255,255,255,.18)}
.sb-btn-teal{background:var(--sb-teal-deep);color:#fff}
.sb-btn-teal:hover{background:#11525d;transform:translateY(-1px)}

/* ---- brand lockup (typographic, echoes the badge) ---- */
.sb-lockup{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.sb-mark{width:2.6rem;height:2.6rem;border-radius:9999px;flex:none;
  background:radial-gradient(circle at 32% 28%, #13606c 0%, var(--sb-teal-deep) 55%, var(--sb-teal-deeper) 100%);
  border:2px solid var(--sb-teal-rim);display:flex;align-items:center;justify-content:center}
.sb-mark span{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:1.25rem;
  background:linear-gradient(175deg,var(--sb-gold-light) 10%,var(--sb-gold) 55%,var(--sb-gold-deep) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.sb-wordmark{line-height:1.15}
.sb-wordmark .n{font-family:Georgia,'Times New Roman',serif;font-weight:700;
  color:var(--sb-teal-deep);font-size:1.18rem;letter-spacing:.01em}
.sb-wordmark .s{font-size:.66rem;color:#6b7671;letter-spacing:.08em;text-transform:uppercase}

/* gold serif accent for section headings */
.sb-serif{font-family:Georgia,'Times New Roman',serif;letter-spacing:.01em}
.sb-gold-text{background:linear-gradient(175deg,var(--sb-gold-light) 5%,var(--sb-gold) 50%,var(--sb-gold-deep) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* FAQ accordions */
.sb-faq{border:1px solid rgba(13,72,82,.12);border-radius:.9rem;background:#fff}
.sb-faq summary{cursor:pointer;font-weight:700;color:var(--sb-teal-deep);padding:1rem 1.25rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sb-faq summary::-webkit-details-marker{display:none}
.sb-faq summary::after{content:"+";font-size:1.3rem;color:var(--sb-gold-deep);flex:none;
  transition:transform .2s ease}
.sb-faq[open] summary::after{transform:rotate(45deg)}
.sb-faq .a{padding:0 1.25rem 1.1rem;color:#4b5563;line-height:1.65;font-size:.93rem}

/* mobile nav (no JS) */
.sb-mnav{position:relative}
.sb-mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;
  font-weight:700;color:var(--sb-teal-deep);font-size:.9rem;padding:.5rem .75rem;
  border:1px solid rgba(13,72,82,.2);border-radius:.6rem}
.sb-mnav summary::-webkit-details-marker{display:none}
.sb-mnav[open] summary{background:var(--sb-cream)}
.sb-mnav .menu{position:absolute;right:0;top:calc(100% + .4rem);background:#fff;z-index:50;
  border:1px solid rgba(13,72,82,.15);border-radius:.8rem;box-shadow:0 12px 30px rgba(13,72,82,.18);
  min-width:13rem;padding:.5rem;display:flex;flex-direction:column}
.sb-mnav .menu a{padding:.6rem .8rem;border-radius:.5rem;font-weight:600;font-size:.92rem;
  color:var(--sb-teal-deep);text-decoration:none}
.sb-mnav .menu a:hover{background:var(--sb-cream)}

/* utilities absent from the static Tailwind prebuild */
.flex-none{flex:none}
.gap-y-1{row-gap:.25rem}
.gap-x-10{column-gap:2.5rem}
.max-w-sm{max-width:24rem}
.my-4{margin-top:1rem;margin-bottom:1rem}
.z-40{z-index:40}
.text-white\/40{color:rgba(255,255,255,.4)}
@media (min-width:640px){.sm\:inline{display:inline}.sm\:hidden{display:none}}
@media (min-width:768px){
  .md\:flex{display:flex}
  .md\:block{display:block}
  .md\:inline{display:inline}
  .md\:hidden{display:none}
  .md\:mb-0{margin-bottom:0}
  .md\:py-16{padding-top:4rem;padding-bottom:4rem}
  .md\:py-20{padding-top:5rem;padding-bottom:5rem}
  .md\:py-24{padding-top:6rem;padding-bottom:6rem}
}
html{scroll-behavior:smooth}