/* Touati Rénovation Paris © 2026 */


/* ================================================================
   TOUATI RÉNOVATION PARIS — V4
   Style: BTP Premium Paris — Sobre, fort, professionnel
   Polices: Barlow Condensed (titres) + Barlow (corps)
   Palette: Blanc / Gris chaud / Noir / Rouge brique #B94040
   Photos réelles touati-renovation.com — Zéro emoji
================================================================ */
:root{
  --N:#0e0e0e; --D:#1c1c1c; --C:#2a2a2a; --S:#565656; --M:#909090;
  --L:#c4c4c4; --R:#e8e8e8; --BG:#f6f6f4; --W:#ffffff;
  --A:#B94040; --A2:#d04a4a;
  --title:'Barlow Condensed',sans-serif;
  --body:'Barlow',sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--N);background:var(--W);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{display:block;width:100%;max-width:100%;object-fit:cover;height:auto}
ul{list-style:none}
.page{display:none}.page.active{display:block}

/* ── TOPBAR ── */
.tb{background:var(--D);height:36px;display:flex;align-items:center}
.tb-w{max-width:1360px;margin:0 auto;padding:0 32px;width:100%;display:flex;align-items:center;justify-content:space-between}
.tb-l{display:flex;gap:24px}
.tb-i{font-size:11.5px;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:6px}
.tb-i svg{width:11px;height:11px;fill:currentColor;opacity:.5}
.tb-r{display:flex;align-items:center;gap:14px}
.tb-tel{font-size:13px;font-weight:700;color:rgba(255,255,255,.82);letter-spacing:.01em;transition:color .15s}
.tb-tel:hover{color:var(--A2)}
.tb-dv{background:var(--A);color:#fff;padding:5px 14px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .15s}
.tb-dv:hover{background:var(--A2)}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:800;background:var(--W);border-bottom:1px solid var(--R)}
.nav-w{max-width:1360px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center}

/* Logo */
.logo{display:flex;align-items:center;gap:0;margin-right:48px;flex-shrink:0;text-decoration:none}
.logo-bar{width:5px;height:40px;background:var(--A);flex-shrink:0;margin-right:14px}
.logo-txt{}
.logo-name{font-family:var(--title);font-size:19px;font-weight:800;color:var(--N);display:block;line-height:1;letter-spacing:.01em;text-transform:uppercase}
.logo-sub{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--M);display:block;margin-top:3px}

/* Nav items */
.nav-ul{display:flex;align-items:center;flex:1;gap:0}
.ni{position:relative}
.ni>a,.ni>button{display:flex;align-items:center;gap:4px;padding:0 14px;height:64px;font-size:13px;font-weight:600;color:var(--S);letter-spacing:.01em;transition:color .15s;white-space:nowrap;cursor:pointer;background:none;border:none;font-family:inherit}
.ni>a:hover,.ni>button:hover,.ni.open>a,.ni.open>button{color:var(--N)}
.ni>button svg.ca{width:9px;height:9px;stroke:currentColor;fill:none;transition:transform .2s;flex-shrink:0}
.ni.open>button svg.ca{transform:rotate(180deg)}

/* MEGA */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--W);border-top:3px solid var(--N);border-bottom:1px solid var(--R);box-shadow:0 20px 60px rgba(0,0,0,.12);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s;max-width:calc(100vw - 40px)}
.ni.open .mega{opacity:1;visibility:visible;pointer-events:all}
.mega-p{width:980px;padding:36px 40px;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.mc-hd{font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--M);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--R)}
.mc a{display:block;font-size:12.5px;color:var(--S);padding:4px 0;transition:color .15s;font-weight:500}
.mc a:hover{color:var(--A)}
.mc-main{font-size:13.5px!important;font-weight:700!important;color:var(--N)!important;margin-bottom:8px!important}
.mc-more{color:var(--A)!important;font-weight:700!important;font-size:11px!important;letter-spacing:.04em;margin-top:6px!important;display:block}
.mega-z{width:760px;padding:32px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mz h4{font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--M);margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--R)}
.mz a{display:block;font-size:12.5px;color:var(--S);padding:3px 0;transition:color .15s;font-weight:500}
.mz a:hover{color:var(--A)}

