/* ===== palettes: change variables only (1 = default; ?p=2, ?p=3) ===== */
:root{--c1:#15202b;--c2:#1557d6;--c3:#000000;--c4:#eceff3;--c5:#dde7fb;--c6:#ffffff;--c7:#56616d;--c8:#e5e9ee;--c9:#f0f2f5;--c10:#d5dbe2;--c11:#f7f8fa;--c12:#9aa4af;--c13:#111111;--c14:#cfd4d9}
:root[data-palette="2"]{--c1:#15202b;--c2:#bd000b;--c3:#000000;--c4:#eceff3;--c5:#fae0db;--c6:#ffffff;--c7:#56616d;--c8:#e5e9ee;--c9:#f0f2f5;--c10:#d5dbe2;--c11:#f7f8fa;--c12:#9aa4af;--c13:#111111;--c14:#cfd4d9}
:root[data-palette="3"]{--c1:#15202b;--c2:#0d7837;--c3:#000000;--c4:#eceff3;--c5:#d9eddd;--c6:#ffffff;--c7:#56616d;--c8:#e5e9ee;--c9:#f0f2f5;--c10:#d5dbe2;--c11:#f7f8fa;--c12:#9aa4af;--c13:#111111;--c14:#cfd4d9}
body{margin:0}
.k9{--bg:var(--c4);--ink:var(--c1);--blue:var(--c2);--blue-soft:var(--c5);--card:var(--c6);--muted:var(--c7);--r:28px;
container-type:inline-size;font-family:"Bricolage Grotesque",system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:17px;line-height:1.5}
.k9 *{box-sizing:border-box}
:where(.k9) a{color:inherit}
.k9-head{display:flex;align-items:center;gap:24px;padding:18px 40px}
.k9-logo{font-weight:800;font-size:22px;text-decoration:none;letter-spacing:-.02em}
.k9-nav{display:flex;gap:22px;margin-left:auto}
.k9-nav a{text-decoration:none}
.k9-lang{min-height:44px;display:inline-flex;align-items:center}
.k9-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;padding:40px 40px 88px;align-items:center}
.k9-left{display:flex;flex-direction:column;gap:22px}
.k9-area{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:15px;color:var(--muted)}
.k9 h1{margin:0;font-weight:800;font-size:72px;line-height:.98;letter-spacing:-.035em}
.k9-lede{margin:0;font-size:20px;color:var(--muted);max-width:28em}
.k9-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.k9-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 28px;border-radius:999px;font:700 18px "Bricolage Grotesque",sans-serif;text-decoration:none;cursor:pointer;border:0}
.k9-btn.call{background:var(--ink);color:var(--c6)}
.k9-btn.chat{background:var(--blue);color:var(--c6)}
.k9-chat{background:var(--card);border-radius:var(--r);box-shadow:0 30px 70px color-mix(in srgb,var(--c1) 16.0%,transparent);display:flex;flex-direction:column;overflow:hidden}
.k9-ch{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--c8)}
.k9-av{width:44px;height:44px;border-radius:50%;background:var(--blue);color:var(--c6);display:flex;align-items:center;justify-content:center;font-weight:700}
.k9-ch b{display:block;font-weight:700}
.k9-ch span:not(.k9-av){font-size:14px;color:var(--muted)}
.k9-msgs{display:flex;flex-direction:column;gap:10px;padding:22px}
.k9-b{margin:0;max-width:78%;padding:12px 16px;border-radius:20px;font-size:16px}
.k9-b.them{background:var(--c9);border-bottom-left-radius:6px}
.k9-b.me{background:var(--blue);color:var(--c6);align-self:flex-end;border-bottom-right-radius:6px}
.k9-slots{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 6px}
.k9-slot{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--blue);background:var(--c6);color:var(--blue);font:600 15px "Bricolage Grotesque",sans-serif;cursor:pointer}
.k9-slot.on{background:var(--blue);color:var(--c6)}
.k9-input{margin:16px 22px 22px;min-height:52px;border-radius:999px;border:1.5px solid var(--c10);background:var(--c11);color:var(--muted);font:400 16px "Bricolage Grotesque",sans-serif;text-align:left;padding:0 20px;cursor:text}
.k9-sec{padding:72px 40px}
.k9-h2{margin:0 0 24px;font-weight:800;font-size:46px;line-height:1;letter-spacing:-.03em}
.k9-chips{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.k9-chips .k9-chip{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px 0 14px;border-radius:999px;background:var(--card);text-decoration:none;font-weight:600;font-size:18px}
.k9-chips .k9-chip:hover{background:var(--blue-soft)}
.k9-chips i{width:32px;height:32px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:inline-flex;align-items:center;justify-content:center}
.k9-how{background:var(--card)}
.k9-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.k9-steps li{background:var(--bg);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:12px}
.k9-steps h3{margin:0;font-size:22px;font-weight:700}
.k9-steps p{margin:0;color:var(--muted)}
.k9-mini{display:flex;flex-wrap:wrap;gap:6px;min-height:84px;align-content:flex-start}
.k9-mini .k9-b{font-size:14px;padding:8px 12px;max-width:100%}
.k9-mini .pill{padding:8px 12px;border-radius:999px;background:var(--c6);font-size:14px;font-weight:600;color:var(--blue);border:1.5px solid var(--blue)}
.k9 :focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@container (max-width:760px){
.k9-head{padding:12px 16px;gap:10px}
.k9-nav{display:none}
.k9-lang{margin-left:auto}
.k9 .k9-hcall{display:inline-flex}
.k9-hero{grid-template-columns:1fr;padding:12px 16px 48px;gap:28px}
.k9 h1{font-size:44px}
.k9-lede{font-size:17px}
.k9-btn{width:100%}
.k9-chat{border-radius:22px}
.k9-sec{padding:48px 16px}
.k9-h2{font-size:32px}
.k9-chips .k9-chip{font-size:16px;min-height:50px}
.k9-steps{grid-template-columns:1fr}
}
.k9-hcall{display:none;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--c6)}
.k9-nav a,.k9-logo{display:inline-flex;align-items:center;min-height:44px}
.k9-hphone{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--c6);font-weight:700;text-decoration:none}
.k9 ::selection{background:var(--blue);color:var(--c6)}
@container (max-width:760px){.k9-hphone{display:none}}
.k9 nav a{min-width:44px;justify-content:center}

