/* GODS V2 — shared shell + inner-page components. Home-only sections live inline in index.html */
@font-face{font-family:'Poppins';src:url(fonts/Poppins-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/Poppins-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/Poppins-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/Poppins-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Niko';src:url(fonts/Niko.otf) format('opentype');font-weight:900;font-display:block}
:root{
  --black:#040707; --ink:#0b0d0e; --white:#F2F2EF; --grey:#626668; --red:#A6080C; --red-hi:#C90A10;
  --niko:'Niko','Poppins',sans-serif; --pop:'Poppins',sans-serif;
  --gutter:clamp(20px,5vw,80px); --bar:clamp(5px,.55vw,9px);
  --pill-top:24px; --pill-h:55px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black)}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
body{background:var(--black);color:var(--white);font-family:var(--pop);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--niko);font-weight:900;line-height:.9;letter-spacing:0;text-transform:uppercase}
.wrap{padding-inline:var(--gutter)}
main section{scroll-margin-top:calc(var(--pill-top) + var(--pill-h) + 16px)}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);font-weight:600}
.red{color:var(--red)}
.hide{visibility:hidden}

/* ---- bracket frame. Four corners, two arms each, drawn by GSAP ---- */
.bk{position:relative}
.bk__c{position:absolute;width:var(--arm,34px);height:var(--arm,34px);pointer-events:none;z-index:3}
.bk__c i{position:absolute;display:block;background:var(--bkc,var(--red))}
.bk__c .h{left:0;top:0;width:100%;height:var(--bar)}
.bk__c .v{left:0;top:0;width:var(--bar);height:100%}
.bk__c.tl{left:var(--in,0);top:var(--in,0)}
.bk__c.tr{right:var(--in,0);top:var(--in,0);transform:scaleX(-1)}
.bk__c.bl{left:var(--in,0);bottom:var(--in,0);transform:scaleY(-1)}
.bk__c.br{right:var(--in,0);bottom:var(--in,0);transform:scale(-1)}
.bk__c .h{transform-origin:left center}.bk__c .v{transform-origin:center top}

/* split text */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em;margin:0 -.02em}
.w>span{display:inline-block;will-change:transform}
.ln{display:block;overflow:hidden}
.ln>span{display:block;will-change:transform}

/* ---- header: the old pill, dark, with brackets on it ---- */
.pill{position:fixed;top:var(--pill-top);left:50%;transform:translateX(-50%);z-index:80;width:min(440px,calc(100vw - 28px));height:var(--pill-h);background:rgba(4,7,7,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(242,242,239,.12);display:flex;align-items:center;gap:14px;padding:0 10px 0 16px;transition:background .3s,border-color .3s;--arm:11px;--in:-1px;--bar:2px}
body.nav-open .pill{background:rgba(4,7,7,.92)}
.pill__brand{display:block;height:26px;flex:0 0 auto;color:var(--white)} .pill__brand svg{display:block;height:100%;width:auto}
.pill__page{position:relative;font-size:13px;font-weight:500;color:rgba(242,242,239,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 2px;flex:1 1 auto;text-align:left}
.pill__page::after{content:"";position:absolute;left:2px;right:2px;bottom:4px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.pill__page:hover::after,.pill__page[aria-expanded="true"]::after{transform:scaleX(1)}
.pill__cta{flex:0 0 auto;margin-left:auto;height:37px;padding:0 15px;background:var(--red);color:var(--white);display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .3s}
.pill__cta:hover{background:var(--red-hi)}
.pill__menu{width:36px;height:38px;flex:0 0 auto;display:grid;place-content:center}
.pill__menu span{display:block;width:17px;height:2px;background:var(--white);margin:3px auto;transition:transform .3s cubic-bezier(.22,1,.36,1)}
body.nav-open .pill__menu span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
body.nav-open .pill__menu span:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}

.menu{position:fixed;top:calc(var(--pill-top) + var(--pill-h) + 8px);left:50%;transform:translateX(-50%) translateY(-8px);z-index:79;width:min(440px,calc(100vw - 28px));max-height:calc(100svh - var(--pill-top) - var(--pill-h) - 32px);overflow:auto;background:rgba(4,7,7,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(242,242,239,.12);padding:20px 20px 16px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.menu.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.menu__lead{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.menu__services{display:grid;gap:2px;margin-bottom:14px}
.menu__services a{display:flex;flex-direction:column;gap:2px;padding:9px 10px;margin:0 -10px;transition:background .3s}
.menu__services a:hover{background:rgba(242,242,239,.06)}
.menu__services b{font-family:var(--niko);font-weight:900;font-size:20px;letter-spacing:.01em;text-transform:uppercase;line-height:1}
.menu__services span{font-size:12px;color:rgba(242,242,239,.55);line-height:1.4}
.menu__rest{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;border-top:1px solid rgba(242,242,239,.1);padding-top:12px}
.menu__rest a{font-size:15px;padding:5px 0;color:rgba(242,242,239,.85);transition:color .2s}
.menu__rest a:hover{color:var(--red)}
.menu__foot{margin-top:12px;padding-top:10px;border-top:1px solid rgba(242,242,239,.1);font-size:11px;color:var(--grey)}
.menu__foot a{color:var(--white)}
.menu a{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s cubic-bezier(.16,1,.35,1)}
.menu.open a{opacity:1;transform:none}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--red);color:var(--white);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:18px 30px;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--white);transform:translateY(101%);transition:transform .6s cubic-bezier(.76,0,.24,1);z-index:-1}
.btn:hover{color:var(--black)}.btn:hover::before{transform:none}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(242,242,239,.3)}
.btn.ghost:hover{color:var(--black)}
.btn>span{display:inline-block}

/* ---- section heads ---- */
.badge{display:grid;width:max-content;max-width:100%;grid-template-columns:auto 1fr;gap:0 14px;align-items:center;border:1px solid rgba(242,242,239,.35);background:rgba(4,7,7,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 16px 10px 12px;margin-bottom:26px;color:var(--white)}
.badge__ad{display:block;height:32px;width:auto;grid-row:span 2;padding-right:14px;border-right:1px solid rgba(242,242,239,.35);box-sizing:content-box}
.badge b{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;line-height:1.2}
.badge span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,242,239,.72);font-weight:600}
.ph .badge{position:relative;z-index:2}
a[href*="averydennison.com"]{color:var(--white);border-bottom:1px solid rgba(242,242,239,.35)}
.adm{margin-bottom:clamp(20px,2.4vw,32px);color:rgba(242,242,239,.9)}
.adm__ad{display:block;height:clamp(40px,3.6vw,56px);width:auto}
.cta__tel--ad .adm__ad{height:clamp(36px,3.4vw,52px);color:var(--white)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.head h2{font-size:clamp(40px,6.4vw,108px)}
.head p{max-width:460px;color:rgba(242,242,239,.8);font-size:16px;line-height:1.6}
.head .num{font-family:var(--niko);font-weight:900;font-size:13px;letter-spacing:.2em;color:var(--red);display:block;margin-bottom:14px}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);max-width:1100px}
.facts div{position:relative;padding:22px 0 0;border-top:2px solid var(--black)}
.facts div::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--red)}
.facts b{display:block;font-family:var(--niko);font-weight:900;font-size:clamp(22px,2vw,30px);text-transform:uppercase;line-height:1;margin-bottom:12px}
.facts p{font-size:15px;line-height:1.6;color:var(--grey);max-width:34ch}

