/* V3 brand layer — loaded last. Typography and readability; see DESIGN.md. */
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+2197,U+2190-2199}
:root{--display:Archivo,'Arial Narrow',Arial,sans-serif;--text:Archivo,Arial,Helvetica,sans-serif;--ease:cubic-bezier(.16,1,.3,1)}

/* One family, two voices: condensed display for titles, normal width for reading. */
body{font-family:var(--text);font-size:17px;font-stretch:100%}
h1,h2,.cinema h1,.story-copy h2{font-family:var(--display);font-weight:720;font-stretch:78%;letter-spacing:-.025em;word-spacing:.05em}
h1{line-height:.98}
h2{line-height:1.02}
.cinema h1{font-weight:760;font-stretch:76%;letter-spacing:-.03em;word-spacing:.06em;line-height:.95}
h1 em,h2 em,.cinema h1 em{font-family:inherit;font-style:normal;font-weight:inherit;font-stretch:inherit}
h3{font-family:var(--text);font-weight:640;font-size:1.25rem;letter-spacing:-.005em}
.prose h2{font-size:clamp(1.9rem,3vw,2.6rem)}
.prose p,.prose li{font-size:17px;line-height:1.7}

/* Readability floor: no reading or tapping text under 14px, no label under 12px. */
.eyebrow,.cinema-content .eyebrow,.story-copy .eyebrow,.video-copy .eyebrow{font-size:12px;font-weight:650;letter-spacing:.16em}
.nav,.nav a{font-size:15px;font-weight:550;letter-spacing:0}
.btn,.cinema .btn{font-size:15px;font-weight:620;letter-spacing:.005em;padding:19px 26px;gap:28px}
.btn .arrow{font-size:20px}
.menu-toggle{font-size:15px;font-weight:600}
.text-link,.story-copy .text-link{font-size:15px;font-weight:600}
.topline{font-size:12px;letter-spacing:.08em}
.breadcrumbs{font-size:13px}
.service-card p,.project-card p,.aside p,.step p,.simple-list li,.dialog-text p,.contact-band p,.video-copy p,.service-films .video-copy p{font-size:15px;line-height:1.6}
.service-index a,.media-jump a,.filter-bar button,.model-tabs button{font-size:14px;font-weight:600}
.filter-count,.form-status,.review cite{font-size:14px}
.contact-form label{font-size:14px;font-weight:600}
.contact-form .consent,.form-privacy{font-size:13px}
.footer p,.footer a{font-size:15px}
.footer h3{font-size:12px;letter-spacing:.14em}
.footer-bottom,.footer-bottom a{font-size:13px}
.cinema-reassurance,.cinema-caption,.compare-tag,.story-rail,.motion-toggle,.model-control,.scene-label,.card-top .num,.review-date,.project-card figcaption,.hero-small,.image-note span,.hero-serial,.trust div,.scroll-invite b,.comparison-section>.photo-source,.prose .photo-source{font-size:12px}
.cinema-content>p{font-size:19px;line-height:1.6}
.floating-contact small{font-size:12px}

@media(max-width:540px){
 body{font-size:16px}
 .btn,.cinema .btn{font-size:15px;padding:17px 22px}
 .prose p,.prose li{font-size:16px}
}