.nav-cta{margin-left:auto;flex-shrink:0;background:var(--N);color:var(--W);height:42px;padding:0 22px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:7px;transition:background .15s}
.nav-cta:hover{background:var(--A)}
.mob-tog{display:none;flex-direction:column;gap:5px;padding:10px;margin-left:8px;cursor:pointer}
.mob-tog span{display:block;width:22px;height:1.5px;background:var(--N)}

/* ── HERO ── */
.hero{display:grid;grid-template-columns:55% 45%;min-height:88vh;background:var(--N);position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;left:55%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.06);z-index:2}
.hero-l{padding:80px 56px 80px 80px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:3}
.hero-tag{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:24px;display:flex;align-items:center;gap:12px}
.hero-tag::before{content:'';width:28px;height:2px;background:var(--A)}
.hero h1{font-family:var(--title);font-size:clamp(48px,5.5vw,86px);font-weight:900;color:var(--W);line-height:.96;letter-spacing:-.01em;margin-bottom:20px;text-transform:uppercase}
.hero h1 span{color:var(--A)}
.hero-sub{font-size:15px;color:rgba(255,255,255,.46);line-height:1.85;max-width:420px;margin-bottom:40px;font-weight:300}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn-wp{background:var(--W);color:var(--N);padding:14px 28px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px;transition:all .2s}
.btn-wp:hover{background:var(--BG);transform:translateY(-1px)}
.btn-wo{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.65);padding:14px 28px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px;transition:all .2s}
.btn-wo:hover{border-color:rgba(255,255,255,.5);color:var(--W)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.08)}
.hs strong{display:block;font-family:var(--title);font-size:52px;font-weight:900;color:var(--W);line-height:1;margin-bottom:5px}
.hs span{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.28);letter-spacing:.14em;text-transform:uppercase}
.hero-r{position:relative;overflow:hidden;z-index:1}
.hero-r img{width:100%;height:100%;min-height:400px;object-fit:cover;object-position:center}
.hero-r::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(14,14,14,.4) 0%,transparent 60%);z-index:1}
.g-badge{position:absolute;bottom:0;left:0;right:0;z-index:2;background:rgba(28,28,28,.92);backdrop-filter:blur(12px);padding:18px 28px;display:flex;align-items:center;gap:16px}
.gb-stars{color:#f59e0b;font-size:14px;letter-spacing:2px}
.gb-txt strong{display:block;font-size:16px;font-weight:700;color:var(--W);letter-spacing:-.01em}
.gb-txt small{display:block;font-size:11px;color:rgba(255,255,255,.38);margin-top:1px}

/* ── TRUST ── */
.trust{background:var(--A);height:46px;display:flex;align-items:center}
.trust-w{max-width:1360px;margin:0 auto;padding:0 32px;width:100%;display:flex;align-items:center;justify-content:center;gap:44px;flex-wrap:wrap;row-gap:8px}
.ti{font-size:12px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:9px}
.ti svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;opacity:.85}
.t-sep{width:1px;height:16px;background:rgba(255,255,255,.25)}

