:root {
 --background: oklch(0.994 0.003 145); --foreground: oklch(0.27 0.036 162); --card: oklch(1 0 0);
 --primary: oklch(0.37 0.067 163); --primary-foreground: oklch(0.99 0.004 145);
 --secondary: oklch(0.96 0.012 145); --muted-foreground: oklch(0.52 0.014 158);
 --border: oklch(0.9 0.013 145); --destructive: oklch(0.58 0.2 25); --hero-foreground: oklch(0.99 0.003 145);
 --hero-overlay: oklch(0.15 0.02 154); --fresh-light: oklch(0.8 0.077 139); --note-background: oklch(0.975 0.01 145);
 --font-heading: 'Manrope', sans-serif; --font-body: 'DM Sans', sans-serif;
}
* { border-color: var(--border); box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; } button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; } button { font-family: inherit; }
h1,h2,h3,p { margin: 0; } h1,h2,h3 { font-family: var(--font-heading); letter-spacing: 0; }
.page-width { max-width: 1240px; margin-inline: auto; padding-inline: 48px; }
.site-header { background: var(--background); position: relative; z-index: 20; }
.header-inner { min-height: 94px; display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-family: var(--font-heading); font-weight: 800; font-size: 31px; }
.brand > svg { width: 38px; height: 31px; } .brand-dot { color: var(--primary); }
.desktop-nav { display: flex; gap: 28px; align-items: center; } .desktop-nav a { font-size: 13px; color: var(--muted-foreground); position: relative; padding-block: 8px; } .desktop-nav a:hover,.desktop-nav a.active { color: var(--primary); } .desktop-nav .active:after { content: ''; position: absolute; bottom: 0; left: 0; width: 17px; height: 2px; background: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 22px; } .header-phone { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--foreground); font-weight: 600; white-space: nowrap; }
.mobile-menu-button { display: none; } .mobile-nav { padding: 8px 24px 20px; border-top: 1px solid var(--border); } .mobile-nav a { display: flex; justify-content: space-between; padding: 12px 0; color: var(--primary); }
.hero { position: relative; color: var(--hero-foreground); height: min(680px, 75vh); min-height: 550px; overflow: hidden; }
.hero-photo,.hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-photo { object-position: center 57%; }
.hero-shade { background: linear-gradient(90deg, color-mix(in oklch, var(--hero-overlay) 72%, transparent) 0%,color-mix(in oklch, var(--hero-overlay) 36%, transparent) 50%, color-mix(in oklch, var(--hero-overlay) 3%, transparent) 100%); }
.hero-inner { height: 100%; position: relative; display: flex; align-items: center; }
.hero-content { padding-bottom: 38px; animation: appear 800ms ease-out both; max-width: 620px; }
.eyebrow { color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; display: inline-flex; align-items: center; gap: 11px; }
.hero-eyebrow { color: var(--hero-foreground); font-size: 10px; } .small-line { width: 23px; height: 1px; background: currentColor; }
.hero h1 { font-size: 64px; line-height: 1.1; font-weight: 650; margin-top: 20px; }
.hero h1 > span { display: block; font-size: 49px; font-weight: 500; line-height: 1.22; margin-top: 10px; }
.hero-content > p { font-size: 15px; line-height: 1.8; margin-top: 22px; color: color-mix(in oklch, var(--hero-foreground) 84%, transparent); }
.hero-buttons { display: flex; gap: 12px; margin-top: 30px; } .hero-buttons > :first-child { background: var(--hero-foreground); color: var(--primary); } .hero-buttons > :first-child:hover { background: var(--secondary); }
.hero-reassurance { display: flex; gap: 8px; align-items: center; font-size: 11px; margin-top: 28px; color: color-mix(in oklch, var(--hero-foreground) 84%, transparent); } .hero-reassurance > span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin-inline: 5px; }
.hero-scroll { position: absolute; bottom: 29px; left: 48px; display: flex; gap: 17px; align-items: center; color: var(--hero-foreground); font-size: 8px; letter-spacing: 1.5px; }
.hero-caption { position: absolute; right: 48px; bottom: 28px; display: flex; gap: 12px; align-items: center; font-size: 12px; line-height: 1.6; } .hero-caption strong { font-weight: 500; }
.benefits-band { background: var(--secondary); border-bottom: 1px solid var(--border); }
.benefits-inner { display: grid; grid-template-columns: repeat(4,1fr); min-height: 83px; align-items: center; gap: 16px; } .benefits-inner > div { display: flex; gap: 12px; align-items: center; font-size: 11px; font-weight: 500; } .benefits-inner svg { width: 21px; height: 21px; stroke-width: 1.4; color: var(--primary); }
.coverage-section { padding-block: 44px 0; }
.coverage-panel { display: flex; align-items: center; gap: 34px; background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 25px 30px; }
.coverage-item { display: flex; align-items: center; gap: 15px; } .coverage-item > svg { width: 27px; height: 27px; stroke-width: 1.4; color: var(--primary); flex-shrink: 0; } .coverage-item + .coverage-item { padding-left: 34px; border-left: 1px solid var(--border); }
.coverage-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; color: var(--muted-foreground); }
.coverage-value { display: block; font-family: var(--font-heading); font-size: 16px; font-weight: 650; margin-top: 5px; }
.coverage-cta { margin-left: auto; padding: 0; font-size: 11px; white-space: nowrap; }
.contact-actions > .contact-meta { font-size: 11px; opacity: .7; margin-top: 7px; }
.services-section { padding-top: 82px; padding-bottom: 86px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; } h2 { font-size: 34px; line-height: 1.3; font-weight: 600; } .section-heading h2 { margin-top: 13px; } .section-heading > p { color: var(--muted-foreground); font-size: 13px; line-height: 1.8; padding-bottom: 3px; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.service-card { background: var(--card); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.service-photo-wrap { aspect-ratio: 1.55; position: relative; overflow: hidden; } .service-photo-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms; } .service-card:hover .service-photo-wrap img { transform: scale(1.035); }
.service-index { position: absolute; top: 15px; left: 16px; font-size: 11px; background: var(--background); color: var(--primary); border-radius: 50%; width: 29px; height: 29px; display: grid; place-items: center; }
.service-icon { position: absolute; bottom: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; background: var(--background); color: var(--primary); border-radius: 50%; }
.service-content { padding: 24px; } .service-label { font-size: 10px; color: var(--muted-foreground); } .service-content h3 { font-size: 20px; font-weight: 650; margin-top: 8px; } .service-content > p { font-size: 12px; color: var(--muted-foreground); line-height: 1.85; margin-top: 12px; min-height: 88px; } .service-content ul { list-style: none; padding: 0; margin: 18px 0; } .service-content li { display: flex; gap: 8px; align-items: center; font-size: 11px; margin-top: 8px; } .service-content li svg { color: var(--primary); } .service-link { padding: 0; font-size: 11px; width: 100%; justify-content: space-between; border-top: 1px solid var(--border); border-radius: 0; padding-top: 15px; height: auto; margin-top: 5px; }
.about-section { background: var(--secondary); padding-block: 75px; } .about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; } .about-photo { position: relative; } .about-photo > img { width: 100%; height: 390px; object-fit: cover; object-position: 67% center; border-radius: 5px; } .photo-note { position: absolute; right: -20px; bottom: 26px; display: flex; align-items: center; gap: 14px; background: var(--note-background); padding: 20px 25px; color: var(--primary); font-size: 13px; line-height: 1.6; border: 1px solid var(--border); border-radius: 4px; } .photo-note strong { font-weight: 650; }
.about-copy h2 { margin-top: 17px; font-size: 31px; } .about-copy > p { margin-top: 20px; font-size: 13px; line-height: 1.85; color: var(--muted-foreground); } .about-signoff { display: flex; align-items: center; gap: 12px; margin-top: 25px; color: var(--primary); font-size: 14px; font-weight: 600; }
.process-section { padding-block: 78px; } .process-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; margin-top: 44px; } .process-step { border-top: 1px solid var(--border); padding-top: 23px; } .process-step > span { font-size: 12px; color: var(--primary); } .process-step h3 { font-size: 18px; font-weight: 600; margin-top: 20px; } .process-step p { font-size: 12px; line-height: 1.85; color: var(--muted-foreground); margin-top: 12px; max-width: 290px; }
.contact-section { background: var(--primary); color: var(--primary-foreground); padding-block: 65px; } .contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .contact-section .eyebrow { color: var(--fresh-light); } .contact-section h2 { font-size: 39px; margin-top: 17px; } .contact-section p { font-size: 13px; margin-top: 18px; opacity: .8; } .contact-actions { display: flex; flex-direction: column; align-items: start; } .contact-number { color: var(--primary-foreground); font-size: 30px; font-family: var(--font-heading); font-weight: 550; display: flex; align-items: center; gap: 16px; } .contact-actions > span { font-size: 12px; opacity: .75; margin-top: 10px; } .contact-actions > div { display: flex; gap: 12px; margin-top: 25px; } .contact-actions > div > :first-child { background: var(--primary-foreground); color: var(--primary); } .contact-actions > div > :last-child { background: transparent; color: var(--primary-foreground); border-color: color-mix(in oklch, var(--primary-foreground) 40%, transparent); border-radius: 50px; }
.site-footer { padding-top: 45px; } .footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 32px; } .footer-top .brand { font-size: 28px; } .footer-top p { color: var(--muted-foreground); font-size: 11px; margin-top: 12px; } .footer-top nav { display: flex; gap: 30px; } .footer-top nav a { font-size: 12px; color: var(--foreground); display: inline-flex; align-items: center; gap: 5px; } .footer-bottom { border-top: 1px solid var(--border); padding-block: 23px; display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-foreground); }
.quote-dialog { border-radius: 8px; } .quote-dialog h2 { font-size: 25px; line-height: 1.4; } .quote-form { display: grid; gap: 17px; margin-top: 6px; } .quote-form label { font-size: 12px; font-weight: 600; display: grid; gap: 7px; } .quote-form input,.quote-form select,.quote-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 5px; padding: 11px 12px; font-size: 13px; font-family: inherit; background: var(--background); color: var(--foreground); outline-color: var(--primary); } .quote-form > p { font-size: 11px; text-align: center; color: var(--muted-foreground); } .quote-form > p a { color: var(--primary); text-decoration: underline; }
@keyframes appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media(min-width:1500px) { .page-width { max-width: 1400px; } .hero { height: 700px; } }
@media(max-width:1100px) { .page-width { padding-inline: 32px; } .desktop-nav { gap: 18px; } .header-phone { display: none; } .hero-scroll { left: 32px; } .hero-caption { right: 32px; } .benefits-inner > div { font-size: 10px; gap: 8px; } .about-inner { gap: 45px; } .service-content { padding: 20px; } .service-content h3 { font-size: 18px; } }
@media(max-width:760px) { .page-width { padding-inline: 24px; } .header-inner { min-height: 77px; gap: 12px; } .brand { font-size: 27px; } .brand > svg { width: 32px; height: 27px; } .desktop-nav { display: none; } .header-actions { gap: 9px; } .header-actions > button:first-of-type { font-size: 11px; padding-inline: 13px; height: 35px; } .mobile-menu-button { display: inline-flex; } .hero { height: 650px; min-height: 570px; max-height: 83vh; } .hero-photo { object-position: 59% center; } .hero-shade { background: linear-gradient(90deg, color-mix(in oklch, var(--hero-overlay) 78%, transparent),color-mix(in oklch, var(--hero-overlay) 32%, transparent)); } .hero-content { padding-bottom: 32px; } .hero h1 { font-size: 50px; } .hero h1 > span { font-size: 36px; margin-top: 14px; } .hero-content > p { font-size: 14px; max-width: 310px; } .hero-eyebrow { font-size: 8px; letter-spacing: 1.3px; } .hero-buttons { flex-direction: column; align-items: start; margin-top: 25px; gap: 11px; } .hero-buttons > * { height: 45px; min-width: 222px; justify-content: space-between; } .hero-reassurance { font-size: 10px; margin-top: 22px; } .hero-scroll { left: 24px; bottom: 23px; font-size: 7px; } .hero-caption { display: none; } .benefits-inner { grid-template-columns: 1fr 1fr; gap: 21px 12px; padding-block: 23px; } .benefits-inner > div { font-size: 10px; } .benefits-inner svg { width: 19px; flex-shrink: 0; } .services-section { padding-block: 52px; } .section-heading { flex-direction: column; align-items: start; gap: 17px; margin-bottom: 27px; } h2 { font-size: 27px; } .section-heading > p { font-size: 13px; } .desktop-break { display: none; } .service-grid { grid-template-columns: 1fr; gap: 24px; } .service-photo-wrap { aspect-ratio: 1.65; } .service-content { padding: 23px; } .service-content h3 { font-size: 22px; } .service-content > p { min-height: 0; font-size: 13px; } .service-content li { font-size: 12px; } .service-link { font-size: 12px; } .about-section { padding-block: 50px; } .about-inner { grid-template-columns: 1fr; gap: 35px; } .about-photo > img { height: 300px; } .photo-note { right: -8px; bottom: 19px; padding: 15px 18px; } .about-copy h2 { font-size: 27px; } .process-section { padding-block: 52px; } .process-grid { grid-template-columns: 1fr; gap: 27px; margin-top: 25px; } .process-step { display: grid; grid-template-columns: 33px 1fr; gap: 10px; padding-top: 22px; } .process-step > span { grid-row: span 2; padding-top: 3px; } .process-step h3 { margin: 0; font-size: 18px; } .process-step p { margin: 0; max-width: none; font-size: 13px; } .contact-section { padding-block: 48px; } .contact-inner { flex-direction: column; align-items: start; gap: 30px; } .contact-section h2 { font-size: 32px; } .contact-number { font-size: 27px; gap: 11px; } .contact-actions > div { gap: 10px; flex-wrap: wrap; } .contact-actions > div > * { padding-inline: 18px; font-size: 12px; } .footer-top { flex-direction: column; align-items: start; gap: 29px; } .footer-top nav { gap: 22px; flex-wrap: wrap; } .footer-bottom { flex-direction: column; gap: 12px; font-size: 9px; } }
@media(max-width:1100px) { .coverage-panel { gap: 22px; padding: 22px 24px; } .coverage-item + .coverage-item { padding-left: 22px; } .coverage-value { font-size: 14px; } }
@media(max-width:760px) { .coverage-section { padding-block: 30px 0; } .coverage-panel { flex-direction: column; align-items: start; gap: 18px; padding: 22px; } .coverage-item + .coverage-item { padding-left: 0; border-left: 0; } .coverage-panel > .coverage-cta { margin-left: 0; width: 100%; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 14px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *, *::before,*::after { animation: none !important; transition: none !important; } }


/* --- buttons, dialog and small utilities for the standalone file --- */
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid transparent;font-family:inherit;background:none;color:inherit;transition:background-color 200ms,color 200ms,border-color 200ms}
.btn>svg{width:16px;height:16px;flex-shrink:0}
.btn-fresh{background:var(--primary);color:var(--primary-foreground);border-radius:50px;height:36px;padding-inline:16px}
.btn-fresh:hover{background:color-mix(in oklch,var(--primary) 90%,transparent)}
.btn-fresh.size-fresh{height:48px;padding-inline:24px}
.btn-glass{border:1px solid color-mix(in oklch,var(--hero-foreground) 40%,transparent);background:color-mix(in oklch,var(--hero-foreground) 5%,transparent);color:var(--hero-foreground);border-radius:50px;height:48px;padding-inline:24px}
.btn-glass:hover{background:color-mix(in oklch,var(--hero-foreground) 15%,transparent)}
.btn-outline{border:1px solid var(--border);background:var(--background);color:var(--foreground);border-radius:6px;height:36px;padding-inline:16px}
.btn-outline.size-fresh{height:48px;padding-inline:24px}
.btn-link{color:var(--primary);height:36px;padding-inline:0;justify-content:flex-start}
.btn-link:hover{text-decoration:underline}
.btn-ghost{border-radius:6px;height:36px;width:36px;padding:0}
.btn-ghost:hover{background:var(--secondary)}
.dialog-overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.8)}
.dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:50;width:calc(100% - 32px);max-width:512px;border:1px solid var(--border);background:var(--background);color:var(--foreground);padding:24px;border-radius:8px;box-shadow:0 20px 40px -12px rgba(0,0,0,.35);max-height:calc(100vh - 48px);overflow:auto}
.dialog-close{position:absolute;right:14px;top:14px;background:none;border:0;cursor:pointer;opacity:.7;color:var(--foreground)}
.dialog-close:hover{opacity:1}
.dialog-close>svg{width:16px;height:16px}
.dialog-header{display:flex;flex-direction:column;gap:6px;padding-right:24px}
.dialog-header h2{font-size:25px;line-height:1.4}
.dialog-header p{font-size:13px;color:var(--muted-foreground);line-height:1.6}


