:root{--blue:#0066ff;--yellow:#ffdd00;--ink:#080a0c;--accent:var(--blue)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.skip{position:fixed;top:-100px;z-index:100;background:white;padding:15px}.skip:focus{top:0}.welcome{height:100svh;min-height:620px;position:relative;isolation:isolate;overflow:hidden;background:var(--yellow)}.zone{position:absolute;inset:0;display:block;transition:filter .2s}.zone.blue{background:var(--blue);clip-path:polygon(0 0,67% 0,29% 100%,0 100%);z-index:2}.zone.yellow{clip-path:polygon(67% 0,100% 0,100% 100%,29% 100%);z-index:2}.zone:hover{filter:brightness(1.09)}.zone:focus-visible{outline:8px solid #fff;outline-offset:-15px}.welcome-logo{position:absolute;left:10%;top:31%;width:80%;pointer-events:none;z-index:3}.welcome-logo img{width:100%;mix-blend-mode:multiply}.entry{position:absolute;top:71%;font-size:clamp(22px,2.6vw,38px);font-weight:700;border-bottom:2px solid currentColor;padding-bottom:12px}.blue .entry{left:12%;color:#fff}.yellow .entry{right:12%;color:#090b0d}.welcome-top,.welcome-bottom{position:absolute;z-index:4;pointer-events:none;letter-spacing:2px;font-size:12px;font-weight:700}.welcome-top{left:5%;top:6%}.welcome-bottom{bottom:5%;left:5%;right:5%;display:flex;justify-content:space-between}.header{height:105px;padding:0 5%;background:var(--ink);color:white;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20;border-bottom:1px solid #24272a}.brand{display:block;width:350px}.brand img{width:100%;display:block}.nav{display:flex;align-items:center;gap:30px;font-size:15px}.nav a:hover{color:var(--accent)}.switch{font-size:12px!important;color:#aeb4bc;border-left:1px solid #444;padding-left:24px}.menu{display:none;color:white;background:none;border:1px solid #555;padding:9px 12px}.hero{background:var(--ink);color:white;display:grid;grid-template-columns:42% 58%;min-height:505px}.hero-copy{padding:62px 8% 60px 12%;align-self:start}.eyebrow{font-size:11px;letter-spacing:2.4px;font-weight:700;margin:0 0 22px;color:var(--accent)}h1{font-size:clamp(42px,5.4vw,83px);line-height:1.02;letter-spacing:-3px;margin:0 0 25px;font-weight:800}p{line-height:1.65}.hero-copy>p:not(.eyebrow){font-size:21px;max-width:380px;color:#d0d3d8}.hero-photo{min-height:380px;position:relative}.hero-photo img{width:100%;height:100%;object-fit:cover;position:absolute}.image-note{position:absolute;bottom:12px;right:18px;background:#0009;padding:5px 8px;color:#fff;font-size:10px}.button{background:var(--accent);color:#fff;display:inline-flex;padding:17px 25px;gap:35px;align-items:center;font-size:16px;border:0;cursor:pointer;font-weight:700;margin-top:16px;transition:transform .15s}.button:hover{transform:translateY(-3px)}.fe .button{color:black}.section{padding:75px 5%}h2{font-size:clamp(29px,3vw,46px);letter-spacing:-1.4px;line-height:1.14;margin:0 0 20px}.intro{color:#59616a;max-width:730px;font-size:18px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:35px}.card{background:#f4f5f6;text-align:left;border:0;padding:0;cursor:pointer;color:var(--ink)}.card img{width:100%;height:195px;object-fit:cover;display:block}.card-body{padding:25px;position:relative;min-height:150px}.card h3{font-size:24px;letter-spacing:-.7px;margin:0 32px 10px 0}.card p{font-size:15px;color:#59616a;margin:0 20px 0 0}.arrow{position:absolute;right:23px;top:25px;font-size:30px;color:var(--accent);transition:transform .2s}.card:hover .arrow{transform:translateX(5px)}.projects{background:#f1f2f3;display:grid;grid-template-columns:1fr 1fr;gap:70px}.project-note{border-left:4px solid var(--accent);padding:6px 0 6px 30px}.project-note p{color:#59616a}.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.year{font-size:clamp(80px,12vw,170px);font-weight:800;letter-spacing:-8px;line-height:1;color:var(--accent)}.about-copy{max-width:670px;font-size:18px}.contact{background:var(--ink);color:white;display:grid;grid-template-columns:1fr 1fr;gap:60px}.contact h2{font-size:48px}.contact a:not(.button){display:block;margin:15px 0;font-size:22px}.contact p{color:#b9bfc6}.contact-details{border-left:1px solid #333;padding-left:40px}footer{padding:25px 5%;background:var(--ink);border-top:1px solid #27292c;color:#a4a9b0;display:flex;justify-content:space-between;gap:20px;font-size:12px}footer a{color:white}dialog{border:0;width:min(600px,90vw);padding:50px;box-shadow:0 20px 90px #0008}dialog::backdrop{background:#000a}.close{position:absolute;right:16px;top:8px;font-size:32px;border:0;background:none;cursor:pointer}dialog p{color:#59616a}dialog h2{margin-right:15px}@media(max-width:850px){.header{height:85px}.brand{width:260px}.menu{display:block}.nav{display:none;position:absolute;top:85px;left:0;right:0;background:var(--ink);padding:25px 6%;flex-direction:column;align-items:flex-start;gap:24px}.nav.open{display:flex}.switch{padding-left:0;border:0}.hero{grid-template-columns:1fr}.hero-copy{padding:45px 6%}h1{font-size:58px}.hero-photo{min-height:300px}.cards{grid-template-columns:1fr}.card{display:grid;grid-template-columns:38% 62%}.card img{height:100%;min-height:180px}.section{padding:50px 6%}.projects,.about,.contact{grid-template-columns:1fr;gap:35px}.contact-details{padding-left:0;border:0}.year{font-size:100px}.welcome-logo{left:5%;width:90%;top:34%}.entry{top:67%;font-size:23px}.blue .entry{left:8%}.yellow .entry{right:7%}.welcome-top{font-size:10px}.welcome-bottom{font-size:9px;letter-spacing:1px}footer{flex-direction:column}.contact h2{font-size:38px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
:root{--ink:#000}.brand{width:370px;max-width:36vw}.brand img{width:100%;height:105px;object-fit:contain}.hero-photo img{inset:0;display:block}@media(max-width:850px){.brand{width:280px;max-width:70vw}.brand img{height:85px}}

/* Anchor both hit areas to the ampersand in the original vector logo. */
.zone.blue{clip-path:polygon(0 0,var(--split-top,67%) 0,var(--split-bottom,29%) 100%,0 100%)}.zone.yellow{clip-path:polygon(var(--split-top,67%) 0,100% 0,100% 100%,var(--split-bottom,29%) 100%)}
/* Reveal the relevant building surface within its own clickable color field. */
.zone::before{content:"";position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .55s ease;pointer-events:none}
.zone.blue::before{background-image:linear-gradient(rgba(0,102,255,.24),rgba(0,102,255,.24)),url('assets/tak-hero.jpg');background-position:center center}
.zone.yellow::before{background-image:linear-gradient(rgba(255,221,0,.22),rgba(255,221,0,.22)),url('assets/fasad-hero.jpg');background-position:center center}
.zone:hover{filter:none}
@media(hover:hover){.zone:hover::before{opacity:.78}}
.zone:focus-visible::before{opacity:.78}
@media(prefers-reduced-motion:reduce){.zone::before{transition:none}}

/* Equal heading space keeps subtitles and buttons aligned across both brands. */
.hero-copy h1{min-height:3.06em}

/* Each background wordmark shares the exact foreground text geometry. */
.header{isolation:isolate}
.header::before{content:"";position:absolute;left:5%;top:0;width:370px;max-width:36vw;height:105px;background:url('assets/header-background-tt.svg') center/contain no-repeat;filter:invert(1);opacity:.17;pointer-events:none;z-index:-1}
.fe .header::before{background-image:url('assets/header-background-fe.svg')}
.header .brand,.header .nav,.header .menu{position:relative}
@media(max-width:850px){.header::before{width:280px;max-width:70vw;height:85px}.header .nav{position:absolute}}

/* More headroom reveals the shared roof while maintaining exact text overlap. */
html{scroll-padding-top:165px}.header{height:165px}.brand img,.header::before{height:165px}
@media(max-width:850px){html{scroll-padding-top:125px}.header{height:125px}.brand img,.header::before{height:125px}.header .nav{top:125px}}

/* Full shared signature, with the selected brand aligned over its own name. */
.header{height:190px;gap:24px;padding:0 4%}
.header::before{display:none}
.header .brand{width:760px;max-width:62vw;flex-shrink:1}
.header .brand img{height:190px;width:100%;object-fit:contain}
.header .nav{gap:18px;font-size:13px;white-space:nowrap}
.header .switch{font-size:11px!important;padding-left:14px}
html{scroll-padding-top:190px}
@media(max-width:1100px) and (min-width:851px){.header .nav{gap:12px;font-size:12px}.header .brand{max-width:57vw}.header .switch{padding-left:10px}}
@media(max-width:850px){.header{height:145px;padding:0 5%;gap:14px}.header .brand{width:560px;max-width:calc(100% - 85px)}.header .brand img{height:145px}.header .nav{top:145px;font-size:15px;gap:24px}.header .switch{font-size:12px!important;padding-left:0}html{scroll-padding-top:145px}}

/* Fasadelement anchors the shared signature in the opposite corner. */
.fe .header{flex-direction:row-reverse}
.fe .header .brand{margin-left:auto}
@media(min-width:851px){.fe .header .nav{margin-right:auto}}
@media(max-width:850px){.fe .header .nav{align-items:flex-start}}

/* Bring the signatures toward their outer corners. */
.header{padding-left:1.5%;padding-right:1.5%}
.tt .header .brand img{object-position:left center}
.fe .header .brand img{object-position:right center}
@media(max-width:850px){.header{padding-left:3%;padding-right:3%}}

.fe .hero-photo img{object-position:center 48%}
.facade-projects{display:block}.project-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:35px}.project-gallery figure{margin:0}.project-gallery a{display:block;overflow:hidden}.project-gallery img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .25s}.project-gallery a:hover img{transform:scale(1.025)}.project-gallery figcaption{font-size:14px;padding-top:13px;color:#59616a}
@media(max-width:850px){.project-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}

.history{background:#0c0c0c;color:#fff}.history-intro{max-width:760px;margin-bottom:42px}.history .intro{color:#adb0b4}.history-chapter{display:grid;grid-template-columns:1fr 2fr;gap:55px;border-top:1px solid #333;padding-top:38px}.history-year{font-size:72px;line-height:1;font-weight:800;letter-spacing:-4px;color:var(--yellow);margin:0 0 20px}.history-copy h3{font-size:26px;margin:0 0 20px}.history-copy p{color:#bfc2c6}.history-copy .archive-note{font-size:12px;color:#85898e;margin-top:24px}.history-images{display:grid;grid-template-columns:1fr 1fr;gap:25px}.history-images figure{margin:0}.history-images img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;background:#000}.history-images figcaption{font-size:12px;color:#aaa;padding-top:10px;line-height:1.5}.history-images a{display:block}.history-present{border-left:3px solid var(--yellow);padding-left:25px;margin-top:45px;max-width:800px}.history-present>span{color:var(--yellow);font-weight:700;font-size:22px}.history-present p{color:#bbb}.history-present a{font-size:14px}
@media(max-width:850px){.history-chapter{grid-template-columns:1fr;gap:28px}.history-images{gap:18px}.history-year{font-size:60px}}
@media(max-width:480px){.history-images{grid-template-columns:1fr}}

.archive-references{margin-top:65px;padding-top:40px;border-top:1px solid #333}.archive-references>h3{font-size:28px;margin:0 0 28px}.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.archive-grid figure{margin:0}.archive-grid a{display:block;background:#151515}.archive-grid img{display:block;width:100%;height:330px;object-fit:contain}.archive-grid h4{font-size:20px;margin:20px 0 10px}.archive-grid p{font-size:14px;color:#bfc2c6;margin:0}.archive-grid figcaption{padding-right:12px}@media(max-width:850px){.archive-grid{grid-template-columns:1fr;gap:35px}.archive-grid img{height:auto;max-height:450px;object-fit:contain}}

.welcome-logo .roof-worker{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(prefers-reduced-motion:reduce){.roof-worker{display:none}}

.welcome-tagline{margin:clamp(16px,2.4vw,36px) 0 0;text-align:center;color:#000;font-size:clamp(16px,2.1vw,30px);font-weight:500;line-height:1.4;letter-spacing:.02em;text-wrap:balance}
@media(max-width:600px){.welcome-tagline{max-width:310px;margin:22px auto 0;font-size:17px}}

.welcome-logo .welcome-tagline{display:block;width:100%;max-width:none;height:auto;margin:clamp(16px,2vw,30px) 0 0}

.workshop{background:#000;padding:35px 2% 45px}.workshop-banner{display:block;max-width:1600px;margin:auto}.workshop-banner img{display:block;width:100%;height:auto}.workshop-mobile{display:none}
@media(max-width:600px){.workshop{padding:25px 0 35px}.workshop-mobile{display:inline-flex;margin:10px 6% 0}}

/* Mirror Fasadelement's introduction against Tekniska Tak. */
@media(min-width:851px){
 .fe .hero{grid-template-columns:58% 42%}
 .fe .hero-photo{grid-column:1;grid-row:1}
 .fe .hero-copy{grid-column:2;grid-row:1;padding-left:8%;padding-right:12%;text-align:right}
 .fe .hero-copy>p:not(.eyebrow){margin-left:auto}
}

/* Brand blue for the workshop label and button on Tekniska Tak. */
.workshop-banner{position:relative}.workshop-filters{position:absolute}.workshop-banner .workshop-blue-label,.workshop-banner .workshop-blue-button{position:absolute;inset:0;filter:url(#workshop-blue);pointer-events:none}.workshop-blue-label{clip-path:inset(20% 70% 73% 0)}.workshop-blue-button{clip-path:inset(62% 73% 24% 0)}

/* Warm architectural brown, inspired by the original Fasadelement sign. */
:root{--ink:#30231f;--warm-surface:#392b25}
.header{border-bottom-color:#544139}
.workshop{background:var(--ink)}
.workshop-banner{isolation:isolate;background:var(--ink)}
.workshop-banner img{mix-blend-mode:lighten}
.history{background:var(--warm-surface)}
.history-chapter,.archive-references{border-color:#604b40}
.history-images img,.archive-grid a{background:#30231f}
.contact-details{border-color:#604b40}
footer{border-top-color:#544139}

/* Keep the blue accents independent of the brown backdrop blend. */
.tt .workshop-banner .workshop-blue-label,.tt .workshop-banner .workshop-blue-button{mix-blend-mode:normal}

/* Frame the facade and working platform above the ground equipment. */
.fe .hero-photo{overflow:hidden}.fe .hero-photo img{object-position:65% 25%;transform:scale(1.15);transform-origin:65% 25%}

/* Use the same facade photograph behind the shared welcome logo. */
.zone.yellow::before{background-image:linear-gradient(rgba(255,221,0,.22),rgba(255,221,0,.22)),url('assets/fasad-intro-utan-galler.png');background-position:65% 25%}
@media(max-aspect-ratio:3/4){.zone.yellow::before{background-size:auto 145%;background-position:65% 20%}}

/* Actual roof photograph for the introduction and welcome hover. */
.tt .hero-photo img{object-position:center 52%}
.zone.blue::before{background-image:linear-gradient(rgba(0,102,255,.24),rgba(0,102,255,.24)),url('assets/tak-intro-retuscherad.png');background-position:center 52%}

/* Show the whole SCA facade rather than a narrow horizontal crop. */
@media(min-width:851px){.fe .cards .card>img{height:300px}}
.fe .cards .card:first-child>img{object-fit:contain;object-position:center;background:#dce5ee}
@media(max-width:850px){.fe .cards .card:first-child>img{height:100%;min-height:240px}}

/* A wider full-frame SCA view, with a modest vertical crop. */
.sca-image-frame{display:block;position:relative;height:300px;overflow:hidden}
.fe .cards .sca-image-frame img{position:absolute;left:0;top:-10%;width:100%;height:125%;min-height:0;object-fit:fill}
@media(max-width:850px){.sca-image-frame{height:100%;min-height:240px}}

/* Brand-colored accreditation feature, directly after the introduction. */
.authorization{margin:0;padding:42px 5%;display:grid;grid-template-columns:80px minmax(0,1fr) minmax(230px,.45fr);gap:32px;align-items:center;background:#faf8f5;border-bottom:1px solid #e9e3dc;color:#30231f}
.authorization-mark{color:var(--accent);width:72px;height:80px;display:flex;align-items:center}.authorization-mark svg{width:64px;height:64px}
.authorization .eyebrow{margin-bottom:12px}.authorization h2{font-size:clamp(26px,2.3vw,36px);margin-bottom:12px}.authorization-copy>p:last-child{max-width:760px;margin:0;color:#615750;font-size:16px}
.authorization-details{border-left:1px solid #ded5cb;padding-left:32px}.authorization-details>span{font-weight:800;line-height:1.15;font-size:25px;display:block;letter-spacing:-.6px}.authorization-details>p{font-size:13px;color:#75685e;margin:9px 0 17px}.authorization-details>a{font-size:13px;font-weight:700;border-bottom:2px solid var(--accent);padding-bottom:6px;display:inline-block}.authorization-details>a:hover{color:var(--accent)}
.fe .authorization .eyebrow{color:#786000}
@media(max-width:850px){.authorization{grid-template-columns:55px minmax(0,1fr);gap:20px;padding:35px 6%}.authorization-mark{width:50px;align-self:start}.authorization-mark svg{width:50px}.authorization-details{grid-column:2;border-left:0;border-top:1px solid #ded5cb;padding:22px 0 0;margin-top:3px}.authorization-details>span{font-size:22px}}

/* Larger, more readable navigation on both company pages. */
.header .nav{font-size:16px;gap:18px;flex-shrink:0}
.header .nav a{line-height:1.45;padding-top:8px;padding-bottom:8px}
.header .switch{font-size:14px!important}
.header .brand{min-width:0}
.header .menu{font-size:16px}
@media(min-width:851px) and (max-width:1100px){.header .nav{font-size:15px;gap:12px}.header .switch{font-size:13px!important}}
@media(max-width:850px){.header .nav{font-size:18px;gap:16px}.header .switch{font-size:16px!important}}

/* Icopal product systems, exclusive to Tekniska Tak. */
.roof-systems{background:var(--ink);color:#fff;border-bottom:1px solid #544139}
.roof-systems-heading{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:38px}
.roof-systems-heading h2{margin-bottom:0;font-size:clamp(34px,4vw,56px)}.roof-systems-heading>p{font-size:18px;line-height:1.75;color:#ded6cf;margin:0;max-width:650px}
.roof-system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.roof-system{display:flex;flex-direction:column;padding:30px 26px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.17);border-top:3px solid var(--blue);transition:background .2s,border-color .2s}
.roof-system:hover{background:rgba(0,102,255,.12);border-color:var(--blue)}
.roof-system-number{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#8ebaff}
.roof-system h3{font-size:27px;letter-spacing:-.7px;line-height:1.2;margin:26px 0 15px}
.roof-system p{font-size:15px;color:#ded6cf;margin:0 0 30px}
.roof-system-link{font-size:12px;font-weight:700;color:#9ac1ff;margin-top:auto;line-height:1.6}
.roof-system-footer{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:28px}.roof-system-footer p{color:#ded6cf;font-size:16px}.roof-system-footer .button{margin-top:0;white-space:nowrap}
@media(max-width:850px){.roof-systems-heading{grid-template-columns:1fr;gap:22px}.roof-system-grid{grid-template-columns:1fr}.roof-system{padding:26px}.roof-system h3{margin-top:18px}.roof-system-footer{align-items:flex-start;flex-direction:column;gap:8px}}

/* Guarantee statement within the Icopal systems section. */
.roof-guarantee{display:grid;grid-template-columns:64px minmax(0,1fr);gap:25px;margin-top:28px;padding:30px;background:rgba(0,102,255,.09);border:1px solid rgba(142,186,255,.35);border-left:4px solid var(--blue)}
.roof-guarantee-icon{color:#8ebaff}.roof-guarantee-icon svg{width:58px;height:58px}.roof-guarantee .eyebrow{color:#8ebaff;margin-bottom:12px}.roof-guarantee h3{font-size:26px;letter-spacing:-.6px;line-height:1.2;margin:0 0 15px}.roof-guarantee p:not(.eyebrow){font-size:15px;color:#ded6cf;max-width:1000px;margin:0 0 13px}.roof-guarantee a{display:inline-block;font-size:13px;font-weight:700;color:#9ac1ff;margin-top:6px;border-bottom:1px solid #9ac1ff;padding-bottom:4px}
@media(max-width:600px){.roof-guarantee{grid-template-columns:1fr;padding:24px;gap:15px}.roof-guarantee-icon svg{width:44px;height:44px}.roof-guarantee h3{font-size:23px}}

/* Generous opening photographs, filling the frame on both brand pages. */
@media(min-width:851px){.hero{min-height:clamp(600px,45vw,720px)}.hero .hero-photo{min-height:600px}}
@media(max-width:850px){.hero .hero-photo{min-height:clamp(380px,70vw,560px)}}

/* Spacious service portfolio: photography, numbering and open typography. */
.services-modern{padding:100px 5% 110px;background:#fff}
.services-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:9%;align-items:end;padding-bottom:44px;border-bottom:1px solid #dedbd7}
.services-heading .eyebrow{letter-spacing:.18em;font-size:12px;margin-bottom:24px}
.fe .services-heading .eyebrow{color:#806700}
.services-heading h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(38px,4.2vw,64px);font-weight:600;line-height:1.06;letter-spacing:-.045em;max-width:760px;margin:0;text-wrap:balance}
.services-heading .intro{font-size:18px;line-height:1.7;max-width:440px;margin:0 0 3px}
.services-modern .cards{grid-template-columns:1.25fr 1fr 1fr;gap:32px;margin-top:48px;align-items:start}
.services-modern .card{display:block;background:transparent;min-width:0;cursor:pointer}
.services-modern .card>img,.services-modern .sca-image-frame{width:100%;height:340px;min-height:0;object-fit:cover;transition:filter .3s ease}
.services-modern .card:first-child>img,.services-modern .card:first-child .sca-image-frame{height:430px}
.services-modern .card:nth-child(2){margin-top:45px}.services-modern .card:nth-child(3){margin-top:90px}
.services-modern .card-body{padding:24px 0 0;min-height:0;border-top:2px solid var(--accent);margin-top:20px}
.services-modern .service-index{display:block;font-size:11px;letter-spacing:.14em;color:#77716b;margin-bottom:15px;font-variant-numeric:tabular-nums}
.services-modern .card h3{font-size:clamp(25px,2.3vw,35px);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:0 45px 14px 0}
.services-modern .card p{font-size:16px;line-height:1.65;margin:0;max-width:350px;color:#655f59}
.services-modern .arrow{right:0;top:22px;border:1px solid #d4cec6;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font-size:21px;color:var(--ink);transition:background .2s,border-color .2s,transform .2s}
.services-modern .card:hover .arrow{background:var(--accent);border-color:var(--accent);transform:rotate(-35deg)}
.services-modern .card:hover>img{filter:brightness(1.05)}
@media(max-width:1100px) and (min-width:851px){.services-modern .cards{gap:22px}.services-modern .card>img,.services-modern .sca-image-frame{height:280px}.services-modern .card:first-child>img,.services-modern .card:first-child .sca-image-frame{height:370px}}
@media(max-width:850px){.services-modern{padding:65px 6% 70px}.services-heading{grid-template-columns:1fr;gap:24px;padding-bottom:30px}.services-heading h2{font-size:42px}.services-heading .intro{font-size:17px}.services-modern .cards{grid-template-columns:1fr;gap:44px;margin-top:34px}.services-modern .card:nth-child(n){margin-top:0}.services-modern .card>img,.services-modern .card:first-child>img,.services-modern .sca-image-frame,.services-modern .card:first-child .sca-image-frame{height:clamp(280px,65vw,440px);min-height:0}.services-modern .card h3{font-size:31px}.services-modern .card p{max-width:560px}}

/* Full visual refresh with self-hosted type and open architectural layouts. */
@font-face{font-family:SiteSans;src:url('assets/site-sans-regular.woff') format('woff');font-weight:400 500;font-display:swap}
@font-face{font-family:SiteSans;src:url('assets/site-sans-bold.woff') format('woff');font-weight:600 900;font-display:swap}
body{font-family:SiteSans,Arial,sans-serif;-webkit-font-smoothing:antialiased}
#app.tt,#app.fe{background:#fcfbf8}h1,h2,h3,.services-heading h2{font-family:SiteSans,Arial,sans-serif}
h1{font-size:clamp(48px,5.2vw,82px);font-weight:700;letter-spacing:-.055em;line-height:1.05;text-wrap:balance}.hero-copy h1{min-height:3.15em}.hero-copy{padding-top:76px;padding-bottom:76px}.hero-copy>p:not(.eyebrow){font-size:20px;line-height:1.6;color:#e0d9d3}
.hero-photo{overflow:hidden}.button{font-size:14px;padding:18px 25px;gap:45px;font-weight:700;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-3px);box-shadow:0 8px 24px #0002}
.header .nav a:not(.switch){position:relative}.header .nav a:not(.switch)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}.header .nav a:hover::after{transform:scaleX(1)}
.section:not(.services-modern){padding-top:100px;padding-bottom:100px}h2{font-weight:700;letter-spacing:-.045em;line-height:1.1;text-wrap:balance}.eyebrow{letter-spacing:.18em}.services-heading h2,.services-modern .card h3{font-weight:700}.services-modern .card-body{border-top-width:1px}
.authorization{padding-top:44px;padding-bottom:44px;background:#f3efe8;border:0}.authorization h2{font-size:clamp(26px,2.4vw,36px)}.authorization-details>span{font-size:23px}
.roof-systems-heading{gap:9%;margin-bottom:50px}.roof-systems-heading h2{font-size:clamp(38px,4.2vw,64px)}.roof-system-grid{gap:45px}.roof-system{padding:32px 0;background:transparent;border:0;border-top:1px solid #ffffff40}.roof-system:hover{background:transparent;border-color:var(--accent)}.roof-system h3{font-size:30px}.roof-system-number{color:#9ac1ff}.roof-guarantee{background:transparent;border:0;border-top:1px solid #ffffff30;border-left:0;padding:32px;margin-top:48px}.roof-system-footer{margin-top:45px}
.projects{background:#f0eee8}.projects h2{font-size:clamp(38px,4.2vw,64px)}.project-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px;margin-top:50px}.project-gallery img{aspect-ratio:4/3;object-position:center;transition:transform .55s ease}.project-gallery a:hover img{transform:scale(1.04)}.project-gallery figcaption{font-size:15px;color:var(--ink);padding-top:18px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ccc5ba;margin-top:16px}.project-gallery figcaption::after{content:'↗';font-size:20px;color:var(--ink)}
.about{gap:9%;align-items:center;background:#fcfbf8}.about .year{font-size:clamp(100px,15vw,220px);letter-spacing:-.07em;font-weight:400}.fe .about .year{color:var(--yellow)}.about-copy h2{font-size:clamp(38px,4vw,60px)}.about-copy p{font-size:18px;line-height:1.85;color:#655f59}.about-copy>a{display:inline-block;font-size:14px;font-weight:700;margin-top:15px;border-bottom:2px solid var(--accent);padding-bottom:9px}
.contact{gap:9%;border-top:1px solid #ffffff26}.contact h2{font-size:clamp(46px,6vw,88px);letter-spacing:-.055em}.contact-details{padding-left:45px}.contact-details>p:first-child{color:#fff;font-size:24px;margin-top:0}.contact-details>a:first-of-type{font-size:clamp(25px,3vw,42px);letter-spacing:-.04em}.contact-details a:hover{color:var(--accent)}footer{padding-top:30px;padding-bottom:30px;font-size:12px}
dialog{background:#fcfbf8;color:var(--ink);padding:55px;border-top:4px solid var(--accent)}dialog h2{font-size:36px}dialog p{line-height:1.8}
.scroll-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1)}.scroll-reveal.is-visible{opacity:1;transform:none}
@media(max-width:850px){.hero-copy{padding:48px 6%}.hero-copy h1{min-height:0;font-size:clamp(48px,8vw,68px);max-width:620px}.section:not(.services-modern){padding-top:65px;padding-bottom:65px}.project-gallery{gap:35px 20px}.project-gallery img{aspect-ratio:3/4}.about{gap:30px}.about .year{font-size:130px}.contact-details{padding-left:0}.roof-system-grid{gap:5px}.roof-systems-heading{gap:24px}.roof-guarantee{padding:25px 20px}.contact h2{font-size:54px}.contact-details>a:first-of-type{font-size:32px}}
@media(max-width:520px){.project-gallery{grid-template-columns:1fr}.project-gallery img{aspect-ratio:4/3}.project-gallery figcaption{margin-top:10px}.services-heading h2{font-size:38px}dialog{padding:40px 25px}}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;transform:none;transition:none}.project-gallery img,.button,.header .nav a::after{transition:none}}

/* A panoramic roof overview leads into two detailed project photographs. */
.roof-projects .project-gallery figure:first-child{grid-column:1/-1}.roof-projects .project-gallery figure:first-child img{aspect-ratio:2.2/1}
@media(max-width:520px){.roof-projects .project-gallery figure:first-child img{aspect-ratio:4/3}}

/* Shared Instagram destination, using each company's accent. */
.instagram-callout{padding:0 5% 70px;background:#f0eee8;display:flex;align-items:center;justify-content:space-between;gap:30px}.instagram-callout p{font-size:18px;max-width:560px;color:#655f59;margin:0}.instagram-callout .button{margin:0;gap:18px;white-space:nowrap}.instagram-callout svg{flex-shrink:0}@media(max-width:850px){.instagram-callout{padding:0 6% 55px;align-items:flex-start;flex-direction:column;gap:24px}.instagram-callout p{font-size:17px}.instagram-callout .button{white-space:normal}}

/* Let the project photography stand on its own. */
.instagram-callout{justify-content:flex-end}

.service-area{background:#f3efe8}.service-area h2{font-size:clamp(30px,3vw,46px)}.service-area>p:not(.eyebrow){max-width:700px;color:#655f59}.service-area details{margin-top:30px;border-top:1px solid #cec5b9;border-bottom:1px solid #cec5b9}.service-area summary{padding:23px 0;cursor:pointer;font-weight:700;display:flex;justify-content:space-between;gap:20px;list-style:none}.service-area summary::-webkit-details-marker{display:none}.service-area summary span{font-size:24px}.service-area details[open] summary span{transform:rotate(45deg)}.area-counties{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding-bottom:25px}.area-counties h3{font-size:21px}.area-counties p{color:#655f59;line-height:1.85}.fe .service-area .eyebrow{color:#806700}@media(max-width:850px){.area-counties{grid-template-columns:1fr;gap:10px}}

.service-details{margin-top:50px;border-top:1px solid #dedbd7}.service-details details{border-bottom:1px solid #dedbd7}.service-details summary{padding:22px 0;font-size:15px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;list-style:none}.service-details summary::-webkit-details-marker{display:none}.service-details summary span{font-size:22px}.service-details details[open] summary span{transform:rotate(45deg)}.service-details p{max-width:850px;margin:0 0 25px;color:#655f59;line-height:1.85}

/* Native brand accents share the exact section background, without color-filter tiles. */
.workshop-caption{position:absolute;left:0;top:20%;width:30%;height:7%;background:var(--ink);color:var(--accent);display:flex;align-items:center;padding-left:4.6%;font-family:Arial,sans-serif;font-size:clamp(4px,1.05vw,18px);font-weight:700;letter-spacing:.16em;white-space:nowrap}
.workshop-cta-wrap{position:absolute;left:0;top:62%;width:27%;height:14%;background:var(--ink);display:flex;align-items:center;padding-left:4.6%}
.workshop-cta{display:flex;align-items:center;justify-content:center;width:100%;height:67%;background:var(--accent);color:white;font-family:Arial,sans-serif;font-size:clamp(4px,1.15vw,19px);font-weight:700;white-space:nowrap}.fe .workshop-cta{color:#000}

.workshop-subtitle{position:absolute;left:0;top:54%;width:33%;height:6%;background:var(--ink);color:#c7c7c7;display:flex;align-items:center;padding-left:4.6%;font-family:Arial,sans-serif;font-size:clamp(4px,1.45vw,24px);white-space:nowrap}