/* Strata Roofing - strataroofing.ca */
:root{
  --navy:#0b2545;
  --navy-2:#13315c;
  --accent:#d62828;
  --accent-2:#a31d1d;
  --bg:#ffffff;
  --bg-soft:#f4f6fa;
  --text:#1b1f23;
  --muted:#5a6473;
  --border:#e3e7ee;
  --radius:10px;
  --shadow:0 6px 24px rgba(11,37,69,.08);
  --maxw:1140px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;color:var(--navy);line-height:1.2;margin:0 0 .6em}
h1{font-size:2.4rem}
h2{font-size:1.9rem}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Top bar */
.topbar{background:var(--navy);color:#dfe6f1;font-size:.9rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;flex-wrap:wrap;gap:8px}
.topbar a{color:#fff}
.topbar a:hover{color:#ffd6d6}

/* Header */
.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.site-header .container{display:flex;justify-content:space-between;align-items:center;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:1.4rem;color:var(--navy);font-weight:700}
.brand .mark{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--navy),var(--accent));display:inline-block}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px}
nav a{font-weight:600;color:var(--navy)}
nav a.cta{background:var(--accent);color:#fff;padding:9px 16px;border-radius:6px}
nav a.cta:hover{background:var(--accent-2);color:#fff}

/* Buttons */
.btn{display:inline-block;padding:13px 22px;border-radius:6px;font-weight:700;text-align:center;cursor:pointer;border:none;font-size:1rem;transition:transform .1s ease,background .2s ease}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2);color:#fff;transform:translateY(-1px)}
.btn-secondary{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn-secondary:hover{background:var(--navy);color:#fff}

/* Hero */
.hero{position:relative;color:#fff;min-height:520px;display:flex;align-items:center;overflow:hidden}
.hero .hero-image{position:absolute;inset:0;z-index:0}
.hero .hero-image img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,37,69,.85),rgba(19,49,92,.55));z-index:1}
.hero .container{position:relative;z-index:2;padding:80px 20px}
.hero h1{color:#fff;font-size:3rem;max-width:780px}
.hero p.lead{font-size:1.2rem;max-width:680px;color:#e8eef8}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}

/* Sections */
section{padding:70px 0}
.section-alt{background:var(--bg-soft)}
.section-title{text-align:center;margin-bottom:40px}
.section-title h2{margin-bottom:8px}
.section-title p{color:var(--muted);max-width:680px;margin:0 auto}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat{background:#fff;padding:28px 16px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
.stat .num{font-family:Georgia,serif;font-size:2.4rem;color:var(--accent);font-weight:700;display:block}
.stat .label{color:var(--muted);font-size:.95rem;margin-top:4px;display:block}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:transform .15s ease,box-shadow .15s ease}
.service:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.service .icon{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--navy),var(--accent));margin-bottom:14px}
.service h3{margin-bottom:8px}
.service p{color:var(--muted);margin:0}

/* Why us */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.why .item{display:flex;gap:14px;align-items:flex-start;background:#fff;padding:20px;border-radius:var(--radius);border:1px solid var(--border)}
.why .check{flex:0 0 28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-top:2px}

/* CTA banner */
.cta-banner{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;text-align:center;padding:60px 20px}
.cta-banner h2{color:#fff}
.cta-banner p{color:#dfe6f1;max-width:640px;margin:0 auto 22px}

/* Contact form */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-info p{margin:.4em 0}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form label{display:block;font-weight:600;margin:14px 0 6px;color:var(--navy)}
form input,form textarea,form select{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font:inherit;background:#fff;
}
form input:focus,form textarea:focus,form select:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
form button{margin-top:18px;width:100%}

/* Footer */
.site-footer{background:#0a1f3d;color:#cfd6e1;padding:50px 0 20px;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:30px}
.site-footer h4{color:#fff;font-family:inherit;font-size:1rem;margin-bottom:14px;text-transform:uppercase;letter-spacing:.05em}
.site-footer a{color:#cfd6e1}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:8px}
.copyright{border-top:1px solid #1b3257;padding-top:16px;text-align:center;color:#8693a8;font-size:.85rem}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.blog-card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy),var(--accent))}
.blog-card .body{padding:20px;display:flex;flex-direction:column;flex:1}
.blog-card h3{font-size:1.15rem;margin-bottom:8px}
.blog-card .meta{color:var(--muted);font-size:.85rem;margin-bottom:8px}
.blog-card p{color:var(--muted);flex:1}
.blog-card .read-more{font-weight:700;color:var(--accent);margin-top:10px}

/* Blog post */
.blog-hero{position:relative;color:#fff;min-height:420px;display:flex;align-items:flex-end;overflow:hidden}
.blog-hero-image{position:absolute;inset:0}
.blog-hero-image img{width:100%;height:100%;object-fit:cover}
.blog-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,.3),rgba(11,37,69,.85));z-index:1}
.blog-hero .container{position:relative;z-index:2;padding:60px 20px}
.blog-hero h1{color:#fff;max-width:820px}
.blog-hero .meta{color:#dfe6f1}
.post-body{max-width:780px;margin:0 auto;padding:50px 20px;font-size:1.07rem}
.post-body h2{margin-top:1.6em}
.post-body h3{margin-top:1.4em}
.post-body ul{padding-left:22px}
.post-body li{margin-bottom:6px}
.callout{background:var(--bg-soft);border-left:4px solid var(--accent);padding:18px 22px;border-radius:6px;margin:24px 0}
.related{background:var(--bg-soft);padding:50px 0}

/* Breadcrumbs */
.crumbs{font-size:.9rem;color:var(--muted);padding:18px 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}

/* Responsive */
@media (max-width: 900px){
  h1{font-size:2rem}
  .hero h1{font-size:2.2rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .services,.blog-grid{grid-template-columns:1fr 1fr}
  .why,.contact-grid,.footer-grid{grid-template-columns:1fr}
  nav ul{gap:14px}
  nav a:not(.cta){display:none}
  form .row{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .services,.blog-grid,.stats{grid-template-columns:1fr}
  .hero{min-height:440px}
  .hero .container{padding:60px 20px}
  section{padding:50px 0}
}

/* Page hero (smaller than homepage hero) */
.page-hero{position:relative;color:#fff;min-height:300px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy-2))}
.page-hero-image{position:absolute;inset:0;z-index:0}
.page-hero-image img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,37,69,.85),rgba(19,49,92,.6));z-index:1}
.page-hero .container{position:relative;z-index:2;padding:60px 20px}
.page-hero h1{color:#fff;font-size:2.6rem;margin-bottom:8px}
.page-hero .lead{color:#dfe6f1;font-size:1.15rem;max-width:680px;margin:0}
.page-hero-sm{min-height:220px}
.page-hero-sm .container{padding:50px 20px}

/* Service block (services page) */
.service-block{max-width:820px;margin:0 auto 50px;padding-bottom:30px;border-bottom:1px solid var(--border)}
.service-block:last-child{border-bottom:none}
.service-block h2{color:var(--navy);margin-bottom:14px}
.service-block ul{padding-left:22px;color:var(--muted)}
.service-block li{margin-bottom:6px}

/* Active nav */
nav a.active{color:var(--accent)}
nav a.active.cta{color:#fff}

/* 4-column blog grid */
.blog-grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.blog-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.blog-grid-4{grid-template-columns:1fr}}