body{margin:0;background:#F7F5F1;color:#1A1A1A;font-family:'Jost',system-ui,sans-serif}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
a{color:#A64B31}a:hover{color:#7F3823}
.site{overflow-x:clip}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.serif{font-family:'Playfair Display',Georgia,serif}
.k{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#A64B31;margin:0 0 18px}
.h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:48px;line-height:1.08;margin:0;letter-spacing:-.005em}
.lead{font-size:19px;line-height:1.6;margin:0;color:#3B3F43}
.muted{color:#5C6166}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font-weight:600;font-size:16px;letter-spacing:.01em;text-decoration:none;border-radius:2px;border:1.5px solid #A64B31;background:#A64B31;color:#FFFFFF;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:#7F3823;border-color:#7F3823;color:#FFFFFF}
.btn.line{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.85)}
.btn.line:hover{background:#FFFFFF;color:#1A1A1A;border-color:#FFFFFF}
.btn.ink{background:transparent;color:#1A1A1A;border-color:#1A1A1A}
.btn.ink:hover{background:#1A1A1A;color:#FFFFFF}
a:focus-visible,.btn:focus-visible,input:focus,select:focus,textarea:focus{outline:3px solid #A64B31;outline-offset:2px}

.hdr{position:sticky;top:0;z-index:40;background:#FFFFFF;border-bottom:1px solid #E6E1D8}
.hdr-in{height:84px;display:flex;align-items:center;gap:32px}
.logo{height:64px;width:auto;display:block}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{color:#1A1A1A;text-decoration:none;font-weight:500;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:14px 0;border-bottom:1.5px solid transparent}
.nav a:hover{color:#A64B31;border-bottom-color:#A64B31}
.tel{color:#1A1A1A;text-decoration:none;font-weight:600;font-size:17px;display:flex;align-items:center;gap:10px;padding:12px 0;white-space:nowrap}
.tel:hover{color:#A64B31}

.ph{position:relative;overflow:hidden;background:#D6D0C6}
.ph-in{position:absolute;inset:-8% 0;background:#D6D0C6}
.ph.dark,.ph.dark .ph-in{background:#34302C}
.ph-cap{position:absolute;left:16px;bottom:14px;right:16px;font-size:13px;line-height:1.4;color:#2E2B28;display:flex;gap:8px;align-items:flex-start}
.ph.dark .ph-cap{color:#D9D3C9}
.ph-cap svg{flex:none;margin-top:1px}

.hero{position:relative;min-height:calc(100vh - 84px);display:flex;align-items:flex-end;color:#FFFFFF;background:#2A2724}
.hero .ph{position:absolute;inset:0}
.hero-veil{position:absolute;inset:0;background:rgba(20,18,16,.38)}
.hero .ph.dark .ph-in{background:#34302C url(images/accueil-maison.jpg) center 45% / cover no-repeat}
.hero-veil{background-image:linear-gradient(to top,rgba(20,18,16,.62),rgba(20,18,16,0) 75%)}
.hero-in{position:relative;width:100%;padding:120px 0 0}
.h1{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:76px;line-height:1.02;margin:0 0 22px;letter-spacing:-.01em;max-width:760px}
.hero .lead{color:#EEEAE3;max-width:540px;margin-bottom:34px}
.hero .k{color:#E7A589}
.facts{margin-top:64px;border-top:1px solid rgba(255,255,255,.28)}
.facts div{padding:22px 0 34px;font-size:15px;color:#E4DFD7}
.facts strong{display:block;font-family:'Playfair Display',serif;font-weight:600;font-size:26px;color:#FFFFFF;margin-bottom:2px}
.facts div+div{padding-left:28px;border-left:1px solid rgba(255,255,255,.28)}
.xp{margin:0;padding:24px 0 36px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.xp strong{font-family:'Playfair Display',serif;font-weight:600;font-size:44px;line-height:1;color:#FFFFFF;margin:0}
.xp span{font-size:17px;color:#E4DFD7}

.sec{padding:128px 0}
.intro{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:end;margin-bottom:72px}
.presta{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.presta-ph{position:sticky;top:116px;aspect-ratio:4/5}
.list{border-top:1px solid #D4CDC1}
.item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px 20px;padding:32px 0;border-bottom:1px solid #D4CDC1}
.n{font-family:'Playfair Display',serif;font-size:18px;color:#A64B31;padding-top:6px}
.it{font-family:'Playfair Display',serif;font-weight:600;font-size:30px;line-height:1.15;margin:0 0 10px}
.ip{font-size:17px;line-height:1.6;margin:0;color:#3B3F43}
.iw{font-size:14px;margin:12px 0 0;color:#5C6166;letter-spacing:.02em}
.iw span{color:#1A1A1A;font-weight:600}

.about{background:#1A1A1A;color:#EDE9E2}
.about .k{color:#E39B7E}
.about .lead{color:#C9C5BE}
.about-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:center}
.about-ph{aspect-ratio:4/5}
.rose{margin:44px 0 0;display:flex;align-items:center;gap:22px;padding-top:28px;border-top:1px solid #3A3A3A}
.rose-ph{width:150px;height:150px;flex:none}
.presta-ph .ph-in{background:#D6D0C6 url(images/prestations-tuiles.jpg) center / cover no-repeat}
.rose-ph.ph.dark .ph-in{background:#34302C url(images/rose-zinc.jpg) center / cover no-repeat}
.presta-ph .ph-cap,.rose-ph .ph-cap{display:none}
.ph-r4 .ph-in{background:#D6D0C6 url(images/zinguerie-cheminee.jpg) center / cover no-repeat}
.ph-r5 .ph-in{background:#D6D0C6 url(images/fenetre-de-toit.jpg) center / cover no-repeat}
.ph-r6 .ph-in{background:#D6D0C6 url(images/faitage.jpg) center / cover no-repeat}
.ph-r0 .ph-in{background:#D6D0C6 url(images/pessac-1-depose.jpg) center / cover no-repeat}
.ph-r1 .ph-in{background:#D6D0C6 url(images/pessac-2-liteaux.jpg) center / cover no-repeat}
.ph-r2 .ph-in{background:#D6D0C6 url(images/pessac-3-apres.jpg) center / cover no-repeat}
.wg .ph-in{inset:0;animation:none !important}
.tagp{position:absolute;left:14px;top:14px;background:#1A1A1A;color:#FFFFFF;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px}
.rose figcaption{font-size:16px;line-height:1.5;color:#C9C5BE;max-width:240px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;border-top:1px solid #3A3A3A}
.stats div{padding:26px 20px 0 0}
.stats strong{display:block;font-family:'Playfair Display',serif;font-weight:600;font-size:44px;line-height:1;color:#FFFFFF;margin-bottom:10px}
.stats span{font-size:15px;color:#BDB8B0;line-height:1.4;display:block}

.works{background:#F7F5F1}
.wg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.w1,.w2,.w3,.w4,.w5,.w6{grid-column:span 4}
.wg{row-gap:36px}
.wcap{font-size:14px;color:#5C6166;margin:10px 0 0}
.wnote{margin-top:36px;padding-top:22px;border-top:1px solid #D4CDC1;font-size:15px;color:#5C6166;max-width:720px}

.contact{background:#EFEBE4}
.cg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.big-tel{font-family:'Playfair Display',serif;font-weight:600;font-size:52px;line-height:1;color:#1A1A1A;text-decoration:none;display:inline-block;padding:8px 0;margin:28px 0 8px}
.big-tel:hover{color:#A64B31}
.big-tel,.fi{white-space:nowrap}
.cinfo{margin-top:32px;border-top:1px solid #D4CDC1}
.cinfo div{padding:18px 0;border-bottom:1px solid #D4CDC1;display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;font-size:16px;line-height:1.5}
.cinfo dt{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#5C6166;padding-top:2px}
.cinfo dd{margin:0}
form{background:#FFFFFF;padding:44px;border:1px solid #E0DAD0}
.f-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld.full{grid-column:1 / -1}
label{font-weight:600;font-size:15px}
input,select,textarea{font:inherit;font-size:17px;padding:13px 14px;border:1px solid #9AA0A4;border-radius:2px;background:#FFFFFF;color:#1A1A1A;min-height:50px;width:100%}
textarea{resize:vertical}
.demo{background:#F5ECCB;color:#3A3220;padding:12px 14px;font-size:14px;line-height:1.5;margin:0 0 26px}
.fail{background:#F5ECCB;color:#3A3220;padding:14px 16px;font-size:15px;line-height:1.5;margin:20px 0 0}
.fnote{font-size:14px;color:#5C6166;margin:18px 0 0;line-height:1.5}

.foot{background:#141414;color:#BDB8B0;padding:56px 0 60px;font-size:15px}
.foot a{color:#EDE9E2}
.foot-g{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end}
.callbar{display:none}
.trk{display:none;position:fixed;right:26px;top:116px;bottom:30px;width:64px;z-index:35;pointer-events:none;--hb:52px}
.trk-line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(140,128,114,.3)}
.trk-fill{position:absolute;left:50%;top:0;width:2px;margin-left:-1px;height:0;background:#A64B31}
.rider{position:absolute;left:0;top:0;width:64px;height:86px}
.st3{position:absolute;left:0;top:0;width:64px;height:60px;perspective:420px}
.rig{position:absolute;left:32px;top:30px;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(-30deg)}
.fc{position:absolute;left:0;top:0;box-sizing:border-box}
.fc svg{display:block}
.shadow{width:46px;height:34px;transform:translate3d(-23px,1px,0) rotateX(90deg);background:radial-gradient(closest-side,rgba(0,0,0,.3),rgba(0,0,0,0))}
.wl{border:1px solid rgba(26,26,26,.45)}
.w-f{width:30px;height:18px;transform:translate3d(-15px,0,12px);background:linear-gradient(#56656C,#56656C) 12.5px 8px/5px 9px no-repeat,linear-gradient(#56656C,#56656C) 4px 5px/6px 5px no-repeat,linear-gradient(#56656C,#56656C) 20px 5px/6px 5px no-repeat,#E9E1D3}
.w-b{width:30px;height:18px;transform:translate3d(-15px,0,-12px) rotateY(180deg);background:linear-gradient(#56656C,#56656C) 4px 5px/6px 5px no-repeat,linear-gradient(#56656C,#56656C) 20px 5px/6px 5px no-repeat,#D6CBB8}
.w-l{width:24px;height:18px;transform:translate3d(-27px,0,0) rotateY(-90deg);background:linear-gradient(#56656C,#56656C) 9px 5px/6px 6px no-repeat,#DED4C3}
.w-r{width:24px;height:18px;transform:translate3d(3px,0,0) rotateY(90deg);background:linear-gradient(#56656C,#56656C) 9px 5px/6px 6px no-repeat,#DED4C3}
.g-l{width:24px;height:11px;transform:translate3d(-27px,-11px,0) rotateY(-90deg)}
.g-r{width:24px;height:11px;transform:translate3d(3px,-11px,0) rotateY(90deg)}
.tr{width:28px;height:11px}
.t1{transform:translate3d(-27px,-11px,0) rotateY(90deg)}
.t2{transform:translate3d(-18.5px,-11px,0) rotateY(90deg)}
.t3{transform:translate3d(-9.5px,-11px,0) rotateY(90deg)}
.t4{transform:translate3d(-1px,-11px,0) rotateY(90deg)}
.beam{width:34px;height:2px;background:#9B774E;transform:translate3d(-17px,-12px,0)}
.lt,.tl{width:34px;height:18px}
.lt{background:repeating-linear-gradient(to bottom,#A07A50 0 1.4px,rgba(0,0,0,0) 1.4px 3.6px)}
.lt-f{transform:translate3d(-17px,-14.5px,7px) rotateX(52deg)}
.lt-b{transform:translate3d(-17px,-14.5px,-7px) rotateX(-52deg)}
.tl{background:repeating-linear-gradient(to right,rgba(0,0,0,0) 0 3.4px,rgba(0,0,0,.2) 3.4px 4px),repeating-linear-gradient(to bottom,#C46A3F 0 2.6px,#8A4126 2.6px 3.6px)}
.tl-f{transform:translate3d(-17px,-15.1px,7.5px) rotateX(52deg)}
.tl-b{transform:translate3d(-17px,-15.1px,-7.5px) rotateX(-52deg)}
.rdg{width:36px;height:3px;background:#7E3A22;transform:translate3d(-18px,-13.2px,0)}
.rdg2{width:36px;height:4px;background:#7E3A22;transform:translate3d(-18px,-13.8px,0) rotateX(90deg)}
.gt{width:36px;height:3px;background:#A9B2B7;border:1px solid #7D868B}
.gt-f{transform:translate3d(-18px,-0.5px,14.5px)}
.gt-b{transform:translate3d(-18px,-0.5px,-14.5px) rotateY(180deg)}
.ds{width:2px;height:18px;background:#A9B2B7}
.ds-1{transform:translate3d(15px,1px,14.5px)}
.ds-2{transform:translate3d(-17px,1px,-14.5px) rotateY(180deg)}
.cap{position:absolute;left:50%;top:62px;transform:translateX(-50%);display:grid;background:#1A1A1A;color:#FFFFFF;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;white-space:nowrap}
.cap span{grid-area:1 / 1;text-align:center;opacity:0}
.cap .c1{opacity:1}
@media (max-width:1340px){
.trk{right:4px;width:44px;--hb:36px}
.rider{left:50%;margin-left:-32px}
.st3{transform:scale(.7);transform-origin:50% 0}
}
@media (max-width:960px){
.trk{right:0;width:32px;top:80px;bottom:calc(80px + env(safe-area-inset-bottom));--hb:26px}
.st3{transform:scale(.5)}
}
@media (prefers-reduced-motion: reduce){.trk{display:none !important}}

@supports (animation-timeline: view()){
@keyframes rv{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes px{from{transform:translateY(-5%)}to{transform:translateY(5%)}}
@keyframes toDark{from{background-color:#F7F5F1}to{background-color:#1A1A1A}}
@keyframes toLight{from{background-color:#1A1A1A}to{background-color:#F7F5F1}}
@keyframes rvOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-24px)}}
@keyframes veil{from{background-color:rgba(20,18,16,.38)}to{background-color:rgba(20,18,16,.92)}}
@keyframes secIn{from{opacity:0}to{opacity:1}}
.rv{animation:rv linear both,rvOut linear forwards;animation-timeline:view(),view();animation-range:entry 0% entry 50%,exit 45% exit 100%}
.hero-veil{animation:veil linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
.sec>.wrap{animation:secIn linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
@keyframes hr{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes heroPh{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes phIn{from{opacity:0;clip-path:inset(14% 0 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.hero>.ph{animation:heroPh 1.8s cubic-bezier(.2,.7,.2,1) both}
.hero .rv{animation:hr 1s cubic-bezier(.2,.7,.2,1) both,rvOut linear forwards;animation-timeline:auto,view();animation-range:normal,exit 45% exit 100%}
.hero .rv:nth-child(1){animation-delay:.35s,0s}
.hero .rv:nth-child(2){animation-delay:.55s,0s}
.hero .rv:nth-child(3){animation-delay:.75s,0s}
.hero .rv:nth-child(4){animation-delay:.95s,0s}
.hero .rv:nth-child(5){animation-delay:1.15s,0s}
.rv.h2{animation-range:entry 8% entry 58%,exit 45% exit 100%}
.lead.rv{animation-range:entry 16% entry 66%,exit 45% exit 100%}
.wg>figure:nth-child(2),.wg>figure:nth-child(5){animation-range:entry 12% entry 62%,exit 45% exit 100%}
.wg>figure:nth-child(3),.wg>figure:nth-child(6){animation-range:entry 24% entry 74%,exit 45% exit 100%}
.wg .ph{animation:phIn linear both;animation-timeline:view();animation-range:entry 5% entry 80%}
.presta-ph{animation:phIn linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.about-ph{animation:phIn linear both,rvOut linear forwards;animation-timeline:view(),view();animation-range:entry 10% entry 80%,exit 45% exit 100%}
@keyframes inL{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
@keyframes inR{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
@keyframes phL{from{opacity:0;clip-path:inset(0 45% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes phR{from{opacity:0;clip-path:inset(0 0 0 45%)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.intro>div:first-child .rv,.about-g>div:first-child .rv,.cg>div:first-child .rv,.wg>figure:nth-child(1),.wg>figure:nth-child(4){animation-name:inL,rvOut}
.intro>.lead,.list .item,.wg>figure:nth-child(3),.wg>figure:nth-child(6){animation-name:inR,rvOut}
.presta-ph,.wg>figure:nth-child(1) .ph,.wg>figure:nth-child(4) .ph{animation-name:phL}
.about-ph{animation-name:phR,rvOut}
.wg>figure:nth-child(3) .ph,.wg>figure:nth-child(6) .ph{animation-name:phR}
.cg>form{animation:inR linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
.ph-in{animation:px linear both;animation-timeline:view();animation-range:cover}
.about{animation:toDark linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
.works{animation:toLight linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}
@supports (view-timeline-name: --x){
.site{view-timeline:--page block}
.trk{display:block}
@keyframes ride{from{top:0}to{top:calc(100% - var(--hb))}}
@keyframes fillH{from{height:0}to{height:100%}}
@keyframes spin{from{transform:rotateX(-20deg) rotateY(-30deg)}to{transform:rotateX(-20deg) rotateY(690deg)}}
@keyframes up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes side{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mid{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes show{from{opacity:0}to{opacity:1}}
@keyframes lab{from{opacity:1}to{opacity:1}}
.rider,.trk-fill,.rig,.trk .fc,.cap span{animation-timeline:--page;animation-timing-function:linear;animation-fill-mode:both}
.rider{animation-name:ride;animation-range:contain 0% contain 100%}
.trk-fill{animation-name:fillH;animation-range:contain 0% contain 100%}
.rig{animation-name:spin;animation-range:contain 0% contain 100%}
.shadow{animation-name:show;animation-range:contain 0% contain 3%}
.wl{animation-name:up;animation-range:contain 1% contain 9%}
.gb{animation-name:up;animation-range:contain 7% contain 13%}
.t1{animation-name:show;animation-range:contain 14% contain 17%}
.t2{animation-name:show;animation-range:contain 15.5% contain 18.5%}
.t3{animation-name:show;animation-range:contain 17% contain 20%}
.t4{animation-name:show;animation-range:contain 18.5% contain 21.5%}
.beam{animation-name:side;animation-range:contain 22% contain 28%}
.lt{animation-name:up;animation-range:contain 30% contain 44%}
.tl{animation-name:up;animation-range:contain 46% contain 66%}
.rdg,.rdg2{animation-name:mid;animation-range:contain 68% contain 78%}
.gt{animation-name:side;animation-range:contain 80% contain 88%}
.ds{animation-name:down;animation-range:contain 87% contain 95%}
.trk .cap span{animation-name:lab;animation-fill-mode:none;opacity:0}
.trk .cap .c1{animation-range:contain 0% contain 14%;animation-fill-mode:backwards}
.trk .cap .c2{animation-range:contain 14% contain 30%}
.trk .cap .c3{animation-range:contain 30% contain 46%}
.trk .cap .c4{animation-range:contain 46% contain 68%}
.trk .cap .c5{animation-range:contain 68% contain 80%}
.trk .cap .c6{animation-range:contain 80% contain 100%;animation-fill-mode:forwards}
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.rv,.ph-in,.about,.works,.hero-veil,.sec>.wrap,.hero .rv,.hero>.ph,.wg .ph,.presta-ph,.about-ph,.cg>form{animation:none !important}
}
@media (max-width:960px){
.wrap{padding:0 20px}
.nav,.tel .full{display:none}
.hdr-in{height:68px;gap:14px}
.logo{height:52px}
.tel{margin-left:auto;padding:12px 4px}
.hdr .btn{min-height:44px;padding:0 14px;font-size:15px}
.hero{min-height:calc(88svh - 68px)}
.hero-in{padding-top:96px}
.h1{font-size:46px}
.lead{font-size:17px}
.h2{font-size:34px}
.facts{margin-top:44px;grid-template-columns:minmax(0,1fr)}
.facts div{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.facts div+div{padding-left:0;border-left:0}
.xp{padding:18px 0 28px;gap:12px}
.xp strong{font-size:34px}
.sec{padding:80px 0}
.intro,.presta,.about-g,.cg{grid-template-columns:minmax(0,1fr);gap:32px}
.intro{margin-bottom:40px}
.presta-ph{position:relative;top:auto;aspect-ratio:16/10}
.item{grid-template-columns:40px minmax(0,1fr);padding:26px 0}
.it{font-size:25px}
.about-ph{aspect-ratio:16/11}
.stats{grid-template-columns:minmax(0,1fr)}
.stats div{padding:20px 0;border-bottom:1px solid #3A3A3A;display:flex;align-items:baseline;gap:16px}
.stats strong{font-size:34px;margin:0;min-width:120px}
.wg{grid-template-columns:minmax(0,1fr);gap:24px}
.w1,.w2,.w3,.w4,.w5,.w6{grid-column:auto}
.big-tel{font-size:clamp(28px,9.5vw,40px)}
.fi{display:block;margin-top:4px}
.sep{display:none}
.cinfo div{grid-template-columns:minmax(0,1fr);gap:4px}
form{padding:24px 20px}
.f-grid{grid-template-columns:minmax(0,1fr)}
.callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#1A1A1A;border-top:1px solid #333333}
.callbar a{flex:1}
.callbar .btn.line{border-color:rgba(255,255,255,.7)}
.foot{padding-bottom:112px}
.foot-g{grid-template-columns:minmax(0,1fr)}
}

.about-g{grid-template-columns:minmax(0,1fr)}
.about-g>div:first-child{max-width:760px}

.page{padding:96px 0 120px;background:#F7F5F1}
.page .wrap{max-width:820px}
.page h1{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:44px;line-height:1.1;margin:0 0 24px}
.page h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:26px;margin:44px 0 12px}
.page p,.page li{font-size:17px;line-height:1.65;color:#3B3F43}
.todo{background:#F5ECCB;color:#3A3220;padding:1px 6px}
@media (max-width:960px){.page{padding:64px 0 96px}.page h1{font-size:32px}}