/* impeccable animate: the hero chat plays itself out, then booking steps answer as they scroll in */
.k9-typing{display:none}
.k9-btn,.k9-slot,.k9-chips .k9-chip,.k9-hphone{transition:transform .12s ease-out,background-color .2s ease-out,box-shadow .2s ease-out}
.k9-btn:active,.k9-slot:active,.k9-chips .k9-chip:active,.k9-hphone:active{transform:scale(.97)}
.k9-chips .k9-chip:hover{box-shadow:0 6px 18px color-mix(in srgb,var(--c1) 8.0%,transparent)}
@media (prefers-reduced-motion:no-preference){
.k9-chat{animation:k9rise .7s cubic-bezier(0.16,1,0.3,1) .15s both}
.k9-msgs>.k9-b:nth-child(1){animation:k9pop .45s cubic-bezier(0.16,1,0.3,1) .7s both}
.k9-msgs>.k9-b:nth-child(2){animation:k9pop .45s cubic-bezier(0.16,1,0.3,1) 1.5s both}
.k9-typing{display:flex;gap:5px;align-items:center;width:64px;height:42px;animation:k9typing 1s linear 2.15s both}
.k9-typing i{width:8px;height:8px;border-radius:50%;background:var(--c12);animation:k9dot .9s ease-in-out infinite}
.k9-typing i:nth-child(2){animation-delay:.15s}.k9-typing i:nth-child(3){animation-delay:.3s}
.k9-msgs>.k9-b:nth-child(4){animation:k9pop .45s cubic-bezier(0.16,1,0.3,1) 3.15s both}
.k9-slot{animation:k9pop .4s cubic-bezier(0.16,1,0.3,1) both}
.k9-slot:nth-child(1){animation-delay:3.6s}.k9-slot:nth-child(2){animation-delay:3.72s}.k9-slot:nth-child(3){animation-delay:3.84s}
.k9-slot.on{animation:k9pop .4s cubic-bezier(0.16,1,0.3,1) 3.6s both,k9ring 1.4s ease-out 4.4s 2}
.k9-input{animation:k9fade .5s ease-out 4s both}
@supports (animation-timeline:view()){
.k9-chips li{animation:k9pop linear both;animation-timeline:view();animation-range:entry 5% entry 60%}
.k9-mini>*{animation:k9pop linear both;animation-timeline:view();animation-range:entry 20% entry 100%}
.k9-mini>*:nth-child(2){animation-range:entry 35% entry 100%}
}
}
@keyframes k9rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes k9pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes k9fade{from{opacity:0}to{opacity:1}}
@keyframes k9dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
@keyframes k9typing{0%{opacity:0;transform:scale(.9)}12%{opacity:1;transform:none}88%{opacity:1;height:42px;padding-top:12px;padding-bottom:12px;margin-bottom:0}100%{opacity:0;height:0;padding-top:0;padding-bottom:0;margin-bottom:-10px}}
@keyframes k9ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c2) 45.0%,transparent)}100%{box-shadow:0 0 0 12px color-mix(in srgb,var(--c2) 0.0%,transparent)}}

.k9{overflow-x:clip}

