/* ===== Bo's Insulation — Global Stylesheet ===== */

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#2d3748;line-height:1.7;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:#d63384;text-decoration:none;transition:color .2s}
a:hover{color:#b5286e}
ul,ol{list-style:none}

/* --- CSS Custom Properties --- */
:root{
  --navy:#2d0a1e;
  --blue:#d63384;
  --blue-light:#fff0f6;
  --orange:#d63384;
  --orange-light:#fff0f6;
  --orange-hover:#b5286e;
  --green:#276749;
  --green-light:#f0fff4;
  --gray-50:#f7fafc;
  --gray-100:#edf2f7;
  --gray-200:#e2e8f0;
  --gray-400:#a0aec0;
  --gray-500:#718096;
  --gray-600:#4a5568;
  --gray-700:#2d3748;
  --gray-900:#1a202c;
  --white:#ffffff;
  --shadow-sm:0 1px 3px rgba(0,0,0,.1);
  --shadow-md:0 4px 14px rgba(0,0,0,.1);
  --shadow-lg:0 10px 30px rgba(0,0,0,.12);
  --radius:8px;
  --radius-lg:12px;
  --max-w:1200px;
  --transition:all .25s ease;
}

/* --- Typography --- */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;color:var(--navy)}
h1{font-size:clamp(2rem,5vw,3.25rem);letter-spacing:-.02em}
h2{font-size:clamp(1.65rem,4vw,2.5rem);letter-spacing:-.01em}
h3{font-size:clamp(1.25rem,3vw,1.6rem)}
h4{font-size:1.15rem}
p{margin-bottom:1rem;color:var(--gray-600)}
.text-center{text-align:center}
.text-white{color:var(--white)}
.text-white p{color:rgba(255,255,255,.85)}
.text-orange{color:var(--orange)}
.text-navy{color:var(--navy)}
.text-sm{font-size:.9rem}
.text-lg{font-size:1.15rem}
.lead{font-size:clamp(1.05rem,2.5vw,1.25rem);line-height:1.7;color:var(--gray-500)}

/* --- Layout --- */
.container{width:90%;max-width:var(--max-w);margin:0 auto}
.section{padding:5rem 0}
.section-sm{padding:3.5rem 0}
.section-header{margin-bottom:3rem}
.section-header p{max-width:640px;margin-left:auto;margin-right:auto}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}

/* --- Buttons --- */
.btn{display:inline-block;font-weight:600;font-size:1rem;padding:.85rem 2rem;border-radius:var(--radius);border:none;cursor:pointer;transition:var(--transition);text-align:center}
.btn-primary{background:var(--orange);color:var(--white)}
.btn-primary:hover{background:var(--orange-hover);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--white);color:var(--navy);border:2px solid var(--navy)}
.btn-secondary:hover{background:var(--navy);color:var(--white);transform:translateY(-2px)}
.btn-outline-white{background:transparent;color:var(--white);border:2px solid var(--white)}
.btn-outline-white:hover{background:var(--white);color:var(--navy);transform:translateY(-2px)}
.btn-lg{padding:1rem 2.5rem;font-size:1.1rem}
.btn-sm{padding:.6rem 1.4rem;font-size:.9rem}
.btn-group{display:flex;gap:1rem;flex-wrap:wrap}

