:root{
  --paper:#f2f2f0;
  --ink:#1f2124;
  --ink-2:#2a2d31;
  --grout:#e4e3df;
  --line:#cfcdc7;
  --signal:#d6232a;
  --signal-dk:#b81c22;
  --slate:#59626b;
  --wa:#0e8a49;
  --f-display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --f-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --pad:clamp(20px,4vw,40px);
  --maxw:1240px;
  --hdr:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:2px}
.sec--ink :focus-visible,.sec--signal :focus-visible{outline-color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;z-index:100;border-radius:2px}
.skip:focus{top:12px}

h1,h2,h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.005em;margin:0}
h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1}
h3{font-size:1.5rem}
p{margin:0}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:34em;color:#3a3e43}
.lead--lt{color:#c9ccd0}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 .78rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:22px}
.eyebrow i{width:11px;height:11px;background:var(--signal);flex:none}
.eyebrow--lt{color:#b4b8bd}
.sec--signal .eyebrow{color:#ffd9da}
.sec--signal .eyebrow i{background:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border:2px solid transparent;border-radius:3px;font-weight:700;font-size:1rem;line-height:1.1;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,color .15s,border-color .15s;text-align:center}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:11px 16px;font-size:.92rem}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:#0b7a40}
.btn--ghost{border-color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--paper{background:#fff;color:var(--ink)}
.btn--paper:hover{background:var(--signal);color:#fff}
.btn--line{border-color:#6b7075;color:#fff;background:transparent}
.btn--line:hover{border-color:#fff}
.btn--line-dk{border-color:var(--ink);background:transparent}
.btn--line-dk:hover{background:var(--ink);color:#fff}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
.top__in{max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;padding:0 var(--pad);height:var(--hdr);display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand__mark{width:44px;height:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1.1}
.brand__txt strong{font:800 1.35rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.brand__txt small{font:400 .72rem/1.3 var(--f-mono);letter-spacing:.04em;color:var(--slate);margin-top:3px}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{white-space:nowrap;text-decoration:none;font-weight:600;font-size:.95rem;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}
.top__cta{display:flex;align-items:center;gap:18px}
.tel{display:flex;align-items:center;gap:8px;font:500 .95rem var(--f-mono);text-decoration:none;white-space:nowrap}
.tel svg{width:16px;height:16px;fill:var(--signal)}
.tel:hover{color:var(--signal)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:2px solid var(--ink);background:none;border-radius:3px;cursor:pointer;position:relative}
.burger i{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .2s,top .2s}
.burger i:nth-child(2){top:15px}.burger i:nth-child(3){top:25px}
.top.open .burger i:nth-child(2){top:20px;transform:rotate(45deg)}
.top.open .burger i:nth-child(3){top:20px;transform:rotate(-45deg)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:min(calc(100svh - var(--hdr)),820px);border-bottom:2px solid var(--ink)}
.hero__copy{padding:clamp(36px,6vw,84px) clamp(24px,3vw,56px) clamp(36px,5vw,64px) max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));display:flex;flex-direction:column;justify-content:center}
h1{font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:.95;margin-bottom:12px}
.tagline{font:800 clamp(1.5rem,2.6vw,2.2rem)/1 var(--f-display);text-transform:uppercase;color:var(--signal);margin-bottom:22px}
h1 .hl{color:var(--signal)}
.hero .lead{margin-bottom:32px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px}
.facts{margin:0;display:grid;gap:14px;border-top:2px solid var(--ink);padding-top:18px}
.facts div{display:grid;grid-template-columns:7.5rem 1fr;gap:12px;align-items:baseline}
.facts dt{font:500 .74rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.facts dd{margin:0;font-weight:600}
.hero__floor{position:relative;background:#d3d1cb;min-height:420px}
#floor{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}
.floor__ui{position:absolute;left:16px;bottom:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.floor__hint{background:var(--ink);color:#fff;font:400 .78rem/1.35 var(--f-mono);padding:10px 14px;border-radius:2px;max-width:21em}
.hint-touch{display:none}
@media (hover:none){.hint-fine{display:none}.hint-touch{display:inline}}
.swatches{display:flex;gap:8px;background:var(--paper);padding:8px;border-radius:3px;pointer-events:auto;border:2px solid var(--ink)}
.sw{width:30px;height:30px;border:2px solid transparent;background:var(--c);border-radius:2px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.sw.is-on{border-color:var(--paper);outline:2px solid var(--ink)}

/* sections */
.sec{padding:clamp(72px,10vw,132px) 0}
.wrap{max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.sec__head{margin-bottom:clamp(36px,5vw,64px)}
.sec--ink{background:var(--ink);color:#fff}
.sec--grout{background:var(--grout)}
.sec--signal{background:var(--signal);color:#fff}

/* services */
.services{display:flex;gap:8px;height:clamp(500px,64vh,600px)}
.svc{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--ink);color:#fff;transition:flex-grow .55s cubic-bezier(.2,.8,.2,1);border-radius:3px}
.svc.is-active{flex-grow:3.2}
.svc__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,21,23,.94) 0%,rgba(20,21,23,.55) 45%,rgba(20,21,23,.05) 75%);pointer-events:none}
.svc__body{position:absolute;inset:auto 0 0 0;padding:26px;z-index:2}
.svc__tag{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#d5d8dc;margin-bottom:10px}
.svc h3{font-size:clamp(1.4rem,2.2vw,2.1rem);margin:0}
.svc__toggle{all:unset;cursor:pointer;display:block}
.svc__toggle:focus-visible{outline:3px solid #fff;outline-offset:4px}
.svc__more{visibility:hidden;max-height:0;opacity:0;overflow:hidden;transition:max-height .55s cubic-bezier(.2,.8,.2,1),opacity .3s,margin .3s,visibility 0s .55s;width:min(30rem,calc(100vw - 80px))}
.svc.is-active .svc__more{visibility:visible;max-height:420px;opacity:1;margin-top:16px;transition-delay:0s,.15s,0s,0s}
.svc__more p{color:#e4e6e8;font-size:1rem}
.svc__more ul{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:7px;font-size:.95rem}
.svc__more li{padding-left:22px;position:relative}
.svc__more li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--signal)}
.chantiers{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chantiers li{border:2px solid var(--ink);padding:8px 16px;font-weight:600;font-size:.95rem;border-radius:2px}

/* composer */
.composer{display:grid;gap:clamp(36px,5vw,64px)}
.composer__intro{max-width:46rem}
.composer__intro h2{margin-bottom:22px}
.composer__stage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start}
.preview{position:relative;border:2px solid #fff;background:#000;aspect-ratio:4/3;overflow:hidden;border-radius:3px}
#preview{width:100%;height:100%}
.preview__cap{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;font:400 .78rem/1.3 var(--f-mono);padding:9px 14px;letter-spacing:.03em}
.controls{display:grid;gap:22px}
.controls fieldset{border:0;margin:0;padding:0;min-width:0}
.controls fieldset[disabled]{opacity:.35}
.controls legend{font:500 .74rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#aeb2b7;margin-bottom:10px;padding:0}
.controls legend b{color:#fff;font-weight:500;margin-left:8px;text-transform:none;letter-spacing:.02em}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:10px 16px;border:2px solid #4a4f55;border-radius:2px;font-weight:600;font-size:.95rem;transition:background .15s,border-color .15s,color .15s}
.seg label:hover span{border-color:#9aa0a6}
.seg input:checked + span{background:#fff;color:var(--ink);border-color:#fff}
.seg input:focus-visible + span{outline:3px solid var(--signal);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{width:42px;height:42px;border-radius:2px;border:2px solid transparent;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.chip[aria-pressed="true"]{outline:3px solid #fff;outline-offset:3px}
.controls__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink)}
.steps li{padding:28px 26px 8px 0;position:relative}
.steps li + li{padding-left:26px;border-left:2px solid var(--ink)}
.steps__n{display:grid;place-items:center;width:46px;height:46px;background:var(--ink);color:#fff;font:800 1.6rem/1 var(--f-display);margin-bottom:20px}
.steps li:nth-child(4) .steps__n{background:var(--signal)}
.steps h3{font-size:1.5rem;margin-bottom:12px}
.steps p{color:#3a3e43;font-size:1rem}

/* zone */
.zone{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,80px);align-items:start}
.zone h2{margin-bottom:22px}
.towns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.towns button{background:transparent;border:2px solid rgba(255,255,255,.7);color:#fff;padding:11px 18px;font-weight:600;border-radius:2px;cursor:pointer;transition:background .15s,color .15s}
.towns button:hover,.towns button.is-on{background:#fff;color:var(--signal-dk);border-color:#fff}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,80px);align-items:start}
.contact h2{margin-bottom:22px}
.rows{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid #3d4146}
.rows li{display:grid;grid-template-columns:7rem 1fr;gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px solid #3d4146}
.rows span{font:500 .74rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#9aa0a6}
.rows a{font-weight:600;font-size:1.1rem;text-decoration-color:var(--signal);text-underline-offset:4px;word-break:break-word}
.rows a:hover{color:#fff;text-decoration-thickness:3px}
.form{background:var(--paper);color:var(--ink);padding:clamp(22px,3.5vw,40px);border-radius:3px}
.form h3{font-size:1.7rem;margin-bottom:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid2 .full{grid-column:1/-1}
.form label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
.form label small{font-weight:400;color:var(--slate)}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:2px;background:#fff;font-weight:400;font-size:1rem;transition:border-color .15s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink)}
.form .bad{border-color:var(--signal)}
.form textarea{resize:vertical;min-height:120px}
.form__err{min-height:1.5em;margin:12px 0 0;color:var(--signal-dk);font-weight:600;font-size:.92rem}
.form__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.form__note{margin-top:16px;font-size:.84rem;color:var(--slate)}

/* footer */
.foot{background:#16181a;color:#aeb2b7;font-size:.92rem}
.foot__in{max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;padding:30px var(--pad) 40px;display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between}
.foot strong{color:#fff}
.foot a{text-underline-offset:3px}
.foot__c{font-family:var(--f-mono);font-size:.8rem}

/* floating contact */
.wafab{position:fixed;right:20px;bottom:20px;z-index:40;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .2s}
.wafab:hover{transform:scale(1.08)}
.wafab svg{width:32px;height:32px;fill:#fff}
.dock{display:none}

/* reveal */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
.steps li.reveal:nth-child(2){transition-delay:.08s}.steps li.reveal:nth-child(3){transition-delay:.16s}.steps li.reveal:nth-child(4){transition-delay:.24s}

/* responsive */
@media (max-width:1180px){
  .nav{gap:16px}
  .nav a{font-size:.9rem}
}
@media (max-width:1060px){
  .tel{display:none}
}
@media (max-width:900px){
  :root{--hdr:64px}
  .burger{display:block}
  .top__cta{display:none}
  .nav{position:absolute;left:0;right:0;top:calc(var(--hdr) + 2px);background:var(--paper);flex-direction:column;gap:0;padding:8px var(--pad) 18px;border-bottom:2px solid var(--ink);display:none;margin:0}
  .top.open .nav{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.1rem}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__copy{padding:40px var(--pad) 36px}
  .hero__floor{height:min(62vw,440px);min-height:320px;border-top:2px solid var(--ink)}
  .floor__ui{flex-direction:column;align-items:flex-start}
  .services{flex-direction:column;height:auto}
  .svc{flex:none;min-height:340px}
  .svc.is-active{flex-grow:0}
  .svc__more{visibility:visible;max-height:none;opacity:1;margin-top:16px;width:auto}
  .svc__body{position:relative;padding:150px 22px 24px}
  .svc__more ul{margin:14px 0 18px}
  .composer__stage,.zone,.contact{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps li{padding:24px 20px 12px 0}
  .steps li + li{padding-left:0;border-left:0}
  .steps li:nth-child(even){padding-left:20px;border-left:2px solid var(--ink)}
  .steps li:nth-child(n+3){border-top:2px solid var(--ink)}
  .wafab{display:none}
  .dock{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;border-top:2px solid var(--ink)}
  .dock a{padding:15px 10px;text-align:center;font-weight:700;text-decoration:none}
  .dock__tel{background:var(--paper)}
  .dock__wa{background:var(--wa);color:#fff}
  .foot__in{padding-bottom:84px}
}
@media (max-width:560px){
  .grid2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps li:nth-child(even){padding-left:0;border-left:0}
  .steps li:nth-child(n+2){border-top:2px solid var(--ink)}
  .facts div{grid-template-columns:1fr;gap:2px}
  .rows li{grid-template-columns:1fr;gap:2px}
  .btn{width:100%}
  .btn--sm{width:auto}
  .brand__txt small{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .js .reveal{opacity:1;transform:none}
}

/* business card in hero */
.bcard{position:absolute;right:clamp(14px,3vw,40px);top:clamp(14px,3vw,40px);width:clamp(210px,24vw,300px);background:#fafaf8;color:#26282b;border-radius:14px;box-shadow:0 2px 0 rgba(255,255,255,.7) inset,0 28px 50px -12px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.25);transform:rotate(3.2deg);pointer-events:none;overflow:hidden;font-family:var(--f-body)}
.bcard__top{display:flex;justify-content:space-between;gap:10px;padding:16px 16px 12px 18px}
.bcard__top b{display:block;font-size:1.05rem;line-height:1.1}
.bcard__top span{display:block;font-size:.78rem;margin:2px 0 6px}
.bcard__top em{font-style:normal;color:var(--signal);font-weight:600;font-size:.62rem;word-break:break-all}
.bcard__top svg{width:46px;height:auto;flex:none}
.bcard__band{background:var(--signal);color:#fff;font-weight:700;font-size:.62rem;padding:7px 18px;transform:skewY(-1.5deg);margin:2px -4px 0;letter-spacing:.01em}
.bcard__bot{display:flex;justify-content:space-between;align-items:flex-end;padding:20px 18px 14px;font-weight:700;font-size:.7rem}
.bcard__bot em{font-style:normal;color:var(--signal)}
@media (max-width:560px){.bcard{display:none}}

/* hero floor refinement */
.hero__floor{background:#cbc9c2;box-shadow:inset 18px 0 30px -20px rgba(0,0,0,.35)}
.swatches{box-shadow:0 10px 24px rgba(0,0,0,.25)}
.sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),inset 0 -6px 10px rgba(0,0,0,.08)}

/* before / after */
.ba{position:relative;height:clamp(300px,46vw,540px);--p:50%;overflow:hidden;border-radius:4px;box-shadow:0 30px 60px -28px rgba(0,0,0,.5);background:#444;touch-action:pan-y;user-select:none}
.ba canvas{position:absolute;inset:0;width:100%;height:100%}
#baBefore{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba__tag{position:absolute;top:16px;background:var(--ink);color:#fff;font:500 .74rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:2px;pointer-events:none}
.ba__tag--l{left:16px}.ba__tag--r{right:16px}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.ba__handle i{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.ba__handle i::before,.ba__handle i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-7px;border:7px solid transparent}
.ba__handle i::before{left:9px;border-right-color:var(--ink)}
.ba__handle i::after{right:9px;border-left-color:var(--ink)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba:focus-within .ba__handle i{outline:3px solid var(--signal);outline-offset:3px}

/* composer preview polish */
.preview{box-shadow:0 30px 70px -20px rgba(0,0,0,.8);border-color:#3a3d42}
.preview::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px rgba(0,0,0,.35)}
.preview__cap{z-index:2}

/* services polish */
.svc{box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
@media (max-width:900px){.bcard{display:none}}
.bcard__top em{word-break:normal;white-space:nowrap;font-size:.58rem}

/* a11y refinements */
.swatches .sw:focus-visible,.chips .chip:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.seg input:disabled + span{opacity:.3;cursor:not-allowed}
.form input.bad,.form select.bad,.form textarea.bad,.form input.bad:focus,.form textarea.bad:focus{border-color:var(--signal)}