/* taste skill (v4): hero fit */
@container (min-width:761px){.k9 h1{font-size:60px}}

/* real photos: one shared roofing set from Unsplash (free license), hotlinked per Unsplash guidelines */
[data-photo="crew"]{background:#cfd4d9 url("../img/hero-tech.jpg") 64% 20%/cover no-repeat !important}
[data-photo="tile"]{background:#cfd4d9 url("../img/mini-split.jpg") center/cover no-repeat !important}
[data-photo="metal"]{background:#cfd4d9 url("../img/condenser.jpg") center/cover no-repeat !important}
[data-photo="house"]{background:#cfd4d9 url("https://images.unsplash.com/photo-1561831710-3a8abd9657cf?ixid=M3wxMDE3MjIwfDB8MXxzZWFyY2h8MXx8ZmxvcmlkYSUyMGhvbWUlMjBleHRlcmlvciUyMHBhbG0lMjB0cmVlfGVufDB8MHx8fDE3OTEyMjg0ODV8Mg&ixlib=rb-4.1.0&w=1600&q=70&auto=format&fit=crop") center/cover no-repeat !important}
[data-photo="crew2"]{background:#cfd4d9 url("../img/install.jpg") 50% 35%/cover no-repeat !important}
[data-photo="work"]{background:#cfd4d9 url("../img/gauges.jpg") center/cover no-repeat !important}
[data-photo="house2"]{background:#cfd4d9 url("../img/rooftop.jpg") center/cover no-repeat !important}

/* ===== shared components (v5): use the design's --sx-* tokens ===== */
/* services pattern B/C actions */
.sx-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35em;min-height:44px;padding:0 18px;border:2px solid var(--sx-accent);background:var(--sx-accent);color:var(--sx-accent-ink);font:inherit;font-weight:700;font-size:15px;text-decoration:none;border-radius:var(--sx-r,0);cursor:pointer;white-space:nowrap;transition:transform .12s ease-out,background-color .18s ease-out}
.sx-btn.ghost{background:transparent;color:var(--sx-ink);border-color:var(--sx-line-strong,currentColor)}
.sx-btn:active{transform:translateY(1px) scale(.98)}
.sx-tl{display:flex;flex-wrap:wrap;gap:6px 22px;margin:8px 0 0}
.sx-tl>*{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;font-weight:700;font-size:15px;color:var(--sx-link);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
.sx-tl>*:hover{text-decoration-thickness:3px}
/* pattern A: the whole item is the link (stretched link) */
.sx-a{position:relative}
.sx-a .sx-a-link::after{content:"";position:absolute;inset:0;z-index:1}
.sx-a .sx-a-link{text-decoration:none}
.sx-a:hover .sx-a-link{text-decoration:underline;text-underline-offset:4px}
/* pattern D trigger reset (zero specificity so each design's own card styles win) */
:where(button.sx-open){background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
:where(.k19-pin){background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
/* slide-out panel (native popover, no script) */
.sp{position:fixed;inset:0 0 0 auto;margin:0;width:min(460px,100vw);height:100%;max-height:none;border:0;padding:0;background:var(--sx-panel-bg);color:var(--sx-panel-ink);box-shadow:-24px 0 60px color-mix(in srgb,var(--c3) 28.0%,transparent);overflow:auto;font-family:var(--sx-font,inherit)}
.sp::backdrop{background:color-mix(in srgb,var(--sx-panel-ink) 45%,transparent)}
@media (prefers-reduced-motion:no-preference){.sp{transition:translate .35s cubic-bezier(.16,1,.3,1),display .35s allow-discrete,overlay .35s allow-discrete;translate:0 0}@starting-style{.sp:popover-open{translate:100% 0}}}
.sp-in{padding:28px 28px 40px;display:flex;flex-direction:column;gap:14px}
.sp-x{align-self:flex-end;width:44px;height:44px;border:0;border-radius:50%;background:color-mix(in srgb,var(--sx-panel-ink) 10%,transparent);color:inherit;font-size:24px;line-height:1;cursor:pointer}
.sp-ph{aspect-ratio:16/10;border-radius:var(--sx-r,0)}
.sp h3{margin:0;font-family:var(--sx-font-h,inherit);font-size:30px;line-height:1.1}
.sp p{margin:0;color:var(--sx-panel-muted);font-size:17px;line-height:1.55}
.sp .sx-btn{align-self:flex-start;min-height:52px;padding:0 28px;font-size:17px}
.sp-link{color:var(--sx-panel-link,var(--sx-link));font-weight:700;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}
/* towns: "and N more" + full list */
.sx-more{display:inline;border:0;background:none;padding:0;font:inherit;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}
li>.sx-more{min-height:44px;display:inline-flex;align-items:center}
.sp-towns{inset:50% auto auto 50%;translate:-50% -50%;width:min(420px,92vw);height:auto;max-height:80vh;border-radius:16px;box-shadow:0 30px 80px color-mix(in srgb,var(--c3) 30.0%,transparent)}
@media (prefers-reduced-motion:no-preference){.sp-towns{transition:opacity .2s ease-out,display .2s allow-discrete,overlay .2s allow-discrete;opacity:1}@starting-style{.sp-towns:popover-open{opacity:0;translate:-50% -50%}}}
.sp-towns ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:17px}
/* plain example text (nothing clickable-looking) */
.sx-example{color:var(--sx-muted);font-style:italic}
/* palette switch (sandbox review tool only) */
.sbx-pal{position:fixed;left:12px;bottom:84px;z-index:9999;display:flex;gap:4px;align-items:center;background:#111;color:#fff;font:600 12px/1 system-ui,sans-serif;padding:6px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.3);opacity:.86}
.sbx-pal a{color:#fff;text-decoration:none;min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}
.sbx-pal a[aria-current="true"]{background:var(--c6);color:var(--c13)}
.sbx-pal span{padding:0 6px 0 8px;opacity:.75}

/* design tokens for shared parts */
.k9{--sx-accent:var(--blue);--sx-accent-ink:var(--c6);--sx-ink:var(--ink);--sx-link:var(--blue);--sx-muted:var(--muted);--sx-panel-bg:var(--c6);--sx-panel-ink:var(--ink);--sx-panel-muted:var(--muted);--sx-r:999px}
/* v5 layout fixes */
.k9-hero h1{font-family:"Mona Sans","Bricolage Grotesque",system-ui,sans-serif;font-weight:800;letter-spacing:-.025em;font-stretch:100%}.k9-mini .pill{border:0;background:none;padding:0 2px;color:var(--muted);font-style:italic;font-weight:500}.k9-mini .pill+.pill::before{content:'or ';font-style:italic}@container (min-width:761px){.k9 h1{font-size:clamp(32px,3.906cqi,59px)}}

/* service page (v5) */
.svp{padding:40px var(--svp-pad,40px) 72px;color:var(--sx-ink)}
.svp-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.svp-back{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;font-weight:700;color:var(--sx-link);text-underline-offset:4px}
.svp-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.svp h1{margin:0 0 14px;font-family:var(--sx-font-h,inherit);font-size:clamp(34px,4.2cqi,60px);line-height:1.04;letter-spacing:-.02em}
.svp p{margin:0 0 14px;max-width:38em;color:var(--sx-muted);font-size:18px;line-height:1.6}
.svp .svp-lede{font-size:21px;color:var(--sx-ink)}
.svp-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.svp-acts .sx-btn{min-height:54px;padding:0 26px;font-size:17px}
.svp-ph{aspect-ratio:4/3;border-radius:min(var(--sx-r,0px),24px);background:var(--c14)}
.svp-more h2{font-family:var(--sx-font-h,inherit);font-size:28px;margin:0 0 14px}
.svp-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.svp-more a{min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--sx-link);text-underline-offset:4px}
[class$="-g"]:has(>.svp){grid-template-columns:1fr!important}.k18-g>.svp{grid-column:1/-1}
@container (max-width:760px){.svp{--svp-pad:16px;padding-top:24px}.svp-grid{grid-template-columns:1fr;gap:24px}.svp-ph{order:-1}.svp .svp-lede{font-size:19px}.svp-acts .sx-btn{flex:1 1 100%}}

/* d09 hero chat = a sample that plays out (Paul 2026-10-10): plain chips, first one gets picked, booked reply, real start button */
.k9-slot{cursor:default;display:inline-flex;align-items:center}
.k9-ch{position:relative}
.k9-ex{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--c8);border-radius:999px;padding:3px 10px}
.k9-after{padding-top:12px;padding-bottom:0}
.k9-input.go{background:var(--blue);color:var(--c6);border-color:var(--blue);text-align:center;font-weight:700;cursor:pointer}
.k9-input.go:hover{filter:brightness(1.08)}
@media (prefers-reduced-motion:no-preference){
.k9-slot.on{animation:k9pop .4s cubic-bezier(0.16,1,0.3,1) 3.6s both,k9pick .3s ease-out 4.6s both}
.k9-after>.k9-b:nth-child(1){animation:k9pop .45s cubic-bezier(0.16,1,0.3,1) 5.1s both}
.k9-after>.k9-b:nth-child(2){animation:k9pop .45s cubic-bezier(0.16,1,0.3,1) 6.2s both}
.k9-input.go{animation:k9ring 1.4s ease-out 7s 2}
}
@keyframes k9pick{from{background:var(--c6);color:var(--blue)}to{background:var(--blue);color:var(--c6)}}