/* ============================================================================
   Fursure Cleanup — 2026 design refresh
   Layered on top of the legacy ftco template. Goals:
   1) Content is visible by default (animation is progressive enhancement only).
   2) Retire the rainbow cyan→gold gradients for a refined, trustworthy palette.
   3) Tighten spacing, modernize cards, fix hero readability.
   Load AFTER style.css + custom-improvements.css.
   ============================================================================ */

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

:root{
  --brand:#0a97bd;          /* refined cyan (calmer than #00BFFF) */
  --brand-dark:#077e9e;
  --ink:#153842;            /* deep teal — headings + body */
  --ink-soft:#4a6870;       /* muted body text */
  --accent:#f6b93b;         /* warm gold from the logo, used sparingly */
  --paper:#f5fafb;          /* cool off-white section background */
  --line:#e2edf0;
  --card:#ffffff;
  --shadow:0 6px 24px rgba(21,56,66,.08);
  --shadow-lg:0 18px 48px rgba(21,56,66,.14);
}

/* ---- 1. Kill the invisible-content trap ------------------------------------ */
.ftco-animate{ opacity:1 !important; visibility:visible !important; }

/* ---- Typography ------------------------------------------------------------ */
body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink-soft); }
h1,h2,h3,h4,h5,.heading-section h2,.hero-text-content h1{
  font-family:'Poppins',sans-serif !important; color:var(--ink); letter-spacing:-.01em;
}
.heading-section h2{ font-weight:700 !important; font-size:2.15rem; }
.heading-section .subheading{ color:var(--brand); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; }

/* ---- Spacing: the template pads 7em; too airy. Tighten. -------------------- */
.ftco-section{ padding:4.75em 0 !important; }
@media (max-width:767.98px){ .ftco-section{ padding:3.25em 0 !important; } }

/* ---- Buttons: solid, confident. No rainbow gradients. ---------------------- */
.btn-primary,.btn.btn-primary,.btn-quote,#show-quote-btn,.btn-cta{
  background:var(--brand) !important; border:none !important; color:#fff !important;
  border-radius:11px !important; font-family:'Poppins',sans-serif; font-weight:600 !important;
  letter-spacing:.02em; padding:.85rem 1.6rem !important; box-shadow:0 8px 20px rgba(10,151,189,.28);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary:hover,.btn.btn-primary:hover,#show-quote-btn:hover,.btn-cta:hover{
  background:var(--brand-dark) !important; transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(10,151,189,.34);
}
.btn-outline-primary{ border:2px solid var(--brand) !important; color:var(--brand) !important; border-radius:11px !important; font-weight:600; }
.btn-outline-primary:hover{ background:var(--brand) !important; color:#fff !important; }

/* ---- Hero: readable over the busy photo ----------------------------------- */
.hero-wrap{ position:relative; }
.hero-wrap::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(9,40,50,.82) 0%, rgba(9,40,50,.55) 42%, rgba(9,40,50,.12) 72%);
}
.hero-wrap .container{ position:relative; z-index:1; }
.hero-text-content h1{ color:#fff !important; text-shadow:none !important; font-weight:800 !important; line-height:1.06; letter-spacing:-.02em; }
.hero-text-content p,.hero-text-content .hero-sub{ color:rgba(255,255,255,.92) !important; text-shadow:none !important; }
.hero-text-content .hero-eyebrow{
  display:inline-block; background:rgba(255,255,255,.16); backdrop-filter:blur(4px);
  color:#fff; font-family:'Poppins'; font-weight:600; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.4rem .8rem; border-radius:999px; margin-bottom:1rem;
}

/* Quote card: lighter, modern */
.quote-calculator-card{
  border-radius:18px !important; box-shadow:var(--shadow-lg) !important;
  border:1px solid var(--line); padding:32px !important;
}
.quote-calculator-card h3,.quote-calculator-card h2{ font-weight:700 !important; }
.quote-calculator-card input,.quote-calculator-card select{
  border:1.5px solid var(--line) !important; border-radius:11px !important; padding:.7rem .9rem !important;
}
.quote-calculator-card input:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(10,151,189,.14) !important; }

/* ---- Cards: unify the mismatched template cards --------------------------- */
.services .media,.ftco-intro .d-flex,.card,.pricing-card,.service-card,.value-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease;
}
.services .media:hover,.card:hover,.pricing-card:hover,.service-card:hover,.value-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-lg);
}
.icon,.services .icon{ color:var(--brand) !important; }

/* Section backgrounds: swap gray for warm cool paper */
.bg-light{ background:var(--paper) !important; }