.L{position:absolute;pointer-events:none;z-index:0}
.L::before,.L::after{content:"";position:absolute;background:var(--red);right:0;bottom:0}
.L::before{width:100%;height:calc(var(--bar)*4)}
.L::after{width:calc(var(--bar)*4);height:100%}

/* ---- work: bracket-framed images, parallax ---- */
.fig{position:relative;overflow:hidden;background:var(--ink);--arm:40px;--in:12px;--bar:4px;clip-path:inset(0 0 100% 0)}
.fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.75);transform:scale(1.18);will-change:transform}
.fig--ph{display:grid;place-items:center}.fig--ph>.eyebrow{margin:0}.jcard__ph{aspect-ratio:4/3;display:grid;place-items:center;background:var(--ink)}
.fig figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:4px}
.fig figcaption b{font-family:var(--niko);font-weight:900;font-size:22px;text-transform:uppercase;line-height:1}
.fig figcaption span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,242,239,.75);font-weight:600}
.fig::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,7,7,.85),rgba(4,7,7,0) 45%);z-index:1}

/* ---- chapter: full bleed video, pinned, word reveal ---- */
.chap{position:relative;min-height:78svh;padding:clamp(120px,18vh,220px) 0;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.chap__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:saturate(.6) brightness(.6)}
.chap video{position:absolute;inset:0;width:100%;height:120%;top:-10%;object-fit:cover;z-index:-2;filter:saturate(.6) brightness(.6);will-change:transform;opacity:0;transition:opacity 1s}
.chap video.on{opacity:1}
.chap::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 50%,rgba(4,7,7,.15),rgba(4,7,7,.7) 100%)}
.chap__wash{position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 50% at 20% 80%,rgba(166,8,12,.6),rgba(166,8,12,0) 70%);mix-blend-mode:screen;will-change:transform}
.chap p{font-family:var(--niko);font-weight:900;font-size:clamp(32px,5.2vw,86px);text-transform:uppercase;line-height:1;text-align:center;max-width:16ch;padding:0 var(--gutter)}
.chap p .w>span{opacity:.3}
.chap__frame{position:absolute;inset:0;--arm:clamp(48px,7vw,120px);--in:clamp(16px,2.4vw,40px);pointer-events:none}

/* ---- reels ---- */
.reels{padding:clamp(80px,12vh,150px) 0;overflow:hidden}
.reels__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,18px);padding-inline:var(--gutter)}
.reel{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--ink);--arm:28px;--in:10px;--bar:3px;cursor:pointer}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel video{opacity:0;transition:opacity .3s}
.reel.on video{opacity:1}
.reel span{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--niko);font-weight:900;font-size:18px;text-transform:uppercase;line-height:1}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,7,7,.8),rgba(4,7,7,0) 40%);z-index:1}
@media(max-width:900px){.reels__grid{grid-template-columns:repeat(2,1fr)}.reels__grid .reel:nth-child(5){display:none}}