@media(min-width:761px){.service-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.service-card{grid-column:span 2}.service-card.service-wide{grid-column:span 3}.service-wide .service-photo-wrap{aspect-ratio:2.3}}
.contact-number{overflow-wrap:anywhere}
@media(max-width:760px){.contact-number{font-size:19px}}

/* ---- v4 additions ---- */
@media(min-width:761px){.service-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.service-card{grid-column:span 2}.service-card.service-wide{grid-column:span 3}.service-wide .service-photo-wrap{aspect-ratio:2.3}}
.service-illu{width:100%;height:100%;display:block}
.contact-number{overflow-wrap:anywhere}
.btn{min-height:44px}
.linklike{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.field-error{display:block;color:#b3261e;font-size:13px;font-weight:500;margin-top:5px}
.quote-form [aria-invalid="true"]{border-color:#b3261e}
.legal{max-width:760px;padding-block:56px 90px}.legal h1{font-size:clamp(30px,5vw,44px);line-height:1.1;margin-bottom:8px}.legal h2{font-size:21px;margin:34px 0 10px}.legal p,.legal li{line-height:1.7;margin-bottom:10px}.legal ul{padding-left:22px}.legal .updated{color:var(--muted-foreground)}
.legal a,.notfound a:not(.btn){color:var(--primary);text-decoration:underline}
.notfound{text-align:center;padding-block:110px 130px}.notfound h1{font-size:clamp(70px,16vw,150px);line-height:1;color:var(--primary)}.notfound p{margin:14px auto 28px;max-width:44ch}
#cookie-banner{position:fixed;z-index:60;left:16px;right:16px;bottom:16px;max-width:560px;background:var(--primary);color:var(--primary-foreground);border-radius:10px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.3);font-size:14px;line-height:1.55}
#cookie-banner a{color:inherit;text-decoration:underline}#cookie-banner .row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
#cookie-banner button{flex:1;min-height:44px;border-radius:50px;border:2px solid var(--primary-foreground);font:600 14px var(--font-body);cursor:pointer;background:transparent;color:var(--primary-foreground)}
#cookie-banner button.accept{background:var(--primary-foreground);color:var(--primary)}
/* tap targets + readable small text */
.desktop-nav a,.header-phone,.contact-number{display:inline-flex;align-items:center;min-height:44px}
.hero-scroll{padding-block:12px}
.site-footer a,.site-footer .linklike{display:inline-block;padding-block:11px}
.benefits-inner>div{font-size:12.5px}.header-phone{font-size:13px}.service-label{font-size:12px}
.contact-meta,.contact-actions>span{font-size:13px!important}
@media(max-width:760px){.benefits-inner>div{font-size:12px}}
@media(max-width:1100px){.header-phone{display:none}}

.brand{padding-top:0;flex-direction:row;gap:0}
.brand>img.brand-logo{height:68px;width:auto;display:block}
@media(max-width:760px){.brand>img.brand-logo{height:52px}}
@media(min-width:761px){.service-wide .service-photo-wrap{aspect-ratio:1.9}}
.footer-top nav .linklike{font-size:12px;color:var(--foreground);text-decoration:none}