/* ── LAYOUT ── */
.sec{padding:96px 0}
.sec-md{padding:72px 0}
.w{max-width:1360px;margin:0 auto;padding:0 32px}
.tg{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--A);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tg::before{content:'';width:20px;height:2px;background:var(--A)}
.h2{font-family:var(--title);font-size:clamp(32px,3.5vw,52px);font-weight:800;color:var(--N);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.lead{font-size:15.5px;color:var(--S);line-height:1.85;max-width:480px;margin-top:12px;font-weight:300}

/* ── SERVICES ── */
.svc-hd{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;flex-wrap:wrap;gap:20px}
.svc-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--R)}
.svc{border-right:1px solid var(--R);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;background:var(--W);transition:background .25s}
.svc:last-child{border-right:none}
.svc-img{height:200px;overflow:hidden;flex-shrink:0}
.svc-img img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s}
.svc:hover .svc-img img{transform:scale(1.05)}
.svc-bd{padding:24px 20px;flex:1;display:flex;flex-direction:column}
.svc-n{font-family:var(--title);font-size:32px;font-weight:900;color:var(--R);line-height:1;margin-bottom:10px}
.svc-title{font-family:var(--title);font-size:17px;font-weight:800;color:var(--N);line-height:1.2;margin-bottom:8px;text-transform:uppercase;letter-spacing:.01em}
.svc-desc{font-size:12.5px;color:var(--M);line-height:1.6;flex:1}
.svc-arrow{font-size:11px;font-weight:800;color:var(--A);letter-spacing:.08em;text-transform:uppercase;margin-top:14px;display:block}
.svc:hover{background:var(--N)}
.svc:hover .svc-n{color:rgba(255,255,255,.08)}
.svc:hover .svc-title{color:var(--W)}
.svc:hover .svc-desc{color:rgba(255,255,255,.4)}
.svc:hover .svc-arrow{color:var(--A2)}

/* ── ABOUT SPLIT ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--R)}
.about-photo{min-height:520px;position:relative;overflow:hidden;background:var(--D)}
.about-photo img{width:100%;height:100%;min-height:320px;object-fit:cover;opacity:.88}
.about-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(14,14,14,.45) 0%,transparent 55%)}
.about-text{padding:64px 56px;display:flex;flex-direction:column;justify-content:center;background:var(--W)}
.feats{margin-top:36px}
.feat{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--R)}
.feat:last-child{border:none}
.feat-n{font-family:var(--title);font-size:14px;font-weight:900;color:var(--A);min-width:28px;margin-top:1px}
.feat strong{display:block;font-size:14px;font-weight:700;color:var(--N);margin-bottom:3px}
.feat p{font-size:13px;color:var(--M);line-height:1.65}

/* ── NUMBERS ── */
.num-bg{background:var(--D)}
.num-row{display:grid;grid-template-columns:repeat(4,1fr)}
.num-box{padding:48px 44px;border-right:1px solid rgba(255,255,255,.07)}
.num-box:last-child{border:none}
.num-box strong{display:block;font-family:var(--title);font-size:64px;font-weight:900;color:var(--W);line-height:1;margin-bottom:7px}
.num-box strong sup{font-size:28px;color:var(--A);font-family:var(--body)}
.num-box p{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.28);letter-spacing:.14em;text-transform:uppercase}