/* --- Navigation --- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 0;transition:var(--transition)}
.nav.scrolled{background:var(--white);box-shadow:var(--shadow-sm);padding:.6rem 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:90%;max-width:var(--max-w);margin:0 auto}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:42px;width:auto;filter:invert(1);transition:filter .25s ease}
.nav.scrolled .nav-logo img{filter:invert(0)}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{color:rgba(255,255,255,.9);font-weight:500;font-size:.95rem;transition:var(--transition)}
.nav-links a:hover{color:var(--orange)}
.nav.scrolled .nav-links a{color:var(--gray-700)}
.nav-links .btn{padding:.55rem 1.4rem;font-size:.9rem}
.nav-cta{background:var(--orange);color:var(--white) !important;border-radius:var(--radius);padding:.55rem 1.4rem}
.nav-cta:hover{background:var(--orange-hover);color:var(--white) !important}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0;transition:var(--transition)}
.nav.scrolled .nav-toggle span{background:var(--navy)}

/* --- Hero --- */
.hero{background:linear-gradient(135deg,var(--navy) 0%,#5c1a3e 50%,#2d0a1e 100%);color:var(--white);padding:10rem 0 6rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;right:0;width:50%;height:100%;background:radial-gradient(ellipse at 70% 50%,rgba(214,51,132,.15) 0%,transparent 70%);pointer-events:none}
.hero h1{color:var(--white);margin-bottom:1.25rem}
.hero .lead{color:rgba(255,255,255,.8);max-width:600px;margin-bottom:2rem}
.hero-content{max-width:650px}

/* --- Trust Bar --- */
.trust-bar{background:var(--gray-50);border-bottom:1px solid var(--gray-200);padding:1.25rem 0}
.trust-items{display:flex;justify-content:center;flex-wrap:wrap;gap:2rem}
.trust-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--navy)}
.trust-item .stars{color:var(--orange)}

/* --- Cards --- */
.card{background:var(--white);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:var(--transition)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--orange)}
.card-icon{width:52px;height:52px;border-radius:var(--radius);background:var(--blue-light);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;font-size:1.5rem;color:var(--blue)}
.card h3{margin-bottom:.75rem}
.card p{font-size:.95rem;margin-bottom:1rem}
.card-link{font-weight:600;color:var(--orange);font-size:.95rem}
.card-link:hover{color:var(--orange-hover)}

/* --- Features / Why Choose Us --- */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem}
.feature{display:flex;gap:1.25rem}
.feature-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--orange-light);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--orange)}
.feature h4{margin-bottom:.4rem}
.feature p{font-size:.9rem;margin-bottom:0}

/* --- Testimonials --- */
.testimonial{background:var(--white);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}
.testimonial-stars{color:var(--orange);font-size:1.1rem;margin-bottom:.75rem}
.testimonial p{font-style:italic;margin-bottom:1rem}
.testimonial-author{font-weight:600;color:var(--navy);font-size:.9rem}
.testimonial-source{color:var(--gray-400);font-size:.8rem}