/* ---- cta ---- */
.cta{position:relative;padding:clamp(120px,18vh,220px) var(--gutter);overflow:hidden;isolation:isolate;border-top:1px solid rgba(242,242,239,.08)}
.cta__poster,.cta__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-4;filter:saturate(.5) brightness(.55)}
.cta__vid{z-index:-3;opacity:0;transition:opacity 1s}.cta__vid.on{opacity:1}
.cta__shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(4,7,7,.9) 0,rgba(4,7,7,.72) 50%,rgba(4,7,7,.45) 100%),linear-gradient(0deg,rgba(4,7,7,.9),rgba(4,7,7,0) 40%)}
.cta__in{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:clamp(40px,6vw,120px);align-items:end}
.cta h2{font-size:clamp(52px,8vw,140px);margin-top:18px}
.cta p:not(.eyebrow){margin:22px 0 36px;max-width:40ch;color:rgba(242,242,239,.75)}
.cta__row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta__r{display:grid;border-top:1px solid rgba(242,242,239,.14)}
.cta__tel{display:grid;gap:6px;padding:clamp(16px,2.4vh,26px) 0;border-bottom:1px solid rgba(242,242,239,.14);position:relative}
.cta__tel small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-weight:600}
.cta__tel b{font-family:var(--niko);font-weight:900;font-size:clamp(26px,2.8vw,44px);line-height:1;transition:transform var(--t2) var(--ease),color var(--t1);display:inline-block}
.cta__tel::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--red);transition:width var(--t3) var(--ease)}
.cta__tel:hover b{transform:translateX(10px);color:var(--red-hi)}.cta__tel:hover::after{width:100%}
.cta__ghost{position:absolute;right:-.06em;top:50%;transform:translateY(-50%);z-index:-1;font-family:var(--niko);font-weight:900;font-size:clamp(220px,40vw,800px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,242,239,.07);pointer-events:none;user-select:none;will-change:transform}
@media(max-width:900px){.cta__in{grid-template-columns:1fr}}
.cta .L{right:0;bottom:0;width:min(26vw,320px);height:min(20vw,240px)}

/* ---- footer ---- */
.foot{position:relative;padding:clamp(64px,9vh,110px) var(--gutter) 28px;background:var(--ink);border-top:1px solid rgba(242,242,239,.08);overflow:hidden}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
.foot__logo{display:block;width:180px;height:auto}
.foot .tag{margin-top:18px;font-size:13px;color:var(--grey)}
.foot h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:14px;font-weight:600}
.foot h4::before{content:"[ ";color:var(--red)}.foot h4::after{content:" ]";color:var(--red)}
.foot ul{list-style:none}.foot li{margin-bottom:9px;font-size:13px}
.foot li a{position:relative;color:rgba(242,242,239,.85);transition:color var(--t1)}
@media(hover:hover){.foot li a:hover{color:var(--white)}}
.foot li a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s}
@media(hover:hover){.foot li a:hover::after{transform:scaleX(1)}}
.foot .base{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(40px,6vh,70px);padding-top:20px;border-top:1px solid rgba(242,242,239,.08);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:600}
.foot__top{color:var(--white)}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}

/* ---- Chaty: square, brand colours, white bracket corners. Classes read off the live DOM ---- */
.chaty-widget .chaty-icon{border-radius:0!important;background:var(--red)}
.chaty-widget .chaty-whatsapp-channel .chaty-icon{background:#25D366}
.chaty-widget .chaty-icon svg circle.color-element{fill:transparent!important}
.chaty-widget .chaty-channel::before,.chaty-widget .chaty-channel::after{content:"";position:absolute;width:11px;height:11px;border:2px solid var(--white);pointer-events:none;z-index:2}
.chaty-widget .chaty-channel::before{left:-5px;top:-5px;border-right:0;border-bottom:0}
.chaty-widget .chaty-channel::after{right:-5px;bottom:-5px;border-left:0;border-top:0}
.chaty-widget .chaty-i-trigger{display:none!important}

@media(prefers-reduced-motion:reduce){
  .w>span,.ln>span,.fig,.fig img,.hero h1{transform:none!important;clip-path:none!important;opacity:1!important}
}

/* ---- service card (home rail + services index) ---- */
.card{position:relative;flex:0 0 auto;width:clamp(280px,26vw,420px);aspect-ratio:3/4.4;overflow:hidden;background:var(--ink);--arm:44px;--in:14px;--bar:4px;isolation:isolate}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.8);transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .6s;will-change:transform}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--black) 8%,rgba(4,7,7,.7) 38%,rgba(4,7,7,0) 70%);z-index:1}
.card__wash{position:absolute;inset:0;z-index:1;background:radial-gradient(70% 55% at 50% 100%,rgba(166,8,12,.55),rgba(166,8,12,0) 70%);opacity:0;transition:opacity .6s}
.card:hover img{transform:scale(1.06);filter:saturate(.9) brightness(.95)}
.card:hover .card__wash{opacity:1}
.card__n{position:absolute;left:24px;top:22px;z-index:2;font-family:var(--niko);font-weight:900;font-size:13px;letter-spacing:.2em;color:var(--white)}
.card__t{position:absolute;left:24px;right:24px;bottom:26px;z-index:2}
.card__t h3{font-size:clamp(26px,2.3vw,36px);margin-bottom:10px}
.card__t p{font-size:14px;line-height:1.5;color:rgba(242,242,239,.82);max-width:30ch}
.card__go{position:absolute;right:24px;top:20px;z-index:2;width:36px;height:36px;display:grid;place-items:center;font-size:18px;box-shadow:inset 0 0 0 1px rgba(242,242,239,.25);transition:background .3s,color .3s,transform .3s}
.card:hover .card__go{background:var(--red);transform:rotate(45deg)}
.card__go svg{width:14px;height:14px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);padding-inline:var(--gutter)}
.cards .card{width:auto}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}.cards .card{aspect-ratio:4/5}}
/* inside a .sec the section already carries the gutter: cards line up with the headings */
.sec .cards{padding-inline:0}

