@font-face{font-family:"Kade Serif";src:url(kade-fraunces.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Kade Serif";font-style:italic;src:url(kade-fraunces-italic.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Study Sans";src:url(study-instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--bg:#F3F1EC;--ink:#232427;--muted:#62636A;--accent:#2B2C30;--brass:#B08D57;--brass-light:#D8C29B;--sand:#E7E3DA;--line:rgba(35,36,39,.13);--radius:14px;--font-head:"Kade Serif",Georgia,serif;--font-body:"Study Sans",system-ui,sans-serif;--header-bg:#F3F1EC;--field-bg:#fff;--legend-font:500 30px/1.1 var(--font-head)}

h1,h2,h3{font-family:var(--font-head);font-weight:500;letter-spacing:-.02em;line-height:1.02;font-variation-settings:"SOFT" 100,"opsz" 120}
h1{font-size:clamp(52px,7.6vw,124px)}
h2{font-size:clamp(38px,4.6vw,72px)}
h3{font-size:26px}
h1 em,h2 em{font-style:italic;color:var(--brass);font-weight:400}
.kicker{font:600 13px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:20px}
.lead{font-size:clamp(18px,1.4vw,21px);color:var(--muted);max-width:32em}
.fine{font-size:13px;color:var(--muted);margin-top:16px}
.signature{font:italic 400 42px/1 var(--font-head);color:var(--brass);margin-top:28px}

.kade-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.kade-mark{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--brass-light);display:grid;place-items:center;font:italic 500 22px var(--font-head)}
.kade-brand>span:last-child{font:600 26px/1 var(--font-head);display:flex;flex-direction:column}
.kade-brand small{font:500 12px/1.4 var(--font-body);letter-spacing:.06em;color:var(--muted)}

/* hero */
.kade-hero{position:relative;min-height:calc(100vh - 116px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;isolation:isolate;margin-top:-80px;padding:120px 0 56px}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,22,.4),rgba(20,20,22,.05) 35%,rgba(20,20,22,.8))}
.hero-content{position:relative}
.kade-hero h1{max-width:10em;margin-bottom:22px}
.kade-hero h1 em{color:var(--brass-light)}
.kade-hero .kicker{color:var(--brass-light)}
.kade-hero .lead{color:#e9e6df}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.button.ghost.light{color:#fff}
.owner-chip{position:absolute;right:0;bottom:4px;display:flex;align-items:center;gap:14px;background:rgba(243,241,236,.95);color:var(--ink);border-radius:99px;padding:8px 24px 8px 8px;box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
.owner-chip img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.owner-chip p{font-size:14px;line-height:1.35;color:var(--muted)}.owner-chip b{display:block;color:var(--ink);font:italic 500 17px var(--font-head)}
.site-header:not(.is-scrolled):has(+ main .kade-hero){color:#fff}

/* sections */
.section{padding:clamp(80px,9vw,140px) 0}
.section.tight{padding-top:24px}
.section.dark{background:#1D1E21;color:#F3F1EC}.section.dark p{color:#b4b2ab}.section.dark h2 em{color:var(--brass-light)}.section.dark .kicker{color:var(--brass-light)}
.section-head{margin-bottom:52px;max-width:900px}
.section-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,104px);align-items:center}
.page-hero{padding:clamp(56px,8vw,112px) 0 48px}
.page-hero h1{max-width:12em;margin-bottom:24px}
figure img{width:100%;border-radius:var(--radius);object-fit:cover}

.intro-photo img{aspect-ratio:3/2}
.services{background:var(--sand)}
.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.service-card{text-decoration:none;display:flex;flex-direction:column;gap:14px;background:var(--bg);border-radius:20px;padding:14px 14px 24px;transition:translate .4s,box-shadow .4s;position:relative}
.service-card:hover{translate:0 -6px;box-shadow:0 30px 50px -30px rgba(29,30,33,.5)}
.service-card figure{overflow:hidden;border-radius:12px;aspect-ratio:4/3}
.service-card img,.project img{height:100%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.service-card:hover img,.project:hover img{transform:scale(1.06)}
.service-card h3,.service-card p,.service-card .link{margin-inline:10px}
.service-card p{color:var(--muted)}
.service-card .link{margin-top:auto;align-self:flex-start;color:var(--ink)}

/* before / after */
.compare{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;--pos:50%;box-shadow:0 30px 60px -30px rgba(29,30,33,.5)}
.compare figure{position:absolute;inset:0;margin:0}.compare img{height:100%;border-radius:0}
.compare.is-live .before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare:not(.is-live) .before{display:none}
.compare.is-live::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.4);pointer-events:none}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare input:focus-visible{opacity:.001}.compare:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:4px}
.tag{position:absolute;top:16px;background:rgba(29,30,33,.75);color:#fff;font-size:13px;font-weight:600;padding:6px 12px;border-radius:99px;pointer-events:none}
.tag-before{left:16px}.tag-after{right:16px}
.compare:not(.is-live) .tag-before{display:none}

/* estimator */
.price{background:var(--sand)}
.est-card{background:#fff;border-radius:24px;padding:clamp(24px,3.4vw,40px);box-shadow:0 30px 60px -36px rgba(29,30,33,.45)}
.estimator{display:grid;gap:26px}
.est-k{font:600 14px var(--font-body);margin-bottom:12px;display:flex;justify-content:space-between}
.est-k output{color:var(--brass)}
.est-choices{display:flex;flex-wrap:wrap;gap:8px}
.est-choices button{min-height:48px;padding:0 20px;border-radius:99px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 15px var(--font-body);cursor:pointer;transition:background .2s,color .2s}
.est-choices button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.estimator input[type="range"]{width:100%;accent-color:var(--brass);min-height:32px}
.est-result{background:var(--bg);border-radius:16px;padding:22px}
.est-result p[data-estimate]{font:500 34px/1.1 var(--font-head)}
.est-result p[data-estimate] span{display:block;font:400 14px var(--font-body);color:var(--muted);margin-top:8px}

.steps{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px}
.steps li{border-top:1px solid rgba(243,241,236,.18);padding-top:20px}
.steps span{font:italic 500 22px var(--font-head);color:var(--brass-light)}
.steps h3{margin:8px 0}

.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;perspective:1600px}
.project-grid.all .project{transform-origin:50% 60%;backface-visibility:hidden}
.project{text-decoration:none}
.project figure{overflow:hidden;border-radius:16px;aspect-ratio:4/3;margin-bottom:14px}
.project p{color:var(--muted);font-size:15px;margin-top:6px}
.project[hidden]{display:none}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:32px}
.filter-count{margin-left:auto;color:var(--muted);font-size:15px}
.filters button{min-height:46px;padding:0 20px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--ink);font:600 15px var(--font-body);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff}

