/* First Class Concrete Paving. See DESIGN.md */
@font-face{font-family:Archivo;src:url(../fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Hanken;src:url(../fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink:#1C1A1B;--red:#D8242B;--paper:#F4F4F2;--slab:#E4E4E1;--mut:#5C5A59;--mut-d:#BDBBB9;
  --max:1560px;--gut:clamp(20px,4vw,56px);
  --edge:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));
  --sec:clamp(56px,8vw,116px);
  --fh:Archivo,"Arial Black",sans-serif;--fb:Hanken,system-ui,sans-serif;
  --fd:Archivo,"Arial Black",sans-serif;--ds:125%;--dw:800;--dst:normal;--dk:-.025em;--dz:1;--dl:1;
  --ease:cubic-bezier(.23,1,.32,1);--io:cubic-bezier(.77,0,.175,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--fb);overflow-x:clip;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,blockquote{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:fixed;left:12px;top:-80px;z-index:10001;background:var(--ink);color:#fff;padding:12px 18px;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.h2{font:var(--dst) var(--dw) calc(clamp(44px,7.6vw,128px)*var(--dz))/var(--dl) var(--fd);font-stretch:var(--ds);letter-spacing:var(--dk);text-wrap:balance}
.h2 em{font-style:inherit;color:var(--red)}
.lead{font-size:clamp(18px,1.5vw,22px);line-height:1.5;margin-top:18px;max-width:58ch}
.ph{position:relative;display:block;overflow:hidden}
.ph img{position:absolute;left:0;top:-9%;width:100%;height:118%;max-width:none;object-fit:cover;will-change:transform}

/* ---------- Buttons: the logo's plate ---------- */
.btn{--bg:var(--red);--fg:#fff;--fill:var(--ink);--fg2:#fff;--blk:#fff;--blk2:#fff;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 46px;border:0;border-radius:0;
  background:var(--bg);color:var(--fg);font:700 16px/1 var(--fh);font-stretch:112%;letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;
  clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,11px 100%);transition:color .25s var(--ease)}
.btn--w{--bg:#fff;--fg:var(--ink);--fill:var(--red);--blk:var(--red)}
.btn--k{--bg:var(--ink);--fill:var(--red)}
.rev .btn--w,.menu .btn--w{--fill:var(--ink)}
.menu .btn--k{--fill:#fff;--fg2:var(--ink);--blk2:var(--red)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);opacity:0;transition:opacity .25s ease}
/* the two stacked blocks at each end of the logo's plate: outer edge follows the plate's slant, inner edge square */
.btn__t::before,.btn__t::after{content:"";position:absolute;top:7px;bottom:7px;width:14px;background:var(--blk);transition:background-color .25s}
.btn__t::before{left:8px;clip-path:polygon(0 0,100% 0,100% 54%,100% 64%,100% 100%,63% 100%,40% 64%,100% 64%,100% 54%,34% 54%)}
.btn__t::after{right:8px;clip-path:polygon(100% 0,0 0,0 54%,0 64%,0 100%,37% 100%,60% 64%,0 64%,0 54%,66% 54%)}
.btn:active{filter:brightness(.92)}
.btn:focus-visible{clip-path:none}
@media (hover:hover) and (pointer:fine){
  .btn:hover{color:var(--fg2)}
  .btn:hover::before{opacity:1}
  .btn:hover .btn__t::before,.btn:hover .btn__t::after{background:var(--blk2)}
}

/* ---------- Header: nav hangs off the top edge on a plate ---------- */
.hd{position:absolute;inset:0 0 auto;z-index:9999;color:#fff}
.hd__in{max-width:var(--max);margin-inline:auto;padding:0 var(--gut);display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:24px}
.hd__logo{justify-self:start;display:block;width:clamp(150px,13.5vw,204px);margin-top:22px}
.lg{width:100%;height:auto}
.lg--k,.lg--r{display:none}
.hd__nav{display:flex;gap:clamp(18px,2.3vw,36px);background:#fff;color:var(--ink);padding:18px 40px 20px;clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,22px 100%)}
.hd__nav a{font:700 16px/1 var(--fh);font-stretch:112%;text-decoration:none;padding:10px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease),color .2s}
.hd__nav a:hover{background-size:100% 2px;color:var(--red)}
.hd__act{justify-self:end;display:flex;align-items:center;gap:20px;margin-top:22px}
.hd__tel{font:700 16px/1 var(--fh);font-stretch:112%;text-decoration:none;white-space:nowrap}
.hd__cta{min-height:48px;padding-inline:40px;font-size:15px}
.hd__cta .btn__t::before,.hd__cta .btn__t::after{top:6px;bottom:6px;width:12px}
.hd__call{display:none}
.burger{display:none;position:relative;width:56px;height:48px;background:var(--red);border:0;color:#fff;cursor:pointer;justify-self:end;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);transition:background-color .3s}
.burger i{position:absolute;left:16px;right:16px;height:3px;background:currentColor;transition:transform .45s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:28px}
.menu-open .burger{background:#fff;color:var(--red)}
.menu-open .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-open .burger i:nth-child(2){transform:translateY(-5.5px) rotate(-45deg)}

/* Slide-out menu: brand red */
.menu{position:fixed;inset:0;z-index:9998;background:var(--red);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:100px var(--gut) 40px;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--io),visibility 0s .6s}
.menu-open .menu{clip-path:inset(0);visibility:visible;transition:clip-path .6s var(--io),visibility 0s}
.menu__nav{display:flex;flex-direction:column;gap:6px}
.menu__nav a{font:var(--dst) var(--dw) calc(clamp(38px,11vw,66px)*var(--dz))/1.12 var(--fd);font-stretch:var(--ds);letter-spacing:var(--dk);text-decoration:none}
.menu__nav a,.menu__act{opacity:0;transform:translateY(26px);transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc((6 - var(--i))*.04s)}
.menu-open .menu__nav a,.menu-open .menu__act{opacity:1;transform:none;transition-delay:calc(.14s + var(--i)*.04s)}
.menu__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ---------- Hero: slideshow ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.hero__h{font:var(--dst) var(--dw) calc(min(8.9vw,19svh)*var(--dz))/.98 var(--fd);font-stretch:var(--ds);letter-spacing:-.03em}
.rise{display:block;overflow:hidden;padding:.08em .06em .16em 0;margin:-.08em 0 -.16em}
.rise>span{display:block;animation:rise 1.25s var(--ease) both .15s}
.rise+.rise>span{animation-delay:.28s}
@keyframes rise{from{transform:translateY(118%)}to{transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero__sub{font-size:clamp(18px,1.5vw,22px);line-height:1.45;max-width:36ch;margin-top:18px;animation:fadeup 1s var(--ease) both .55s}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;animation:fadeup 1s var(--ease) both .65s}
.hero__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,14,15,.5),rgba(15,14,15,.12) 34%,rgba(15,14,15,.74))}
.show{position:absolute;inset:-14% 0 0;z-index:0;overflow:hidden;will-change:transform}
.show__s{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 58%;opacity:0;transition:opacity 1.1s ease-in-out;will-change:opacity,transform}
.show__s.is-on{opacity:1}
.hero__copy{position:absolute;z-index:2;inset:auto 0 0;margin-inline:auto;padding-bottom:clamp(44px,6.5svh,64px)}
.show__bar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:clamp(20px,3.6svh,34px)}
.show__bar i{height:4px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.show__bar i::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.show__bar i.done::after{transform:none}
.show__bar i.run::after{animation:fill 3s linear both}
@keyframes fill{to{transform:none}}

/* ---------- Tape marquee, right under the hero ---------- */
.tape{position:relative;z-index:4;margin:-26px -3vw -18px;width:106vw;transform:rotate(-1.15deg);background:#fff;overflow:hidden;box-shadow:0 12px 26px -14px rgba(0,0,0,.5);
  --stripe:repeating-linear-gradient(-45deg,var(--red) 0 18px,#fff 18px 36px)}
.tape::before,.tape::after{content:"";display:block;height:9px;background:var(--stripe)}
.tape__run{display:flex;width:max-content;animation:run 46s linear infinite}
.tape__set{display:flex;flex:none}
.tape__set span{display:flex;align-items:center;gap:30px;padding:11px 0 11px 30px;font:800 17px/1.1 var(--fh);font-stretch:112%;white-space:nowrap}
.tape__set span::after{content:"";width:9px;height:18px;background:var(--red);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}
@keyframes run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- Counters: pressed into a wet slab ---------- */
.stamp{position:relative;overflow:hidden;background:#b9b8b3;color:var(--ink);padding-block:clamp(90px,10vw,150px) clamp(60px,7vw,110px)}
.stamp__bg{position:absolute;inset:-12% 0;background:url(../img/slab.webp) 50%/cover;will-change:transform}
.stamp__g{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(26px,3vw,44px) clamp(16px,2vw,32px);align-items:end}
.st--a{grid-column:1/9}.st--b{grid-column:9/13;padding-bottom:clamp(6px,1.4vw,20px)}
.st--c{grid-column:1/5}.st--d{grid-column:5/13;text-align:right}
.st__n{display:block;font:var(--dst) var(--dw) clamp(70px,10vw,170px)/.92 var(--fd);font-stretch:var(--ds);letter-spacing:-.035em;color:#6a6862;
  text-shadow:0 2px 1px rgba(255,255,255,.75),0 -2px 2px rgba(25,24,22,.62),0 0 12px rgba(25,24,22,.18)}
.st--a .st__n{font-size:clamp(100px,min(16.6vw,280px),280px);line-height:.9}
.st--d .st__n{font-size:clamp(70px,min(13.4vw,226px),226px)}
.st p{margin-top:12px;font-weight:600;font-size:clamp(16px,1.35vw,20px);line-height:1.3;max-width:30ch}
.st--d p{margin-left:auto}
.st small{display:block;font-weight:500;font-size:15px;margin-top:3px}

/* ---------- About ---------- */
.about__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(28px,4vw,56px)}
.about .lead{margin-top:0}
.about__txt>p:not(.lead){margin-top:14px;max-width:58ch}
.ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:26px 0 30px;max-width:640px}
.ticks li{position:relative;padding-left:24px;font-weight:600;line-height:1.3}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:9px;height:18px;background:var(--red);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}
.about__art{position:relative;padding:0 0 clamp(30px,5vw,80px) 8%}
.about__a{aspect-ratio:1/1.02;clip-path:url(#sweep)}
.about__red{position:absolute;right:-3%;bottom:0;width:62%;height:58%;background:var(--red);clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);z-index:-1}
.about__art{isolation:isolate}
.about__b{position:absolute;left:0;bottom:0;width:42%;filter:drop-shadow(0 22px 26px rgba(28,26,27,.45))}
.about__b .ph{aspect-ratio:1/1.08;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%)}

/* ---------- Services: photo morphs to the shape of the job ---------- */
.svc{background:var(--slab)}
.svc__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);margin-top:clamp(26px,3.6vw,50px);align-items:start}
.stage{position:sticky;top:9svh;height:82svh;max-height:820px}
.stage__shape,.stage__clip{position:absolute;inset:0;transition:clip-path .85s var(--io);clip-path:polygon(0 4%,25% 4%,50% 4%,75% 4%,100% 4%,97% 30%,94% 55%,91% 80%,88% 96%,69% 96%,50% 96%,31% 96%,12% 96%,9% 80%,6% 55%,3% 30%)}
.stage__shape{background:var(--red);transform:translate(16px,16px)}
.stage__clip{background:var(--ink);overflow:hidden}
.stage__clip img{position:absolute;left:0;top:-7%;width:100%;height:114%;max-width:none;object-fit:cover;opacity:0;transition:opacity .55s ease}
.stage__clip img.is-on{opacity:1}
.sv{display:block;padding:clamp(14px,1.4vw,22px) 0;text-decoration:none}
.sv b{display:block;font:var(--dst) var(--dw) calc(clamp(32px,4.5vw,76px)*var(--dz))/1.04 var(--fd);font-stretch:var(--ds);letter-spacing:var(--dk);color:#8c8a87;transition:color .35s}
.sv small{display:block;font-size:17px;line-height:1.35;margin-top:6px;color:var(--mut)}
.sv.is-on b,.sv:hover b{color:var(--red)}
.sv__ph{display:none}

/* ---------- Finishes: slabs split by diagonal saw cuts ---------- */
.fin{background:var(--ink);color:#fff;padding-block:var(--sec) 0;overflow:hidden}
.fin__head{margin-bottom:clamp(26px,3.6vw,50px)}
.cuts{display:flex;gap:9px;height:min(88svh,880px);margin-inline:-5vw}
.cut{position:relative;flex:1 1 0;min-width:0;overflow:hidden;transform:skewX(-6deg);transition:flex-grow .8s var(--ease)}
.cut.is-on{flex-grow:6}
.cut__in{position:absolute;inset:0 -14%;transform:skewX(6deg)}
.cut__in>img{position:absolute;left:0;top:-7%;width:100%;height:114%;max-width:none;object-fit:cover;will-change:transform}
.cut__in::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,14,15,.08) 35%,rgba(15,14,15,.86));pointer-events:none;transition:opacity .5s}
.cut__tab{position:absolute;inset:0;z-index:2;width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:30px;color:#fff;transition:opacity .3s}
.cut__tab span{writing-mode:vertical-rl;transform:rotate(180deg);font:800 clamp(19px,1.8vw,27px)/1 var(--fh);font-stretch:112%;white-space:nowrap}
.cut.is-on .cut__tab{opacity:0;pointer-events:none}
.cut__body{position:absolute;z-index:3;left:18%;bottom:clamp(26px,4svh,48px);width:min(620px,58%);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s}
.cut:first-child .cut__body{left:calc(18% + 4vw)}
.cut.is-on .cut__body{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s .3s,transform .6s var(--ease) .3s}
.cut__body h3{font:var(--dst) var(--dw) calc(clamp(36px,5vw,84px)*var(--dz))/1.02 var(--fd);font-stretch:var(--ds);letter-spacing:var(--dk)}
.cut__body p{font-size:clamp(17px,1.35vw,20px);line-height:1.4;margin:12px 0 18px;max-width:42ch}

/* ---------- Recent jobs: pinned, the row bends round ---------- */
.work{position:relative;z-index:1;background:var(--paper)}
.work__pin{position:relative;z-index:1;height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);padding-top:clamp(20px,4.4svh,48px)}
.work__head{flex:none}
.work__head .h2{font-size:calc(min(clamp(44px,7.6vw,128px),13svh)*var(--dz))}
.work__head .lead{margin-top:6px}
.work__track{flex:1;min-height:0;display:flex;gap:clamp(30px,4vw,70px);padding:clamp(16px,3svh,32px) var(--edge) clamp(16px,3svh,30px);width:max-content}
.job{position:relative;height:100%;aspect-ratio:3/4;flex:none;display:flex;flex-direction:column;will-change:transform}
.job--w{aspect-ratio:5/4}
.job .ph{flex:1;min-height:0;clip-path:polygon(0 0,100% 0,97% 100%,3% 100%);box-shadow:none}
.job .ph img{left:-6%;top:0;width:112%;height:100%}
.job figcaption{flex:none;padding-top:10px;font:800 clamp(16px,1.35vw,21px)/1.2 var(--fh);font-stretch:112%}
.job--end{aspect-ratio:auto;width:min(420px,70vw);justify-content:center;gap:20px;margin-left:6vw}
.job--end p{font:var(--dst) var(--dw) calc(clamp(26px,2.7vw,42px)*var(--dz))/1.1 var(--fd);font-stretch:var(--ds);letter-spacing:var(--dk)}
.job--end .btn{align-self:flex-start}