/* ── GALLERY ── */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:230px 230px;gap:3px}.gallery .g-item{min-height:180px}
.g-item{overflow:hidden;position:relative;cursor:pointer}
.g-item:first-child{grid-column:span 2;grid-row:span 2}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.g-item:hover img{transform:scale(1.05)}
.g-cap{position:absolute;bottom:0;left:0;right:0;padding:14px 18px;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%);opacity:0;transition:opacity .3s}
.g-item:hover .g-cap{opacity:1}
.g-cap span{font-size:11px;font-weight:700;color:#fff;letter-spacing:.1em;text-transform:uppercase}

/* ── AVIS ── */
.avis-bg{background:var(--BG)}
.avis-hd{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;flex-wrap:wrap;gap:20px}
.g-box{display:flex;align-items:center;gap:14px;background:var(--W);border:1px solid var(--R);padding:14px 20px}
.g-box svg{width:28px;height:28px;flex-shrink:0}
.gs strong{display:block;font-size:21px;font-weight:700}
.gs .stars{color:#f59e0b;font-size:12px;letter-spacing:2px}
.gs small{display:block;font-size:11px;color:var(--M)}
.live{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#16a34a;margin-left:10px}
.ldot{width:6px;height:6px;background:#16a34a;border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--R);border:1px solid var(--R)}
.avis-card{background:var(--W);padding:28px 26px;position:relative;overflow:hidden}
.avis-card::after{content:'\201C';font-family:var(--title);font-size:100px;font-weight:900;color:var(--BG);position:absolute;top:8px;right:18px;line-height:1;pointer-events:none}
.av-hd{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.av-init{width:40px;height:40px;border-radius:50%;background:var(--D);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.av-meta strong{display:block;font-size:13.5px;font-weight:700}
.av-meta small{font-size:11px;color:var(--M)}
.av-stars{color:#f59e0b;font-size:12px;letter-spacing:2px;margin-bottom:10px}
.av-txt{font-size:13.5px;color:var(--S);line-height:1.75}
.av-empty{grid-column:1/-1;padding:52px;text-align:center;font-size:14px;color:var(--M)}

/* ── PROCESS ── */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--R);margin-top:48px}
.proc-step{padding:38px 30px;border-right:1px solid var(--R)}
.proc-step:last-child{border:none}
.proc-n{font-family:var(--title);font-size:72px;font-weight:900;color:var(--R);line-height:1;margin-bottom:16px}
.proc-step h4{font-family:var(--title);font-size:18px;font-weight:800;color:var(--N);margin-bottom:8px;text-transform:uppercase;letter-spacing:.01em}
.proc-step p{font-size:13px;color:var(--M);line-height:1.7}

/* ── ZONES ── */
.zones-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--R);margin-top:44px}
.zt{border-right:1px solid var(--R);border-bottom:1px solid var(--R);padding:30px 28px;cursor:pointer;transition:background .2s}
.zt:nth-child(4n){border-right:none}
.zt:nth-last-child(-n+4){border-bottom:none}
.zt:hover{background:var(--N)}
.zt:hover h3,.zt:hover .zd,.zt:hover .zt-desc{color:var(--W)!important}
.zt:hover .ztag{background:rgba(255,255,255,.07);border-color:transparent;color:rgba(255,255,255,.45)}
.zt h3{font-family:var(--title);font-size:20px;font-weight:800;color:var(--N);margin-bottom:3px;text-transform:uppercase;transition:color .2s}
.zd{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--M);margin-bottom:9px;transition:color .2s}
.zt-desc{font-size:12.5px;color:var(--S);line-height:1.6;margin-bottom:12px;transition:color .2s}
.ztags{display:flex;flex-wrap:wrap;gap:4px}
.ztag{font-size:11px;padding:3px 9px;border:1px solid var(--R);color:var(--M);transition:all .2s}

/* ── BLOG ── */
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--R);border:1px solid var(--R);margin-top:44px}
.blog-card{background:var(--W);overflow:hidden;cursor:pointer;transition:background .2s}
.blog-card:hover{background:var(--BG)}
.blog-th{height:180px;overflow:hidden;background:var(--D)}
.blog-th img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s}
.blog-card:hover .blog-th img{transform:scale(1.05)}
.blog-bd{padding:22px 20px}
.blog-cat{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--A);margin-bottom:8px}
.blog-card h3{font-family:var(--title);font-size:16px;font-weight:700;color:var(--N);line-height:1.3;margin-bottom:7px;text-transform:uppercase;letter-spacing:.01em}
.blog-date{font-size:11px;color:var(--M)}

/* ── CTA ── */
.cta-band{background:var(--N);padding:84px 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-in h2{font-family:var(--title);font-size:clamp(28px,3.5vw,52px);font-weight:900;color:var(--W);line-height:1;text-transform:uppercase;margin-bottom:8px}
.cta-in p{font-size:15px;color:rgba(255,255,255,.38);font-weight:300}
.cta-btns{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap}
.btn-w{background:var(--W);color:var(--N);padding:15px 28px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px;transition:all .2s}
.btn-w:hover{background:var(--BG);transform:translateY(-1px)}
.btn-g{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.65);padding:15px 28px;font-size:12.5px;font-weight:600;transition:all .2s}
.btn-g:hover{border-color:rgba(255,255,255,.5);color:var(--W)}

/* ── PAGE HEADER ── */
.ph{background:var(--D);padding:64px 0 52px;border-bottom:3px solid var(--A)}
.ph-w{max-width:1360px;margin:0 auto;padding:0 32px}
.bc{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.3);margin-bottom:16px}
.bc a{color:rgba(255,255,255,.3);transition:color .15s}
.bc a:hover{color:rgba(255,255,255,.65)}
.bc-s{font-size:10px;opacity:.3}
.ph h1{font-family:var(--title);font-size:clamp(32px,5vw,64px);font-weight:900;color:var(--W);line-height:1;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:12px}
.ph-sub{font-size:15px;color:rgba(255,255,255,.42);max-width:560px;line-height:1.75;font-weight:300}