/* --- Stats --- */
.stats-bar{background:var(--navy);padding:3.5rem 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stat-number{font-size:2.5rem;font-weight:800;color:var(--orange);line-height:1}
.stat-label{color:rgba(255,255,255,.8);font-size:.9rem;margin-top:.4rem}

/* --- CTA Section --- */
.cta-section{background:linear-gradient(135deg,var(--orange) 0%,#b5286e 100%);color:var(--white);padding:4.5rem 0;text-align:center}
.cta-section h2{color:var(--white);margin-bottom:1rem}
.cta-section p{color:rgba(255,255,255,.9);max-width:600px;margin:0 auto 2rem}

/* --- Service Area --- */
.area-tags{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.area-tag{display:inline-block;background:var(--blue-light);color:var(--blue);padding:.5rem 1.2rem;border-radius:2rem;font-weight:600;font-size:.9rem;transition:var(--transition)}
.area-tag:hover{background:var(--blue);color:var(--white);transform:translateY(-2px)}

/* --- Blog Cards --- */
.blog-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:var(--transition)}
.blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.blog-card-img{height:180px;background:linear-gradient(135deg,var(--navy),var(--blue));display:flex;align-items:center;justify-content:center;color:var(--white);font-size:2rem;font-weight:800;opacity:.3}
.blog-card-body{padding:1.5rem}
.blog-card-body h3{font-size:1.1rem;margin-bottom:.5rem}
.blog-card-body p{font-size:.9rem;margin-bottom:1rem}
.blog-card-meta{font-size:.8rem;color:var(--gray-400)}

/* --- Footer --- */
.footer{background:var(--gray-900);color:var(--white);padding:4rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer h4{color:var(--white);margin-bottom:1.25rem;font-size:1rem}
.footer p,.footer a{color:var(--gray-400);font-size:.9rem}
.footer a:hover{color:var(--orange)}
.footer-links li{margin-bottom:.6rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{margin:0;font-size:.85rem;color:var(--gray-400)}
.footer-charity{background:rgba(221,107,32,.1);border:1px solid rgba(221,107,32,.3);border-radius:var(--radius);padding:1rem;margin-top:1rem}
.footer-charity p{color:var(--orange);font-weight:600;margin:0;font-size:.9rem}

/* --- Page Header (inner pages) --- */
.page-header{background:linear-gradient(135deg,var(--navy) 0%,#5c1a3e 100%);color:var(--white);padding:9rem 0 4rem;text-align:center}
.page-header h1{color:var(--white);margin-bottom:1rem}
.page-header .lead{color:rgba(255,255,255,.8);max-width:640px;margin:0 auto}
.breadcrumb{display:flex;justify-content:center;gap:.5rem;font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:1.5rem}
.breadcrumb a{color:rgba(255,255,255,.7)}
.breadcrumb a:hover{color:var(--white)}

/* --- Service Page Content --- */
.service-content{display:grid;grid-template-columns:2fr 1fr;gap:3rem}
.service-main h2{margin-top:2.5rem;margin-bottom:1rem}
.service-main h3{margin-top:2rem;margin-bottom:.75rem;color:var(--blue)}
.service-main ul{margin:1rem 0;padding-left:0}
.service-main li{padding:.4rem 0 .4rem 1.5rem;position:relative;font-size:.95rem}
.service-main li::before{content:'✓';position:absolute;left:0;color:var(--orange);font-weight:700}
.service-sidebar .card{position:sticky;top:6rem}
.sidebar-cta{background:var(--orange-light);border-color:var(--orange)}
.sidebar-cta h4{color:var(--orange);margin-bottom:.75rem}

/* --- Blog Post --- */
.blog-content{max-width:760px;margin:0 auto}
.blog-content h2{margin-top:2.5rem;margin-bottom:1rem}
.blog-content h3{margin-top:2rem;margin-bottom:.75rem;color:var(--blue)}
.blog-content p{font-size:1.05rem;line-height:1.8}
.blog-content ul,.blog-content ol{margin:1rem 0 1rem 1.5rem}
.blog-content li{padding:.3rem 0;font-size:1.05rem}
.blog-content ol{list-style:decimal}
.blog-content ul{list-style:disc}
.blog-meta{text-align:center;margin-bottom:2rem;color:var(--gray-400);font-size:.9rem}
.blog-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem}
.blog-tag{background:var(--gray-100);color:var(--gray-600);padding:.3rem .8rem;border-radius:2rem;font-size:.8rem}

/* --- FAQ --- */
.faq-item{border-bottom:1px solid var(--gray-200);padding:1.25rem 0}
.faq-item h3{font-size:1.05rem;cursor:pointer;color:var(--navy);display:flex;justify-content:space-between;align-items:center}
.faq-item h3::after{content:'+';font-size:1.5rem;font-weight:300;color:var(--gray-400);transition:var(--transition)}
.faq-item.open h3::after{content:'−'}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-answer{max-height:500px}
.faq-answer p{padding-top:.75rem;font-size:.95rem}

/* --- Backgrounds --- */
.bg-gray{background:var(--gray-50)}
.bg-navy{background:var(--navy)}
.bg-blue-light{background:var(--blue-light)}
.bg-orange-light{background:var(--orange-light)}

/* --- Scroll Reveal --- */
.sr{opacity:1;transform:none}
.js .sr{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .sr.visible{opacity:1;transform:translateY(0)}

/* --- Responsive --- */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .service-content{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .grid-2,.grid-3,.feature-grid{grid-template-columns:1fr}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;padding:1.5rem;box-shadow:var(--shadow-md);gap:1rem}
  .nav-links.open{display:flex}
  .nav-links a{color:var(--gray-700) !important}
  .nav-toggle{display:block}
  .hero{padding:8rem 0 4rem}
  .section{padding:3.5rem 0}
  .footer-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .btn-group{flex-direction:column;align-items:flex-start}
  .trust-items{gap:1rem}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .area-tags{justify-content:flex-start}
}