.map svg{width:100%;max-width:520px;margin-inline:auto;display:block;overflow:visible}
.map .ring{fill:none;stroke:var(--brass);stroke-width:.3;stroke-dasharray:1 1.2;opacity:.7}
.map .town circle{fill:var(--ink)}.map .town.main circle{fill:var(--brass)}
.map text{font:600 3.2px var(--font-body);fill:var(--ink)}

.service-detail figure{overflow:hidden;border-radius:20px;aspect-ratio:4/3}.service-detail img{height:100%}
.service-detail.flip figure{order:2}
.service-detail h2{margin-bottom:18px}
.checks{margin:26px 0;display:grid;gap:10px}
.checks li{padding-left:32px;position:relative}.checks li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--sand);color:var(--brass);display:grid;place-items:center;font-size:13px;font-weight:700}
.meta-line{color:var(--muted);margin-bottom:28px;font-size:15px}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.values h3{margin-bottom:10px;color:#F3F1EC}
.portrait img,.contact-side img{aspect-ratio:4/5;border-radius:200px 200px 20px 20px}
.wide-photo{height:min(70vh,640px);overflow:hidden}.wide-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}

.quote-band{background:#1D1E21;color:#fff;padding:clamp(56px,7vw,104px) 0}
.quote-band .shell{display:grid;grid-template-columns:260px 1fr;gap:24px 64px;align-items:center}
.quote-band img{aspect-ratio:4/5;border-radius:160px 160px 16px 16px}
.quote-band h2 em{color:var(--brass-light)}.quote-band p{color:#c9c6bf;margin:18px 0 28px;max-width:34em}
.quote-band .actions{display:flex;flex-wrap:wrap;gap:12px}
.quote-band .button{background:var(--brass);color:#1D1E21}.quote-band .button.ghost{background:transparent;color:#fff}

.contact-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;max-width:900px}
.contact-ways li{background:#fff;border-radius:16px;padding:18px 20px;color:var(--muted);font-size:15px}.contact-ways b{display:block;color:var(--ink);font:500 22px var(--font-head);margin-bottom:4px}
.contact-split{align-items:start}
.contact-card{background:#fff;border-radius:24px;padding:clamp(24px,4vw,44px)}
.contact-side figure{max-width:300px;margin-bottom:24px}

.sticky-cta{position:fixed;right:20px;bottom:20px;z-index:35;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:99px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 18px 40px -14px rgba(29,30,33,.7);transition:transform .3s}
.sticky-cta:hover{transform:translateY(-3px)}

.kade-footer{background:#161719;color:#c9c6bf;padding:64px 0 48px}
.kade-footer .shell{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:32px}
.kade-footer h2{font-size:22px;color:#fff;margin-bottom:10px}
.kade-footer .kade-brand{color:#fff;margin-bottom:16px}.kade-footer .kade-brand small{color:#8f8d87}
.kade-footer nav{display:flex;flex-direction:column}.kade-footer nav a{text-decoration:none;padding:6px 0}.kade-footer nav a:hover{color:var(--brass-light)}
.kade-footer .fine{color:#85837d}

@media(max-width:900px){
 .split,.kade-footer .shell{grid-template-columns:1fr}
 .service-cards,.project-grid,.values,.contact-ways{grid-template-columns:1fr 1fr}
 .service-detail.flip figure{order:0}
 .owner-chip{position:static;margin-top:28px;align-self:flex-start;display:inline-flex}
 .quote-band .shell{grid-template-columns:160px 1fr}
 .site-header nav{color:var(--ink)}
}
@media(max-width:600px){.service-cards,.project-grid,.values,.steps,.contact-ways{grid-template-columns:1fr}.section-head.row{flex-direction:column;align-items:flex-start}.quote-band .shell{grid-template-columns:1fr}.quote-band figure{max-width:180px}.sticky-cta{left:20px;justify-content:center}}

/* Antraciet & messing: dark buttons with a brass hairline, brass details throughout. */
.button:not(.ghost){box-shadow:inset 0 -2px 0 var(--brass)}.nav-cta{box-shadow:inset 0 -2px 0 var(--brass)}
.kade-hero .button:not(.ghost){background:var(--brass);color:#1D1E21;box-shadow:none}

/* Slider handle: a round brass grip on the divider */
.compare .handle{position:absolute;top:50%;left:var(--pos);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--brass);color:#1D1E21;display:none;place-items:center;font:700 18px var(--font-body);letter-spacing:-2px;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none}
.compare.is-live .handle{display:grid}
@media(prefers-reduced-motion:no-preference){.compare.is-live.hint .before{transition:clip-path .9s cubic-bezier(.2,.7,.2,1)}.compare.is-live.hint::after,.compare.is-live.hint .handle{transition:left .9s cubic-bezier(.2,.7,.2,1)}}

/* Scroll in 3D. --enter / --exit come from study-kit.js; --i staggers siblings; --rx/--ry add the pointer tilt. */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--brass),var(--brass-light));transform-origin:0 50%;transform:scaleX(var(--page-progress,0));pointer-events:none}

.kade-hero[data-scroll] .hero-media{transform-origin:50% 0;transform:perspective(1400px) rotateX(calc(var(--exit) * -9deg)) scale(calc(1 - var(--exit) * .12));border-radius:calc(var(--exit) * 56px);overflow:hidden}
.kade-hero[data-scroll] .hero-content{transform:translateY(calc(var(--exit) * -140px));opacity:calc(1 - var(--exit) * 1.7)}
.reveal-ready .owner-chip{animation:chip-in 1.1s .9s cubic-bezier(.16,1,.3,1) backwards}
@keyframes chip-in{from{opacity:0;transform:translateY(30px) rotateX(40deg)}}

.service-card[data-scroll],.project[data-scroll]{--e:clamp(0,calc(var(--enter) * 1.35 - var(--i,0) * .12),1);transform-origin:50% 100%;transform:perspective(1400px) translate3d(0,calc((1 - var(--e)) * 110px),calc((1 - var(--e)) * -180px)) rotateX(calc((1 - var(--e)) * 24deg + var(--rx,0deg))) rotateY(var(--ry,0deg));opacity:calc(.12 + var(--e) * .88);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s,translate .4s,box-shadow .4s;will-change:transform}
.service-card[data-tilt]::after,.project[data-tilt] figure::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.service-card[data-tilt]:hover::after,.project[data-tilt]:hover figure::after{opacity:1}
.project figure{position:relative}

figure[data-scroll]{--e:clamp(0,calc(var(--enter) * 1.15),1);clip-path:inset(calc((1 - var(--e)) * 14%) calc((1 - var(--e)) * 9%) round 20px)}
figure[data-scroll] img{transform:scale(calc(1.24 - var(--e) * .24))}
.portrait[data-scroll]{clip-path:inset(calc((1 - var(--e)) * 18%) calc((1 - var(--e)) * 12%) round 200px 200px 20px 20px)}

.compare-tilt[data-scroll]{transform-origin:100% 50%;transform:perspective(1600px) translateZ(calc((1 - var(--enter)) * -140px)) rotateY(calc((1 - var(--enter)) * -20deg)) rotateX(calc((1 - var(--enter)) * 8deg));opacity:calc(.25 + var(--enter) * .75)}

.steps li{position:relative}
.steps[data-scroll] li{--e:clamp(0,calc(var(--enter) * 1.7 - var(--i) * .22),1);opacity:calc(.15 + var(--e) * .85);translate:0 calc((1 - var(--e)) * 36px)}
.steps[data-scroll] li::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--brass-light);transform-origin:0 50%;transform:scaleX(var(--e))}

.wide-photo[data-scroll]{clip-path:inset(0 calc((1 - var(--enter)) * 14%) round calc((1 - var(--enter)) * 40px))}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(56px,7vw,96px);padding-top:32px;border-top:1px solid var(--line)}
.stats div{display:flex;flex-direction:column-reverse;gap:8px}
.stats dt{color:var(--muted);font-size:15px}
.stats dd{margin:0;font:500 clamp(44px,5vw,76px)/1 var(--font-head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stats div:last-child dd{color:var(--brass)}

.map .town circle,.map .ring{transform-box:fill-box;transform-origin:center}
.map .pulse{fill:var(--brass)!important;opacity:0}
.reveal-ready .map .ring{opacity:0;transform:scale(.35) rotate(-60deg);transition:transform 1.6s cubic-bezier(.16,1,.3,1),opacity 1s}
.reveal-ready .map .ring+.ring{transition-delay:.18s}
.reveal-ready .map .town{opacity:0;transform:translateY(5px);transition:opacity .6s,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(.55s + var(--i) * .12s)}
.reveal-ready .map.is-in .ring{opacity:.7;transform:none}
.reveal-ready .map.is-in .town{opacity:1;transform:none}
.reveal-ready .map.is-in .pulse{animation:town-pulse 2.6s 1.4s ease-out infinite}
@keyframes town-pulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(4)}}

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