/* ── 2-COL PAGE ── */
.pl{max-width:1360px;margin:0 auto;padding:64px 32px;display:grid;grid-template-columns:1fr 310px;gap:60px;align-items:start}
.prose h2{font-family:var(--title);font-size:24px;font-weight:800;color:var(--N);margin:44px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--R);text-transform:uppercase}
.prose h2:first-child{margin-top:0}
.prose p{font-size:14.5px;color:var(--S);line-height:1.9;margin-bottom:14px}
.prose ul{margin:14px 0}
.prose ul li{font-size:14px;color:var(--S);padding:10px 0;border-bottom:1px solid var(--BG);display:flex;align-items:baseline;gap:12px}
.prose ul li::before{content:'—';color:var(--A);font-weight:900;flex-shrink:0;font-size:11px}
.prose blockquote{background:var(--BG);border-left:4px solid var(--N);padding:16px 20px;margin:24px 0;font-family:var(--title);font-size:18px;font-weight:700;color:var(--N);text-transform:uppercase}
.prose img{width:100%;height:280px;object-fit:cover;margin:24px 0}
.zpills{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}
.zpill{font-size:11.5px;font-weight:600;padding:5px 12px;border:1px solid var(--R);color:var(--S)}
.seo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--R);border:1px solid var(--R);margin-top:24px}
.seo-lnk{background:var(--W);padding:12px 16px;font-size:12.5px;color:var(--S);transition:all .15s;display:block}
.seo-lnk:hover{background:var(--BG);color:var(--N)}

/* Sidebar */
.sb{display:flex;flex-direction:column;gap:12px;position:sticky;top:82px}
.sb-cta{background:var(--N);padding:28px 24px}
.sb-cta h3{font-family:var(--title);font-size:21px;font-weight:800;color:var(--W);text-transform:uppercase;margin-bottom:8px}
.sb-cta p{font-size:12.5px;color:rgba(255,255,255,.4);line-height:1.65;margin-bottom:18px}
.sb-btn{display:block;text-align:center;background:var(--W);color:var(--N);padding:12px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:background .15s}
.sb-btn:hover{background:var(--BG)}
.sb-tel{display:flex;align-items:center;justify-content:center;gap:7px;color:rgba(255,255,255,.45);font-size:13.5px;font-weight:700;margin-top:12px}
.sb-box{background:var(--BG);border:1px solid var(--R);padding:18px}
.sb-box h4{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--M);margin-bottom:12px}
.sb-box a{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--S);padding:8px 0;border-bottom:1px solid var(--R);transition:color .15s;font-weight:500}
.sb-box a:last-child{border:none}
.sb-box a:hover{color:var(--N)}
.sb-box a::after{content:'›';font-size:16px;opacity:.4}