/* ---- Retire rainbow gradient bands (also patched inline in Blade) --------- */
.brand-band{
  background:linear-gradient(120deg,var(--ink) 0%, #10505f 55%, var(--brand-dark) 100%) !important;
}
.brand-band h2,.brand-band h3,.brand-band p,.brand-band .heading-section h2{ color:#fff !important; }
.brand-band .subheading{ color:var(--accent) !important; }

/* ---- Steps ("Working with us") : accent numerals -------------------------- */
.services-2 .icon,.step-number,.number{ background:var(--brand) !important; color:#fff !important; }

/* ---- Topbar + nav refinement ---------------------------------------------- */
.ftco-navbar-light,.py-1.bg-white{ box-shadow:0 1px 0 var(--line); }
.navbar .nav-link{ font-family:'Poppins',sans-serif; font-weight:500; color:var(--ink) !important; }
.navbar .nav-link.active,.navbar .nav-link:hover{ color:var(--brand) !important; }

/* ---- Footer: deep teal instead of muddy dark ------------------------------ */
.ftco-footer,footer{ background:var(--ink) !important; }
.ftco-footer .footer-heading{ color:#fff !important; }

/* ---- FAQ accordion polish ------------------------------------------------- */
.faq-item,.accordion .card{ border-radius:12px !important; border:1px solid var(--line) !important; box-shadow:var(--shadow); overflow:hidden; }

/* ---- Accent underline under section headings ------------------------------ */
.heading-section h2::after{
  content:""; display:block; width:52px; height:4px; border-radius:2px;
  background:var(--accent); margin:14px auto 0;
}
.heading-section.text-left h2::after{ margin-left:0; }

/* Retire the template's green "active" promise card → brand cyan */
.d-block.services.active,.services.active{
  background:linear-gradient(160deg,var(--brand) 0%, var(--brand-dark) 100%) !important;
  border-radius:16px; color:#fff !important;
}
.services.active .heading,.services.active p{ color:#fff !important; }
.services.active .icon span{ color:#fff !important; }

/* Bottom appointment band: template rainbow overlay → cohesive brand overlay */
.ftco-appointment .overlay{
  background:linear-gradient(120deg, rgba(15,43,54,.93) 0%, rgba(7,126,158,.66) 100%) !important;
  opacity:1 !important;
}
/* Unify remaining neon #00BFFF icon accents toward the refined brand cyan */
.icon[style*="00BFFF"],[style*="color: #00BFFF"]{ color:#0a97bd !important; }

/* Mobile top bar: keep Call + Email on one line (was forced display:block) */
@media (max-width:576px){
  .wrap{ padding:7px 0 !important; }
  .wrap .phone{ display:flex; align-items:center; justify-content:center; gap:1.25rem; }
  .wrap .phone a{ display:inline-flex !important; align-items:center; margin-bottom:0 !important; margin-right:0 !important; }
}

/* Customer Promise: template pulls cards up -50px to overlap a band that no
   longer exists → they collided with the heading. Sit them below it. */
.ftco-intro .services{ margin-top:0 !important; }
.ftco-intro .row.mb-5{ margin-bottom:2.25rem !important; }

/* Customer Promise cleanup: seat icons INSIDE the cards (was a detached
   absolute-positioned floating badge; active card's glyph was white-on-white). */
.ftco-intro .services{ padding:34px 26px !important; margin-top:0 !important; }
.ftco-intro .services .icon{
  position:static !important; margin:0 auto 16px !important;
  width:76px !important; height:76px !important; border-radius:18px !important;
  background:rgba(10,151,189,.10) !important; box-shadow:none !important;
}
.ftco-intro .services .icon span{ color:var(--brand) !important; font-size:34px !important; }
.ftco-intro .services .media-body{ margin-top:0 !important; }
/* Active (cyan) card: translucent white tile + white glyph so it reads */
.ftco-intro .services.active .icon{ background:rgba(255,255,255,.20) !important; }
.ftco-intro .services.active .icon span{ color:#fff !important; }

/* Balance the promise cards: center content vertically so shorter cards
   (e.g. "Reliable, Hassle-Free Service") don't leave a big empty void. */
.ftco-intro .services{ display:flex !important; flex-direction:column; justify-content:center; }

/* Bootstrap's .media-body{flex:1} stretched the text box inside the now-flex
   card, forcing the empty bottom. Let it take natural height so justify-center
   actually balances the icon+text group. */
.ftco-intro .services .media-body{ flex:0 0 auto !important; }

/* Promise cards all uniform white — no highlighted card, and no green
   flip on hover (template sets .services:hover{background:#00bd56}). */
.ftco-intro .services,
.ftco-intro .services:hover,
.ftco-intro .services.active{ background:#fff !important; }
.ftco-intro .services:hover .media-body,
.ftco-intro .services .media-body{ color:var(--ink-soft) !important; }
.ftco-intro .services:hover .heading,
.ftco-intro .services .heading{ color:var(--ink) !important; }
.ftco-intro .services .icon{ background:rgba(10,151,189,.10) !important; }
.ftco-intro .services .icon span{ color:var(--brand) !important; }

/* Testimonials: brand-cyan quote badge (was template green) + neutral cool
   overlay (was a pink wash) so it stays on-brand. */
.testimony-section .testimony-wrap .icon{ background:var(--brand) !important; }
.testimony-section .testimony-wrap .icon span{ color:#fff !important; }
.testimony-section .overlay{
  background:linear-gradient(0deg, rgba(244,250,251,.72), rgba(244,250,251,.72)) !important;
  opacity:1 !important;
}

/* Owl carousel active dot → brand (was green) */
.owl-dots .owl-dot.active span,.owl-dots .owl-dot:hover span{ background:var(--brand) !important; }