/* ---------- Process: layers poured over each other ---------- */
.how{background:var(--paper);padding-top:var(--sec)}
.how__head{padding-bottom:clamp(26px,3.6vw,50px)}
.layers{position:relative}
.layer{position:sticky;top:0;height:100svh;overflow:hidden;color:#fff;background:var(--ink);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.layer+.layer{clip-path:polygon(0 6%,100% 0,100% 100%,0 100%)}
.layer:nth-child(3){clip-path:polygon(0 0,100% 6%,100% 100%,0 100%)}
.layer__ph{position:absolute;inset:0;will-change:opacity}
.layer__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,14,15,.1) 40%,rgba(15,14,15,.82))}
.layer__t{position:absolute;left:0;right:0;bottom:clamp(20px,4svh,44px);margin-inline:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,64px)}
.layer__t h3{font:var(--dst) var(--dw) calc(min(20vw,34svh)*var(--dz))/.95 var(--fd);font-stretch:var(--ds);letter-spacing:-.035em}
.layer__t p{font-size:clamp(17px,1.4vw,21px);line-height:1.4;max-width:36ch;padding-bottom:1.4vw}

/* ---------- Reviews: the full red section ---------- */
.rev{background:var(--red);color:#fff;position:relative;z-index:2}
.rev .h2{color:var(--ink)}
.rev .h2 em{color:#fff}
.rev__g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);margin-top:clamp(28px,4vw,56px);align-items:start}
.rq{margin-bottom:clamp(30px,4vw,56px)}
.rq p{font:700 clamp(25px,3vw,48px)/1.16 var(--fh);font-stretch:108%;letter-spacing:-.012em}
.rq footer{margin-top:14px;font-size:17px}
.rq footer b{color:var(--ink);font-weight:800;margin-right:8px}
.ring{position:sticky;top:10svh;aspect-ratio:1;width:100%;max-width:640px;justify-self:end}
.ring__ph{position:absolute;inset:15%;border-radius:50%}
.ring__txt{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:spin 34s linear infinite;transform-origin:50% 50%}
.ring__txt text{font:800 32px var(--fh);font-stretch:112%;fill:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Partners: names on tape across a real pour ---------- */
.part{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding-block:var(--sec) clamp(70px,9vw,130px);isolation:isolate}
.part__ph{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.part__ph img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 60%}
.part::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,14,15,.66)}
.strips{margin-top:clamp(30px,4vw,56px);display:grid;gap:clamp(4px,1vw,14px)}
.strip{width:128vw;margin-left:-14vw;padding:clamp(11px,1.15vw,18px) 0 clamp(11px,1.15vw,18px) calc(14vw + var(--o));transform:rotate(var(--r));color:var(--ink);font:800 clamp(24px,4.5vw,76px)/1.05 var(--fh);font-stretch:112%;letter-spacing:-.02em;white-space:nowrap;box-shadow:0 14px 22px -12px rgba(0,0,0,.65);
  background:repeating-linear-gradient(-45deg,var(--red) 0 16px,#fff 16px 32px) 0 0/100% 8px no-repeat,repeating-linear-gradient(-45deg,var(--red) 0 16px,#fff 16px 32px) 0 100%/100% 8px no-repeat,#fff}
.strip--r{background:var(--red);color:#fff}
.strip--k{background:var(--ink);color:#fff}

/* ---------- Areas ---------- */
.area{background:var(--ink);color:#fff}
.area h3{color:var(--red);font:800 clamp(19px,1.5vw,23px)/1.1 var(--fh);font-stretch:112%;margin-bottom:6px}
.places{display:flex;flex-wrap:wrap;gap:clamp(4px,.6vw,10px) clamp(14px,1.5vw,24px);margin-top:clamp(28px,4vw,56px)}
.places li{display:flex;align-items:center;gap:clamp(14px,1.5vw,24px);font:var(--dst) var(--dw) calc(clamp(30px,4.9vw,84px)*var(--dz))/1.12 var(--fd);font-stretch:var(--ds);letter-spacing:var(--dk)}
.places li:not(:last-child)::after{content:"";width:.2em;height:.56em;background:var(--red);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}
.area a{text-underline-offset:4px;transition:color .2s}
.area a:hover{color:#ff6a6f}
.area__g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);margin-top:clamp(34px,5vw,70px);align-items:center}
.mapwrap{position:relative;aspect-ratio:16/9;background:#333;cursor:pointer;clip-path:polygon(0 0,100% 0,97% 100%,3% 100%)}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.mapwrap.is-active iframe{pointer-events:auto}
.area__meta{display:grid;gap:18px}
.area__meta p{font-size:18px;overflow-wrap:anywhere}

/* ---------- FAQ ---------- */
.faq__l{margin:clamp(28px,4vw,56px) 0 0 auto;max-width:1000px}
.q{border-top:2px solid var(--ink)}
.q:last-child{border-bottom:2px solid var(--ink)}
.q h3{font:inherit}
.q button{display:grid;grid-template-columns:1fr 24px;gap:18px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:20px 0;cursor:pointer;font:700 clamp(19px,1.6vw,25px)/1.2 var(--fh);font-stretch:110%;transition:color .2s}
.q button:hover{color:var(--red)}
.q button::after{content:"";width:24px;height:24px;background:linear-gradient(var(--red),var(--red)) 50%/100% 3px no-repeat,linear-gradient(var(--red),var(--red)) 50%/3px 100% no-repeat;transition:transform .45s var(--ease)}
.q.is-open button::after{transform:rotate(135deg)}
.q__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.q__a>div{overflow:hidden;min-height:0}
.q.is-open .q__a{grid-template-rows:1fr}
.q__a p{padding:0 42px 22px 0;max-width:62ch;text-underline-offset:3px}

/* ---------- Quote ---------- */
.quote{position:relative;color:#fff;background:var(--ink);overflow:hidden;padding-block:var(--sec);isolation:isolate}
.quote__bg{position:absolute;inset:-14% 0;z-index:-2;will-change:transform}
.quote__bg img{width:100%;height:100%;max-width:none;object-fit:cover}
.quote::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,14,15,.74)}
.quote__g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center}
.quote__tel{display:block;margin-top:clamp(20px,3vw,36px);font:800 clamp(34px,4.3vw,66px)/1 var(--fh);font-stretch:125%;letter-spacing:-.02em;text-decoration:none;transition:color .2s;white-space:nowrap}
.quote__tel:hover{color:#ff6a6f}
.quote__mail{display:inline-block;margin-top:12px;font-size:18px;text-underline-offset:4px;overflow-wrap:anywhere}
.plateform{background:#fff;color:var(--ink);padding:clamp(22px,2.6vw,36px);display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));border-top:10px solid var(--red)}
.fld{display:grid;gap:6px;min-width:0}
.fld--w{grid-column:1/-1}
.fld label{font-weight:600;font-size:15px}
.fld input,.fld select,.fld textarea{width:100%;min-height:52px;background:var(--paper);border:2px solid #8b8986;border-radius:0;padding:12px 14px;font-size:16px;transition:border-color .2s,background-color .2s}
.fld textarea{resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--red);background:#fff}
.plateform .btn{grid-column:1/-1;justify-self:start;margin-top:4px}
.formnote{grid-column:1/-1;font-size:15px;color:var(--mut)}
.formnote:empty{display:none}

/* ---------- Footer ---------- */
.ft{background:var(--ink);color:#fff}
.ft h3{color:var(--red);font:800 clamp(22px,1.75vw,27px)/1.1 var(--fh);font-stretch:125%;letter-spacing:-.02em;margin-bottom:12px}
.ft ul{display:grid;gap:5px;font-size:16px}
.ft a{text-decoration:none;transition:color .2s}
.ft a:hover{color:#ff6a6f}
.ft__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,64px);padding-top:clamp(44px,5.4vw,80px)}
.ft__brand img{width:clamp(190px,17vw,250px)}
.ft__brand p{margin-top:18px;max-width:34ch;color:var(--mut-d);font-size:16px}
.ft ul a,.ft__g li{overflow-wrap:anywhere}
.ft__base{margin-top:clamp(34px,4vw,56px);padding-bottom:26px;font-size:14px;color:var(--mut-d)}
.ft__base a{color:#ff5359;font-weight:600}

.dock{display:none}
.dot{font-style:normal}
.btn--tel,.ft__mark,.lbl-m,.tel-ic,.hl-m{display:none}
.sv b em{font-style:normal;color:inherit}
.mapwrap__in{position:absolute;inset:0}
.dk__top,.stampit{display:none}
.strip__run span:not(:first-child){display:none}
.job .fr{display:contents}
html:not([data-img="0"]) .job .fr{display:flex;flex:1;min-height:0;width:100%}
@media (min-width:900px){html .sv__ph.fr{display:none!important}}

/* ---------- Image presentation options ---------- */
html:not([data-img="0"]) .fr{position:relative;display:flex;flex-direction:column;padding:var(--fy) var(--fx);box-sizing:border-box}
html:not([data-img="0"]) .fr .ph{flex:1;min-height:0;clip-path:none;aspect-ratio:auto}
html:not([data-img="0"]) .about__red{display:none}
html:not([data-img="0"]) .about__a{clip-path:none}
html:not([data-img="0"]) .about__b{clip-path:none;aspect-ratio:1/1.08;filter:none;z-index:2}
html:not([data-img="0"]) .about__b .ph{clip-path:none}
html:not([data-img="0"]) .stage{height:80svh}
html:not([data-img="0"]) .stage__shape{display:none}
html:not([data-img="0"]) .stage__clip{inset:var(--fy) var(--fx);clip-path:none!important}
html:not([data-img="0"]) .job figcaption{padding:10px 2px 2px;flex:none}
/* 1: cast in concrete. The photo is recessed into a smooth poured slab, with its caption pressed into the wet surface */
html[data-img="1"]{--fy:14px;--fx:14px}
html[data-img="1"] .fr{background:#c8c7c2 url(../img/slab.webp) 50%/cover no-repeat;box-shadow:0 26px 40px -24px rgba(28,26,27,.6),inset 0 1px 0 rgba(255,255,255,.55)}
html[data-img="1"] .fr .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 4px 12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4);pointer-events:none}
html[data-img="1"] .stage__clip{box-shadow:0 0 0 1px rgba(0,0,0,.4)}
html[data-img="1"] .job figcaption{color:#55524d;text-shadow:0 1px 0 rgba(255,255,255,.7),0 -1px 1px rgba(25,24,22,.4)}
/* 2: the logo's plate. The photo sits where the word CONCRETE sits, between its stacked white blocks */
html[data-img="2"]{--fy:12px;--fx:44px}
html[data-img="2"] .fr{background:var(--red);clip-path:polygon(0 0,100% 0,calc(100% - 20px) 100%,20px 100%)}
html[data-img="2"] .fr::before,html[data-img="2"] .fr::after{content:"";position:absolute;top:50%;height:min(calc(100% - 24px),128px);transform:translateY(-50%);width:22px;background:#fff;z-index:1}
html[data-img="2"] .fr::before{left:14px;clip-path:polygon(0 0,100% 0,100% 54%,100% 62%,100% 100%,60% 100%,40% 62%,100% 62%,100% 54%,30% 54%)}
html[data-img="2"] .fr::after{right:14px;clip-path:polygon(100% 0,0 0,0 54%,0 62%,0 100%,40% 100%,60% 62%,0 62%,0 54%,70% 54%)}
html[data-img="2"] .job figcaption{color:#fff;text-align:center}
/* 3: site print. A real print of the job, taped up with their barrier tape */
html[data-img="3"]{--fy:10px;--fx:10px}
html[data-img="3"] .fr{background:#fff;box-shadow:0 24px 34px -20px rgba(28,26,27,.65)}
html[data-img="3"] .fr::before,html[data-img="3"] .fr::after{content:"";position:absolute;top:-9px;width:86px;height:22px;z-index:1;background:repeating-linear-gradient(-45deg,var(--red) 0 12px,#fff 12px 24px);box-shadow:0 3px 6px -2px rgba(0,0,0,.5)}
html[data-img="3"] .fr::before{left:-20px;transform:rotate(-33deg)}
html[data-img="3"] .fr::after{right:-20px;transform:rotate(33deg)}
html[data-img="3"] .sv:nth-child(odd) .fr,html[data-img="3"] .job:nth-child(odd) .fr{transform:rotate(-1.5deg)}
html[data-img="3"] .sv:nth-child(even) .fr,html[data-img="3"] .job:nth-child(even) .fr,html[data-img="3"] .about__b{transform:rotate(1.4deg)}
html[data-img="3"] .job figcaption{color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){.hd__tel{display:none}}
@media (max-width:899px){
  .h2,.lead,.work__head .h2{max-width:none;text-wrap:pretty}
  .h2{font-size:calc(max(40px,11.4vw)*var(--dz))}
  .work__head .h2{font-size:calc(min(11.4vw,9svh)*var(--dz))}
  .hd__in{grid-template-columns:1fr auto 1fr;padding:12px var(--gut);align-items:center;gap:10px}
  /* call left, logo centred, menu right */
  .hd__call{display:grid;place-items:center;justify-self:start;grid-column:1;grid-row:1;width:56px;height:48px;background:var(--red);color:#fff;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);transition:background-color .3s,color .3s}
  .hd__call svg{width:22px;height:22px;fill:currentColor}
  .menu-open .hd__call{background:#fff;color:var(--red)}
  .hd__logo{grid-column:2;grid-row:1;justify-self:center}
  .burger{grid-column:3;grid-row:1}
  .hd__nav,.hd__act{display:none}
  .burger{display:block}
  .hd__logo{width:clamp(128px,38vw,160px);margin:0}
  .menu-open .hd .lg--w,.menu-open .hd .lg--k{display:none}
  .menu-open .hd .lg--r{display:block}

  .dock{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:grid;grid-template-columns:1fr 1fr;background:var(--ink);padding:8px 8px calc(8px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .45s var(--ease)}
  .dock.is-on{transform:none}
  .dock .btn{min-height:52px;padding-inline:30px}

  .hero__h{font-size:calc(min(14.2vw,13svh)*var(--dz));font-stretch:min(var(--ds),112%)}
  .hero__cta .btn{width:100%}
  .hero__sub{font-size:17px;max-width:none}
  .show__s{object-position:50% 50%}
  .tape__set span{font-size:15px}

  .stamp__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st--a,.st--d{grid-column:1/-1}.st--b{grid-column:1;padding:0;order:2}.st--c{grid-column:2;order:3}.st--d{order:4;text-align:left}
  .st--d p{margin-left:0}
  .st--a .st__n{font-size:calc(25vw*var(--dz))}
  .st--b .st__n,.st--c .st__n{font-size:calc(19vw*var(--dz))}
  .st--d .st__n{font-size:calc(21vw*var(--dz))}

  .about__g,.quote__g,.area__g{grid-template-columns:minmax(0,1fr)}
  .about__art{padding-left:6vw;padding-bottom:14vw}
  .ticks{grid-template-columns:minmax(0,1fr)}

  .stage{display:none}
  .svc__g{display:block}
  .sv{padding:0 0 26px}
  .sv__ph{display:block;aspect-ratio:4/3.1;margin-bottom:12px;background:var(--ink)}
  .sv b{font-size:calc(9.4vw*var(--dz));color:var(--ink)}

  .cuts{flex-direction:column;gap:0;height:840px;margin-inline:0}
  .cut{flex:0 0 72px;transform:none;clip-path:polygon(0 8px,100% 0,100% calc(100% - 8px),0 100%);margin-bottom:-1px;transition:flex-grow .7s var(--ease)}
  .cut.is-on{flex:1 0 72px}
  .cut__in{inset:0;transform:none}
  .cut__tab{align-items:center;justify-content:flex-start;padding:0 var(--gut)}
  .cut__tab span{writing-mode:horizontal-tb;transform:none;font-size:19px}
  .cut__in::after{background:linear-gradient(180deg,rgba(15,14,15,.5),rgba(15,14,15,.62))}
  .cut.is-on .cut__in::after{background:linear-gradient(180deg,rgba(15,14,15,.05) 30%,rgba(15,14,15,.88))}
  .cut__body,.cut:first-child .cut__body{left:var(--gut);right:var(--gut);width:auto;bottom:26px}
  .cut__body h3{font-size:calc(10vw*var(--dz))}

  .work__pin{padding-top:clamp(28px,6svh,56px)}
  .work__head{padding-bottom:50px}
  .work__track{padding-top:0;padding-bottom:18px;gap:22px}
  .job,.job--w{aspect-ratio:auto;width:min(76vw,440px)}
  .job--end{width:min(420px,70vw)}
  .job figcaption{font-size:15px}

  .layer__t{display:block}
  .layer__t h3{font-size:calc(27vw*var(--dz))}
  .layer__t p{padding:6px 0 0;max-width:none}

  .rev__g{grid-template-columns:minmax(0,1fr)}
  .ring{position:relative;top:auto;order:-1;max-width:none;width:84%;justify-self:center}
  .mapwrap{aspect-ratio:4/3}
  .faq__l{margin-left:0;max-width:none}
  .plateform{grid-template-columns:minmax(0,1fr)}
  .plateform .btn{width:100%}
  .quote__tel{font-size:11vw}
  .ft__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .ft__brand{grid-column:1/-1}
}
/* ---------- Phone pass ---------- */
@media (max-width:899px){
  .dot{display:none}
  .h2,.work__head .h2{text-transform:uppercase;font-size:calc(max(34px,9.6vw));letter-spacing:-.02em}
  main p,.lead,.rq p{max-width:none!important;text-wrap:wrap}

  /* header: part of the hero until you pass it, then the sticky version slides down. Hidden during pins, fades if you scroll back into the hero */
  .hd.is-solid{position:fixed;transform:translate3d(0,calc(-100% - 24px),0);opacity:0;pointer-events:none;will-change:transform}
  .hd.is-anim{transition:transform .6s var(--ease),opacity .6s var(--ease)}
  .hd.is-shown{transform:translate3d(0,0,0);opacity:1;pointer-events:auto}
  .hd.is-fade{transform:translate3d(0,0,0);opacity:0;pointer-events:none;transition:opacity .45s ease}
  .hd.is-solid{background:var(--paper);color:var(--ink)}
  .hd.is-solid .lg--w{display:none}.hd.is-solid .lg--k{display:block}
  .menu-open .hd,.menu-open .hd.is-solid{position:fixed;background:none;color:#fff;transform:none;opacity:1;pointer-events:auto;transition:none}
  .menu-open .hd.is-solid .lg--k{display:none}
  section[id]{scroll-margin-top:72px}

  /* counters: centred, three of them */
  .stamp__g{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:34px}
  .st--a,.st--b,.st--d{grid-column:1;order:0;padding:0;text-align:center}
  .st--c{display:none}
  .st p,.st--d p{margin-inline:auto}
  .st--b .st__n{font-size:calc(25vw)}

  /* finishes open as you scroll (GSAP) */
  .fin{height:100svh;display:flex;flex-direction:column;padding:76px 0 0}
  .fin__head{margin-bottom:12px;flex:none}
  .cuts{flex:1;min-height:0;height:auto}
  .cut{flex:0 0 46px;transition:none}
  .cut:first-child{flex-grow:1}
  .cut.is-on{flex:0 0 46px}
  .cut:first-child.is-on{flex-grow:1}
  .cut__tab{pointer-events:none}
  .cut__tab span{font-size:16px}
  .cut__body p{margin:8px 0 14px;font-size:16px}
  .cut__body,.cut:first-child .cut__body{bottom:20px}

  /* process: type in the middle of the screen */
  /* each layer's leading edge carries the marquee's barrier-tape border, not a bare cut */
  .layer::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(-45deg,var(--red) 0 18px,#fff 18px 36px);clip-path:polygon(0 0,100% 0,100% 13px,0 13px)}
  .layer:nth-child(2)::before{clip-path:polygon(0 6%,100% 0,100% 13px,0 calc(6% + 13px))}
  .layer:nth-child(3)::before{clip-path:polygon(0 0,100% 6%,100% calc(6% + 13px),0 13px)}
  .layer__ph::after{background:rgba(15,14,15,.46)}
  .layer__t{position:absolute;top:50%;bottom:auto;transform:translateY(-50%);text-align:center}
  .layer__t h3{text-transform:uppercase;font-size:21vw;letter-spacing:-.03em}
  .layer__t p{margin-inline:auto;font-size:18px}

  /* reviews: signed-off job dockets stacking up on the red */
  .ring{display:none}
  .rq{position:sticky;top:84px;background:#fff;color:var(--ink);padding:18px 18px 34px;margin:0 0 26svh;box-shadow:0 26px 40px -22px rgba(0,0,0,.55);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),95% 100%,90% calc(100% - 12px),85% 100%,80% calc(100% - 12px),75% 100%,70% calc(100% - 12px),65% 100%,60% calc(100% - 12px),55% 100%,50% calc(100% - 12px),45% 100%,40% calc(100% - 12px),35% 100%,30% calc(100% - 12px),25% 100%,20% calc(100% - 12px),15% 100%,10% calc(100% - 12px),5% 100%,0 calc(100% - 12px))}
  .rq:nth-child(1){transform:rotate(-1.2deg)}.rq:nth-child(2){transform:rotate(1deg)}.rq:nth-child(3){transform:rotate(-.7deg);margin-bottom:34px}
  .dk__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:14px;border-bottom:2px dashed #b7b5b2;font:800 12px/1.2 var(--fh);font-stretch:112%;text-transform:uppercase;letter-spacing:.04em;text-align:right}
  .dk__logo{width:96px;flex:none}
  .rq p{font-size:clamp(21px,5.7vw,30px);font-weight:700;line-height:1.2}
  .rq footer{margin-top:16px;font-size:15px;color:var(--mut);padding-right:42%}
  .rq footer b{display:block;color:var(--ink);font-size:18px;margin:0}
  .stampit{display:grid;place-items:center;position:absolute;right:14px;bottom:26px;min-width:96px;padding:8px 12px;border:4px solid var(--red);outline:2px solid var(--red);outline-offset:2px;color:var(--red);font:800 clamp(14px,3.9vw,22px)/1.05 var(--fh);font-stretch:100%;text-transform:uppercase;text-align:center;max-width:40%;transform:rotate(-11deg);mix-blend-mode:multiply}

  /* partner tape: running, never crossing */
  .strips{gap:26px;margin-top:40px}
  .strip,.strip--r,.strip--k{width:124vw;margin-left:-12vw;padding:13px 0!important;overflow:hidden;font-size:max(21px,5.6vw);box-shadow:0 12px 20px -10px rgba(0,0,0,.7);
    background:repeating-linear-gradient(-45deg,var(--red) 0 16px,#fff 16px 32px) 0 0/100% 7px no-repeat,repeating-linear-gradient(-45deg,var(--red) 0 16px,#fff 16px 32px) 0 100%/100% 7px no-repeat,#fff;color:var(--ink)}
  .strip:nth-child(even){background:repeating-linear-gradient(-45deg,#fff 0 16px,var(--red) 16px 32px) 0 0/100% 7px no-repeat,repeating-linear-gradient(-45deg,#fff 0 16px,var(--red) 16px 32px) 0 100%/100% 7px no-repeat,var(--red);color:#fff}
  .strip__run{display:flex;width:max-content;animation:run 40s linear infinite;padding:0}
  .strip:nth-child(even) .strip__run{animation-direction:reverse;animation-duration:48s}
  .strip:nth-child(3n) .strip__run{animation-duration:34s}
  .strip__run span,.strip__run span:not(:first-child){display:flex;align-items:center;gap:22px;padding:0 0 0 22px;white-space:nowrap}
  .strip__run span::after{content:"";width:8px;height:18px;background:currentColor;clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}

  /* places smaller, flowing */
  .places{gap:2px 10px;margin-top:26px}
  .places li{font-size:clamp(21px,5.9vw,34px);gap:10px;line-height:1.25}

  .faq__l{margin-top:48px}
  .about__art{padding:0 0 12vw 6vw}
  html:not([data-img="0"]) .sv__ph{aspect-ratio:4/3.3}
  html:not([data-img="0"]) .about__a{aspect-ratio:1/1}
  .job figcaption{font-size:14px}
}
/* ---------- Phone pass 3 ---------- */
@media (max-width:899px){
  /* type */
  .hero__h{text-transform:uppercase;font-size:calc(min(11.4vw,11svh));letter-spacing:-.025em}
  .h2,.work__head .h2{font-size:max(29px,7.9vw);letter-spacing:-.015em}
  .btn{text-transform:uppercase;font-size:14px;letter-spacing:.01em;padding-inline:30px}
  .btn__t::before,.btn__t::after{width:12px}
  .btn__t::before{left:7px}.btn__t::after{right:7px}
  .btn--tel{display:inline-flex}
  .btn-row{display:flex;flex-wrap:wrap;gap:8px}
  .btn-row .btn{flex:1 1 auto;width:auto;margin:0}
  .plateform .btn-row{grid-column:1/-1;margin-top:4px}
  .menu .btn,.hero__cta .btn{font-size:15px}

  /* sticky buttons: phone number, with a gap */
  .dock{gap:8px}
  .dock .btn{padding-inline:26px;font-size:14px}

  /* about: one photo, full width */
  .about__b,.about__red{display:none!important}
  .about__art{padding:0}
  .about__g{margin-top:22px}

  /* what we pour: list only, consistent image heights */
  .stage{display:none!important}
  html:not([data-img="0"]) .sv__ph{aspect-ratio:4/3.3}
  .sv b,.sv.is-on b,.sv:hover b{font-size:max(21px,5.8vw);text-transform:uppercase;color:var(--ink);letter-spacing:-.015em;line-height:1.1}
  .sv b em{color:var(--red)}
  .sv small{font-size:16px}

  /* finishes: a sticky screen, each slab slides up over the last on transforms only */
  .fin__wrap{height:calc(100svh + 5*62svh)}
  .fin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding:20px 0 0;overflow:hidden}
  .fin__head{margin-bottom:12px;flex:none}
  .cuts{position:relative;display:block;flex:1;min-height:0;height:auto;margin:0;overflow:hidden}
  .cut,.cut.is-on,.cut:first-child,.cut:first-child.is-on{position:absolute;inset:0;flex:none;margin:0;transform:none;transition:none;background:var(--ink);will-change:transform;clip-path:polygon(0 7px,100% 0,100% 100%,0 100%)}
  .cut:first-child{clip-path:none}
  .cut__in{inset:0;transform:none}
  .cut__in>img{top:0;left:0;width:100%;height:var(--vis,70%);object-fit:cover;will-change:auto}
  .cut__in::after,.cut.is-on .cut__in::after{top:0;bottom:auto;height:var(--vis,70%);background:linear-gradient(180deg,rgba(15,14,15,.02) 25%,rgba(15,14,15,.88))}
  .cut__tab{position:absolute;inset:0 0 auto;height:40px;padding:6px var(--gut) 0;align-items:center;justify-content:flex-start;background:rgba(15,14,15,.6);pointer-events:none;transition:opacity .25s}
  .cut__tab span{font-size:15px;text-transform:uppercase}
  .cut__body,.cut:first-child .cut__body{left:var(--gut);right:var(--gut);width:auto;top:auto;bottom:calc(100% - var(--vis,70%) + 18px)}
  .cut__body h3{text-transform:uppercase;font-size:max(29px,7.9vw);letter-spacing:-.015em}
  .cut__body p{margin:8px 0 12px;font-size:16px}

  /* recent jobs: shorter cards, bigger stamped caption */
  .work__track{align-items:center;padding-bottom:12px}
  .job,.job--w{height:min(112vw,58svh);aspect-ratio:auto;width:min(80vw,460px)}
  .job--end{display:none}
  html:not([data-img="0"]) .job figcaption,.job figcaption{font-size:max(17px,4.5vw);line-height:1.12;text-transform:uppercase;padding:11px 2px 3px;letter-spacing:-.005em}
  html[data-img="1"] .job figcaption{color:#3b3935;text-shadow:0 1px 0 rgba(255,255,255,.55)}

  /* process: same size as the hero heading */
  .layer__t h3{font-size:calc(min(11.4vw,11svh));letter-spacing:-.025em}

  /* reviews: all white heading, dockets held in the middle of the screen, the one behind drops back */
  .rev .h2,.rev .h2 em{color:#fff}
  .rq{top:22svh;margin-bottom:34svh}

  /* partner tape: composited, no entrance tween */
  .strip{will-change:auto}
  .strip__run{will-change:transform;backface-visibility:hidden}
  .tape__run{will-change:transform}

  /* areas: map in the same concrete, details gone */
  .mapwrap,html[data-img="1"] .mapwrap{clip-path:none;aspect-ratio:4/3.3;cursor:pointer}
  .mapwrap iframe{position:absolute;inset:0;width:100%;height:100%}
  .mapwrap .mapwrap__in{position:relative;flex:1;min-height:0;overflow:hidden}
  html[data-img="1"] .mapwrap .mapwrap__in{box-shadow:0 0 0 1px rgba(0,0,0,.4)}
  .area__meta>div{display:none}
  .area__g{margin-top:26px;gap:18px}

  /* quote: heading, description, form */
  .quote__tel,.quote__mail{display:none}
  .fld label{font:700 15px/1.2 var(--fh);font-stretch:112%}

  .lbl-d{display:none}.lbl-m{display:inline}
  .plateform{padding-inline:16px}
  .plateform .btn{padding-inline:19px}
  .plateform .btn__t::before,.plateform .btn__t::after{width:9px}
  .plateform .btn__t::before{left:6px}.plateform .btn__t::after{right:6px}
  .btn{font-size:clamp(12.5px,3.5vw,14px);padding-inline:25px}
  .btn-row .btn{flex:1 1 0;min-width:fit-content}
  html{background:var(--ink)}
  body{background:var(--ink)}
  main{background:var(--paper)}

  /* footer wordmark */
  .ft__mark{display:block;margin:6px 0 22px;aspect-ratio:5046/680;background:#fff;-webkit-mask:url(../img/logo-script.svg) 50%/contain no-repeat;mask:url(../img/logo-script.svg) 50%/contain no-repeat}
  .ft__base{margin-top:30px;padding-bottom:18px}
}
/* ---------- Phone pass 4 ---------- */
@media (max-width:899px){
  .hl-d{display:none}.hl-m{display:block}
  .hl-m .rise:nth-child(3)>span{animation-delay:.41s}
  .btn__t{display:inline-flex;align-items:center;gap:7px}
  .tel-ic{display:block;flex:none;width:15px;height:15px;fill:currentColor}
  .dock .btn{padding-inline:21px}
  .rise{white-space:nowrap}
  /* paired buttons always share one row */
  .btn-row{flex-wrap:nowrap;gap:8px}
  .btn-row .btn{flex:1 1 auto;min-width:0;padding-inline:23px;font-size:clamp(11px,3.1vw,14px);letter-spacing:0}
  .btn-row .tel-ic{width:13px;height:13px}
  .btn-row .btn__t{gap:5px}
  .plateform .btn-row .btn{padding-inline:17px;font-size:clamp(10.5px,2.9vw,14px)}

  /* services: same gap above and below the words, words over the image's shadow */
  .sv{padding:0 0 30px}
  .sv__ph,html:not([data-img="0"]) .sv__ph{margin-bottom:30px}
  .sv b,.sv small{position:relative;z-index:1}
  .sv:last-child{padding-bottom:0}

  /* finishes: room to breathe, marquee tape along every slice, and the dim fills the whole slice */
  .fin{padding-top:clamp(44px,8svh,72px)}
  .fin__head{margin-bottom:clamp(26px,4.6svh,44px)}
  .cut .btn-row{display:none}
  .cut,.cut.is-on,.cut:first-child,.cut:first-child.is-on{clip-path:polygon(0 7px,100% 0,100% 100%,0 100%)}
  .cut::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(-45deg,var(--red) 0 18px,#fff 18px 36px);clip-path:polygon(0 7px,100% 0,100% 9px,0 16px)}
  .cut__tab{inset:0;height:auto;padding:19px var(--gut) 0;align-items:flex-start;background:rgba(15,14,15,.62);transition:opacity .3s ease}
  .cut__in>img{height:calc(var(--vis,70%) + 18px)}
  .cut__in::after,.cut.is-on .cut__in::after{height:calc(var(--vis,70%) + 18px)}
  .cut__body,.cut:first-child .cut__body{bottom:calc(100% - var(--vis,70%) + 22px)}

  /* recent jobs: title and cards sit together, cards a touch taller, one-line titles */
  .work__pin{justify-content:center;padding-top:0}
  .work__head{padding-bottom:50px}
  .work__track{flex:none;padding-top:0;padding-bottom:0;align-items:flex-start}
  .job,.job--w{height:min(128vw,66svh)}
  html:not([data-img="0"]) .job figcaption,.job figcaption{white-space:nowrap;font-size:clamp(14px,4.3vw,20px);line-height:1.15;padding:10px 2px 2px}

  /* reviews: just a small shadow between dockets. The torn edge moves to a layer so it can cast one */
  .rq{background:none;clip-path:none;box-shadow:none;filter:drop-shadow(0 5px 7px rgba(50,6,8,.34))}
  .rq::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),95% 100%,90% calc(100% - 12px),85% 100%,80% calc(100% - 12px),75% 100%,70% calc(100% - 12px),65% 100%,60% calc(100% - 12px),55% 100%,50% calc(100% - 12px),45% 100%,40% calc(100% - 12px),35% 100%,30% calc(100% - 12px),25% 100%,20% calc(100% - 12px),15% 100%,10% calc(100% - 12px),5% 100%,0 calc(100% - 12px))}

  /* menu: header on top, full-width buttons on the bottom, links centred in the space between them */
  .menu{display:flex;flex-direction:column;justify-content:flex-start;padding:72px var(--gut) calc(20px + env(safe-area-inset-bottom))}
  .menu__nav{flex:1;min-height:0;justify-content:center;align-items:center;text-align:center;gap:clamp(0px,.6svh,6px)}
  .menu__nav a{font-size:min(clamp(38px,11vw,66px),7.2svh);line-height:1.12}
  .menu__act{flex:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .menu__act .btn{width:100%;padding-inline:30px}

  .part .h2 em{color:inherit}
  .area__meta{display:none}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .fin__wrap{height:auto}.fin{position:relative;height:auto}
  .cuts{overflow:visible}
  .cut,.cut.is-on,.cut:first-child,.cut:first-child.is-on{position:relative;height:440px;margin-bottom:4px;--vis:440px}
  .cut .cut__body{opacity:1;transform:none;pointer-events:auto}
  .cut__tab{display:none}
}
@media (max-width:899px) and (min-width:560px){
  .hero__h{font-size:min(9vw,12svh)}
}
@media (prefers-reduced-motion:reduce){
  .rise>span,.hero__sub,.hero__cta{animation:none}
  .tape__run,.ring__txt{animation-play-state:paused}
  .show__s{transition-duration:.01s}
  .work__pin{height:auto}
  .work__track{overflow-x:auto;width:auto;height:min(70svh,560px)}
  .layer{position:relative}
  .ph img{top:0;height:100%}
}