/* ── CONTACT ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:0;border:1px solid var(--R)}
.cl{background:var(--D);padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.cl .h2{color:var(--W)}
.cl .lead{color:rgba(255,255,255,.38);max-width:100%;margin-bottom:36px}
.c-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.c-row:last-child{border:none}
.c-ico{width:36px;height:36px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.c-ico svg{width:16px;height:16px;stroke:rgba(255,255,255,.45);fill:none}
.c-row strong{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:3px}
.c-row span,.c-row a{font-size:14px;color:rgba(255,255,255,.62);transition:color .15s}
.c-row a:hover{color:var(--W)}
.cr{background:var(--W);padding:56px 48px}
.cr h3{font-family:var(--title);font-size:24px;font-weight:800;color:var(--N);text-transform:uppercase;margin-bottom:24px}
.fg{margin-bottom:12px}
.fg label{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--M);margin-bottom:5px}
.fg input,.fg select,.fg textarea{width:100%;padding:11px 13px;border:1px solid var(--R);background:var(--W);font-family:var(--body);font-size:14px;color:var(--N);outline:none;transition:border-color .2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--N)}
.fg textarea{min-height:90px;resize:vertical}
.fg-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f-chk{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.f-chk input{width:auto;flex-shrink:0;margin-top:3px;accent-color:var(--N)}
.f-chk label{font-size:11.5px;color:var(--M);font-weight:400;text-transform:none;letter-spacing:0}
.f-sub{width:100%;background:var(--N);color:var(--W);padding:14px;font-family:var(--body);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:background .2s;cursor:pointer;border:none}
.f-sub:hover{background:var(--A)}
.f-note{font-size:11px;color:var(--M);text-align:center;margin-top:9px}

/* ── FOOTER ── */
footer{background:var(--D);border-top:1px solid rgba(255,255,255,.05)}
.foot-main{max-width:1360px;margin:0 auto;padding:60px 32px 48px;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:48px;border-bottom:1px solid rgba(255,255,255,.05)}
.f-brand{}
.f-logo{display:flex;align-items:center;gap:0;margin-bottom:18px}
.f-lbar{width:4px;height:34px;background:var(--A);flex-shrink:0;margin-right:12px}
.f-lname{font-family:var(--title);font-size:17px;font-weight:800;color:var(--W);text-transform:uppercase}
.f-brand p{font-size:12.5px;color:rgba(255,255,255,.3);line-height:1.8;max-width:265px;margin-bottom:22px;font-weight:300}
.f-coords{display:flex;flex-direction:column;gap:7px}
.f-coords a,.f-coords span{font-size:12px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:7px;transition:color .15s}
.f-coords a:hover{color:rgba(255,255,255,.65)}
.f-coords svg{width:11px;height:11px;fill:currentColor;opacity:.5;flex-shrink:0}
footer h5{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:16px}
footer ul{display:flex;flex-direction:column;gap:8px}
footer ul a{font-size:12.5px;color:rgba(255,255,255,.32);transition:color .15s;font-weight:400}
footer ul a:hover{color:rgba(255,255,255,.7)}
.foot-bot{max-width:1360px;margin:0 auto;padding:16px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.foot-bot span,.foot-bot a{font-size:11.5px;color:rgba(255,255,255,.2)}
.foot-bot a:hover{color:rgba(255,255,255,.5)}
.foot-links{display:flex;gap:16px}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-r{display:none}
  .svc-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .about-grid{grid-template-columns:1fr}
  .about-photo{min-height:320px}
  .num-row{grid-template-columns:repeat(2,1fr)}
  .avis-grid{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:repeat(2,1fr)}.proc-step:nth-child(2n){border-right:none}.proc-step:nth-child(-n+2){border-bottom:1px solid var(--R)}
  .zones-grid{grid-template-columns:repeat(2,1fr)}.zt:nth-child(2n){border-right:none}.zt:nth-last-child(-n+2){border-bottom:none}.zt:nth-child(2n){border-right:none}.zt:nth-last-child(-n+2){border-bottom:none}
  .blog-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot-main{grid-template-columns:1fr 1fr}
  .pl{grid-template-columns:1fr}
  .sb{position:static}
  .mega-p{width:100%;grid-template-columns:repeat(3,1fr)}
  .mega-z{width:100%;grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .w,.nav-w,.tb-w,.ph-w,.foot-main,.foot-bot,.cta-in,.pl{padding-left:20px;padding-right:20px}
  .sec{padding:60px 0}
  .hero-l{padding:60px 20px 52px;min-height:auto}
  .svc-grid{grid-template-columns:1fr 1fr}
  .num-row{grid-template-columns:1fr 1fr}
  .avis-grid{grid-template-columns:1fr}
  .zones-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}.gallery .g-item{height:180px}.gallery .g-item:first-child{height:180px}
  .g-item:first-child{grid-column:span 1;grid-row:span 1}
  .fg-2{grid-template-columns:1fr}
  .cl,.cr{padding:36px 24px}
  .foot-main{grid-template-columns:1fr;gap:30px;padding:40px 20px}
  .nav-ul{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--W);border-bottom:2px solid var(--R);box-shadow:0 20px 40px rgba(0,0,0,.1);padding:8px 0}
  .nav-ul.open{display:flex}
  .ni>a,.ni>button{height:48px;padding:0 24px;font-size:14px}
  .mega{position:static;border:none;box-shadow:none;opacity:1;visibility:visible;pointer-events:all;transform:none;padding:4px 20px 12px}
  .mega-p,.mega-z{width:100%;grid-template-columns:1fr;padding:0}
  .mob-tog{display:flex}
  .nav-cta{display:none}
  .tb .tb-l{display:none}.tb-dv{display:none}@media(max-width:768px){.tb-tel{font-size:14px;font-weight:800}}
  .trust-w{gap:16px;height:auto;padding:10px 20px}
}

