/* L&D Insulation - Rebuilt Visual Layer */
/* Design driven by: warm attic wood tones, two partners as the trust anchor, insulation is invisible work, mobile self-contained operation */
/* Palette: Navy #1B2A4A, Charcoal #1E1E1E, Amber #D4A03C, Warm cream #FAF7F2, White #FFF, Text #1A1A1A, Light #F0EDE8 */

/* === RESET & BASE === */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:#1A1A1A;line-height:1.7;background:#FAF7F2}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* === LAYOUT === */
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.section{padding:100px 0}
.section-cream{background:#FAF7F2}
.section-white{background:#FFFFFF}
.section-dark{background:#1B2A4A;color:#F0EDE8}
.section-charcoal{background:#1E1E1E;color:#F0EDE8}

/* === TYPOGRAPHY === */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#D4A03C;margin-bottom:12px}
.eyebrow.light{color:#D4A03C}
h1,h2,h3{font-weight:700;line-height:1.15}
h1{font-size:clamp(36px,5.5vw,64px)}
h2{font-size:clamp(28px,4vw,44px);margin-bottom:20px}
h3{font-size:clamp(18px,2vw,22px);margin-bottom:8px}
p{margin-bottom:16px}
.accent{color:#D4A03C}

/* === BUTTONS === */
.btn{display:inline-block;padding:16px 32px;font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border-radius:3px;transition:all 0.25s ease;cursor:pointer;text-decoration:none;border:none}
.btn-primary{background:#D4A03C;color:#1B2A4A}
.btn-primary:hover{background:#c4922e}
.btn-secondary{background:transparent;color:#F0EDE8;border:2px solid #F0EDE8}
.btn-secondary:hover{background:rgba(240,237,232,0.1)}
.btn-outline{background:transparent;color:#1B2A4A;border:2px solid #1B2A4A}
.btn-outline:hover{background:#1B2A4A;color:#F0EDE8}
.btn-dark{background:#1B2A4A;color:#F0EDE8}
.btn-dark:hover{background:#142038}

/* === HEADER === */
.header{position:sticky;top:0;z-index:1000;background:#1E1E1E;padding:16px 32px;display:flex;align-items:center;justify-content:space-between}
.header-logo img{height:44px;width:auto}
.header-nav{display:flex;align-items:center;gap:28px}
.header-nav a{color:#F0EDE8;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;transition:color 0.2s ease}
.header-nav a:hover{color:#D4A03C}
.header-phone{color:#D4A03C !important;font-weight:700 !important;letter-spacing:0 !important;text-transform:none !important;font-size:14px !important}
.header-cta{background:#D4A03C;color:#1B2A4A !important;padding:10px 22px;border-radius:3px;font-weight:700 !important;letter-spacing:1px !important}
.header-cta:hover{background:#c4922e}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{display:block;width:26px;height:2px;background:#F0EDE8;margin:6px 0;transition:all 0.3s ease}

@media(max-width:900px){
  .header-nav{display:none;position:absolute;top:76px;left:0;right:0;background:#1E1E1E;flex-direction:column;padding:32px;gap:20px;border-top:1px solid #333}
  .header-nav.active{display:flex}
  .hamburger{display:block}
}

/* === HERO === */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(30,30,30,0.45) 0%,rgba(27,42,74,0.7) 100%);z-index:1}
.hero-content{position:relative;z-index:2;max-width:800px;padding:48px 24px}
.hero-content h1{color:#FFFFFF;margin-bottom:20px}
.hero-content p{color:#F0EDE8;font-size:clamp(16px,2vw,20px);margin-bottom:36px;max-width:600px;margin-left:auto;margin-right:auto}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

@media(max-width:768px){
  .hero{min-height:90vh}
}

/* === STATS BAR === */
.stats-bar{background:#1B2A4A;padding:40px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-item .stat-number{font-size:clamp(28px,4vw,42px);font-weight:700;color:#D4A03C;display:block}
.stat-item .stat-label{font-size:13px;color:#F0EDE8;letter-spacing:1px;text-transform:uppercase;margin-top:4px}

@media(max-width:768px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}

/* === CONTENT GRID === */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.grid-2.reverse{direction:rtl}
.grid-2.reverse > *{direction:ltr}

@media(max-width:768px){
  .grid-2,.grid-2.reverse{grid-template-columns:1fr;gap:32px;direction:ltr}
}

/* === IMAGE TREATMENTS === */
.img-full{width:100%;height:500px;object-fit:cover;border-radius:4px}
.img-portrait{width:100%;height:600px;object-fit:cover;border-radius:4px}
.img-hero-block{width:100%;height:70vh;object-fit:cover}

@media(max-width:768px){
  .img-full,.img-portrait{height:350px}
  .img-hero-block{height:50vh}
}

/* === SERVICE BLOCKS === */
.service-block{padding:48px;background:#FFFFFF;border-radius:4px;border-left:4px solid #D4A03C}
.service-block h3{color:#1B2A4A}
.service-block p{color:#555;font-size:15px}
.service-block .btn{margin-top:16px}

/* === PROOF SECTION === */
.proof-full{position:relative;overflow:hidden}
.proof-full img{width:100%;height:70vh;object-fit:cover}
.proof-full .proof-caption{position:absolute;bottom:0;left:0;right:0;padding:32px 48px;background:linear-gradient(to top,rgba(30,30,30,0.9) 0%,transparent 100%)}
.proof-full .proof-caption p{color:#F0EDE8;font-size:15px;margin:0}
.proof-full .proof-caption .eyebrow{margin-bottom:4px}

/* === PARTNER PROOF === */
.partners-proof{background:#1E1E1E;color:#F0EDE8}
.partners-proof-inner{display:grid;grid-template-columns:1.1fr 0.9fr;min-height:520px}
.partners-proof-photo{background:#0B0B0B;display:flex;align-items:center;justify-content:center;padding:28px}
.partners-proof-photo img{width:100%;height:auto;max-height:560px;object-fit:contain}
.partners-proof-copy{display:flex;flex-direction:column;justify-content:center;padding:72px 56px}
.partners-proof-copy h2{color:#FFFFFF}
.partners-proof-copy p:not(.eyebrow){color:#D8D3CC;font-size:16px}
.partners-proof-copy .btn{align-self:flex-start;margin-top:10px}
@media(max-width:768px){
  .partners-proof-inner{grid-template-columns:1fr}
  .partners-proof-photo{padding:16px}
  .partners-proof-photo img{max-height:none}
  .partners-proof-copy{padding:48px 24px}
}

/* === PROCESS === */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.process-step{text-align:center;padding:32px 16px}
.process-number{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:2px solid #D4A03C;border-radius:50%;font-size:22px;font-weight:700;color:#D4A03C;margin-bottom:20px}
.process-step h3{margin-bottom:10px}
.process-step p{font-size:15px;color:#555}

@media(max-width:768px){
  .process-grid{grid-template-columns:1fr}
}

/* === TRUST SECTION === */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.trust-item{padding:32px 0;border-top:3px solid #D4A03C}
.trust-item h3{font-size:18px;margin-bottom:8px;color:#1B2A4A}
.trust-item p{font-size:15px;color:#555}

@media(max-width:768px){
  .trust-grid{grid-template-columns:1fr}
}

/* === FAQ === */
.faq-list{max-width:700px;margin:0 auto}
.faq-item{border-bottom:1px solid #E0DCD6;padding:20px 0}
.faq-item summary{font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:#1B2A4A}
.faq-item summary::after{content:'+';font-size:22px;color:#D4A03C;transition:transform 0.2s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin-top:12px;font-size:15px;color:#555}

/* === TESTIMONIALS === */
.testimonial-feature{padding:78px 0}
.testimonial-feature-inner{display:grid;grid-template-columns:0.85fr 1.15fr;gap:72px;align-items:center}
.testimonial-feature h2{margin-bottom:0}
.testimonial-feature blockquote{margin:0;padding:0 0 0 30px;border-left:3px solid #D4A03C}
.testimonial-feature blockquote p{font-size:clamp(19px,2.2vw,27px);line-height:1.42;font-weight:700;margin-bottom:18px}
.testimonial-feature blockquote footer{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.testimonial-feature blockquote footer span{font-weight:400;letter-spacing:0;text-transform:none;opacity:0.75;margin-left:6px}
.testimonial-feature-dark{background:#1E1E1E;color:#F0EDE8}
.testimonial-feature-dark h2{color:#FFFFFF}
.testimonial-feature-dark blockquote p{color:#FFFFFF}
.testimonial-feature-dark blockquote footer{color:#D4A03C}
.testimonial-feature-light{background:#FFFFFF;color:#1A1A1A}
.testimonial-feature-light h2{color:#1B2A4A}
.testimonial-feature-light blockquote p{color:#1B2A4A}
.testimonial-feature-light blockquote footer{color:#1B2A4A}
@media(max-width:768px){
  .testimonial-feature{padding:58px 0}
  .testimonial-feature-inner{grid-template-columns:1fr;gap:30px}
  .testimonial-feature blockquote{padding-left:20px}
}

/* === CTA SECTION === */
.cta-section{text-align:center;padding:100px 24px}
.cta-section h2{color:#FFFFFF;margin-bottom:12px}
.cta-section p{color:#F0EDE8;margin-bottom:32px;font-size:18px}

/* === FOOTER === */
.footer{background:#1E1E1E;color:#F0EDE8;padding:60px 0 0}
.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid #333}
.footer-brand p{font-size:14px;margin-top:10px;color:#999}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:#F0EDE8;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:color 0.2s ease}
.footer-links a:hover{color:#D4A03C}
.footer-contact{display:flex;flex-direction:column;gap:10px}
.footer-contact a{color:#D4A03C;font-size:14px}
.footer-bottom{text-align:center;padding:24px 0;font-size:12px;color:#666}

@media(max-width:768px){
  .footer-inner{grid-template-columns:1fr;text-align:center}
}

/* === MOBILE CALL BUTTON === */
.mobile-call-btn{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:#D4A03C;color:#1B2A4A;text-align:center;padding:18px;font-weight:700;font-size:15px;text-decoration:none;letter-spacing:1px;text-transform:uppercase}
@media(max-width:768px){
  .mobile-call-btn{display:block}
  body{padding-bottom:56px}
}

/* === PAGE HEADERS (inner pages) === */
.page-hero{position:relative;height:45vh;min-height:300px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.page-hero .hero-bg{position:absolute;inset:0}
.page-hero .hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero .hero-overlay{position:absolute;inset:0;background:rgba(27,42,74,0.75)}
.page-hero-content{position:relative;z-index:2;padding:24px}
.page-hero-content h1{color:#FFFFFF;margin-bottom:8px}
.page-hero-content p{color:#F0EDE8;font-size:17px;max-width:550px;margin:0 auto}

/* === GALLERY === */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.gallery-item{position:relative;overflow:hidden;border-radius:4px}
.gallery-item img{width:100%;height:350px;object-fit:cover;transition:transform 0.4s ease}
.gallery-item:hover img{transform:scale(1.03)}
.gallery-caption{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,transparent 100%);color:#F0EDE8;font-size:13px}
.partners-gallery-item{background:#1E1E1E}
.partners-gallery-item img{object-fit:contain;background:#1E1E1E}
.partners-gallery-item:hover img{transform:none}

@media(max-width:768px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item img{height:280px}
}

/* === FORM === */
.form-container{max-width:560px;margin:0 auto;background:#FFFFFF;padding:48px;border-radius:4px;box-shadow:0 8px 32px rgba(0,0,0,0.06)}
.form-group{margin-bottom:22px}
.form-group label{display:block;font-weight:700;font-size:13px;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:8px;color:#1B2A4A}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 18px;border:1px solid #D0CCC6;border-radius:3px;font-size:16px;font-family:'Inter',sans-serif;transition:border-color 0.2s ease;background:#FAF7F2}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#D4A03C;background:#FFFFFF}
.form-group textarea{min-height:100px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:768px){.form-row{grid-template-columns:1fr}}
.form-submit{text-align:center;margin-top:28px}

/* === CALL BLOCK === */
.call-block{text-align:center;padding:40px;background:#FFFFFF;border-radius:4px;margin-bottom:40px}
.call-block .phone-big{font-size:clamp(32px,5vw,48px);font-weight:700;color:#1B2A4A;display:block;margin-bottom:8px}
.call-block p{font-size:16px;color:#555}

/* === VIDEO === */
.video-container{max-width:700px;margin:0 auto;border-radius:4px;overflow:hidden}
.video-container video{width:100%;display:block}

/* === SERVICE AREAS: Saskatchewan-wide service with a credible home base === */
.sk-hero{position:relative;min-height:540px;overflow:hidden;display:flex;align-items:center;background:#1B2A4A}
.sk-hero-flag{position:absolute;inset:0;background-image:url('images/saskatchewan-flag.png');background-size:cover;background-position:center;opacity:0.3}
.sk-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,35,65,0.96) 0%,rgba(27,42,74,0.84) 48%,rgba(27,42,74,0.5) 100%)}
.sk-hero-content{position:relative;z-index:1;max-width:760px;padding:96px 24px}
.sk-hero-content h1{color:#FFFFFF;margin-bottom:18px}
.sk-hero-content > p:not(.eyebrow){color:#E4E0D8;font-size:20px;max-width:650px;margin-bottom:32px}
.service-area-intro{display:grid;grid-template-columns:1fr 1fr;gap:72px;max-width:1000px}
.service-area-intro h2{font-size:clamp(26px,3vw,38px);color:#1B2A4A}
.service-area-intro p:not(.eyebrow){font-size:16px;color:#555}
.coverage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #DEDAD3;border-left:1px solid #DEDAD3}
.coverage-card{position:relative;padding:42px 32px;border-right:1px solid #DEDAD3;border-bottom:1px solid #DEDAD3;min-height:290px}
.coverage-card .coverage-number{display:block;font-size:14px;letter-spacing:2px;font-weight:700;color:#D4A03C;margin-bottom:34px}
.coverage-card h3{font-size:21px;color:#1B2A4A;margin-bottom:14px}
.coverage-card p:not(.eyebrow){font-size:15px;color:#555}
.coverage-card-home{background:#FAF7F2}
.coverage-card-province{background:#FFFFFF}
.coverage-card-beyond{background:#1E1E1E}
.coverage-card-beyond h3{color:#FFFFFF}
.coverage-card-beyond p:not(.eyebrow){color:#D8D3CC}
@media(max-width:768px){
  .sk-hero{min-height:470px}
  .sk-hero-content{padding:72px 24px}
  .sk-hero-content > p:not(.eyebrow){font-size:18px}
  .service-area-intro{grid-template-columns:1fr;gap:38px}
  .coverage-grid{grid-template-columns:1fr}
  .coverage-card{min-height:auto}
}

/* === AREA GROUPS === */
.area-group{margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid #E0DCD6}
.area-group:last-child{border-bottom:none}
.area-group h3{font-size:20px;margin-bottom:10px;color:#1B2A4A}
.area-group p{font-size:16px;color:#555}

/* === FOCUS STATES === */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #D4A03C;outline-offset:2px}

/* === UTILITY === */
.text-center{text-align:center}
.mb-0{margin-bottom:0}
.mt-24{margin-top:24px}