/* ---- inner pages ---- */
:root{--line:rgba(242,242,239,.12);--dim:rgba(242,242,239,.8)}
.hide{visibility:hidden}
.sec{padding:clamp(80px,12vh,150px) var(--gutter);position:relative;overflow:hidden}
.sec--tight{padding-top:0}
.sec--line{border-top:1px solid rgba(242,242,239,.06)}
.band{background:var(--white);color:var(--black);--line:rgba(4,7,7,.15);--dim:rgba(4,7,7,.7);isolation:isolate}
.band .eyebrow,.band .head .num,.band .head p{color:var(--grey)}
.band .facts div{border-top-color:var(--black)}
.band .L{right:0;bottom:0;width:min(26vw,320px);height:min(20vw,240px)}
.band .btn.ghost{box-shadow:inset 0 0 0 1px rgba(4,7,7,.35);color:var(--black)}
.band .btn.ghost::before{background:var(--black)}.band .btn.ghost:hover{color:var(--white)}
.facts--4{grid-template-columns:repeat(4,1fr);max-width:none}
.facts--2{grid-template-columns:repeat(2,1fr)}
.facts .n{display:block;font-family:var(--niko);font-weight:900;font-size:13px;letter-spacing:.2em;color:var(--red);margin-bottom:12px}
@media(max-width:900px){.facts,.facts--4,.facts--2{grid-template-columns:1fr}}

/* page hero: title in brackets, red rule, optional full-bleed media */
.ph{position:relative;padding:calc(var(--pill-top) + var(--pill-h) + clamp(64px,12vh,140px)) var(--gutter) clamp(56px,9vh,110px);overflow:hidden;isolation:isolate}
.ph .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.ph .eyebrow i{display:block;width:34px;height:2px;background:var(--red);transform-origin:left;flex:0 0 auto}
.ph h1{font-size:clamp(44px,8.4vw,150px);display:inline-block;padding:.14em .3em .1em .32em;max-width:100%;--arm:.6em;--in:0;--bar:clamp(5px,.5vw,9px)}
.ph__lede{max-width:58ch;margin-top:28px;font-size:clamp(15px,1.25vw,18px);color:var(--dim);text-wrap:pretty}
.ph__row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.ph__ghost{position:absolute;right:-.06em;top:50%;transform:translateY(-50%);z-index:-2;font-family:var(--niko);font-weight:900;font-size:clamp(200px,42vw,760px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,242,239,.08);pointer-events:none;user-select:none}
.ph--media{min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(64px,11vh,140px)}
.ph__media{position:absolute;inset:0;z-index:-3;will-change:transform}
.ph__media img,.ph__media video{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.5)}
.ph__wash{position:absolute;inset:-20%;z-index:-2;background:radial-gradient(60% 70% at 78% 40%,rgba(166,8,12,.55),rgba(166,8,12,0) 70%);mix-blend-mode:screen;will-change:transform}
.ph__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,7,7,.86) 0%,rgba(4,7,7,.4) 55%,rgba(4,7,7,.1) 100%),linear-gradient(0deg,var(--black) 0%,rgba(4,7,7,0) 40%)}
.ph__vf{position:absolute;inset:0;z-index:2;pointer-events:none;--arm:clamp(48px,7vw,120px);--in:clamp(16px,2.4vw,40px);--bar:clamp(5px,.55vw,9px)}
.ph__side{position:absolute;right:calc(var(--gutter) + 54px);bottom:clamp(64px,11vh,140px);text-align:right;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);font-weight:600;line-height:2.1}
@media(max-width:900px){.ph__side{display:none}.ph h1{padding-left:.28em;font-size:min(11.5vw,14vh)}}

/* ---- tyre track: after every page hero, a tread lane with the eight service words rolling over it. Speed follows
   the scroll (v2.js). The tread tile is the same 120x56 block the fact bands and the menu carry at 5% ---- */
.trk{position:relative;height:clamp(88px,9.5vw,136px);display:flex;align-items:center;overflow:hidden;background:var(--ink);border-top:1px solid rgba(242,242,239,.08);border-bottom:1px solid rgba(242,242,239,.08);isolation:isolate}
.trk__tread{position:absolute;left:0;top:0;bottom:0;width:calc(100% + 160px);z-index:-1;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56' viewBox='0 0 120 56'%3E%3Cpath fill='%23F2F2EF' d='M0 0h40l-12 28 12 28H0zM60 0h40l-12 28 12 28H60z'/%3E%3C/svg%3E") 0 50%/160px auto repeat-x;will-change:transform}
.trk__cap{display:flex;width:max-content;font-family:var(--niko);font-weight:900;font-size:clamp(22px,2.6vw,38px);line-height:1;text-transform:uppercase;white-space:nowrap;will-change:transform}
.trk__cap span{padding:0 .8em;color:var(--white)}
.trk__cap b{color:var(--red);font-weight:900}
@media(max-width:900px){.trk__tread{background-size:120px auto}}

/* two columns: framed image + copy */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split .fig{aspect-ratio:4/5}
.split--wide .fig{aspect-ratio:16/11}
.split--flip>.fig{order:2}
.split h2{font-size:clamp(36px,5vw,84px);margin-bottom:24px}
.split h2 .red,.head h2 .red{color:var(--red)}
.split p:not(.eyebrow){color:var(--dim);font-size:clamp(15px,1.15vw,17px);max-width:52ch;margin-bottom:16px}
.split .eyebrow{margin-bottom:14px}
.split .btn{margin-top:14px}
@media(max-width:900px){.split{grid-template-columns:1fr}.split--flip>.fig{order:0}}

/* rows: numbered list, one line each */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:90px 1fr 1.5fr;gap:24px;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line);align-items:start}
.row .n{font-family:var(--niko);font-weight:900;font-size:13px;letter-spacing:.2em;color:var(--red);padding-top:.5em}
.row h3{font-size:clamp(24px,2.4vw,38px)}
.row p{color:var(--dim);font-size:15px;max-width:60ch}
.row p+p{margin-top:10px}
.row small{display:block;margin-top:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-weight:600}
@media(max-width:900px){.row{grid-template-columns:1fr;gap:10px}.row .n{padding:0}}
.svl{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.svl li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--dim)}
.svl a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color var(--t1) var(--ease)}
@media(hover:hover){.svl a:hover{text-decoration-color:var(--red)}}
.row .svl+small{margin-top:18px}
.row[id]{scroll-margin-top:calc(var(--pill-top) + var(--pill-h) + 40px)}
.row__h .fig{aspect-ratio:3/2;margin-top:24px;max-width:520px}
.row .svl~.lnk{display:inline-block;margin-top:18px}
@media(max-width:600px){.svl{grid-template-columns:1fr}}