/* ═══════════════════════════════════
   ANIMATIONS & TRANSITIONS
═══════════════════════════════════ */

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) }
.reveal.visible { opacity:1; transform:none }
.reveal-l { opacity:0; transform:translateX(-40px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) }
.reveal-l.visible { opacity:1; transform:none }
.reveal-r { opacity:0; transform:translateX(40px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) }
.reveal-r.visible { opacity:1; transform:none }
.reveal-scale { opacity:0; transform:scale(.95); transition:opacity .6s ease, transform .6s ease }
.reveal-scale.visible { opacity:1; transform:scale(1) }

/* Stagger delays */
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* Hero text animation */
.hero h1 { animation: heroIn .9s cubic-bezier(.16,1,.3,1) both }
.hero-tag { animation: fadeUp .7s cubic-bezier(.16,1,.3,1) .1s both }
.hero-sub { animation: fadeUp .7s cubic-bezier(.16,1,.3,1) .2s both }
.hero-btns { animation: fadeUp .7s cubic-bezier(.16,1,.3,1) .3s both }
.hero-stats { animation: fadeUp .7s cubic-bezier(.16,1,.3,1) .45s both }
@keyframes heroIn { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }

/* Nav scroll effect */
.nav.scrolled { box-shadow:0 2px 24px rgba(0,0,0,.08) }

/* Number counter animation */
.num-box strong { transition:opacity .4s }

/* Button pulse */
.btn-wp:hover, .btn-w:hover { animation:pulse .4s ease }
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }

/* Svc card slide */
.svc { transition:background .25s, transform .2s }
.svc:hover { transform:translateY(-2px) }

/* Trust bar items */
.ti { transition:opacity .2s }
.trust:hover .ti { opacity:.6 }
.trust:hover .ti:hover { opacity:1 }

/* Page transition */
.page { animation:none }
.page.active { animation:pageIn .35s cubic-bezier(.16,1,.3,1) }
@keyframes pageIn { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }

/* ═══════════════════════════════════
   ONBOARDING SPLASH — BTP BRICK ANIMATION
═══════════════════════════════════ */
#onboarding {
  position:fixed; inset:0; z-index:9999;
  background:#1a1008;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
#onboarding.out { opacity:0; transform:scale(1.04); pointer-events:none }

