:root{--paper: #f6f2ec;--paper-2: #efe8dd;--paper-3: #e7ded0;--line: #ddd4c5;--line-2: #cabda6;--ink: #221e1a;--ink-2: #5a5249;--char: #1b1714;--char-2: #241f1a;--char-line: #3a312a;--on-dark: #ece4d8;--on-dark-2: #b7ab9b;--accent: #a8431e;--accent-2: #8a3414;--accent-light: #e2935f;--accent-soft: rgba(168, 67, 30, .09);--on-accent: #fbf6ef;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-6: 24px;--s-8: 32px;--s-12: 48px;--s-16: 64px;--s-24: 96px;--s-32: 128px;--maxw: 1200px;--measure: 65ch;--r: 14px;--r-lg: 22px;--r-pill: 999px;--shadow: 0 1px 2px rgba(34, 30, 26, .05), 0 10px 30px -16px rgba(34, 30, 26, .22);--shadow-lg: 0 30px 70px -30px rgba(34, 30, 26, .4);--ease: cubic-bezier(.22, .61, .36, 1)}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:Open Sans,system-ui,sans-serif;font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}body.nav-locked{overflow:hidden}h1,h2,h3{font-family:Montserrat,system-ui,sans-serif;font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:0;color:var(--ink);text-wrap:balance}p{margin:0}a{color:var(--accent);text-decoration:none}img,svg{display:block}.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;flex:none}.sprite{position:absolute}.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s-6)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:var(--s-3) var(--s-6);border:1px solid transparent;border-radius:var(--r-pill);font-family:Montserrat,sans-serif;font-weight:700;font-size:.9375rem;letter-spacing:.01em;cursor:pointer;transition:transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease)}.btn .ico{width:1.05em;height:1.05em;stroke-width:2}.btn-sm{min-height:44px;padding:var(--s-2) var(--s-4);font-size:.875rem}.btn-block{width:100%}.ico-arrow{transition:transform .25s var(--ease)}.btn:hover .ico-arrow{transform:translate(4px)}.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 24px -12px #a8431eb3}.btn-primary:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 16px 30px -12px #a8431ebf}.btn-ghost{background:#f6f2ec0f;color:var(--on-dark);border-color:#ece4d852;backdrop-filter:blur(4px)}.btn-ghost:hover{background:#f6f2ec24;border-color:#ece4d899;transform:translateY(-2px)}.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-2)}.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);font-family:Montserrat,sans-serif;font-weight:700;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}.eyebrow .ico{width:1.1em;height:1.1em;stroke-width:2}.eyebrow-light{color:var(--accent-light)}.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);border-bottom:1px solid transparent}.site-header.is-scrolled{background:#f6f2ece0;backdrop-filter:saturate(1.4) blur(12px);border-bottom-color:var(--line);box-shadow:0 6px 24px -20px #221e1a99}.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding-block:var(--s-3)}.brand{display:inline-flex;align-items:center;color:inherit}.brand-logo{display:block;height:50px;width:auto;transition:filter .3s var(--ease)}.is-scrolled .brand-logo{filter:invert(1)}.brand-logo-footer{height:46px}.nav{display:flex;align-items:center;gap:var(--s-6)}.nav a{font-family:Montserrat,sans-serif;font-weight:600;font-size:.9375rem;color:var(--on-dark);padding:var(--s-2) 0;position:relative}.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--accent-light);transition:right .3s var(--ease)}.nav a:hover:after{right:0}.is-scrolled .nav a{color:var(--ink)}.is-scrolled .nav a:after{background:var(--accent)}.bar-actions{display:flex;align-items:center;gap:var(--s-3)}.call-btn .ico{stroke-width:2.1}.nav-toggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(236,228,216,.32);border-radius:12px;background:#f6f2ec0f;color:var(--on-dark);cursor:pointer}.is-scrolled .nav-toggle{color:var(--ink);border-color:var(--line-2);background:transparent}.nav-toggle .ico{width:24px;height:24px;stroke-width:2}.nav-toggle .ico-shut{display:none}.hero{position:relative;isolation:isolate;background:linear-gradient(96deg,#14110eeb,#14110ebd 42%,#14110e52 72%,#14110e8c),linear-gradient(180deg,rgba(20,17,14,.55) 0%,transparent 30%,transparent 52%,#15110e 100%),url(/images/csa-roofing-kelowna-home.jpg);background-size:cover;background-position:center right;color:var(--on-dark);padding-top:clamp(120px,18vh,180px);padding-bottom:clamp(140px,22vh,240px);min-height:92vh;display:flex;align-items:center;overflow:hidden}.hero-glow{position:absolute;z-index:-1;top:-16%;right:-6%;width:min(560px,60vw);height:min(560px,60vw);background:radial-gradient(circle,rgba(168,67,30,.22),transparent 64%);filter:blur(26px);mix-blend-mode:screen}.hero-inner{position:relative;z-index:2}.hero-title{font-size:clamp(2.6rem,7.5vw,5.25rem);line-height:1.02;letter-spacing:-.03em;max-width:16ch;color:#fff}.hero-lead{margin-top:var(--s-6);max-width:56ch;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.6;color:var(--on-dark)}.hero-cta{margin-top:var(--s-8);display:flex;flex-wrap:wrap;gap:var(--s-3)}.ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(90px,14vw,180px);z-index:1}.ridge-far{fill:#2a221c}.ridge-near{fill:#15110e}.trust{position:relative;z-index:3;background:var(--paper)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-top:calc(-1 * var(--s-12));padding:var(--s-8);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}.trust-item{display:flex;align-items:flex-start;gap:var(--s-3)}.trust-item>.ico{width:28px;height:28px;color:var(--accent);stroke-width:1.9;margin-top:2px}.trust-item div{display:flex;flex-direction:column}.trust-lead{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.0625rem;color:var(--ink);line-height:1.2}.trust-sub{font-size:.875rem;line-height:1.4;color:var(--ink-2);margin-top:var(--s-1)}.section{padding-block:clamp(72px,11vw,128px)}.section-alt{background:var(--paper-2)}.section-head{max-width:60ch;margin-bottom:var(--s-12)}.section-title{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem)}.section-intro{margin-top:var(--s-6);max-width:62ch;color:var(--ink-2);font-size:1.0625rem;line-height:1.6}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}.card{padding:var(--s-8);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}.section-alt .card{background:var(--paper)}.card:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow-lg)}.card-icon,.reason-icon,.mat-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:15px;background:var(--accent-soft);color:var(--accent);margin-bottom:var(--s-6);transition:background-color .3s var(--ease),color .3s var(--ease)}.card-icon .ico,.reason-icon .ico,.mat-icon .ico{width:27px;height:27px}.card:hover .card-icon{background:var(--accent);color:var(--on-accent)}.card-title{font-size:1.3rem;margin-bottom:var(--s-3)}.card-body{color:var(--ink-2);max-width:42ch}.why-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(var(--s-12),6vw,var(--s-24));align-items:start}.why-intro{position:sticky;top:96px}.why-note{margin-top:var(--s-6);color:var(--ink-2);max-width:46ch}.why-intro .btn{margin-top:var(--s-8)}.reason-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-6)}.reason{display:flex;flex-direction:column;gap:var(--s-3)}.reason-icon{width:50px;height:50px;margin-bottom:var(--s-1)}.reason-icon .ico{width:25px;height:25px}.reason-title{font-size:1.125rem}.reason-body{color:var(--ink-2);font-size:.96875rem}.promise{background:linear-gradient(94deg,#14110ef0,#14110ed1 44%,#14110e75),url(/images/csa-roofing-installation.jpg);background-size:cover;background-position:center 38%;color:var(--on-dark);padding-block:clamp(96px,16vw,176px)}.promise-inner{max-width:70ch}.promise-quote{margin:var(--s-12) 0 0;font-family:Montserrat,sans-serif;font-weight:700;font-size:clamp(1.5rem,1.1rem + 2vw,2.4rem);line-height:1.28;letter-spacing:-.015em;color:#fff;position:relative}.promise-quote:before{content:"“";position:absolute;left:-.04em;top:-.46em;font-size:2.8em;line-height:1;color:var(--accent);opacity:.5;pointer-events:none}.promise-by{margin-top:var(--s-6);font-family:Montserrat,sans-serif;font-weight:600;letter-spacing:.04em;color:var(--on-dark-2)}.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);counter-reset:step}.step{position:relative;padding-top:var(--s-8);border-top:2px solid var(--line)}.step-n{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:1.0625rem;letter-spacing:.1em;color:var(--accent);margin-bottom:var(--s-3)}.step-title{font-size:1.2rem;margin-bottom:var(--s-2)}.step-body{color:var(--ink-2);font-size:.96875rem}.craft{margin-top:var(--s-12);display:flex;gap:var(--s-6);align-items:flex-start;padding:var(--s-8);background:var(--char);color:var(--on-dark);border-radius:var(--r-lg);box-shadow:var(--shadow)}.craft-icon{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:15px;background:#e2935f29;color:var(--accent-light)}.craft-icon .ico{width:28px;height:28px}.craft-title{color:#fff;font-size:1.3rem;margin-bottom:var(--s-2)}.craft-text p{color:var(--on-dark-2);max-width:68ch}.mat-feature{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(var(--s-8),5vw,var(--s-16));align-items:center;margin-bottom:var(--s-16)}.mat-feature .section-head{margin-bottom:0;max-width:46ch}.mat-feature-media{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}.mat-feature-media img{width:100%;height:100%;aspect-ratio:4 / 3;object-fit:cover;display:block}.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}.mat{padding:var(--s-8);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);border-top:3px solid var(--accent);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}.mat:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}.mat-title{font-size:1.2rem;margin-bottom:var(--s-3)}.mat-body{color:var(--ink-2)}.area-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--s-12),6vw,var(--s-24));align-items:center}.area-call{margin-top:var(--s-6);color:var(--ink-2)}.area-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}.area-chips li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-6);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);font-family:Montserrat,sans-serif;font-weight:700;font-size:1.0625rem}.area-chips .ico{width:20px;height:20px;color:var(--accent);stroke-width:2}.area-more{grid-column:1 / -1;justify-content:center;font-weight:600!important;font-style:normal;color:var(--ink-2);background:transparent!important;border-style:dashed!important}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}.review{display:flex;flex-direction:column;gap:var(--s-4);margin:0;padding:var(--s-8);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}.review:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow-lg)}.review-stars{display:inline-flex;gap:3px;color:var(--accent)}.review-stars .ico{width:18px;height:18px}.review-quote{margin:0;color:var(--ink);font-size:1.0625rem;line-height:1.6}.review-by{display:flex;align-items:center;gap:var(--s-3);margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--line)}.review-avatar{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:Montserrat,sans-serif;font-weight:800;font-size:.875rem;letter-spacing:.02em}.review-id{display:flex;flex-direction:column;line-height:1.3}.review-name{font-family:Montserrat,sans-serif;font-weight:700;font-size:.9375rem;color:var(--ink)}.review-loc{font-size:.8125rem;color:var(--ink-2)}.review-cta{margin-top:var(--s-12);text-align:center;color:var(--ink-2)}.review-cta a{font-weight:700}.contact{position:relative;isolation:isolate;background:radial-gradient(80% 120% at 90% 0%,#2c241d 0%,transparent 55%),var(--char);color:var(--on-dark);padding-block:clamp(72px,11vw,128px);overflow:hidden}.contact-glow{position:absolute;z-index:-1;left:-10%;bottom:-30%;width:min(560px,80vw);height:min(560px,80vw);background:radial-gradient(circle,rgba(168,67,30,.3),transparent 62%);filter:blur(16px)}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--s-12),6vw,var(--s-24));align-items:start}.contact-title{color:#fff;font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem)}.contact-lead{margin-top:var(--s-6);max-width:46ch;color:var(--on-dark)}.contact-list{list-style:none;margin:var(--s-12) 0 0;padding:0;display:grid;gap:var(--s-6)}.contact-list li{display:flex;align-items:center;gap:var(--s-4)}.ci-ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:13px;background:#e2935f24;color:var(--accent-light)}.ci-ico .ico{width:22px;height:22px}.ci-text{display:flex;flex-direction:column;line-height:1.3}.ci-label{font-family:Montserrat,sans-serif;font-weight:700;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}.ci-value{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.0625rem;color:var(--on-dark)}a.ci-value:hover{color:var(--accent-light)}.form-card{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:clamp(var(--s-6),3vw,var(--s-12));box-shadow:var(--shadow-lg)}.field{display:flex;flex-direction:column;margin-bottom:var(--s-4)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}.field label{font-family:Montserrat,sans-serif;font-weight:700;font-size:.8125rem;letter-spacing:.02em;margin-bottom:var(--s-2);color:var(--ink)}.optional{font-weight:600;color:var(--ink-2);letter-spacing:0}.field input,.field select,.field textarea{font-family:Open Sans,sans-serif;font-size:1rem;color:var(--ink);background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);padding:var(--s-3) var(--s-4);min-height:48px;width:100%;transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)}.field textarea{min-height:96px;resize:vertical;line-height:1.5}.field input::placeholder,.field textarea::placeholder{color:#978c7d}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--paper);box-shadow:0 0 0 3px var(--accent-soft)}.select-wrap{position:relative}.select-wrap select{appearance:none;padding-right:var(--s-12);cursor:pointer}.select-arrow{position:absolute;right:var(--s-4);top:50%;transform:translateY(-50%) rotate(90deg);width:18px;height:18px;color:var(--ink-2);pointer-events:none;stroke-width:2.2}.form-card .btn-block{margin-top:var(--s-2)}.form-note{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);background:var(--accent-soft);border-radius:var(--r);color:var(--ink);font-size:.9375rem}.form-fine{margin-top:var(--s-4);text-align:center;font-size:.8125rem;color:var(--ink-2)}.site-footer{background:var(--char-2);color:var(--on-dark-2);padding-top:var(--s-16)}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:var(--s-12);padding-bottom:var(--s-12)}.footer-tag{margin-top:var(--s-4);max-width:42ch;line-height:1.6}.footer-h{font-family:Montserrat,sans-serif;font-weight:700;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark);margin:0 0 var(--s-4)}.footer-nav{display:flex;flex-direction:column;gap:var(--s-3)}.footer-nav a,.footer-line{color:var(--on-dark-2);font-size:.9375rem;transition:color .2s var(--ease)}.footer-nav a:hover,a.footer-line:hover{color:var(--accent-light)}.footer-contact{display:flex;flex-direction:column;gap:var(--s-3)}.footer-line{display:inline-flex;align-items:center;gap:var(--s-3)}.footer-line .ico{width:18px;height:18px;color:var(--accent-light);flex:none}.footer-base{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-3);padding-block:var(--s-6);border-top:1px solid var(--char-line);font-size:.875rem}.footer-base p{margin:0}.footer-badge{display:inline-flex;align-items:center;gap:var(--s-2)}.footer-badge .ico{width:18px;height:18px;color:var(--accent-light)}@keyframes rise{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}.load{opacity:0;animation:rise .8s var(--ease) forwards;animation-delay:var(--d, 0ms)}.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d, 0ms)}.reveal.is-visible{opacity:1;transform:none}@media(max-width:1024px){.why-layout,.area-layout,.contact-layout{grid-template-columns:1fr}.why-intro{position:static}.mat-feature{grid-template-columns:1fr;gap:var(--s-8);margin-bottom:var(--s-12)}.mat-feature-media img{aspect-ratio:16 / 9}.card-grid,.mat-grid,.review-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-6)}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1 / -1}}@media(max-width:768px){.nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:var(--s-2) var(--s-6) var(--s-6);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}.nav.is-open{opacity:1;transform:none;visibility:visible}.nav a{color:var(--ink);padding:var(--s-4) 0;border-bottom:1px solid var(--line);min-height:44px}.nav a:after{display:none}.nav-toggle{display:inline-flex}.nav.is-open~.nav-toggle .ico-open{display:none}.call-btn span{display:none}.call-btn{padding:0;width:44px;min-height:44px}.call-btn .ico{width:20px;height:20px}.brand-logo{height:40px}.hero{min-height:80vh;padding-top:clamp(104px,16vh,132px);padding-bottom:clamp(96px,16vh,140px);background:linear-gradient(180deg,#14110e9e,#14110ead 50%,#14110ed1 82%,#15110e),url(/images/csa-roofing-kelowna-home.jpg);background-size:cover;background-position:62% center}.hero-title{font-size:clamp(2.4rem,11vw,3.4rem)}.promise{background:linear-gradient(180deg,#14110ed1,#14110ebd 55%,#14110edb),url(/images/csa-roofing-installation.jpg);background-size:cover;background-position:center}.trust-grid{grid-template-columns:1fr 1fr;gap:var(--s-6);padding:var(--s-6);margin-top:calc(-1 * var(--s-8))}.card-grid,.mat-grid,.reason-list,.area-chips,.review-grid,.steps,.field-row{grid-template-columns:1fr}.craft{flex-direction:column}.footer-grid{grid-template-columns:1fr;gap:var(--s-8)}.footer-base{justify-content:flex-start}}@media(max-width:768px){.nav-toggle[aria-expanded=true] .ico-open{display:none}.nav-toggle[aria-expanded=true] .ico-shut{display:block}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}.load,.reveal{opacity:1!important;transform:none!important}}