/* Exploded roof — layers separate as the section scrolls (--explode 0→1, set by motion.js). */
.roof-section{background:#092741;color:#fff;padding:120px 0 110px;overflow:hidden}
.roof-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
.roof-copy .eyebrow{color:#e8eef6}
.roof-copy h2{color:#fff;font-size:clamp(2.8rem,5vw,5rem);margin-bottom:22px}
.roof-copy h2 em{color:#ff5a66}
.roof-intro{color:#c3d0e0;max-width:470px;font-size:17px;line-height:1.65;margin-bottom:30px}
.roof-tabs{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:2px;max-width:470px}
.roof-tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:16px;width:100%;padding:12px 14px;font-size:16px;font-weight:560;color:#dfe7f1;border-left:2px solid rgba(255,255,255,.14);transition:background .33s,border-color .33s,color .33s}
.roof-tabs button:hover{background:rgba(255,255,255,.06)}
.roof-tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.roof-tabs button[aria-pressed=true]{background:rgba(255,255,255,.09);border-color:#e23d4b;color:#fff}
.roof-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.35);font-size:13px;font-weight:650;flex:none;transition:background .33s,border-color .33s}
.roof-tabs button[aria-pressed=true] .roof-num{background:#c0202f;border-color:#c0202f}
.roof-detail{max-width:470px;min-height:118px}
.roof-text{color:#c3d0e0;font-size:16px;line-height:1.65;margin-bottom:14px}
.roof-link{color:#fff}

.roof3d{--explode:0;position:relative;height:660px;perspective:1900px;perspective-origin:50% 30%;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.roof-rig{--rx:57deg;--rz:-33deg;--s:1;--gap:calc(7px + var(--explode) * 60px);position:relative;width:460px;height:320px;margin-top:40px;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateZ(var(--rz)) scale(var(--s));transition:transform .6s var(--ease)}
.roof-layer{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--i) * var(--gap)));transition:transform .5s var(--ease),box-shadow .33s}
.roof-layer:before,.roof-layer:after{content:'';position:absolute;pointer-events:none}
.roof-layer:before{left:0;top:100%;width:100%;height:var(--t,0px);transform-origin:top;transform:rotateX(-90deg);background:var(--edge,transparent)}
.roof-layer:after{right:100%;top:0;width:var(--t,0px);height:100%;transform-origin:right;transform:rotateY(-90deg);background:var(--edge-side,transparent)}
.roof-charpente{border:12px solid #8a582c;background:repeating-linear-gradient(90deg,transparent 0 46px,#a46f3f 46px 64px,#7f5129 64px 66px);--t:12px;--edge:#6f4522;--edge-side:#5d391b}
.roof-isolation{inset:12px;background:repeating-linear-gradient(32deg,rgba(255,255,255,.16) 0 3px,transparent 3px 10px),repeating-linear-gradient(-28deg,rgba(120,80,20,.12) 0 2px,transparent 2px 12px),#e2c37a;--t:16px;--edge:#c9a85d;--edge-side:#b8964d}
.roof-ecran{background:linear-gradient(118deg,rgba(255,255,255,.26),rgba(255,255,255,0) 42%,rgba(255,255,255,.1) 70%,rgba(255,255,255,0)),#3f5a78;--t:2px;--edge:#2d4560;--edge-side:#263b53}
.roof-liteaux{background:repeating-linear-gradient(180deg,transparent 0 22px,#c8975f 22px 30px,#9c7040 30px 31px),repeating-linear-gradient(90deg,transparent 0 58px,#b0804c 58px 66px)}
.roof-ardoises{background:linear-gradient(125deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='40'%3E%3Crect width='64' height='40' fill='%2328313b'/%3E%3Crect x='1' y='1' width='30' height='18' fill='%233b4652'/%3E%3Crect x='33' y='1' width='30' height='18' fill='%2333404c'/%3E%3Crect x='17' y='21' width='30' height='18' fill='%23303b46'/%3E%3Crect x='-15' y='21' width='30' height='18' fill='%23394450'/%3E%3Crect x='49' y='21' width='30' height='18' fill='%23394450'/%3E%3Cpath d='M1 17h30M33 17h30M17 37h30M-15 37h30M49 37h30' stroke='%23515e6b' stroke-width='1'/%3E%3C/svg%3E") 0 0/64px 40px;--t:6px;--edge:#1f262e;--edge-side:#181e25}
.roof3d[data-active=charpente] .roof-charpente,.roof3d[data-active=isolation] .roof-isolation,.roof3d[data-active=ecran] .roof-ecran,.roof3d[data-active=liteaux] .roof-liteaux,.roof3d[data-active=ardoises] .roof-ardoises{transform:translateZ(calc(var(--i) * var(--gap) + 22px * var(--explode)));box-shadow:0 0 0 3px #e23d4b}
.roof-gutter{position:absolute;left:-6px;top:100%;width:calc(100% + 12px);height:22px;transform-origin:top;transform:translateZ(calc(4 * var(--gap) - 2px)) translateY(4px) rotateX(-90deg);background:linear-gradient(180deg,#eef1f4,#b9c1c9 45%,#7f8992);border-radius:0 0 12px 12px;transition:transform .5s var(--ease),box-shadow .33s}
.roof-gutter:after{content:'';position:absolute;left:calc(100% - 44px);top:100%;width:12px;height:120px;background:linear-gradient(90deg,#8d97a0,#d6dce1 50%,#8d97a0)}
.roof-chimney{position:absolute;left:300px;top:60px;width:56px;height:56px;transform-style:preserve-3d;transform:translateZ(calc(4 * var(--gap)));transition:transform .5s var(--ease)}
.roof-chimney i{position:absolute;display:block;transition:background .33s}
.roof-chimney .c-front,.roof-chimney .c-back{left:0;width:56px;height:120px;transform-origin:top;transform:rotateX(90deg)}
.roof-chimney .c-front{top:56px;background:linear-gradient(180deg,#d8cfc0,#c4b9a8)}
.roof-chimney .c-back{top:0;background:#a99f90}
.roof-chimney .c-left,.roof-chimney .c-right{top:0;width:120px;height:56px;transform-origin:left;transform:rotateY(-90deg)}
.roof-chimney .c-left{left:0;background:linear-gradient(90deg,#c2b7a6,#ada293)}
.roof-chimney .c-right{left:56px;background:#9d9385}
.roof-chimney .c-top{left:0;top:0;width:56px;height:56px;transform:translateZ(120px);background:radial-gradient(circle at 50% 50%,#151515 0 13px,#5d554b 14px 100%)}
.roof3d[data-active=gouttiere] .roof-gutter{box-shadow:0 0 0 3px #e23d4b}
.roof3d[data-active=conduit] .roof-chimney .c-front{background:linear-gradient(180deg,#f0c9c9,#e0a6a6)}
.roof3d[data-active=conduit] .roof-chimney .c-left{background:#d99a9a}
.roof-caption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:12px;color:#8fa3bb}
body.motion-off .roof3d,.no-motion .roof3d{--explode:.8}
@media(prefers-reduced-motion:reduce){.roof3d{--explode:.8}.roof-rig,.roof-layer{transition:none}}
@media(max-width:1100px){.roof-rig{--s:.8}.roof3d{height:560px}}
@media(max-width:900px){.roof-layout{grid-template-columns:minmax(0,1fr);gap:0}.roof-copy{display:contents}.roof-copy .eyebrow{order:1}.roof-copy h2{order:2}.roof-intro{order:3}.roof3d{order:4;height:540px;margin:0 -20px}.roof-caption{padding:0 20px}.roof-tabs{order:5}.roof-detail{order:6}.roof-rig{--s:.66;margin-top:110px}.roof-section{padding:80px 0}}
@media(max-width:540px){.roof3d{height:460px}.roof-rig{--s:.5;margin-top:170px;margin-left:-30px}.roof-tabs button{padding:11px 10px;font-size:15px}}

/* Google reviews — real rating as read on the profile, with its date. */
.g-reviews{background:#fff}
.g-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.g-score{position:sticky;top:120px}
.g-score h2{margin-bottom:30px}
.g-note{display:flex;align-items:baseline;gap:6px;margin:0 0 10px;font-family:var(--display);font-stretch:78%;line-height:1}
.g-note b{font-size:clamp(5rem,9vw,8rem);font-weight:760;color:#092741;letter-spacing:-.03em}
.g-note span{font-size:2rem;font-weight:600;color:#5c6d85}
.g-meter{position:relative;width:180px;height:28px;margin:0 0 18px;background:linear-gradient(90deg,#d9e0eb 0 100%);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 28'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M14 1l3.9 8.3 9.1 1.1-6.7 6.2 1.8 9L14 21.1 5.9 25.6l1.8-9L1 10.4l9.1-1.1z'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='108'/%3E%3Cuse href='%23s' x='144'/%3E%3C/g%3E%3C/svg%3E") 0 0/180px 28px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 28'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M14 1l3.9 8.3 9.1 1.1-6.7 6.2 1.8 9L14 21.1 5.9 25.6l1.8-9L1 10.4l9.1-1.1z'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='108'/%3E%3Cuse href='%23s' x='144'/%3E%3C/g%3E%3C/svg%3E") 0 0/180px 28px no-repeat}
.g-meter i{position:absolute;inset:0 auto 0 0;background:#f2b01e}
.g-count{color:#5c6d85;font-size:16px;line-height:1.6;max-width:380px;margin-bottom:28px}
.g-count a{color:#092741;font-weight:650}
.g-list{display:grid;gap:22px}
.g-review{margin:0;padding:34px 36px;background:#f6f8fb;border-left:3px solid #c0202f}
.g-stars{display:block;color:#f2b01e;font-size:18px;letter-spacing:3px;margin-bottom:14px}
.g-review blockquote{margin:0 0 20px;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.55;color:#092741;font-weight:450}
.g-review figcaption{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:14px;color:#5c6d85}
.g-review cite{font-style:normal;font-weight:650;color:#092741;font-size:15px}
.g-inline{color:#fff;font-weight:650;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.g-inline span{color:#f2b01e}
@media(max-width:900px){.g-layout{grid-template-columns:minmax(0,1fr);gap:40px}.g-score{position:static}.g-review{padding:26px 22px}}
.cinema-reassurance{font-size:14px}
.cinema-reassurance .g-inline{font-size:16px;margin-right:4px}

/* Full-screen before/after. */
.compare-hero{position:relative;background:#092741;color:#fff;isolation:isolate}
.compare-hero .comparison{aspect-ratio:auto;width:100%;height:min(100svh,940px);min-height:560px}
.compare-hero .comparison:focus-within{outline:0}
.compare-hero .comparison:focus-within .compare-divider b{box-shadow:0 0 0 4px #c0202f}
.compare-hero:after{content:'';position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(to top,rgba(6,22,40,.9),rgba(6,22,40,.55) 45%,rgba(6,22,40,0));pointer-events:none;z-index:2}
.compare-hero-copy{position:absolute;left:0;right:0;bottom:0;padding-bottom:64px;z-index:3;pointer-events:none}
.compare-hero-copy .eyebrow{color:#e8eef6}
.compare-hero-copy h2{color:#fff;font-size:clamp(3rem,6.4vw,6.4rem);margin-bottom:18px}
.compare-hero-copy h2 em{color:#ff5a66}
.compare-hero-copy p{color:#dbe4ef;font-size:18px;max-width:520px;margin-bottom:18px}
.compare-hero-copy .text-link{color:#fff;pointer-events:auto}
.compare-hero .compare-tag{top:auto;bottom:auto;top:calc(var(--site-header,92px) * 0 + 32px);font-size:13px;padding:10px 16px;z-index:3}
.compare-hero .compare-tag.before{left:32px}.compare-hero .compare-tag.after{right:32px}
.compare-hero .compare-divider{z-index:3}
.compare-hero .compare-divider b{width:68px;height:68px;font-size:26px}
@media(max-width:700px){.compare-hero .comparison{height:82svh;min-height:500px}.compare-hero-copy{padding-bottom:36px}.compare-hero-copy p{font-size:16px}.compare-hero .compare-tag.before{left:16px}.compare-hero .compare-tag.after{right:16px}.compare-hero .compare-tag{top:16px}}

/* Photos open through a mask as they enter the screen. */
.reveal-mask{transition:clip-path 1.1s var(--ease)!important}
.reveal-mask img,img.reveal-mask{transition:transform 1.4s var(--ease),clip-path 1.1s var(--ease)!important}
.motion-ready .reveal-mask:not(.visible){opacity:1!important;transform:none!important;clip-path:inset(14% 0 14% 0)}
.motion-ready .reveal-mask:not(.visible) img{transform:scale(1.14)}
.motion-ready img.reveal-mask:not(.visible){transform:scale(1.06)!important}
.compare-hero .compare-divider b{top:36%}