/* questions: native details */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0;font-family:var(--niko);font-weight:900;font-size:clamp(19px,1.9vw,30px);text-transform:uppercase;line-height:1}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--red);flex:0 0 auto;font-size:1.1em}
.qa details[open] summary::after{content:"–"}
.qa details p{padding:0 0 26px;max-width:66ch;color:var(--dim);font-size:15px}
.qa details p a,.prose a,.note a{color:var(--red);border-bottom:1px solid currentColor}

/* gallery of framed figures */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px)}
.gal .fig:nth-child(4n+1){grid-column:span 7;aspect-ratio:16/10}
.gal .fig:nth-child(4n+2){grid-column:span 5;aspect-ratio:4/5;margin-top:clamp(40px,6vw,120px)}
.gal .fig:nth-child(4n+3){grid-column:span 5;aspect-ratio:4/5}
.gal .fig:nth-child(4n){grid-column:span 7;aspect-ratio:16/10;margin-top:clamp(40px,6vw,120px)}
.gal--3 .fig:nth-child(n){grid-column:span 4;aspect-ratio:4/5;margin-top:0}
.gal--2 .fig:nth-child(n){grid-column:span 6;aspect-ratio:16/11;margin-top:0}
@media(max-width:900px){.gal .fig:nth-child(n){grid-column:1/-1;margin-top:0;aspect-ratio:4/3}}

/* journal cards */
.jcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.jcard{position:relative;display:block;background:var(--ink);--arm:28px;--in:10px;--bar:3px;overflow:hidden;padding-bottom:26px}
.jcard img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.75);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.jcard:hover img{transform:scale(1.05)}
.jcard__meta{padding:20px 22px 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-weight:600}
.jcard__meta b{color:var(--red);font-weight:600}
.jcard h3{padding:10px 22px 0;font-size:clamp(20px,1.7vw,26px)}
.jcard p{padding:12px 22px 0;font-size:14px;color:var(--dim)}
@media(max-width:900px){.jcards{grid-template-columns:1fr}}