/* Brick wall fills screen from bottom */
.ob-bricks {
  position:absolute; inset:0; overflow:hidden;
  display:flex; flex-direction:column-reverse;
}
.ob-wall {
  width:100%; display:flex; flex-direction:column-reverse; gap:0;
}
.ob-row {
  display:flex; gap:3px; margin-bottom:3px; 
  transform:translateX(0);
}
.ob-row:nth-child(even) { margin-left:-46px }
.ob-brick {
  height:28px; flex:none; width:88px;
  background:#5c3318; border:1px solid #3a1f0a;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
  position:relative; overflow:hidden;
}
/* Brick texture grain */
.ob-brick::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 50%,rgba(0,0,0,.08) 100%);
}
/* Brick mortar line horizontal */
.ob-brick::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:#2a0e00; opacity:.6;
}
/* Brick color variants */
.ob-brick.b1 { background:#5c3318 }
.ob-brick.b2 { background:#6b3d20 }
.ob-brick.b3 { background:#7a4526 }
.ob-brick.b4 { background:#4a2810 }
.ob-brick.b5 { background:#624030 }
.ob-brick.show { transform:scaleY(1) }

/* Overlay gradient so logo reads on top */
.ob-bricks::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(26,16,8,.82) 0%, rgba(26,16,8,.3) 100%);
  pointer-events:none;
}

/* Logo + content centered */
.ob-content {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  padding:40px;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease .4s, transform .6s cubic-bezier(.16,1,.3,1) .4s;
}
.ob-content.show { opacity:1; transform:none }

.ob-logo-wrap {
  width:clamp(240px,40vw,400px); 
  filter:drop-shadow(0 4px 32px rgba(0,0,0,.8));
}
.ob-logo-svg { width:100%; height:auto; display:block }
.ob-logo-svg svg { width:100%; height:auto }

.ob-tagline {
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.4); text-align:center;
}

/* Progress loader */
.ob-loader {
  width:clamp(200px,35vw,320px); 
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.ob-loader-bar {
  width:100%; height:3px; background:rgba(255,255,255,.1); position:relative; overflow:hidden;
}
.ob-loader-bar::after {
  content:''; position:absolute; left:0; top:0; height:100%; width:0%;
  background:linear-gradient(90deg, #B94040, #d05050);
  transition:width 1.8s cubic-bezier(.4,0,.2,1);
}
.ob-loader-bar.go::after { width:100% }
.ob-loader-pct {
  font-size:11px; font-weight:700; color:rgba(255,255,255,.3); letter-spacing:.1em;
}
.ob-progress {
  position:absolute; bottom:0; left:0; height:3px; background:var(--A);
  width:0%; transition:width 1.8s cubic-bezier(.4,0,.2,1);
}
.ob-progress.go { width:100% }

/* ═══════════════════════════════════
   COOKIE BANNER
═══════════════════════════════════ */
#cookie-banner {
  position:fixed; bottom:24px; left:24px; right:24px; max-width:560px;
  background:var(--D); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 64px rgba(0,0,0,.4);
  padding:24px 28px; z-index:8888;
  display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap;
  transform:translateY(calc(100% + 32px)); opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
#cookie-banner.visible { transform:none; opacity:1 }
.ck-ico { width:40px; height:40px; background:var(--A); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px }
.ck-ico svg { width:20px; height:20px; fill:#fff }
.ck-body { flex:1; min-width:200px }
.ck-title { font-family:var(--title); font-size:17px; font-weight:800; color:var(--W); text-transform:uppercase; margin-bottom:6px }
.ck-txt { font-size:12.5px; color:rgba(255,255,255,.45); line-height:1.65 }
.ck-txt a { color:rgba(255,255,255,.65); text-decoration:underline }
.ck-btns { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap }
.ck-accept {
  background:var(--A); color:#fff; padding:9px 20px;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; border:none; font-family:var(--body);
  transition:background .15s
}
.ck-accept:hover { background:var(--A2) }
.ck-refuse {
  background:transparent; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.5);
  padding:9px 20px; font-size:12px; font-weight:600; cursor:pointer;
  font-family:var(--body); transition:all .15s
}
.ck-refuse:hover { border-color:rgba(255,255,255,.5); color:rgba(255,255,255,.8) }
.ck-close { position:absolute; top:14px; right:16px; width:24px; height:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.3); font-size:18px; line-height:1; transition:color .15s }
.ck-close:hover { color:rgba(255,255,255,.7) }

/* ═══════════════════════════════════
   BACK TO TOP
═══════════════════════════════════ */
#btt {
  position:fixed; bottom:28px; right:28px; z-index:500;
  width:44px; height:44px; background:var(--N); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transform:translateY(10px);
  transition:opacity .3s, transform .3s, background .15s;
  border:1px solid rgba(255,255,255,.1)
}
#btt.show { opacity:1; transform:none }
#btt:hover { background:var(--A) }
#btt svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

/* ═══════════════════════════════════
   COUNTER ANIMATION
═══════════════════════════════════ */
.count-up { display:inline-block }

/* Reduce motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
  #onboarding { display:none }
}