@import url("styles.css");
.inner-header{position:sticky;background:var(--ink);color:var(--white)}
.page-main{min-height:70vh}
.page-hero{padding:clamp(104px,9vw,132px) 0 clamp(48px,5vw,68px);background:var(--ink);color:var(--white)}
.page-wrap{width:min(calc(100% - 2 * var(--gutter)),var(--max));margin-inline:auto}
.page-hero .page-wrap{display:block}.page-hero .page-wrap>div{max-width:850px}
.page-hero h1{max-width:18ch;margin:0;font:800 clamp(2.75rem,5.6vw,4.8rem)/1 "Kontur Display",sans-serif;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere}
.page-lead{max-width:68ch;margin:var(--s6) 0 0;font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.55;color:var(--dark-muted)}
.page-hero-visual{position:relative;isolation:isolate;overflow:hidden;background:#11130f}
.page-hero-visual::before{content:"";position:absolute;z-index:-2;inset:0 0 0 68%;background-image:var(--page-image);background-position:center;background-size:cover;filter:saturate(.65) contrast(1.05)}
.page-hero-visual::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#11130f 0 66%,rgba(17,19,15,.55) 82%,rgba(17,19,15,.18))}
.page-visual-caption{margin:36px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.28);color:var(--dark-muted);font-size:12px!important;text-transform:uppercase;letter-spacing:.06em}
.page-meta{margin:20px 0 0;color:#f1b8a5;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.page-hero .button{margin-top:var(--s6)}
.page-hero-action,.service-hero-action{position:relative;z-index:2}
.content{padding:clamp(56px,7vw,92px) 0}
.content>p:first-child,.article-layout>div>p:first-child{font-size:clamp(1.08rem,1.5vw,1.25rem);color:#363a34}
.content h2{margin:clamp(44px,5vw,60px) 0 20px;font-size:clamp(1.85rem,3.3vw,3.35rem)}
.content h2:first-child{margin-top:0}
.content h3{margin:36px 0 12px;font-size:1.45rem}
.content p,.content li{max-width:70ch;font-size:17px;line-height:1.7}
.content li{margin:9px 0}
.content a{font-weight:700;text-underline-offset:4px}
.service-grid,.article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.service-box,.article-card{padding:34px;background:var(--paper);display:flex;flex-direction:column;align-items:flex-start}
.service-box{position:relative;min-height:360px;overflow:hidden}
.service-box img{width:calc(100% + 68px);max-width:none;height:190px;margin:-34px -34px 26px;object-fit:cover;filter:saturate(.7) contrast(1.04)}
.service-box .service-id{position:absolute;top:14px;right:18px;z-index:1;margin:0;color:var(--white);font:800 2rem/1 "Kontur Display",sans-serif;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.service-box>a,.article-card>a{min-height:44px;display:inline-flex;align-items:center;margin-top:auto}
.service-box h2,.article-card h2{margin:0 0 18px;font-size:clamp(1.8rem,3vw,3rem)}
.service-box p,.article-card p{font-size:16px}
.article-card img{width:calc(100% + 68px);max-width:none;height:260px;margin:-34px -34px 28px;object-fit:cover}
.clickable-card{cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}.clickable-card:hover{background:var(--white)}.clickable-card:focus-visible{outline:3px solid var(--rust);outline-offset:-3px}
.price-table{width:100%;border-collapse:collapse;margin:35px 0}
.price-table th,.price-table td{padding:18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.price-table th{font-size:13px;text-transform:uppercase}
.notice{max-width:800px;margin:38px 0;padding:24px;background:var(--paper-deep);border:1px solid var(--line)}
.inner-proof{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-top:0}
.inner-proof p{display:block;margin:0;padding:18px 22px;border-right:1px solid var(--line);font-size:13px}.inner-proof p:last-child{border-right:0}.inner-proof b{display:none}
.reading-progress{position:fixed;z-index:30;left:0;top:0;width:0;height:4px;background:#d05f40}.breadcrumbs{margin:0 0 22px;font-size:14px;color:var(--dark-muted)}.breadcrumbs a{color:inherit}.share-row{display:flex;align-items:center;gap:16px;margin:52px 0 0;padding-top:24px;border-top:1px solid var(--line)}.share-button{min-height:46px;padding:0 18px;border:1px solid var(--ink);background:transparent;font-weight:700;cursor:pointer}.longread-extra{margin-top:54px}.longread-extra h2{font-size:clamp(1.8rem,3vw,3rem)}
.page-contact{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.legal-meta{padding:18px 0;border-block:1px solid var(--line);font-size:14px!important}
.legal-document{position:relative;padding-left:min(28vw,320px)}
.legal-document>p,.legal-document>h2,.legal-document>h3,.legal-document>.notice{max-width:800px}
.document-index{position:absolute;left:0;top:clamp(70px,9vw,120px);width:220px;display:grid;border-top:1px solid var(--line)}
.document-index b{padding:14px 0;color:var(--rust);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.document-index a{min-height:44px;padding:10px 0;display:flex;align-items:center;border-bottom:1px solid var(--line);font-size:14px;text-decoration:none}.document-index a:hover{color:var(--rust-dark)}
.article-layout{display:grid;grid-template-columns:220px 1fr;gap:70px}
.toc{position:sticky;top:100px;align-self:start;margin:0;padding:0;list-style:none}
.toc li{margin:0;border-bottom:1px solid var(--line);font-size:13px}
.toc a{min-height:44px;display:flex;align-items:center;padding:10px 0;text-decoration:none}
.author{margin-top:70px;padding-top:24px;border-top:1px solid var(--line);font-size:14px!important}
.demo-label{display:inline-block;margin:0 0 24px;padding:8px 12px;background:var(--rust-dark);color:var(--white);font-size:13px;font-weight:700}
.services-hero{position:relative;overflow:hidden}
.services-hero::after{content:"";position:absolute;inset:0 0 0 68%;background:url("../../roofing_all_15/04_standing_seam_chimney_detail.webp") center/cover;opacity:.28;mix-blend-mode:luminosity}
.services-hero .page-wrap{position:relative;z-index:1}
.service-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:42px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.25)}
.service-facts div{padding:18px 20px;background:var(--ink)}
.service-facts b{display:block;color:#f1b8a5;font-size:1.15rem}.service-facts span{font-size:13px;color:var(--dark-muted)}
.service-cta{display:flex;justify-content:space-between;align-items:center;gap:28px;max-width:none;margin-top:60px}.service-cta p{margin:6px 0 0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:40px 0;background:var(--line);border:1px solid var(--line)}
.facts div{padding:24px;background:var(--paper)}.facts b{display:block;margin-bottom:8px;font-size:1.35rem}
.faq details{max-width:850px;border-bottom:1px solid var(--line)}.faq summary{padding:20px 0;font-weight:700;cursor:pointer}.faq details p{padding-bottom:20px}
.faq summary{min-height:52px}.faq summary:hover{color:var(--rust-dark)}
.share-button{min-width:44px;border-radius:var(--radius-control);transition:color .2s var(--ease),background-color .2s var(--ease),scale .2s var(--ease)}.share-button:hover{background:var(--ink);color:var(--white)}.share-button:active{scale:.96}
.form-result:not(:empty){padding:12px;background:var(--paper-deep)}
.content>.button:last-child,.article-layout>div>.button:last-child{margin-top:var(--s7)}
.relations{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(56px,7vw,82px);border:1px solid var(--line);background:var(--line)}.relations a{min-height:92px;padding:20px;display:flex;align-items:end;background:var(--paper-deep);border-radius:0;text-decoration:none;transition:background-color .2s var(--ease),color .2s var(--ease)}.relations a:hover{background:var(--white);color:var(--rust-dark)}
@media(max-width:1100px){.inner-header{position:absolute}.inner-header .menu-button{display:block}.inner-header .nav{display:none;position:absolute;z-index:20;top:100%;left:0;right:0;height:calc(100dvh - 68px);padding:0 var(--gutter);background-color:#151714;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto}.inner-header .nav.open{display:flex;background-color:#151714}.inner-header .nav a{min-height:64px;padding:0;flex:0 0 auto;border-bottom:1px solid rgba(255,255,255,.22);background-color:#151714;font-size:20px}.page-contact{grid-template-columns:1fr}.page-hero{padding-top:112px}.page-hero-visual::before{inset:0;opacity:.25}.page-hero-visual::after{background:linear-gradient(0deg,#11130f 0 55%,rgba(17,19,15,.58) 100%)}}
@media(max-width:760px){.page-hero{padding:96px 0 42px}.page-hero .page-wrap,.page-contact,.article-layout{grid-template-columns:1fr}.page-hero h1{max-width:16ch;font-size:clamp(2.2rem,10vw,3.2rem);line-height:1.03;letter-spacing:-.025em}.page-lead{margin-top:22px;font-size:1.05rem}.page-visual-caption{margin-top:26px}.service-grid,.article-grid,.facts,.relations,.service-facts,.inner-proof{grid-template-columns:1fr}.inner-proof p{border-right:0;border-bottom:1px solid var(--line)}.inner-proof p:last-child{border-bottom:0}.services-hero::after{inset:0;opacity:.12}.service-cta{align-items:flex-start;flex-direction:column}.toc{position:static}.legal-document{padding-left:0}.document-index{position:static;width:auto;margin-bottom:50px}.price-table{display:block;overflow-x:auto}}