/* prose: articles, terms */
.prose{max-width:70ch}
.prose p,.prose li{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:rgba(242,242,239,.82)}
.prose p{margin-bottom:1.4em}
.prose ol{list-style:none;counter-reset:t;border-top:1px solid var(--line)}
.prose li{counter-increment:t;display:grid;grid-template-columns:70px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.prose li::before{content:counter(t,decimal-leading-zero);font-family:var(--niko);font-weight:900;font-size:13px;letter-spacing:.2em;color:var(--red);padding-top:.5em}
.note{margin-top:32px;font-size:14px;color:var(--grey);max-width:60ch}
.article__hero{aspect-ratio:16/8;margin-bottom:clamp(40px,6vh,72px)}

/* contact */
.contact{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,96px);align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.contact__wpform{min-height:120px}
.contact__fallback{font-size:14px;color:var(--grey)}
.contact__wpform .elementor-field-group{margin-bottom:26px}
.contact__wpform label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--grey);margin-bottom:8px;display:block}
.contact__wpform input.elementor-field-textual,.contact__wpform textarea.elementor-field-textual,.contact__wpform select.elementor-field-textual{width:100%;background:transparent!important;border:0;border-bottom:1px solid rgba(242,242,239,.28);border-radius:0;color:var(--white);font-family:var(--pop);font-size:16px;padding:12px 0;box-shadow:none;transition:border-color .3s}
.contact__wpform select.elementor-field-textual{padding-right:28px}
.contact__wpform select.elementor-field-textual option{color:var(--black)}
.contact__wpform input.elementor-field-textual:focus,.contact__wpform textarea.elementor-field-textual:focus,.contact__wpform select.elementor-field-textual:focus{outline:0;border-bottom-color:var(--red)}
.contact__wpform .elementor-select-wrapper .select-caret-down-wrapper{color:var(--grey);right:4px}
.contact__wpform button.elementor-button{background:var(--red);color:var(--white);border:0;border-radius:0;font-family:var(--pop);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:18px 30px;transition:background .3s}
.contact__wpform button.elementor-button:hover{background:var(--red-hi)}
.contact__wpform .elementor-message{font-size:14px;color:var(--dim)}
/* Elementor pads its column wrap 10px, which pushed the form in from the lede */
.contact__wpform div.elementor-widget-wrap.elementor-element-populated{padding:0!important}
.sheet{position:relative;background:var(--ink);padding:clamp(22px,2.4vw,34px);--arm:26px;--in:8px;--bar:3px}
.sheet__t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-weight:600;margin-bottom:18px}
.sheet dl>div{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.sheet dt{color:var(--grey)}.sheet dd{color:rgba(242,242,239,.4);word-break:break-word}.sheet dd.on{color:var(--white)}
.sheet__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.sheet .btn{padding:14px 20px;font-size:11px}
.visit{margin-top:24px;font-size:15px;line-height:1.7}
.visit p{margin-bottom:10px}.visit a{border-bottom:1px solid rgba(242,242,239,.3)}
.visit__hint{font-size:14px;color:var(--grey);max-width:44ch}

/* 404 */
.nf{min-height:88svh;display:grid;place-items:center;text-align:center;padding:0 var(--gutter)}
.nf h1{font-size:clamp(38px,6vw,84px);margin:16px 0 22px}
.nf p{color:var(--dim);margin-bottom:30px;max-width:36ch}
.ph--article h1{font-size:clamp(30px,4.4vw,72px)}

/* ======================= refinement round, 8 Sep 2026 ======================= */
/* one duration scale, one gap token, red only where it means something */
:root{--t1:.3s;--t2:.6s;--t3:1s;--gap:clamp(120px,18vh,240px);--ease:cubic-bezier(.22,1,.36,1)}
.sec,.reels{padding-top:var(--gap);padding-bottom:var(--gap)}
.sec--tight{padding-top:0}
.mat,.svc{padding-top:var(--gap)}
.cta{padding-top:calc(var(--gap)*1.1);padding-bottom:calc(var(--gap)*1.1)}

/* [ eyebrow ] and [ 01 · Section ] in red brackets, sitewide */
.eyebrow::before,.num::before,.jcard__meta::before,.sheet__t::before{content:"[ ";color:var(--red)}
.eyebrow::after,.num::after,.jcard__meta::after,.sheet__t::after{content:" ]";color:var(--red)}
.eyebrow i{display:none}
.head .num{color:#7A7E80;letter-spacing:.24em;text-transform:uppercase;font-family:var(--pop);font-weight:600;font-size:11px}

/* hairline ruler with ticks, under every page H1 */
.ruler{display:block;height:12px;margin-top:22px;max-width:100%;transform-origin:left;
  background:
    linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat,
    repeating-linear-gradient(90deg,rgba(242,242,239,.28) 0 1px,transparent 1px 10px) left bottom/100% 4px no-repeat,
    repeating-linear-gradient(90deg,rgba(242,242,239,.5) 0 1px,transparent 1px 50px) left bottom/100% 8px no-repeat,
    repeating-linear-gradient(90deg,var(--red) 0 1px,transparent 1px 250px) left bottom/100% 12px no-repeat}
.band .ruler{--line:rgba(4,7,7,.2)}

/* red full stop on every H2 */
h2 .fs{font-style:normal;color:var(--red)}

/* one CTA anatomy: underlined text + red circled plus. secondary: arrow, muted */
.btn{background:none;padding:6px 0;gap:16px;color:var(--white);isolation:auto;overflow:visible}
.btn::before{display:none}
.btn>span{position:relative;padding-bottom:3px}
.btn>span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5;transform-origin:left;transition:transform var(--t2) var(--ease),opacity var(--t1)}
.btn:hover{color:var(--white)}
@media(hover:hover){.btn:hover>span::after{opacity:1;transform:scaleX(1)}}
/* primary = filled red square, secondary = underlined text link (home V5, shared by cta()) */
.fill{display:inline-flex;align-items:center;height:48px;padding:0 26px;background:var(--red);color:var(--white);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:background var(--t1) var(--ease)}
.fill:hover{background:var(--red-hi)}
.lnk{display:inline-block;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:3px;border-bottom:1px solid rgba(242,242,239,.35);transition:border-color var(--t1) var(--ease)}
@media(hover:hover){.lnk:hover{border-color:var(--red)}}
.btn::after{content:"+";flex:0 0 auto;width:36px;height:36px;border:1px solid var(--red);border-radius:50%;display:grid;place-items:center;color:var(--red);font-weight:400;font-size:20px;line-height:1;font-family:var(--pop);transition:background var(--t1),color var(--t1),transform var(--t2) var(--ease)}
/* touch keeps :hover after Back, so the fill/underline states only exist where hover is real */
@media(hover:hover){.btn:hover::after{background:var(--red);color:var(--white);transform:rotate(90deg)}}
.btn.ghost{box-shadow:none;color:var(--grey)}
.btn.ghost:hover{color:var(--white)}
.btn.ghost::after{content:"→";border:0;width:auto;height:auto;font-size:18px;color:inherit;transition:transform var(--t2) var(--ease)}
.btn.ghost[href^="#"]::after{content:"↓"}
@media(hover:hover){.btn.ghost:hover::after{background:none;color:inherit;transform:translateX(6px)}}
.band .btn,.band .btn.ghost{color:var(--black);box-shadow:none}
.band .btn:hover{color:var(--black)}
.band .btn.ghost{color:var(--grey)}.band .btn.ghost:hover{color:var(--black)}
.band .btn.ghost::before{display:none}
.sheet .btn{padding:6px 0}

/* discipline: everything mono unless it is the subject or the active card */
.fig img,.reel img,.reel video,.jcard img,.card img,.mat .tab img,.split .fig img,.article__hero img{filter:grayscale(1) brightness(.85);transition:filter var(--t2),transform var(--t3) cubic-bezier(.2,.7,.2,1)}
.fig:hover img,.reel:hover img,.reel.on img,.reel.on video,.reel:hover video,.jcard:hover img,.card.is-on img,.card:hover img,.mat .tab:hover img{filter:grayscale(0) brightness(.95)}
.card::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(4,7,7,.45);transition:opacity var(--t2);pointer-events:none}
.card.is-on::after,.card:hover::after{opacity:0}
@media(hover:none){.card:hover::after{opacity:1}.card.is-on::after{opacity:0}}
/* colour copy laid over the mono one on hover: vinyl sweep with a squeegee edge */
.card img.col{filter:none;clip-path:polygon(-40% 0,-40% 0,-70% 100%,-70% 100%);transition:clip-path var(--t3) var(--ease);z-index:0}
.card:hover img.col,.card.is-on img.col{clip-path:polygon(-40% 0,140% 0,110% 100%,-70% 100%)}

