/* HEtoiture Studio — precise structure, expressive red and large photography. */
:root{--paper:#f0f2f4;--ink:#121a24;--muted:#53616d;--accent:#ca302b}
body{background:var(--paper);font-family:'DM Sans',sans-serif}
header{height:88px;background:#101924;border-bottom:1px solid #354454}.nav{gap:24px}.contact-link{border-radius:0;border-color:#697581!important}.nav a.active{border-bottom:2px solid #ee534c}
h1,h2,h3,.section-heading h2,.page-intro h1,.detail-grid h2,.material-card h2,.cta-band h2{font-family:Manrope,sans-serif;font-weight:600;letter-spacing:-1.4px}
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:640px;padding:55px 7%;isolation:isolate;background:#101924;color:#fff}
.hero>.eyebrow{font-size:13px;color:#fff;max-width:900px;margin:0 0 25px!important;position:relative;z-index:2}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) 255px;align-items:end;gap:50px;width:100%;margin:0;position:relative;z-index:2}
.hero h1{font-size:clamp(48px,6vw,88px);font-weight:700;line-height:1.08;letter-spacing:-3px;max-width:850px}.hero h1 em{font-family:inherit;font-style:normal;color:#ff8176}
.hero-aside{color:#fff;width:auto;font-size:17px;border-left:3px solid #ee534c;padding:0 0 8px 22px;background:#10192477}.hero-aside .text-link{color:#fff}
.hero-photo{position:absolute;inset:0;height:100%;z-index:-1;overflow:hidden}.hero-photo img{height:100%;width:100%;object-fit:cover;object-position:center}.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#071321d9,#07132187 60%,#07132145);pointer-events:none}
.photo-label{left:7%;bottom:24px;z-index:3;color:#fff}.photo-cta{right:7%;bottom:24px;z-index:3;background:#ca302b;color:#fff;border-radius:0;padding:15px 22px}.photo-cta:hover{background:#ab2722}
.ticker{background:#17222e;color:#c5cfd8;border-top:1px solid #ffffff0d;border-bottom:1px solid #ffffff16;padding:10px 0}.ticker-group span{font-size:12px;letter-spacing:1.6px}.ticker-group span::after{color:#e66e65}.ticker .motion-pause{background:#17222e;color:#aebcc9;font-size:12px}.ticker .motion-pause:hover{color:#fff}
.section{padding-left:7%;padding-right:7%}.section-heading{display:grid;grid-template-columns:220px 1fr;gap:35px;border-top:1px solid #aebac6;padding-top:20px}.section-heading>.eyebrow{width:auto;min-width:0;font-size:13px}.section-heading h2{font-size:clamp(32px,3.7vw,54px);margin-bottom:16px}.intro-grid{margin-left:255px;gap:28px}.intro-grid p{font-size:17px}
.home-realisations{background:#18232f;color:#fff}.home-realisations .section-heading{border-color:#465362}.home-realisations .section-heading>.eyebrow{color:#b9c6d0}.home-realisations .notice,.home-realisations .project-info p{color:#bac6d0}.home-realisations .text-link{color:#fff}
.project-grid{grid-template-columns:1.2fr 1fr;gap:22px}.project-card:nth-child(2){margin-top:48px}.project-image{height:400px;border-radius:0}.project-info{padding-top:14px;border-top:1px solid #5a6978}.project-info h3{font-weight:600;font-size:23px}.project-tag{border-radius:0;color:var(--accent);border-color:var(--accent);background:#fff}.project-card:hover .project-tag{background:var(--accent)}
.services-overview{background:#fff}.service-section-intro{margin-left:255px;max-width:900px}.service-accordion{border-top-color:#bec9d2}.service-accordion>summary{grid-template-columns:1fr 1.1fr auto}.service-accordion>summary h3{font-size:24px;font-weight:600}.service-accordion[open]{border-left:3px solid var(--accent);padding-left:24px}.service-toggle b{background:#ca302b;color:#fff;width:32px;height:32px;text-align:center;line-height:32px}
.service-material-panel{background:#e8edf1;border-left:0;border-top:3px solid var(--accent)}.service-topic+.service-topic{border-color:#bcc8d2}
.steps{gap:0;border-bottom:1px solid #bac6d1}.step{padding:26px 22px 18px;border-top:3px solid #ca302b;border-right:1px solid #bac6d1}.step:first-child{border-left:1px solid #bac6d1}.step-marker{left:22px}.step h3{font-size:23px}.step p{font-size:16px}
.reviews-section{background:#e4eaf0}.reviews-panel{border-color:#a8b8c8;background:transparent}.review-rating strong{font-family:Manrope,sans-serif;font-weight:800}.client-review{background:#fff;border-top:3px solid #ca302b;border-radius:0;padding:26px;box-shadow:none}.review-carousel-controls button{border-radius:0;border-color:#758596}.client-review blockquote{font-size:17px}
.pill{border-radius:0}.cta-band{padding-left:7%;padding-right:7%;background:#ca302b;color:#fff}.cta-band p{color:#fff}.cta-band .pill{border-color:#fff}.cta-band .pill:hover{background:#fff;color:#ca302b}
.brand-wheel{background:linear-gradient(110deg,#354656,#233240);border-color:#506170}.brand-heading{margin-left:7%;margin-right:7%}.brand-heading h2{font-weight:600}.brand-pause{border-radius:0}.brand-heading .eyebrow{font-size:13px}
footer{background:#111b27;padding-left:7%;padding-right:7%;border-color:#455463}.footer-top p{font-size:16px}.footer-links{gap:55px}
.page-intro{background:#18232f;color:#fff;padding-left:7%;padding-right:7%;padding-top:38px;padding-bottom:32px;border-bottom:5px solid #ca302b}.page-intro>p{color:#c2cdd6}.page-intro h1{font-size:clamp(40px,5.5vw,78px);line-height:1.14}.page-intro .eyebrow{color:#ff8b81;font-size:13px}
.detail-cover{margin-left:7%;margin-right:7%;margin-top:24px}.material-card,.product-doc-card{background:#fff;border:1px solid #bdc9d3;border-top:3px solid #ca302b;border-radius:0}.material-card:hover{background:#fff}.material-card p,.product-doc-card p,.product-doc-card li{color:var(--muted)}.filters button{border-radius:0;border-color:#93a5b5}.filters button.selected{background:#18232f;border-color:#18232f}
input,select,textarea{background:#fff;border-color:#899daa;border-radius:0}.form-message{background:#e4eaf0}.notice,.eyebrow,.gallery-phase{font-size:13px}.dark{background:#18232f}.gallery-grid .project-card:nth-child(2){margin-top:0}
@media(max-width:1000px){.hero-top{grid-template-columns:1fr;gap:28px}.hero-aside{max-width:420px}.hero{min-height:660px}.nav{gap:16px}.section-heading{grid-template-columns:180px 1fr}.intro-grid,.service-section-intro{margin-left:215px}}
@media(max-width:800px){header{height:80px}header .nav{background:#101924}.hero{min-height:650px;padding:34px 5% 118px}.hero h1{font-size:clamp(42px,9vw,66px);letter-spacing:-2px}.hero-top{display:block}.hero-aside{margin-top:25px}.hero-photo::after{background:linear-gradient(90deg,#071321e0,#07132188)}.photo-label{left:5%;bottom:84px;font-size:13px}.photo-cta{left:5%;right:auto;bottom:25px}.section{padding-left:5%;padding-right:5%}.section-heading{display:block}.section-heading>.eyebrow{margin-bottom:14px}.intro-grid,.service-section-intro{margin-left:0}.project-grid{grid-template-columns:1fr;gap:24px}.project-card:nth-child(2){margin-top:0}.project-image{height:330px}.service-accordion>summary{grid-template-columns:1fr auto}.service-accordion>summary p{grid-column:1/-1;grid-row:2}.service-accordion[open]{padding-left:16px}.section-heading h2{font-size:36px}.steps{gap:0}.step{border-left:1px solid #bac6d1}.page-intro{padding-left:5%;padding-right:5%}.page-intro h1{font-size:44px;overflow-wrap:break-word}.detail-cover{margin-left:5%;margin-right:5%}.cta-band,footer{padding-left:5%;padding-right:5%}.brand-heading{margin-left:5%;margin-right:5%}}
@media(max-width:450px){.steps{grid-template-columns:1fr}.hero h1{font-size:42px}.hero{min-height:660px}.project-image{height:280px}.page-intro h1{font-size:38px}}

/* Decorative continuous service ribbon. */
.ticker{pointer-events:none;user-select:none}.ticker .ticker-track,.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:running}.ticker-group span{line-height:1.3}


/* Roof image accompanies the method, keeping reviews on their light surface. */
.method-photo{background:linear-gradient(90deg,#101d2bd9,#101d2b94),url('/images/avis-toiture-studio.jpg') center 45%/cover no-repeat;color:#fff}
.method-photo .section-heading{border-color:#ffffff50}.method-photo .section-heading>.eyebrow{color:#e5edf3}.method-photo .section-heading h2{color:#fff}
.method-photo .steps{border:0;gap:18px}.method-photo .step{background:#172534d9;border:1px solid #ffffff30;border-top:2px solid #dc665b;padding:24px 22px 18px;backdrop-filter:blur(3px)}
.method-photo .step h3{color:#fff}.method-photo .step p,.method-photo .step .num{color:#e0e8ef}.method-photo .step-marker{border-color:#dc665b;background:#dc665b}.method-photo .motion-visible .step-marker{background:#dc665b}
@media(max-width:800px){.method-photo{background-position:center;background-size:auto 100%}.method-photo .steps{grid-template-columns:1fr;gap:12px}.method-photo .step{padding:18px 20px 12px}.method-photo .step p{margin-bottom:8px}.method-photo .step h3{margin-bottom:10px}}

/* Align the dormer row with the method heading, keeping all three in frame. */
.method-photo{position:relative;isolation:isolate;background:#17232f}
.method-photo::before{content:'';position:absolute;inset:0 0 auto;height:520px;max-height:100%;z-index:-1;background-image:linear-gradient(180deg,#101d2b8c 0%,#101d2b99 42%,#17232fcc 80%,#17232f 100%),url('/images/avis-toiture-studio.jpg');background-repeat:no-repeat;background-size:100% 100%,100% auto;background-position:center,center calc(130px - 31vw)}
@media(max-width:800px){.method-photo{background:#17232f}.method-photo::before{height:360px;background-position:center,center calc(125px - 31vw)}.method-photo .section-heading h2{text-shadow:0 2px 12px #07132180}}

/* Soft cool-grey surfaces complement the night-blue photographic sections. */
:root{--paper:#e8ecef}
.services-overview{background:#e8ecef}
.material-card,.product-doc-card,.material-card:hover,.client-review{background:#edf0f2}
.reviews-section{background:#e1e7ec}
.service-material-panel{background:#dce3e9}
input,select,textarea{background:#edf0f2}
.project-tag{background:#edf0f2}
.review-carousel-controls button:hover{background:#d7e0e7}

/* Shared page canvas across every Studio route. */
html,body,main,#app,.view{background-color:#e8ecef}
.section:not(.home-realisations):not(.method-photo):not(.dark):not(.reviews-section){background-color:#e8ecef}
.reviews-section{background-color:#e8ecef}
.chalet-gallery .close-up,.chalet-gallery .small-source{background:#e1e7ec}
.form-message{background:#e1e7ec}
.photo-cta:hover,.brand-pause:hover,.reviews-panel .pill:hover,.cta-band .pill:hover{background:#edf0f2}