/* services rail caption row */
.svc__cap{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px var(--gutter) 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);font-weight:600}
.svc__cap b{color:var(--white);font-weight:600}
.svc__cap i{font-style:normal;color:var(--red)}
.svc__cap a{color:var(--white)}

/* vinyl reveal on service heroes: colour video clipped over the grayscale one */
.ph--media[data-vinyl] .ph__media{filter:grayscale(1)}
.ph__vinyl{position:absolute;inset:0;z-index:-3;clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%);will-change:clip-path}
.ph__vinyl video{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.6)}
.ph__sq{position:absolute;top:-10%;bottom:-10%;left:0;width:3px;z-index:-2;background:var(--white);box-shadow:0 0 24px rgba(242,242,239,.6),-40px 0 60px rgba(4,7,7,.5);transform:rotate(9deg);transform-origin:top;will-change:transform;opacity:0}
.ph__sq::after{content:"";position:absolute;left:-2px;right:-2px;top:0;bottom:0;background:linear-gradient(180deg,transparent,var(--red) 30%,var(--red) 70%,transparent);opacity:.7}

/* PPF film corner lift */
.fig[data-film]{perspective:900px}
.fig[data-film]::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(242,242,239,.14),rgba(242,242,239,0) 45%,rgba(242,242,239,.06));mix-blend-mode:screen}
.fig .peel{position:absolute;right:0;top:0;width:clamp(90px,14%,160px);aspect-ratio:1;z-index:3;clip-path:polygon(0 0,100% 0,100% 100%);background:linear-gradient(225deg,#e7e7e2 0,#b9bab4 45%,rgba(242,242,239,.2) 100%);box-shadow:-14px 14px 30px rgba(4,7,7,.6);transform-origin:right top;transform:translate(0,0) rotate(0);transition:transform var(--t3) var(--ease),opacity var(--t2);opacity:.9}
.fig[data-film]:hover .peel{transform:translate(-22%,22%) rotate(-12deg) scale(1.15);opacity:1}
.fig .peel::before{content:"[ PPF ]";position:absolute;right:8px;top:6px;font-size:9px;letter-spacing:.2em;font-weight:600;color:var(--red)}

/* tyre tread as a 5% texture on fact bands and the menu */
.band::before,.state::before,.menu::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56' viewBox='0 0 120 56'%3E%3Cpath fill='%23000' d='M0 0h40l-12 28 12 28H0zM60 0h40l-12 28 12 28H60z'/%3E%3C/svg%3E");background-size:120px 56px}
.menu::before{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56' viewBox='0 0 120 56'%3E%3Cpath fill='%23F2F2EF' d='M0 0h40l-12 28 12 28H0zM60 0h40l-12 28 12 28H60z'/%3E%3C/svg%3E")}
.menu{isolation:isolate}
.band{position:relative}
/* bracket pattern on inner bands too */
.band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke-width='6'%3E%3Cpath d='M12 38V12h26' stroke='%23A6080C'/%3E%3Cpath d='M148 122v26h-26' stroke='%23626668'/%3E%3C/g%3E%3C/svg%3E");background-size:160px 160px;mask-image:linear-gradient(90deg,transparent 55%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 55%,#000 100%)}

/* header: build counter from the configurator sheet */
.pill__cta b{font-family:var(--niko);font-weight:900;font-size:13px;letter-spacing:.08em;margin-right:8px}

/* bracket cursor, desktop only */
#cur{position:fixed;left:0;top:0;z-index:300;width:30px;height:30px;margin:-15px 0 0 -15px;pointer-events:none;--arm:8px;--in:0;--bar:2px;--bkc:var(--white);opacity:0;transition:width var(--t1) var(--ease),height var(--t1) var(--ease),margin var(--t1) var(--ease),opacity var(--t1)}
#cur::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;background:var(--red)}
#cur.on{opacity:1}
#cur.hov{width:46px;height:46px;margin:-23px 0 0 -23px;--bkc:var(--red)}
#cur.hov::after{opacity:0}
@media(pointer:fine){body.has-cur,body.has-cur a,body.has-cur button{cursor:none}}

/* page change: black ground under the pill (80) and over the content while it fades. No cover, no logo */
#pt{position:fixed;inset:0;z-index:79;background:transparent;pointer-events:none;--arm:clamp(48px,7vw,120px);--in:clamp(16px,2.4vw,40px)}
#pt.in{pointer-events:auto}
#pt{display:flex;align-items:center;justify-content:center;text-align:center}
#pt b{font-family:var(--niko);font-weight:900;font-size:clamp(40px,6.4vw,108px);line-height:.9;letter-spacing:0;text-transform:uppercase;color:var(--white);opacity:0;max-width:78vw;will-change:opacity,transform}
#pt b i{font-style:normal;color:var(--red)}
.pt-in main,.pt-in footer{opacity:0}

@media(max-width:900px){.svc__cap{flex-direction:column;gap:6px}.fig .peel{display:none}#cur{display:none}}
@media(prefers-reduced-motion:reduce){.ph__vinyl{clip-path:none}.ph--media[data-vinyl] .ph__media{filter:none}.card{opacity:1!important}#cur{display:none}}
.cards .card::after{display:none}

/* ======================= home V8 round, 12 Sep 2026 =======================
   Shared fixes found by walking the live page at 1440 and 390. Each one is a
   defect, not a preference: see the round report. */

/* Vamtam's scroll-to-top leaks past the coded-template allowlist and prints the
   bare word "top" as the last thing on every page. */
#scroll-to-top,.vamtam-scroll-to-top{display:none!important}

/* --grey on --black measures 3.49:1. Everything set at body size moves up to
   #7A7E80 (4.6:1); --grey stays for the heavier chrome labels. */
.eyebrow,.num,.cta__tel small,.menu__lead,.foot .tag,.visit__hint,.foot h4,.foot .base{color:#7A7E80}

/* the statement band outranked the section heading under it on a phone */
.chap p{font-size:clamp(40px,9vw,86px)}
/* the wash was drawn in a box the size of the section, so its edge showed as a
   hard vertical seam across the footage. The oversized box alone did not fix it:
   the gradient was still ~.1 alpha at the box's left and bottom edges, and the
   scroll drift carries those edges into the band. closest-side ends the ellipse
   exactly at the nearest edges, so every edge is transparent wherever it drifts. */
.chap__wash{inset:-40%;background:radial-gradient(closest-side at 30% 70%,rgba(166,8,12,.55),rgba(166,8,12,0))}

/* caption sub-lines inherited .reel span{position:absolute} and printed on top
   of their own titles on all ten tiles */
.reel figcaption span{position:static}

@media(max-width:900px){
  /* 32 tap targets were under 44px, the hamburger among them */
  .pill__menu{width:44px;height:44px}
  .menu__rest a,.menu__services a{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .cta__tel{padding-block:16px}
  .foot li{margin-bottom:0}
  .foot li a{display:flex;align-items:center;min-height:40px;width:fit-content}
  .foot__top,.base a{display:inline-flex;align-items:center;min-height:44px}
  /* the drawer was see-through: reels and LED stripes read straight through it */
  .menu{background:var(--black);max-height:calc(100svh - var(--pill-top) - var(--pill-h) - 24px)}
  body.nav-open::before{content:"";position:fixed;inset:0;z-index:78;background:rgba(4,7,7,.85)}
  body.nav-open .chaty-widget{display:none!important}
  /* the ghost wordmark was 573px wide in a 390px viewport and printed through the lede */
  .cta__ghost{font-size:clamp(110px,32vw,200px);-webkit-text-stroke-color:rgba(242,242,239,.05)}
}
/* the fixed chat widget sits at the bottom-right of every viewport and was eating
   the last characters of "Back to top" */
.foot .base .foot__top{margin-right:66px}
@media(max-width:900px){
  /* the statement line is 40px so it outranks a section H2, which means it has to wrap earlier */
  .chap p{max-width:300px}
}
@media(max-width:900px){
  .pill__page{padding-block:12px}
  .cta__tel b a{display:inline-block;padding-block:9px}
}
@media(max-width:900px){
  /* the statement was centred in the band, which lands it under the fixed chat widget */
  .chap{align-items:start;padding-top:clamp(90px,16vh,170px)}
}

/* ======================= QA walk fixes, 14 Sep 2026 ======================= */
/* headings kept leaving one word on the last line ("LINERS", "ON?", "PANEL");
   balance keeps the line count and only evens the breaks */
h1,h2,h3,.facts b,.proc__end p{text-wrap:balance}
@media(max-width:900px){
  /* the scattered brackets ran through the lede and tile copy on a phone */
  .band::after{display:none}
  /* at the bottom of the page the copyright line ran under the fixed chat widget (x305+) */
  .foot .base>span{flex:0 0 100%;padding-right:72px}
}
@media(max-width:600px){
  /* a 350x175 article hero was crowded by 40px fig corners; reel size instead */
  .article__hero{--arm:28px;--in:10px;--bar:3px}
  /* at 2:1 the two-line caption covered a third of a 175px strip; the source frames are 4:3 */
  .article__hero{aspect-ratio:4/3}
  /* a wrapped hero eyebrow left its closing ] as a flex item floating between the lines;
     inline flow puts it after the last word */
  .ph .eyebrow{display:block}
  .ph .eyebrow i{display:inline-block;vertical-align:middle;margin:0 12px}
}

/* ======================= re-walk fixes, round 2, 14 Sep 2026 ======================= */
/* single words left on the last line of eyebrows, captions, questions and the copyright */
.eyebrow,.num,.fig figcaption span,.qa summary,.foot .base>span{text-wrap:balance}
@media(max-width:900px){
  /* eight services made the phone menu 896px tall in a 739px box, with Contact below the
     fold. Titles only, two columns, links three across: fits 390x664 with 44px rows */
  .menu{padding-inline:14px}
  .menu__services{grid-template-columns:1fr 1fr;column-gap:12px}
  .menu__services span{display:none}
  .menu__services b{font-size:18px}
  .menu__rest{grid-template-columns:repeat(3,1fr)}
  .menu__foot a{display:inline-flex;align-items:center;min-height:40px}
  /* Back to top ended 1px from the chat widget (x305); both base links sit left instead */
  .foot .base{justify-content:flex-start}
  .foot .base .foot__top{margin-right:0}
}

/* case-study spec rows above the article prose (22 Sep) */
.facts--case{margin-bottom:clamp(40px,6vh,72px)}