:root{
  --bg:#0A0A0A;--bg2:#111111;--card:#181818;--card2:#1F1F1F;--line:#262626;
  --text:#FFFFFF;--body:#C2C2C2;--soft:#A8A8A8;--orange:#ff5e08;--orange2:#CC5719;
  --wrap:1280px;--ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
.skip{position:absolute;left:12px;top:-60px;z-index:1000;padding:12px 20px;border-radius:12px;background:#fff;color:#0a0a0a;font:600 16px/1 Archivo,system-ui,sans-serif;text-decoration:none;transition:top .2s ease}.skip:focus{top:12px}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:112px;scroll-padding-bottom:96px}@media (forced-colors:active){.h-bq,.sp-q{border:2px solid ButtonText}}@media print{.h-hA,.fab,.btt,.drawer,.ck,.skip{display:none!important}[data-in],.rv-up,.rv-st,.bx-en,.wd,.wd i{opacity:1!important;transform:none!important;visibility:visible!important;filter:none!important}*{animation:none!important;transition:none!important;background:#fff!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}img,svg{filter:none!important;max-width:100%!important;max-height:500px!important}main::before{display:block;margin-bottom:24px;font:600 14px/1.4 Archivo,system-ui,sans-serif;content:"Becker General Services \2014  (978) 595-9993 \2014  85 Main St Suite C 7, Peabody, MA 01960"}}
body{background:var(--bg);color:var(--text);font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 80px);margin-inline:auto}
.o{color:var(--orange)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px;border-radius:6px;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn svg{flex:none}
.btn-o{background:var(--orange);color:#0A0A0A}
.btn-o:hover{background:#FF7A24;transform:translateY(-2px)}
.btn-l{border:1.5px solid rgba(255,255,255,.55);color:var(--text)}
.btn-l:hover{border-color:var(--text);background:rgba(255,255,255,.06)}
.btn-k{background:#0A0A0A;color:var(--text)}
.btn-k:hover{background:#1C1C1C;transform:translateY(-2px)}
.btn-sm{height:48px;padding:0 22px}

/* section heading (centered, Wolf style) */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.eyebrow::before,.eyebrow::after{content:"";width:28px;height:2px;background:currentColor}
.eyebrow.left::after{display:none}
.sec-hd{text-align:center;max-width:720px;margin:0 auto 56px}
.sec-hd h2{margin-top:14px}
.sec-hd p{margin-top:16px;color:var(--body)}
h2{font-size:45px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.sec{padding:110px 0}

/* top bar */
.topbar{background:#050505;border-bottom:1px solid #161616;font-size:15px;color:var(--body)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;height:40px}
.topbar .grp{display:flex;align-items:center;flex:none}
.topbar .grp > a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;transition:color .2s}
.topbar .grp > a svg{color:var(--orange)}
.topbar .grp > a:hover{color:var(--text)}
.topbar .grp > a.tb-phone{display:none}
.tb-sep{width:1px;height:18px;background:#2C2C2C;margin:0 14px 0 8px}
/* status dot: green, the assistant books quote visits at any hour */
.status{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status i{flex:none;width:8px;height:8px;border-radius:50%;background:#3BD16F}
.status b{color:var(--text);font-weight:700}
.lang{display:flex;gap:2px;padding:3px;border:1px solid #2E2E2E;border-radius:7px}
.lang button{min-width:38px;height:26px;padding:0 8px;border-radius:4px;font-size:14px;font-weight:700;letter-spacing:.06em;color:#9A9A9A;transition:color .2s,background .2s}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{background:var(--orange);color:#0A0A0A}

/* header */
/* the header keeps its 92px slot in the flow; only the bar inside it compacts on scroll, so nothing below jumps */
.hdr{--lg:120px;position:sticky;top:0;z-index:50;height:92px;pointer-events:none}
.hdr-bar{position:relative;pointer-events:auto;background:rgba(17,17,17,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #1E1E1E;transition:background .35s,box-shadow .35s}
.hdr.scrolled .hdr-bar{background:rgba(12,12,12,.97);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.hdr-row{display:flex;align-items:center;justify-content:space-between;height:92px;transition:height .4s var(--ease)}
.hdr.scrolled .hdr-row{height:72px}
.brand{display:flex;align-items:center}
.brand img{height:auto}
.hdr-row .brand{flex:none;align-self:stretch;position:relative;z-index:3;width:var(--lg)}
.hdr-row .brand img{position:absolute;left:0;top:10px;width:var(--lg);filter:drop-shadow(0 12px 22px rgba(0,0,0,.5));transition:width .45s var(--ease),top .45s var(--ease),left .45s var(--ease)}
.nav{position:relative;align-self:stretch;display:flex;align-items:center;gap:30px}
.nav-a{display:block;font-size:16px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;padding:10px 0;color:#C9C9C9;transition:color .3s}
.nav-a .rl{display:block;overflow:hidden;height:1.3em;line-height:1.3}
.nav-a .rl > span{display:block;text-shadow:0 1.3em 0 var(--text);transition:transform .5s var(--ease)}
.nav-a:hover .rl > span,.nav-a:focus-visible .rl > span{transform:translateY(-1.3em)}
.nav-a:hover,.nav-a.on,.hdr.mega-open .nav-dd .nav-a{color:var(--text)}
/* one ink line slides to the hovered link and settles back on the current section */
.nav-ink{position:absolute;left:0;top:0;height:2px;width:0;background:var(--orange);opacity:0;pointer-events:none}
.nav-ink.ready{transition:transform .45s var(--ease),width .45s var(--ease),opacity .25s}
.nav-dd{align-self:stretch;display:flex;align-items:center;gap:2px}
.dd-tog{display:grid;place-items:center;width:24px;height:26px;margin-right:-8px;border-radius:4px;color:#C9C9C9;transition:color .2s}
.dd-tog svg{transition:transform .35s var(--ease)}
.dd-tog:hover,.hdr.mega-open .dd-tog{color:var(--orange)}
.hdr.mega-open .dd-tog svg{transform:rotate(180deg)}
#top{scroll-margin-top:132px}
#about,#services,#projects,#contact{scroll-margin-top:72px}

/* services panel under the header */
.mega{position:absolute;left:0;right:0;top:100%;background:#0E0E0E;border-bottom:1px solid #222;box-shadow:0 40px 80px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .3s var(--ease),visibility 0s .3s}
.hdr.mega-open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .35s var(--ease)}
.mega-in{display:grid;grid-template-columns:1fr 280px;gap:44px;padding:34px 0 38px calc(var(--lg) + 20px)}
.mega-hd{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8E8E8E;margin:0 0 12px 16px}
.mega-list ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;list-style:none;margin:0;padding:0}
.mega-list button{position:relative;display:block;width:100%;text-align:left;padding:14px 52px 14px 16px;border-radius:6px;transition:background .2s}
.mega-list b{display:block;font-size:19px;font-weight:700;line-height:1.3;color:#E6E6E6;transition:color .2s}
.mega-list span{display:block;margin-top:3px;font-size:15px;line-height:1.45;color:#9A9A9A}
.mega-list svg{position:absolute;right:18px;top:50%;margin-top:-9px;color:var(--orange);opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .3s var(--ease)}
.mega-list button.on{background:#1A1A1A}
.mega-list button.on b{color:var(--text)}
.mega-list button.on svg{opacity:1;transform:none}
.mega-pv{position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:#181818}
.mega-pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .45s,transform 1.2s var(--ease)}
.mega-pv img.on{opacity:1;transform:none}
.mega-foot{border-top:1px solid #1C1C1C}
.mega-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;height:64px;font-size:16px}
.mega-foot button,.mega-foot a{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--text);transition:color .2s}
.mega-foot button{font-weight:500;color:var(--body)}
.mega-foot svg{color:var(--orange);transition:transform .3s var(--ease)}
.mega-foot button:hover,.mega-foot a:hover{color:var(--orange)}
.mega-foot button:hover svg,.mega-foot a:hover svg{transform:translateX(4px)}
.mega-dim{position:fixed;inset:0;z-index:49;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s}
body.mega-on .mega-dim{opacity:1}
.hdr-cta{display:flex;gap:12px}
.mbtn,.mcall{display:none}

/* hero: real jobs crossfading on the right, copy + assistant bar on the left */
.hero{position:relative;z-index:3;height:calc(calc(100svh*var(--vz,1)) - 132px);min-height:640px;max-height:1000px;background:var(--bg);isolation:isolate}
.hero-media{position:absolute;top:0;right:0;height:100%;aspect-ratio:4/3;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%);touch-action:pan-y}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);transform-origin:var(--zo,60% 40%);transition:transform 0s 1.5s}
.slide.on img{transform:none;transition:transform 9s cubic-bezier(.3,.1,.3,1)}
.hero::before,.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.hero::before{background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.62) 38%,rgba(10,10,10,0) 60%)}
.hero::after{background:linear-gradient(0deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.72) 17%,rgba(10,10,10,0) 36%)}
.hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;pointer-events:none}
.hero-copy,.hero-foot{pointer-events:auto}
/* the top padding keeps the copy clear of the logo that hangs below the header */
.hero-copy{flex:1;display:flex;flex-direction:column;justify-content:safe center;max-width:640px;padding-top:72px}
.hero h1{font-size:clamp(48px,calc(4.8vw*var(--vz,1)),72px);line-height:1.07;font-weight:700;letter-spacing:-.015em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .ln>span{display:block}
.hero p.lead{margin-top:22px;max-width:540px;font-size:18px;line-height:1.7;color:#D4D4D4}
/* assistant bar; on desktop it lists common requests while focused (combobox) */
.ask{position:relative;margin-top:34px;max-width:620px}
.ask-bar{display:flex;align-items:center;gap:10px;padding:6px;background:rgba(10,10,10,.5);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:border-color .25s}
.ask-bar .btn{border-radius:13px}
.ask-bar:focus-within{border-color:var(--orange)}
.ask-field{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:58px;padding-left:14px;border:1px solid transparent;border-radius:8px}
.ask-field svg{flex:none;color:var(--orange)}
.ask input{flex:1;min-width:0;height:100%;background:none;border:0;font:inherit;font-size:18px;color:var(--text)}
.ask input:focus-visible{outline:0}
.ask input::placeholder{color:#A8A8A8;opacity:1}
.ask .btn{flex:none}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:5;padding:8px;background:#141414;border:1px solid #333;border-radius:8px;box-shadow:0 24px 50px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s var(--ease),visibility 0s .2s}
.ask.open .sugg{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s var(--ease)}
.ask.up .sugg{top:auto;bottom:calc(100% + 8px);transform:translateY(6px)}
.ask.up.open .sugg{transform:none}
.sugg p{padding:8px 12px 6px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9A9A9A}
.sugg li{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;border-radius:6px;font-size:17px;color:#EDEDED;cursor:pointer}
.sugg li svg{flex:none;color:var(--orange);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.sugg li[aria-selected=true]{background:#202020}
.sugg li[aria-selected=true] svg{opacity:1;transform:none}
.ask-note{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;max-width:620px;font-size:16px;line-height:1.5;color:#BDBDBD}
.ask-note a{color:var(--text);font-weight:700;white-space:nowrap;transition:color .2s}
.ask-note a:hover{color:var(--orange)}
/* bottom row: facts left, filmstrip of the four jobs right */
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:24px 0 30px;border-top:1px solid rgba(255,255,255,.12)}
.stats{display:flex}
.stats div{padding:0 24px;border-left:1px solid rgba(255,255,255,.14)}
.stats div:first-child{padding-left:0;border-left:0}
.stats b{display:block;font-size:26px;line-height:1.1;font-weight:700;color:var(--orange);white-space:nowrap}
.stats span{display:block;margin-top:6px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#D6D6D6;white-space:nowrap}
.reel{display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-width:0}
.reel-top{display:flex;align-items:center;gap:6px}
.reel-cap{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:16px;line-height:1.3;white-space:nowrap;transition:opacity .3s}
.reel-cap.swap{opacity:0}
.reel-cap b{font-size:14px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.reel-cap span{color:#EDEDED;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.reel-thumbs{display:flex;gap:8px}
.reel-thumbs button{position:relative;width:72px;aspect-ratio:4/3;border-radius:5px;overflow:hidden;opacity:.5;transition:opacity .3s}
.reel-thumbs button::before{content:"";position:absolute;inset:0;z-index:1;border:1px solid rgba(255,255,255,.2);border-radius:inherit;pointer-events:none}
.reel-thumbs button:hover,.reel-thumbs .on{opacity:1}
.reel-thumbs img{width:100%;height:100%;object-fit:cover}
.reel-thumbs i{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:rgba(10,10,10,.55);overflow:hidden}
.reel-thumbs i::after{content:"";display:block;height:100%;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.reel-thumbs .on i::after{animation:seg 7s linear forwards}
.hero.paused .reel-thumbs .on i::after,.hero.idle .reel-thumbs .on i::after,.hero.hold .reel-thumbs .on i::after,.hero:not(.ready) .reel-thumbs .on i::after{animation-play-state:paused}
@keyframes seg{to{transform:none}}
.reel-pause{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#D6D6D6;transition:background .2s,color .2s}
.reel-pause:hover{background:rgba(255,255,255,.1);color:var(--text)}
.reel-pause .play,.hero.paused .reel-pause .pause{display:none}
.hero.paused .reel-pause .play{display:block}
@media (max-width:1240px){
  .reel-thumbs{gap:0}
  .reel-thumbs button{width:40px;height:32px;aspect-ratio:auto;border-radius:0;opacity:1;padding:0 4px}
  .reel-thumbs button::before,.reel-thumbs img{display:none}
  .reel-thumbs i{left:4px;right:4px;bottom:auto;top:15px;background:rgba(255,255,255,.28)}
  .reel-thumbs button:hover i{background:rgba(255,255,255,.5)}
}
/* page-load sequence */
.js .hero-media{opacity:0;transition:opacity 1.6s ease}
.js .hero [data-in]{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js .hero h1 .ln>span{transform:translateY(108%);transition:transform 1.05s var(--ease) var(--d,0s)}
.hero.ready .hero-media{opacity:1}
.hero.ready [data-in]{opacity:1;transform:none}
.hero.ready h1 .ln>span{transform:none}
.js .hero:not(.ready) .slide img{transform:scale(1.07);transition:none}

/* ===== below the film: one system. black ground, white type, real photos full-bleed, hairlines ===== */
.kic{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.sh{display:grid;grid-template-columns:1.25fr 1fr;gap:40px 64px;align-items:end;padding-top:28px;border-top:1px solid rgba(255,255,255,.16)}
.sh h2{margin-top:18px}
.sh .lead{font-size:19px;line-height:1.6;color:var(--body);max-width:460px;padding-bottom:6px}
.sh .lnk{display:inline-flex;align-items:center;gap:12px;justify-self:start;color:var(--text);font-weight:500}
.sh .lnk svg{color:var(--orange);transition:transform .3s var(--ease)}
.sh .lnk:hover svg{transform:translateX(6px)}
.ty{font-size:clamp(38px,calc(4.8vw*var(--vz,1)),76px);font-weight:500;line-height:1.04;letter-spacing:-.025em}
.ty .ln{display:block}
.ty i{font-style:normal;display:inline-block;white-space:pre}
.ty .wd{display:inline-block;white-space:nowrap}
.js .ty i{opacity:0;transform:translateY(.28em);transition:opacity .45s,transform .7s var(--ease);transition-delay:calc(var(--i,0) * 16ms)}
.js .ty.in i{opacity:1;transform:none}
:is(.vh-t,.sp-h1) i{font-style:normal;display:inline-block;white-space:pre} :is(.vh-t,.sp-h1) .wd{display:inline-block;white-space:nowrap} :is(.vh-t,.sp-h1) i.o{color:var(--orange)}
.js :is(.vh-t,.sp-h1) i{opacity:0;transform:translateY(.28em);transition:opacity .45s,transform .7s var(--ease);transition-delay:calc(var(--i,0) * 16ms)} .js :is(.vh-t,.sp-h1).in i{opacity:1;transform:none}
/* edit env: the last word and its dot stay on one line; while typing, the letters are plain text */
.ty-x,.ty-x .ln{white-space:nowrap} .ty-x edit-text{white-space:normal} .jv-editing .ty-x :is(.wd,i){display:inline;opacity:1;transform:none}
.ty b,.ty i.o{font-weight:inherit;color:var(--orange)}

/* real jobs: the after photo wipes up over the before as the row scrolls through */
.wk{position:relative;z-index:3;background:#0A0A0A;padding:120px 0 0}
.wk .sh{margin-bottom:96px}
.wk-row{display:grid;grid-template-columns:45fr 55fr;border-top:1px solid rgba(255,255,255,.16)}
.wk-txt{padding:80px 64px 80px max(40px,calc((calc(100vw*var(--vz,1)) - var(--wrap)) / 2));display:flex;flex-direction:column;justify-content:center}
.wk-place{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.wk-txt h3{margin-top:20px;font-size:clamp(34px,calc(3.7vw*var(--vz,1)),60px)}
.wk-txt .d{margin-top:24px;font-size:19px;line-height:1.6;color:var(--body);max-width:440px}
.wk-ph{position:relative;overflow:hidden;min-height:calc(92svh*var(--vz,1));background:#111}
.wk-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk-b{filter:brightness(.92)}
.wk-a{clip-path:inset(calc((1 - var(--w,0)) * 100%) 0 0 0)}
.wk-lab{position:absolute;z-index:2;left:28px;padding:9px 14px;background:rgba(10,10,10,.74);font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;transition:opacity .3s}
.wk-lab-b{top:28px;opacity:calc(1 - var(--w,0))}
.wk-lab-a{bottom:28px;color:var(--orange);opacity:var(--w,0)}
.wk-more{padding:72px 0 120px;border-top:1px solid rgba(255,255,255,.16);text-align:center}
.wk-more .btn svg{color:var(--orange)}

/* services: an index over a full-bleed photo that follows the row you point at or scroll to */
.sx{position:relative;overflow:hidden;background:#0A0A0A;padding:120px 0 110px;isolation:isolate}
.sx-bg{position:absolute;inset:0;z-index:-2}
.sx-bg img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.sx-bg img.on,.sx-bg img.was{display:block}
.sx-bg img.on{opacity:1}
.sx::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0A0A0A 0%,rgba(10,10,10,.58) 22%,rgba(10,10,10,.58) 78%,#0A0A0A 100%)}
.sx .sh{border-top-color:rgba(255,255,255,.22)}
.sx-list{list-style:none;margin-top:72px;border-top:1px solid rgba(255,255,255,.22)}
.sx-it{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px 40px;width:100%;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.22);text-align:left;transition:padding .45s var(--ease)}
.sx-it b{font-size:clamp(30px,calc(3.9vw*var(--vz,1)),60px);font-weight:500;line-height:1.05;letter-spacing:-.02em;transition:color .3s}
.sx-it span{font-size:17px;color:#DADADA;text-align:right;max-width:360px;line-height:1.45}
.sx-it em{grid-column:1 / -1;display:inline-flex;align-items:center;gap:10px;font-style:normal;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .3s,margin .45s var(--ease)}
.sx-it:hover,.sx-it:focus-visible,.sx-it.on{padding-left:18px}
.sx-it:hover b,.sx-it:focus-visible b{color:var(--orange)}
.sx-it:hover em,.sx-it:focus-visible em{max-height:40px;opacity:1;margin-top:10px}
.sx-it::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.sx-it:hover::before,.sx-it:focus-visible::before,.sx-it.on::before{transform:none}

/* how it works: the orange line draws across the four steps when they come into view */
.hw{background:#FFFFFF;color:#0A0A0A;padding:120px 0 130px}
.hw .sh{border-top:0;padding-top:0}
.hw .sh .lead{color:#3F3F3F}
.hw-grid{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:48px;margin-top:88px;padding-top:40px}
.hw-grid::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(0,0,0,.16)}
.hw-grid::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;margin-top:-.5px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease) .2s}
.hw.in .hw-grid::after{transform:none}
.hw-st{position:relative}
.hw-st::before{content:"";position:absolute;left:0;top:-46px;width:12px;height:12px;border-radius:50%;background:#FFFFFF;border:2px solid #0A0A0A;transition:background .4s,border-color .4s}
.hw.in .hw-st::before{background:var(--orange);border-color:var(--orange)}
.hw.in .hw-st:nth-child(2)::before{transition-delay:.55s}.hw.in .hw-st:nth-child(3)::before{transition-delay:1s}.hw.in .hw-st:nth-child(4)::before{transition-delay:1.5s}
.hw-n{font-size:15px;font-weight:700;letter-spacing:.14em;color:var(--orange)}
.hw-st h3{margin-top:12px;font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.hw-st p{margin-top:12px;font-size:17px;line-height:1.6;color:#3F3F3F}

/* about: the kitchen full-bleed, the statement on top of it */
.ab{position:relative;min-height:calc(100svh*var(--vz,1));display:flex;align-items:flex-end;overflow:hidden;background:#0A0A0A}
.ab>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1.1))}
.ab::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.25) 0%,rgba(10,10,10,.45) 40%,rgba(10,10,10,.92) 100%)}
.ab .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 1fr;gap:48px 72px;align-items:end;padding:180px 0 96px}
.ab-r p{font-size:19px;line-height:1.6;color:#ECECEC}
.ab-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 40px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.3)}
.ab-facts dt{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.ab-facts dd{margin-top:6px;font-size:16px;line-height:1.45}

/* reviews: three slots, hairlines, a big quote mark; the real reviews go in later */
.rvw{background:#0A0A0A;padding:120px 0}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:72px;border-top:1px solid rgba(255,255,255,.16)}
.rvx:nth-child(n+4){border-top:1px solid rgba(255,255,255,.16)}
.rvx{padding:36px 36px 40px 0;border-left:1px solid rgba(255,255,255,.16);padding-left:32px;min-height:300px;display:flex;flex-direction:column}
.rvx:nth-child(3n+1){border-left:0;padding-left:0}
.rvq{display:block;font-size:84px;line-height:.6;font-weight:700;color:var(--orange);height:40px}
.rvt{flex:1;margin-top:18px;font-size:20px;line-height:1.5;color:var(--soft)}
.rvn{margin-top:26px;font-size:16px;font-weight:700}
.rvn span{display:block;margin-top:4px;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}

/* the close: one sentence, two ways to reach us, the facts, the map */
.cl{background:#0A0A0A;padding:140px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.cl .wrap{text-align:center}
.cl .ty{font-size:clamp(44px,calc(6.6vw*var(--vz,1)),108px);letter-spacing:-.03em;line-height:1}
.cl-p{margin:26px auto 0;font-size:20px;line-height:1.5;color:var(--body);max-width:520px}
.cl-act{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:44px}
.cl-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;margin-top:104px;padding:28px 0 56px;border-top:1px solid rgba(255,255,255,.16);text-align:left}
.cl-facts dt{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.cl-facts dd{margin-top:8px;font-size:17px;line-height:1.45}
.cl-facts dd a:hover{color:var(--orange)}
.cl-facts small{display:block;margin-top:6px;font-size:15px;line-height:1.45;color:var(--soft)}
.mp{position:relative;height:calc(52svh*var(--vz,1));min-height:360px;background:#141414}
.mp iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.9) contrast(.85) brightness(.95)}

@media (max-width:900px){
  .sh{grid-template-columns:1fr;gap:22px;padding-top:22px}
  .sh .lead{font-size:17px;padding-bottom:0}
  .ty{font-size:clamp(34px,calc(9.6vw*var(--vz,1)),44px);letter-spacing:-.02em}
  .wk{padding-top:80px}
  .wk .sh{margin-bottom:56px}
  .wk-row{grid-template-columns:1fr}
  .wk-txt{padding:48px 20px 36px}
  .wk-txt h3{font-size:32px;margin-top:14px}
  .wk-txt .d{font-size:17px;margin-top:16px}
  .wk-ph{min-height:0;height:calc(78svh*var(--vz,1))}
  .wk-lab{left:16px}.wk-lab-b{top:16px}.wk-lab-a{bottom:16px}
  .wk-more{padding:48px 0 80px}
  .sx{padding:90px 0 80px}
  .sx-list{margin-top:44px}
  .sx-it{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .sx-it b{font-size:30px}
  .sx-it span{font-size:16px;text-align:left}
  .sx-it:hover,.sx-it:focus-visible,.sx-it.on{padding-left:14px}
  .hw{padding:90px 0 96px}
  .hw-grid{grid-template-columns:1fr;gap:36px;margin-top:48px;padding-top:0;padding-left:28px}
  .hw-grid::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .hw-grid::after{left:5px;top:6px;width:2px;height:calc(100% - 12px);margin:0 0 0 -.5px;transform:scaleY(0);transform-origin:top}
  .hw-st::before{left:-28px;top:4px}
  .hw-st h3{font-size:23px}
  .ab .wrap{grid-template-columns:1fr;gap:28px;padding:140px 0 64px}
  .ab-r p{font-size:17px}
  .ab-facts{grid-template-columns:1fr;gap:16px;margin-top:28px}
  .rvw{padding:90px 0}
  .rv-grid{grid-template-columns:1fr;margin-top:40px}
  .rvx{border-left:0;padding:28px 0 32px;min-height:0;border-top:1px solid rgba(255,255,255,.16)}
  .rvx:first-child{border-top:0}
  .rvx:nth-child(n+5){display:none}
  .cl{padding-top:96px}
  .cl .ty{font-size:clamp(40px,calc(11.5vw*var(--vz,1)),54px)}
  .cl-p{font-size:17px}
  .cl-act{margin-top:32px}
  .cl-act .btn{width:100%}
  .cl-facts{grid-template-columns:1fr;gap:22px;margin-top:64px;padding-bottom:44px}
  .mp{height:calc(44svh*var(--vz,1))}
}

/* ===== floating header (data-fh): liquid glass bar, one menu ===== */
html[data-fh] .topbar{display:none}
html[data-fh] .hdr{position:fixed;top:16px;left:0;right:0;height:auto;z-index:60;pointer-events:none}
html[data-fh] .hdr-bar{pointer-events:auto;position:relative;width:min(var(--wrap),100% - 80px);margin:0 auto;border-radius:26px;background:rgba(14,14,14,.56);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.28),0 24px 60px -18px rgba(0,0,0,.6);transition:background .35s,box-shadow .35s}
html[data-fh] .hdr-bar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.07) 100%)}
html[data-fh] .hdr.scrolled .hdr-bar{background:rgba(12,12,12,.68);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.3),0 28px 70px -20px rgba(0,0,0,.7)}
html[data-fh] .hdr-row,html[data-fh] .hdr.scrolled .hdr-row{position:relative;display:flex;align-items:center;justify-content:flex-start;height:88px;padding:0 19px 0 14px;gap:10px;transition:none}
/* the shield hangs out of the bar as a badge; it tucks back inside while a menu panel is open below it */
html[data-fh] .hdr-row .brand{position:relative;width:150px;height:88px;align-self:center;flex:none;margin-right:6px}
html[data-fh] .hdr-row .brand img{position:absolute;width:150px;top:-6px;left:0;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));transform-origin:50% 0;transition:transform .35s var(--ease)}
html[data-fh] .hdr.mega-open .hdr-row .brand img{transform:scale(.6933)}
html[data-fh] .nav{align-self:center;gap:4px;margin-left:4px}
html[data-fh] .nav-a{font-size:16px;font-weight:600;letter-spacing:.005em;text-transform:none;white-space:nowrap;padding:12px 11px;border-radius:999px;color:#fff;transition:color .2s,background .2s}
html[data-fh] .nav-a .rl,html[data-fh] .nav-a .rl > span{height:auto;line-height:1.3;text-shadow:none;transition:none;transform:none!important;overflow:visible}
html[data-fh] .nav-a:hover,html[data-fh] .nav-a.on{color:#fff;background:rgba(255,255,255,.09)}
html[data-fh] .nav-ink,html[data-fh] .nav-blk{display:none!important}
html[data-fh] .nav-dd{align-self:center;gap:0;border-radius:999px;transition:background .2s}
html[data-fh] .nav-dd .nav-a{padding-right:4px;border-radius:999px 0 0 999px;background:none!important}
html[data-fh] .dd-tog{width:34px;height:44px;margin:0;padding-right:8px;border-radius:0 999px 999px 0;color:rgba(255,255,255,.8)}
html[data-fh] .dd-tog svg{transition:transform .3s var(--ease)}
html[data-fh] .nav-dd:hover,html[data-fh] .hdr.mega-open .nav-dd,html[data-fh] .nav-dd:has(.nav-a.on){background:rgba(255,255,255,.09)}
html[data-fh] .nav-dd:hover .nav-a,html[data-fh] .nav-dd:hover .dd-tog,html[data-fh] .hdr.mega-open .nav-dd .nav-a,html[data-fh] .hdr.mega-open .dd-tog{color:#fff}
html[data-fh] .hdr.mega-open .dd-tog svg{transform:rotate(180deg)}
html[data-fh] .hask{display:flex;align-items:center;gap:10px;height:50px;width:290px;margin-left:auto;margin-right:9px;padding:0 6px 0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:width .3s var(--ease),border-color .2s,background .2s,box-shadow .2s}
html[data-fh] .hask:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
html[data-fh] .hask:focus-within{width:360px;background:rgba(255,255,255,.1);border-color:rgba(255,94,8,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 3px rgba(255,94,8,.18)}
html[data-fh] .hask .sp{flex:none;color:var(--orange)}
.hask-l{display:none}
html[data-fh] .hask input{flex:1;min-width:0;height:100%;background:none;border:0;font:inherit;font-size:16px;color:#fff;padding:0}
html[data-fh] .hask input::placeholder{color:rgba(255,255,255,.66);opacity:1}
html[data-fh] .hask input:focus-visible{outline:0}
html[data-fh] .hask button{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .2s,color .2s}
html[data-fh] .hask:focus-within button,html[data-fh] .hask button:hover{background:var(--orange);color:#0A0A0A}
html[data-fh] .hdr-cta{display:flex;align-items:center;gap:19px;margin-left:0}
html[data-fh] .hdr-cta .btn{height:50px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:.01em;text-transform:none;gap:8px;transform:none}
html[data-fh] .hdr-cta .btn-o{padding-right:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px -12px rgba(255,94,8,.9)}
html[data-fh] .hdr-cta .btn-o svg{transition:transform .25s var(--ease)}
html[data-fh] .hdr-cta .btn-o:hover{transform:none;background:#FA8546}
html[data-fh] .hdr-cta .btn-o:hover svg{transform:translateX(3px)}
html[data-fh] .hdr-cta .btn-l{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:#fff;padding:0 18px 0 16px}
html[data-fh] .hdr-cta .btn-l:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26)}
html[data-fh] .hdr-cta .btn-l svg{color:#fff}
html[data-fh] .hdr-cta .btn-l,html[data-fh] .hdr-cta .btn-l:hover,html[data-fh] .hdr-cta .btn-l:hover svg,html[data-fh] .nav-a,html[data-fh] .nav-a:hover{color:#fff}
html[data-fh] .hdr-cta .lang{height:50px;margin-left:2px;padding:5px;gap:2px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
html[data-fh] .hdr-cta .lang button{min-width:42px;height:38px;padding:0 10px;border-radius:999px;font-size:15px;color:rgba(255,255,255,.62)}
html[data-fh] .hdr-cta .lang button:hover{color:#fff}
html[data-fh] .hdr-cta .lang button[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
html[data-fh] .hdr-m{display:none}
html[data-fh] .gm-btn{display:none;align-items:center;gap:11px;height:50px;padding:0 16px 0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:#fff;font-size:15px;font-weight:700;transition:background .2s}
html[data-fh] .gm-btn:hover,html[data-fh] .gm-btn[aria-expanded="true"]{background:rgba(255,255,255,.14)}
html[data-fh] .gm-btn i{position:relative;display:block;width:18px;height:12px}
html[data-fh] .gm-btn i::before,html[data-fh] .gm-btn i::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
html[data-fh] .gm-btn i::before{top:0}
html[data-fh] .gm-btn i::after{top:10px}
html[data-fh] .gm-btn[aria-expanded="true"] i::before{top:5px;transform:rotate(45deg)}
html[data-fh] .gm-btn[aria-expanded="true"] i::after{top:5px;transform:rotate(-45deg)}
html[data-fh] .gm{position:absolute;right:0;top:calc(100% + 10px);width:min(440px,100%);max-height:calc(calc(100svh*var(--vz,1)) - 130px);overflow:auto;border-radius:26px;background:rgba(14,14,14,.8);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 80px -20px rgba(0,0,0,.7);padding:12px 12px 16px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .22s,transform .3s var(--ease),visibility 0s .3s}
html[data-fh] .hdr.gm-open .gm{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .35s var(--ease)}
html[data-fh] .gm nav{display:flex;flex-direction:column}
html[data-fh] .gm nav > a,html[data-fh] .gm-tog{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:54px;padding:0 14px;border-radius:16px;font-size:18px;font-weight:600;color:#fff;text-align:left;transition:background .2s}
html[data-fh] .gm nav > a:hover,html[data-fh] .gm-tog:hover{background:rgba(255,255,255,.08)}
html[data-fh] .gm-tog svg{color:var(--orange);transition:transform .3s var(--ease)}
html[data-fh] .gm-tog[aria-expanded="true"] svg{transform:rotate(45deg)}
html[data-fh] .gm .m-svc ul{border-bottom:0;padding:2px 0 8px}
html[data-fh] .gm .m-svc button{padding:7px 14px;font-size:16px;border-radius:14px;color:#F0F0F0}
html[data-fh] .gm .m-svc button:hover{background:rgba(255,255,255,.06)}
html[data-fh] .gm .m-svc img{width:44px;height:44px;border-radius:12px}
html[data-fh] .gm-foot{display:grid;gap:10px;margin-top:8px;padding:12px 2px 0;border-top:1px solid rgba(255,255,255,.1)}
html[data-fh] .gm-foot .btn{width:100%;height:54px;border-radius:999px;font-size:16px;letter-spacing:.01em;text-transform:none;gap:8px}
html[data-fh] .gm .m-acts a{height:66px;border-radius:16px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
html[data-fh] .gm .m-lang{padding-top:4px}
html[data-fh] .gm .m-lang .lang{padding:4px;border-radius:999px;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
html[data-fh] .gm .m-lang .lang button{border-radius:999px;color:rgba(255,255,255,.62)}
html[data-fh] .gm .m-lang .lang button[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff}
html[data-fh] .mega{left:0;right:0;top:calc(100% + 10px);border-radius:26px;border:1px solid rgba(255,255,255,.13);background:rgba(14,14,14,.76);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 80px -20px rgba(0,0,0,.7);overflow:hidden}
html[data-fh] .mega-in{padding:32px 34px 30px}
html[data-fh] .mega-list button{border-radius:14px}
html[data-fh] .mega-list button.on{background:rgba(255,255,255,.08)}
html[data-fh] .mega-pv{aspect-ratio:4/3;background:rgba(0,0,0,.35);border-radius:16px}
html[data-fh] .mega-pv img{object-fit:contain;mix-blend-mode:lighten;transform:none}
html[data-fh] .mega-foot{border-top-color:rgba(255,255,255,.1)}
html[data-fh] .mega-foot .wrap{width:auto;padding:0 34px}
html[data-fh] #top{scroll-margin-top:0}
html[data-fh] #services,html[data-fh] #how,html[data-fh] #about,html[data-fh] #reviews,html[data-fh] #contact{scroll-margin-top:112px}
html[data-fh] .chat{z-index:70}
@media (min-width:1200px){
  html[data-fh] .hask,html[data-fh] .hask:focus-within{width:auto;padding:0 20px 0 18px;gap:10px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
  html[data-fh] .hask input,html[data-fh] .hask button{display:none}
  html[data-fh] .hask .hask-l{display:inline;font-size:15px;font-weight:700;color:#fff;white-space:nowrap}
}
@media (max-width:1279px){
  html[data-fh] .nav-a{padding:12px 11px}
  html[data-fh] .hdr-cta .btn-l{display:inline-flex;width:50px;padding:0;justify-content:center}
  html[data-fh] .hdr-cta .btn-l span{display:none}
}
@media (max-width:1199px){
  html[data-fh] .nav{display:none!important}
  html[data-fh] .gm-btn{display:inline-flex;margin-left:9px}
  html[data-fh] .hask{display:flex;margin-left:auto}
  html[data-fh] .hdr-cta{margin-left:0}
}
@media (max-width:980px){
  html[data-fh] .hdr{top:12px;left:0;right:0}
  html[data-fh] .hdr-bar{width:calc(100% - 48px)}
  html[data-fh] .hdr-row,html[data-fh] .hdr.scrolled .hdr-row{height:70px;padding:0 10px 0 16px;gap:8px}
  html[data-fh] .hdr-row .brand{width:104px;height:70px;margin-right:0}
  html[data-fh] .hdr-row .brand img{width:104px;top:-5px}
  html[data-fh] .hdr.gm-open .hdr-row .brand img{transform:scale(.77)}
  html[data-fh] .hask,html[data-fh] .hdr-cta{display:none}
  html[data-fh] .hdr-m{display:flex;margin-left:auto}
  html[data-fh] .mcall{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:#fff}
  html[data-fh] .gm-btn{height:48px;margin-left:0;padding:0 14px 0 16px}
  html[data-fh] .gm{left:0;right:0;width:auto;max-height:calc(calc(100svh*var(--vz,1)) - 110px);background:#121212}
  html[data-fh] .mega,html[data-fh] .mega-dim{display:none}
  html[data-fh] #services,html[data-fh] #how,html[data-fh] #about,html[data-fh] #reviews,html[data-fh] #contact{scroll-margin-top:92px}
}

/* ===== hero at rest: the finished house; scrolling dissolves it into the build (data-hs) ===== */
html[data-hs] .hero-foot{display:none}
html[data-hs] .hero::before{display:none}
html[data-hs] .hero-media{opacity:1;background:#0A0A0A}
html[data-hs] img.hs-poster{object-position:52% 46%;transform-origin:50% 50%;transition:none;will-change:transform,opacity}
html[data-hs] .hv-v.hs-v{object-position:52% 46%}
.hs-scrim{display:none}
html[data-hs] .hs-scrim{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--hb,1);background:linear-gradient(90deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.82) 24%,rgba(10,10,10,.44) 46%,rgba(10,10,10,0) 66%),linear-gradient(0deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.5) 14%,rgba(10,10,10,0) 32%),linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 24%)}
html[data-hs] .hero-in{display:flex;flex-direction:column;justify-content:center;height:calc(100svh*var(--vz,1));padding:124px 0 44px;pointer-events:none}
html[data-hs] .hero-copy{flex:none;display:block;max-width:620px;padding-top:0}
.pill{display:inline-flex;align-items:center;gap:12px;height:40px;padding:0 16px 0 6px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);color:#fff;font-size:15px;line-height:1;text-decoration:none;transition:border-color .2s,background .2s}
.pill:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12)}
.pill > i{flex:none;width:9px;height:9px;margin-left:8px;border-radius:50%;background:#3BD16F;box-shadow:0 0 0 4px rgba(59,209,111,.14)}
.pill > i{order:1}.pill > span{order:2}.pill > em{order:3}
.pill > span{display:inline-block;height:30px;line-height:30px;padding:0 12px 0 4px;color:#D2D2D2;white-space:nowrap}
.pill > span b{color:#fff;font-weight:700}
.pill > em{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-weight:600;color:#fff;white-space:nowrap;padding-left:12px;border-left:1px solid rgba(255,255,255,.14)}
.pill > em svg{color:var(--orange);transition:transform .3s var(--ease)}
.pill:hover > em svg{transform:translateX(4px)}
html[data-hs] .hero h1{margin-top:26px;text-shadow:0 2px 30px rgba(0,0,0,.45)}
html[data-hs] .hero .lead{margin-top:20px;max-width:560px;text-shadow:0 1px 16px rgba(0,0,0,.5)}
html[data-hs] .ask{margin-top:30px}
.proof{display:inline-flex;align-items:center;gap:16px;margin-top:30px}
.avs{display:flex;flex:none}
.avs img{position:relative;width:50px;height:50px;border-radius:50%;object-fit:cover;background:#222;margin-left:-14px;box-shadow:0 0 0 3px #0E0E0E,0 10px 22px -8px rgba(0,0,0,.7)}
.avs img:first-child{margin-left:0}
.proof-t{min-width:0}
.stars{display:flex;align-items:center;gap:3px;color:var(--orange)}
.stars svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.stars b{margin-left:10px;font-size:18px;color:#fff;font-weight:700;letter-spacing:.01em}
.proof-t p{display:flex;align-items:center;gap:9px;margin:7px 0 0;font-size:15px;line-height:1.35;color:#E6E6E6}
.pf-g{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff}
.pf-g svg{width:13px;height:13px}
.proof-t p .pf-n{color:#fff;font-weight:600}
@media (max-width:900px){
  html[data-hs] img.hs-poster,html[data-hs] .hv-v.hs-v{object-position:52% 50%}
  html[data-hs] .hs-scrim{opacity:var(--hs,1);background:linear-gradient(0deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.88) 30%,rgba(10,10,10,.55) 50%,rgba(10,10,10,0) 68%),linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 20%)}
  html[data-hs] .hero-in{justify-content:flex-end;padding:84px 0 22px}
  .pill{height:36px;font-size:14px}
  .pill > em{display:none}
  .pill > span{padding-right:6px}
  html[data-hs] .hero h1{font-size:38px;margin-top:12px}
  html[data-hs] .hero .lead{font-size:15px;margin-top:10px}
  html[data-hs] .ask{margin-top:14px}
  .ask-field{height:52px}
  .proof{margin-top:16px;gap:12px}
  .avs img{width:40px;height:40px;margin-left:-11px;box-shadow:0 0 0 2.5px #0E0E0E,0 8px 18px -8px rgba(0,0,0,.7)}
  .proof-t p{font-size:15px;margin-top:4px}
  .proof-t p .pf-n{color:#fff}
}
@media (min-width:901px) and (max-height:820px){
  html[data-hs] .hero-in{padding-top:104px}
  html[data-hs] .hero h1{margin-top:16px}
  html[data-hs] .hero .lead{margin-top:14px}
  html[data-hs] .ask{margin-top:20px}
  .proof{margin-top:20px}
  html[data-hs] .hero-foot,html[data-hs] .fx-hint{display:none}
}
@media (max-width:900px) and (max-height:760px){ html[data-hs] .hero .lead{display:none} }

/* ===== services on 3D models ===== */
.sx{overflow:clip}  /* hidden would stop the 3D model from sticking */
.sx .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,48%);gap:0 56px;align-items:start}
.sx-it b{font-size:clamp(28px,calc(3vw*var(--vz,1)),46px)}
.sx-it span{max-width:220px}
.sx .sh{grid-column:1 / -1}
.sx-bg{position:sticky;inset:auto;top:120px;z-index:auto;height:auto;aspect-ratio:1;max-height:calc(calc(100svh*var(--vz,1)) - 160px);margin-top:72px;overflow:visible}
.sx-bg img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;mix-blend-mode:lighten;opacity:0;transition:opacity .7s var(--ease)}
.sx-bg img.on,.sx-bg img.was{display:block}
.sx-bg img.on{opacity:1}
/* desktop: the section holds still under the header while the scroll walks the eight services, then lets go */
@media (min-width:901px){
  .sx{height:calc(calc(100svh*var(--vz,1)) + 8 * calc(22svh*var(--vz,1)));padding:0}
  .sx .wrap{position:sticky;top:0;height:calc(100svh*var(--vz,1));padding-top:clamp(150px,calc(19svh*var(--vz,1)),196px);padding-bottom:clamp(20px,calc(3svh*var(--vz,1)),40px);grid-template-rows:auto minmax(0,1fr);align-items:stretch}
  .sx-list,.sx-bg{margin-top:clamp(16px,calc(3svh*var(--vz,1)),40px)}
  .sx-list{display:grid;grid-auto-rows:minmax(0,1fr)}
  .sx-it{height:100%;padding:0;align-content:center}
  .sx-it b{font-size:clamp(22px,calc(3.2svh*var(--vz,1)),42px)}
  .sx-bg{position:relative;top:auto;aspect-ratio:auto;height:auto;max-height:none}  /* as tall as the list beside it */
}
/* right-hand panel, one per service; data-v on the section picks the variation */
.sx .sh{border-top:0;padding-top:0}
.sx-bg .sx-p{position:absolute;inset:0;display:none;opacity:0;transition:opacity .6s var(--ease);border-radius:6px;overflow:hidden;background:#141414}
.sx-bg .sx-p.on,.sx-bg .sx-p.was{display:block}
.sx-bg .sx-p.on{opacity:1}
.sx-bg .sx-p img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;mix-blend-mode:normal;transition:none}
.sx-pc,.sx-ask{display:none}
.sx-top{display:flex;align-items:center;gap:20px}
.sx-bar{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;max-width:260px}
.sx-bar i{height:2px;background:rgba(255,255,255,.22)}
.sx-bar i.dn{background:rgba(255,255,255,.6)}
.sx-bar i.on{background:var(--orange)}
.sx-n{font-size:15px;font-weight:500;letter-spacing:.06em;color:#D0D0D0;font-variant-numeric:tabular-nums}
.sx-d{margin-top:18px;font-size:clamp(24px,calc(2.9svh*var(--vz,1)),32px);line-height:1.2;font-weight:500;letter-spacing:-.015em;color:#fff;max-width:460px}
.sx-ac{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:26px}
.sx-q{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px 0 24px;background:var(--orange);color:#fff;font:600 16px/1 Archivo,sans-serif;border-radius:999px;transition:background .25s,color .25s}
.sx-q svg{transition:transform .3s var(--ease)}
.sx-q:hover{background:#fff;color:#111}
.sx-q:hover svg{transform:translateX(3px)}
.sx-call{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums;transition:color .25s}
.sx-call svg{color:var(--orange)}
.sx-call:hover{color:var(--orange)}
/* b: photo with the scope and actions over a dark foot */
.sx[data-v="b"] .sx-pc{display:block;position:absolute;left:0;right:0;bottom:0;padding:160px 36px 36px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55) 40%,rgba(0,0,0,.88))}
/* c: no photo, a type card */
.sx[data-v="c"] .sx-p{background:#131313;border:1px solid rgba(255,255,255,.1)}
.sx[data-v="c"] .sx-p img{display:none}
.sx[data-v="c"] .sx-pc{display:flex;flex-direction:column;justify-content:space-between;position:absolute;inset:0;padding:40px}
.sx[data-v="c"] .sx-d{font-size:clamp(32px,calc(4.4svh*var(--vz,1)),52px);line-height:1.12;letter-spacing:-.02em;max-width:none;margin-top:auto}
.sx[data-v="c"] .sx-ac{margin-top:32px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
/* d: photo above, the assistant field below */
.sx[data-v="d"] .sx-p{background:transparent;border-radius:0;overflow:visible}
.sx[data-v="d"] .sx-p img{height:calc(100% - 96px);border-radius:6px}
.sx[data-v="d"] .sx-ask{display:flex;align-items:center;gap:12px;position:absolute;left:0;right:0;bottom:0;height:72px;padding:0 10px 0 24px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:#151515;color:#CFCFCF;font-size:17px;text-align:left;transition:border-color .25s}
.sx[data-v="d"] .sx-ask:hover{border-color:rgba(255,255,255,.4);color:#fff}
.sx-ask span{flex:1}
.sx-ask i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--orange);color:#fff}
@media (max-width:900px){
  .sx .sx-pc,.sx .sx-ask{display:none!important}  /* phones: the photo alone, the list carries the actions */
  .sx[data-v] .sx-p img{display:block;bottom:0;height:100%}
  .sx[data-v="c"] .sx-p{border:0}
}
@media (min-width:901px){
  /* the quote link sits right after the name, on the same line, so the row keeps its air */
  .sx-it{grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:24px}
  .sx-it em{grid-column:auto;max-height:none;margin-top:0;opacity:0;transition:opacity .3s}
  .sx-it:hover em,.sx-it:focus-visible em{margin-top:0;opacity:1}
}
@media (max-width:900px){
  .sx{padding-top:96px}
  .sx .wrap{display:flex;flex-direction:column;align-items:stretch}
  .sx .sh{order:0}.sx-bg{order:1}.sx-list{order:2}
  .sx-bg{position:sticky;top:64px;z-index:0;height:calc(36svh*var(--vz,1));margin:28px 0 0}
  .sx-bg::after{content:"";position:absolute;left:-24px;right:-24px;bottom:-1px;height:40px;background:linear-gradient(rgba(10,10,10,0),#0A0A0A)}
  .sx-list{position:relative;z-index:1;margin-top:8px;background:#0A0A0A}
}

/* ===== about on the neighborhood model ===== */
.ab>img{object-fit:contain;object-position:100% 0;mix-blend-mode:lighten;transform-origin:100% 0}
@media (max-width:900px){ .ab>img{object-position:50% 0;height:62%} }

/* footer */
.ft{background:var(--bg);padding:90px 0 0}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:56px}
.ft .brand img{width:140px}
.ft-about{margin-top:22px;font-size:16px;line-height:1.7;color:#E2E2E2;max-width:360px}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{width:44px;height:44px;border-radius:50%;background:var(--card);display:grid;place-items:center;transition:background .2s,color .2s}
.socials a:hover{background:var(--orange);color:#0A0A0A}
.ft h3{font-size:14px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.ft ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.ft ul a{font-size:16px;color:#D0D0D0;transition:color .2s}
.ft ul a:hover{color:var(--orange)}
.ft-c li{display:flex;gap:14px}
.ft-c svg{flex:none;margin-top:3px;color:var(--orange)}
.ft-c b{display:block;font-size:16px}
.ft-c span,.ft-c a{display:block;font-size:15px;color:#C8C8C8;line-height:1.55}
.ft-bot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:72px;padding:28px 0 36px;border-top:1px solid var(--line);font-size:14px;color:var(--soft)}
.ft-bot a{color:var(--orange)}

/* floating assistant button */
.fab{position:fixed;right:28px;bottom:28px;z-index:60;width:64px;height:64px;border-radius:50%;background:var(--orange);color:#0A0A0A;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.5);transition:transform .7s cubic-bezier(.34,1.5,.5,1),opacity .3s ease}
.fab:hover{transform:scale(1.07);transition:transform .3s var(--ease)}
.fab.off,.fab.hide{opacity:0;pointer-events:none;transform:scale(0);transition:transform .7s cubic-bezier(.5,0,.66,-.5),opacity .3s ease .4s}

/* assistant drawer */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .35s}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(480px,calc(100vw*var(--vz,1)));background:var(--bg2);border-left:1px solid #222;display:flex;flex-direction:column;gap:18px;padding:32px;transform:translateX(102%);transition:transform .5s var(--ease);visibility:hidden}
body.chat-open .scrim{opacity:1;pointer-events:auto}
body.chat-open .drawer{transform:none;visibility:visible}
.chat-hd{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.chat-hd img{width:46px}
.chat-hd>div:nth-child(2){min-width:0}
.chat-hd strong{display:block;font-size:18px;font-weight:700;line-height:1.3}
.chat-hd span{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--soft)}
.chat-hd span::before{content:"";width:8px;height:8px;border-radius:50%;background:#3BBF6A}
.chat-x{flex:none;margin-left:auto;width:44px;height:44px;border-radius:50%;background:var(--card);display:grid;place-items:center}
.chat-x:hover{background:#2A2A2A}
.chat-lang{display:flex;border:1px solid #333;border-radius:4px;overflow:hidden;align-self:flex-start}
.chat-lang button{padding:6px 12px;font-size:14px;font-weight:700;color:var(--body)}
.chat-lang button[aria-pressed="true"]{background:var(--orange);color:#0A0A0A}
.chat-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px;scroll-behavior:smooth}
.msg{max-width:88%;padding:14px 16px;border-radius:10px;font-size:17px;line-height:1.5;animation:msg .45s var(--ease) both}
.msg.still{animation:none}
.msg.bot{background:var(--card2);color:var(--text);align-self:flex-start}
.msg.user{background:var(--orange);color:#0A0A0A;align-self:flex-end;font-weight:500}
@keyframes msg{from{opacity:0;transform:translateY(8px)}}
.msg .thumbs{display:grid;grid-template-columns:repeat(3,64px);gap:6px;margin-top:10px}
.msg .thumbs img{width:64px;height:64px;object-fit:cover;border-radius:4px}
.typing{display:flex;gap:5px;padding:18px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--soft);animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.sum{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.sum div{display:flex;justify-content:space-between;gap:16px;font-size:16px}
.sum dt{color:var(--soft)}
.chat-ex p{font-size:15px;color:var(--soft);margin-bottom:10px}
.chat-ex div,.chat-opts{display:flex;flex-wrap:wrap;gap:8px}
.ex-btn,.opt-btn{border:1px solid #3A3A3A;border-radius:6px;padding:11px 15px;font-size:16px;text-align:left;transition:border-color .2s,background .2s}
.ex-btn:hover,.opt-btn:hover{border-color:var(--orange);background:#1C1C1C}
.chat-err-acts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.chat-err-acts .opt-btn{display:block;width:100%;text-align:center;text-decoration:none}
#drawer.chat-err .chat-hd span::before{background:rgba(255,255,255,.3)}
.chat-opts:empty{display:none}
.chat-form{display:flex;gap:8px}
.chat-up{flex:none;width:52px;border:1px solid #3A3A3A;border-radius:6px;display:grid;place-items:center}
.chat-up:hover{border-color:var(--text)}
.chat-up[hidden]{display:none!important}
.chat-form input{flex:1;min-width:0;background:#0A0A0A;border:1px solid #333;border-radius:6px;padding:14px 16px;font:inherit;font-size:17px;color:var(--text)}
.chat-form input::placeholder{color:#9A9A9A}
.chat-send{flex:none;background:var(--orange);color:#0A0A0A;font-weight:700;font-size:16px;padding:0 20px;border-radius:6px}
.chat-direct{display:flex;gap:18px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--soft)}
.chat-direct a{color:var(--text);font-weight:500}
.chat-direct a:hover{color:var(--orange)}

/* mobile menu */
html.lock{overflow:hidden}
.menu{position:fixed;inset:0;z-index:95;background:#0A0A0A;padding:0 24px 22px;display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s var(--ease),visibility 0s .55s}
.menu.open{clip-path:inset(0);visibility:visible;transition:clip-path .55s var(--ease)}
.menu-top{flex:none;display:flex;justify-content:space-between;align-items:center;height:76px}
.menu-top .brand img{width:62px}
.menu .status{flex:none;white-space:normal;align-items:flex-start;font-size:15px;line-height:1.5;padding:12px 0 4px}
.menu .status i{margin-top:7px}
.menu nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin-top:10px;padding-bottom:28px;-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
.menu nav > a,.m-tog{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:30px;font-weight:700;line-height:1.2;padding:15px 0;border-bottom:1px solid #1C1C1C;text-align:left}
.m-tog svg{color:var(--orange);transition:transform .35s var(--ease)}
.m-tog[aria-expanded="true"] svg{transform:rotate(45deg)}
.m-svc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.m-dd.open .m-svc{grid-template-rows:1fr}
.m-svc > div{overflow:hidden}
.m-svc ul{list-style:none;margin:0;padding:8px 0 12px;border-bottom:1px solid #1C1C1C}
.m-svc button{display:flex;align-items:center;gap:14px;width:100%;padding:7px 0;font-size:18px;font-weight:500;color:#E6E6E6;text-align:left}
.m-svc img{flex:none;width:52px;height:52px;object-fit:cover;border-radius:4px}
.menu-foot{flex:none;display:grid;gap:10px;padding-top:18px}
.menu-foot .btn{width:100%}
.m-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-acts a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:68px;border:1px solid #2E2E2E;border-radius:6px;font-size:15px;font-weight:700}
.m-acts svg{color:var(--orange)}
.m-lang{display:flex;align-items:center;justify-content:space-between;padding-top:6px;font-size:15px;color:var(--soft)}
.m-lang .lang button{min-width:52px;height:34px;font-size:15px}
.menu nav > *,.menu-foot > *{opacity:0;transform:translateY(14px)}
.menu.open nav > *,.menu.open .menu-foot > *{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(.14s + var(--i,0) * .05s),transform .5s var(--ease) calc(.14s + var(--i,0) * .05s)}

/* reveal */
.js .rv-up{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv-up.in{opacity:1;transform:none}
.rv-off{opacity:.22}

@media (max-width:1279px){
  .hdr-cta .btn-l{display:none}
  .topbar .grp > a.tb-phone{display:inline-flex}
  .topbar .st-more{display:none}
}
@media (max-width:1180px){
  .nav{gap:24px}
  .about .wrap{gap:56px}
  .badge{right:-12px}
}
@media (max-width:1100px){
  .nav{gap:20px}
  .nav-a{letter-spacing:.06em}
  .topbar .grp > a.tb-map{display:none}
}
@media (max-width:980px){
  .wrap{width:calc(100% - 48px)}
  .topbar{display:none}
  .nav,.hdr-cta{display:none}
  .hdr{height:76px}
  .hdr-row,.hdr.scrolled .hdr-row{height:76px}
  .mega,.mega-dim{display:none}
  #about,#services,#projects,#contact{scroll-margin-top:76px}
  #top{scroll-margin-top:76px}
  .hdr{--lg:92px}
  .hdr-row .brand img{top:6px}
  .mbtn,.mcall{display:grid;place-items:center;width:48px;height:48px;border-radius:6px}
  .mcall{background:var(--orange);color:#0A0A0A}
  .mbtn{border:1.5px solid #3A3A3A}
  .hdr-m{display:flex;gap:10px}
  .hero{height:auto;min-height:0;max-height:none}
  .hero-media{left:0;width:100%;height:min(360px,calc(44svh*var(--vz,1)));aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
  .slide img{object-position:var(--mpos,50% 50%)}
  .hero::before{background:linear-gradient(180deg,rgba(10,10,10,0) 0,rgba(10,10,10,0) calc(min(360px,calc(44svh*var(--vz,1))) - 170px),rgba(10,10,10,.82) calc(min(360px,calc(44svh*var(--vz,1))) - 60px),#0A0A0A min(360px,calc(44svh*var(--vz,1))))}
  .hero::after{display:none}
  .hero-in{height:auto;padding-top:calc(min(360px,calc(44svh*var(--vz,1))) + 6px)}
  .hero-copy{max-width:none;padding-top:0}
  .hero h1{font-size:44px;margin-top:14px}
  .hero p.lead{font-size:17px;margin-top:16px}
  .ask{margin-top:26px}
  .ask-bar{flex-direction:column;align-items:stretch;gap:10px;padding:0;background:none;border:0}
  .ask-field{flex:none;background:rgba(18,18,18,.92);border-color:#3A3A3A;height:58px}
  .ask-field:focus-within{border-color:var(--orange)}
  .ask .btn{width:100%}
  .sugg{display:none}
  .ask-note{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-foot{display:block;border-top:0;padding:34px 0 56px}
  .stats{flex-wrap:wrap;gap:22px 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
  .stats div{width:50%;padding:0 0 0 18px}
  .stats div:nth-child(odd){padding-left:0;border-left:0}
  .stats span{white-space:normal;letter-spacing:.06em}
  .reel{position:absolute;left:0;right:0;top:calc(min(360px,calc(44svh*var(--vz,1))) - 66px);flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .reel-top{display:contents}
  .reel-cap{flex:1;align-items:flex-start;gap:2px;min-width:0}
  .reel-cap span{font-size:15px}
  .reel-thumbs{order:1}
  .reel-pause{order:2}
  .reel-thumbs button{width:30px;padding:0 3px}
  .reel-thumbs i{left:3px;right:3px}
  .js .hero .hero-foot{transform:none}
  h2{font-size:34px}
  .services{padding-bottom:80px}
  .about .wrap{grid-template-columns:1fr;gap:72px}
  .badge{right:16px;bottom:-36px;width:150px;padding:16px 12px}
  .badge b{font-size:28px}
  .band .wrap{grid-template-columns:1fr 1fr;gap:34px 0;padding:52px 0}
  .band div:nth-child(3){border-left:0}
  .band b{font-size:40px}
  .svc{width:calc(78vw*var(--vz,1));max-width:360px}
  .g-quote{font-size:26px}
  .g-rail img{width:calc(62vw*var(--vz,1));max-width:260px}
  .jc{width:calc(62vw*var(--vz,1));max-width:260px}
  .trust{margin-top:80px}
  .trust .wrap{justify-content:flex-start;gap:24px}
  .trust div{width:100%}
  .rv-grid{grid-template-columns:1fr}
  .cta .wrap{grid-template-columns:1fr;gap:36px;padding:64px 0}
  .cta h2{font-size:38px}
  .cta-r .btn,.callrow{min-width:0;width:100%}
  .map{min-height:320px}
  .hours{padding:56px 24px}
  .hours .big{font-size:48px}
  .hours .big small{display:block;margin:10px 0 0}
  .ft-grid{grid-template-columns:1fr 1fr;gap:44px 28px}
  .ft-grid>div:first-child,.ft-grid>div:last-child{grid-column:1/-1}
  .fab{right:18px;bottom:18px;width:60px;height:60px}
  .drawer{width:calc(100vw*var(--vz,1));border-left:0;padding:24px}
}
@media (min-width:981px){.hdr-m{display:none}}
/* laptop screens are short: the logo hangs less and the copy starts higher so nothing touches the stats row */
@media (min-width:981px) and (max-height:880px){
  .hdr{--lg:112px}
}
@media (min-width:981px) and (max-height:800px){
  .hdr{--lg:104px}
  .hero h1{font-size:clamp(44px,calc(4vw*var(--vz,1)),56px)}
  .hero p.lead{margin-top:18px;line-height:1.6}
  .ask{margin-top:26px}
}
@media (max-width:420px){
  .hero h1{font-size:40px}

  .about .ctas .btn{flex:1}
  .stats b{font-size:24px}
  .reel-thumbs button{width:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv-up{opacity:1;transform:none}
  .js .hero-media,.js .hero [data-in],.js .hero h1 .ln>span{opacity:1;transform:none}
  .reel-pause{display:none}
}

/* ===== solid header; the logo hangs below it over the hero ===== */
:root .nav-a{position:relative;color:#E2E2E2}
@media (min-width:981px){ :root .hero-copy{padding-top:56px} }
.menu{isolation:isolate}
.menu-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.menu::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.84) 45%,#0A0A0A 82%)}
:root .menu nav > a,:root .m-tog,:root .m-svc ul{border-bottom-color:rgba(255,255,255,.14)}
@media (min-width:981px) and (max-width:1180px){ .hdr{--lg:104px} .mega-in{grid-template-columns:1fr} .mega-pv{display:none} }
/* the headline may run past the text column so the Portuguese one stays on two lines */
@media (min-width:1181px){ .hero h1{margin-right:-120px} }

/* ===== nav styles, picked by data-nav on <html> ===== */
.nav-a .lt,.nav-blk{display:none}
/* 1: the letters roll up one after another and the orange line follows the pointer */
html[data-nav="1"] .nav-a .rl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-nav="1"] .nav-a .lt{display:block;overflow:hidden;height:1.3em;line-height:1.3;white-space:pre}
html[data-nav="1"] .nav-a .lt i{display:inline-block;font-style:normal;text-shadow:0 1.3em 0 var(--text);transition:transform .55s var(--ease);transition-delay:calc(var(--i) * 22ms)}
html[data-nav="1"] .nav-a:hover .lt i,html[data-nav="1"] .nav-a:focus-visible .lt i{transform:translateY(-1.3em)}
/* 2: the other links step back and a line draws under the one you point at */
html[data-nav="2"] .nav-a,html[data-nav="2"] .dd-tog{transition:color .3s,opacity .35s}
html[data-nav="2"] .nav-a .rl > span,html[data-nav="3"] .nav-a .rl > span,html[data-nav="4"] .nav-a .rl > span,html[data-nav="5"] .nav-a .rl > span{text-shadow:none;transform:none}
html[data-nav="2"] .nav:has(.nav-a:hover) .nav-a:not(:hover),html[data-nav="2"] .nav:has(.nav-a:hover) .dd-tog{opacity:.36}
html[data-nav="2"] .nav-a::after,html[data-nav="4"] .nav-a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
html[data-nav="2"] .nav-a:hover::after{transform:scaleX(1);transform-origin:left}
html[data-nav="2"] .nav:has(.nav-a:hover) .nav-ink{opacity:0 !important}
html[data-nav="2"] .mega-list button{transition:background .2s,opacity .35s}
html[data-nav="2"] .mega-list ul:has(button:hover) button:not(:hover){opacity:.42}
/* 3: orange paints the label from left to right */
html[data-nav="3"] .nav-a .rl > span{--c:#E2E2E2;background:linear-gradient(90deg,var(--orange) 50%,var(--c) 50%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .6s var(--ease)}
html[data-nav="3"] .nav-a.on .rl > span,html[data-nav="3"] .hdr.mega-open .nav-dd .nav-a .rl > span{--c:var(--text)}
html[data-nav="3"] .nav-a:hover .rl > span,html[data-nav="3"] .nav-a:focus-visible .rl > span{background-position:0 0}
html[data-nav="3"] .mega-list b{display:inline-block;background:linear-gradient(90deg,var(--orange) 50%,#E6E6E6 50%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .6s var(--ease)}
html[data-nav="3"] .mega-list button.on b{background-position:0 0}
/* 4: the links lean toward the pointer and spring back; a line grows from the middle */
html[data-nav="4"] .nav-a{transition:color .3s,transform .7s cubic-bezier(.2,1.6,.4,1)}
html[data-nav="4"] .nav-a.mg{transition:color .3s,transform .2s ease-out}
html[data-nav="4"] .nav-a::after{transform-origin:center}
html[data-nav="4"] .nav-a:hover::after{transform:scaleX(1)}
/* 5: a glass block slides from link to link */
html[data-nav="5"] .nav{isolation:isolate}
html[data-nav="5"] .nav-blk{display:block;position:absolute;left:0;top:0;z-index:-1;height:42px;width:0;border-radius:6px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none}
html[data-nav="5"] .nav-blk.ready{transition:transform .42s var(--ease),width .42s var(--ease),opacity .25s}
html[data-nav="5"] .nav-blk.on{opacity:1}
html[data-nav="5"] .hdr.scrolled .nav-blk,html[data-nav="5"] .hdr.mega-open .nav-blk{background:rgba(255,255,255,.08)}

/* ===== Get a Quote styles, picked by data-cta on <html> ===== */
.hq .rl{display:block;overflow:hidden;height:1.3em;line-height:1.3}
.hq .rl > span{display:block}
.hq .ar{display:none}
.hdr-cta .btn:hover{transform:none}
.hdr-cta .btn:active{scale:.97}
.hp:hover svg{animation:ring .8s ease}
@keyframes ring{15%{transform:rotate(-16deg)}30%{transform:rotate(14deg)}45%{transform:rotate(-10deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-2deg)}}
/* 1: the label steps left and an arrow slides in */
html[data-cta="1"] .hq{position:relative;padding:0 30px}
html[data-cta="1"] .hq .rl{transition:transform .45s var(--ease)}
html[data-cta="1"] .hq .ar{display:block;position:absolute;right:14px;top:50%;margin-top:-9px;height:18px;opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .45s var(--ease)}
html[data-cta="1"] .hq:hover{background:#FF7A24}
html[data-cta="1"] .hq:hover .rl{transform:translateX(-12px)}
html[data-cta="1"] .hq:hover .ar{opacity:1;transform:none}
/* 2: white button, orange rises from the bottom and the label rolls */
html[data-cta="2"] .hq,html[data-cta="3"] .hq{position:relative;overflow:hidden;isolation:isolate}
html[data-cta="2"] .hq{background:var(--text);color:#0A0A0A}
html[data-cta="2"] .hq::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--orange);transform:translateY(101%);transition:transform .5s var(--ease)}
html[data-cta="2"] .hq:hover{background:var(--text)}
html[data-cta="2"] .hq:hover::before{transform:none}
html[data-cta="2"] .hq .rl > span,html[data-cta="5"] .hq .rl > span{text-shadow:0 1.3em 0 #0A0A0A;transition:transform .5s var(--ease)}
html[data-cta="2"] .hq:hover .rl > span,html[data-cta="5"] .hq:hover .rl > span{transform:translateY(-1.3em)}
html[data-cta="2"] .hp{border-color:transparent;padding:0 6px}
html[data-cta="2"] .hp svg{color:#fff}
html[data-cta="2"] .hp:hover{border-color:transparent;background:none;color:#fff}
/* 3: orange outline, the fill sweeps across */
html[data-cta="3"] .hq{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--orange);transition:color .3s .08s}
html[data-cta="3"] .hq::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
html[data-cta="3"] .hq:hover{background:transparent;color:#0A0A0A}
html[data-cta="3"] .hq:hover::before{transform:scaleX(1);transform-origin:left}
/* 4: label and arrow in two parts; the arrow flies out and comes back */
html[data-cta="4"] .hq{padding:0 4px 0 20px;gap:14px}
html[data-cta="4"] .hq .ar{display:grid;place-items:center;width:40px;height:40px;border-radius:4px;background:#0A0A0A;color:var(--orange);overflow:hidden}
html[data-cta="4"] .hq .ar svg{transform:rotate(-45deg)}
html[data-cta="4"] .hq:hover{background:#FF7A24}
html[data-cta="4"] .hq:hover .ar svg{animation:fly .6s var(--ease)}
@keyframes fly{45%{transform:translate(20px,-20px) rotate(-45deg)}46%{transform:translate(-20px,20px) rotate(-45deg)}100%{transform:rotate(-45deg)}}
/* 5: both buttons lean toward the pointer, the label rolls */
html[data-cta="5"] .hdr-cta .btn{transition:background .25s,border-color .25s,transform .7s cubic-bezier(.2,1.6,.4,1)}
html[data-cta="5"] .hdr-cta .btn.mg{transition:background .25s,border-color .25s,transform .2s ease-out}
html[data-cta="5"] .hq:hover{background:#FF7A24}

/* ===== entrances ===== */
@media (prefers-reduced-motion:no-preference){
  .js:not(.intro) .hdr-row .brand img{animation:drop 1.1s var(--ease) .15s backwards}
  .js:not(.intro) .nav > .nav-a,.js:not(.intro) .nav > .nav-dd,.js:not(.intro) .hdr-cta > *,.js:not(.intro) .hask,.js:not(.intro) .hdr-m,.js:not(.intro) .gm-btn{animation:fall .8s var(--ease) backwards}
  .js:not(.intro) .hask{animation-delay:.58s}
  .js:not(.intro) .hdr-m{animation-delay:.6s}
  .js:not(.intro) .gm-btn{animation-delay:.74s}
  .js:not(.intro) .nav > :nth-child(2){animation-delay:.36s}
  .js:not(.intro) .nav > :nth-child(3){animation-delay:.42s}
  .js:not(.intro) .nav > :nth-child(4){animation-delay:.48s}
  .js:not(.intro) .nav > :nth-child(5){animation-delay:.54s}
  .js:not(.intro) .nav > :nth-child(1){animation-delay:.3s}
  .js:not(.intro) .hdr-cta > :nth-child(1){animation-delay:.62s}
  .js:not(.intro) .hdr-cta > :nth-child(2){animation-delay:.68s}
  .js:not(.intro) .topbar .wrap{animation:fade 1s ease .1s backwards}
  .js .hero .avs img{opacity:0;transform:translateX(-14px)}
  .hero.ready .avs img{opacity:1;transform:none;transition:opacity .5s ease,transform .7s var(--ease)}
  .hero.ready .avs img:nth-child(1){transition-delay:0.95s}
  .hero.ready .avs img:nth-child(2){transition-delay:1.02s}
  .hero.ready .avs img:nth-child(3){transition-delay:1.09s}
  .hero.ready .avs img:nth-child(4){transition-delay:1.16s}
  .hero.ready .avs img:nth-child(5){transition-delay:1.23s}
  .js .hero .stars svg{opacity:.18;transform:scale(.55)}
  .hero.ready .stars svg{opacity:1;transform:none;transition:opacity .3s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
  .hero.ready .stars svg:nth-child(1){transition-delay:1.30s}
  .hero.ready .stars svg:nth-child(2){transition-delay:1.39s}
  .hero.ready .stars svg:nth-child(3){transition-delay:1.48s}
  .hero.ready .stars svg:nth-child(4){transition-delay:1.57s}
  .hero.ready .stars svg:nth-child(5){transition-delay:1.66s}
  /* services panel: rows come in one after another, the photo opens from the top */
  .mega-hd,.mega-list li,.mega-foot{opacity:0;transform:translateY(12px);transition:opacity .2s,transform .3s}
  .hdr.mega-open .mega-hd,.hdr.mega-open .mega-list li,.hdr.mega-open .mega-foot{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .6s var(--ease)}
  .hdr.mega-open .mega-list li:nth-child(1){transition-delay:.05s}
  .hdr.mega-open .mega-list li:nth-child(2){transition-delay:.08s}
  .hdr.mega-open .mega-list li:nth-child(3){transition-delay:.11s}
  .hdr.mega-open .mega-list li:nth-child(4){transition-delay:.14s}
  .hdr.mega-open .mega-list li:nth-child(5){transition-delay:.17s}
  .hdr.mega-open .mega-list li:nth-child(6){transition-delay:.2s}
  .hdr.mega-open .mega-list li:nth-child(7){transition-delay:.23s}
  .hdr.mega-open .mega-list li:nth-child(8){transition-delay:.26s}
  .hdr.mega-open .mega-foot{transition-delay:.3s}
  .mega-pv{clip-path:inset(0 0 100% 0);transition:clip-path .3s}
  .hdr.mega-open .mega-pv{clip-path:inset(0);transition:clip-path .8s var(--ease) .1s}
  /* phone menu: the photo fades up, then the links rise one by one */
  .menu-bg{opacity:0;transition:opacity .4s}
  .menu.open .menu-bg{opacity:1;transition:opacity 1s var(--ease) .1s}
  .menu .status,.menu nav > *,.menu-foot{opacity:0;transform:translateY(24px);transition:opacity .2s,transform .2s}
  .menu.open .status,.menu.open nav > *,.menu.open .menu-foot{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .8s var(--ease)}
  .menu.open .status{transition-delay:.15s}
  .menu.open nav > :nth-child(1){transition-delay:.2s}
  .menu.open nav > :nth-child(2){transition-delay:.25s}
  .menu.open nav > :nth-child(3){transition-delay:.3s}
  .menu.open nav > :nth-child(4){transition-delay:.35s}
  .menu.open nav > :nth-child(5){transition-delay:.4s}
  .menu.open .menu-foot{transition-delay:.48s}
}
@keyframes drop{from{opacity:0;transform:translateY(-56px)}}
@keyframes fall{from{opacity:0;transform:translateY(-12px)}}
@keyframes fade{from{opacity:0}}


/* ===== header looks, picked by data-h on <html> ===== */
/* A: a small orange dot marks the page you are on */
html[data-h="a"] .nav-ink,html[data-h="f"] .nav-ink{background:none}
html[data-h="a"] .nav-ink::after,html[data-h="f"] .nav-ink::after{content:"";position:absolute;left:50%;top:0;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--orange)}
/* B: no line, the current page is orange */
html[data-h="b"] .nav-ink{display:none}
html[data-h="b"] .nav-a.on{color:var(--orange)}
html[data-h="b"] .hdr-bar{background:#0F0F0F;border-bottom-color:#262626}
/* C: the line rides the bar's bottom edge and the quote button fills the bar height */
html[data-h="c"] .nav-ink{--at:bar;height:3px}
html[data-h="c"] .hdr-cta{align-self:stretch;align-items:center}
html[data-h="c"] .hdr-cta .hq{height:100%;border-radius:0;padding:0 34px}
/* D: orange rule across the top, line on the bar edge */
html[data-h="d"] .hdr-bar{border-top:3px solid var(--orange);background:#121212}
html[data-h="d"] .nav-ink{--at:bar}
/* E: title case links, a little bigger, lighter bar */
html[data-h="e"] .hdr-bar{background:#171717;border-bottom-color:#2A2A2A}
html[data-h="e"] .nav-a{text-transform:none;letter-spacing:0;font-size:17px;font-weight:500}
html[data-h="e"] .hdr-cta .btn{text-transform:none;letter-spacing:0;font-size:16px}
/* F: grey links, the current one white with a dot, phone as plain text */
html[data-h="f"] .nav-a{color:#fff}
html[data-h="f"] .nav-a.on,html[data-h="f"] .nav-a:hover{color:var(--text)}
html[data-h="f"] .hp{border-color:transparent;padding:0 4px}
html[data-h="f"] .hp svg{color:#fff}
html[data-h="f"] .hp:hover{border-color:transparent;background:none;color:var(--orange)}

/* ===== services panel looks on top of header F, picked by data-g ===== */
.dd-tog svg{transition:transform .35s var(--ease)}
.hdr.mega-open .dd-tog svg{transform:rotate(180deg)}
/* 1 gallery: hairline rows, big photo, title slides */
html[data-g="1"] .mega-in{grid-template-columns:1fr 400px;gap:56px;padding-top:40px;padding-bottom:44px}
html[data-g="1"] .mega-list ul{gap:0 32px}
html[data-g="1"] .mega-list button{border-radius:0;border-bottom:1px solid #1F1F1F;padding:18px 44px 18px 0}
html[data-g="1"] .mega-hd{margin-left:0}
html[data-g="1"] .mega-list button.on{background:none}
html[data-g="1"] .mega-list b{transition:color .2s,transform .4s var(--ease)}
html[data-g="1"] .mega-list button.on b{color:var(--orange);transform:translateX(6px)}
html[data-g="1"] .mega-list svg{right:4px}
html[data-g="1"] .mega-pv{aspect-ratio:4/5;border-radius:4px}
/* 2 floating glass panel */
html[data-g="2"] .mega{left:max(24px,calc(50% - 640px));right:max(24px,calc(50% - 640px));top:calc(100% + 12px);border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(16,16,16,.97);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
html[data-g="2"] .mega .wrap{width:auto;margin:0 32px}
html[data-g="2"] .mega-in{padding-left:calc(var(--lg) - 10px)}
html[data-g="2"] .mega-list button.on{background:rgba(255,255,255,.07)}
html[data-g="2"] .mega-pv{border-radius:10px}
html[data-g="2"] .mega-foot{background:rgba(255,255,255,.03);border-top-color:rgba(255,255,255,.07)}
/* 3 light panel under the dark bar */
html[data-g="3"] .mega{background:#FAFAFA;border-bottom-color:#E2E2E2}
html[data-g="3"] .mega-hd{color:#6E6E6E}
html[data-g="3"] .mega-list b{color:#151515}
html[data-g="3"] .mega-list span{color:#5C5C5C}
html[data-g="3"] .mega-list button.on{background:#EEEEEE}
html[data-g="3"] .mega-list button.on b{color:#000}
html[data-g="3"] .mega-foot{border-top-color:#E4E4E4;background:#F2F2F2}
html[data-g="3"] .mega-foot a{color:#111}
html[data-g="3"] .mega-foot button{color:#4A4A4A}
html[data-g="3"] .mega-dim{background:rgba(0,0,0,.62)}
/* 4 orange accent: top rule, marked row */
html[data-g="4"] .mega{border-top:2px solid var(--orange)}
html[data-g="4"] .mega-list button{border-radius:0 6px 6px 0}
html[data-g="4"] .mega-list button.on{background:linear-gradient(90deg,rgba(255,94,8,.16),rgba(255,94,8,0) 75%);box-shadow:inset 3px 0 0 var(--orange)}
html[data-g="4"] .mega-pv{box-shadow:0 0 0 1px #262626;border-radius:4px}
html[data-g="4"] .mega-pv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--orange);z-index:2}
/* 5 split: one column of titles, wide photo */
html[data-g="5"] .mega-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px}
html[data-g="5"] .mega-list ul{grid-template-columns:1fr;gap:0}
html[data-g="5"] .mega-list span{display:none}
html[data-g="5"] .mega-list button{border-radius:0;border-bottom:1px solid #1E1E1E;padding:14px 44px 14px 0}
html[data-g="5"] .mega-hd{margin-left:0}
html[data-g="5"] .mega-list b{font-size:21px;transition:color .2s,transform .4s var(--ease)}
html[data-g="5"] .mega-list button.on{background:none}
html[data-g="5"] .mega-list button.on b{transform:translateX(8px)}
html[data-g="5"] .mega-list svg{right:4px}
html[data-g="5"] .mega-pv{aspect-ratio:auto;height:100%;min-height:380px;border-radius:4px}
@media (max-width:1180px){ html[data-g="1"] .mega-in,html[data-g="5"] .mega-in{grid-template-columns:1fr} }

/* ===== iterations on the light services panel, picked by data-v ===== */
/* a: photo bleeds to the panel's right edge, full height */
html[data-v="a"] .mega-in{grid-template-columns:1fr 38%;padding-top:0;padding-bottom:0;width:auto;margin-left:max(40px,calc(50% - 600px));margin-right:0}
html[data-v="a"] .mega-list{padding:36px 0 40px}
html[data-v="a"] .mega-pv{aspect-ratio:auto;height:100%;border-radius:0}
/* b: hairline rows, orange title */
html[data-v="b"] .mega{background:#FFFFFF}
html[data-v="b"] .mega-list ul{gap:0 36px}
html[data-v="b"] .mega-hd{margin-left:0}
html[data-v="b"] .mega-list button{border-radius:0;border-bottom:1px solid #E6E6E6;padding:18px 40px 18px 0}
html[data-v="b"] .mega-list button.on{background:none}
html[data-v="b"] .mega-list b{transition:color .2s,transform .4s var(--ease)}
html[data-v="b"] .mega-list button.on b{color:var(--orange2);transform:translateX(6px)}
html[data-v="b"] .mega-list svg{right:2px}
html[data-v="b"] .mega-pv{border-radius:2px}
/* c: white cards on a light grey ground */
html[data-v="c"] .mega{background:#EFEFEF}
html[data-v="c"] .mega-list ul{gap:12px}
html[data-v="c"] .mega-list button{background:#FFFFFF;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:box-shadow .3s,transform .3s var(--ease)}
html[data-v="c"] .mega-list button.on{background:#FFFFFF;box-shadow:0 14px 30px rgba(0,0,0,.12);transform:translateY(-2px)}
html[data-v="c"] .mega-pv{border-radius:8px}
html[data-v="c"] .mega-foot{background:#E6E6E6;border-top-color:#DCDCDC}
/* d: light list, black footer band with the assistant call */
html[data-v="d"] .mega{background:#FFFFFF}
html[data-v="d"] .mega-foot{background:#0A0A0A;border-top:0}
html[data-v="d"] .mega-foot .wrap{height:72px}
html[data-v="d"] .mega-foot button{color:var(--text);font-weight:700}
html[data-v="d"] .mega-foot a{color:var(--text)}
html[data-v="d"] .mega-list button.on{background:#F3F3F3;box-shadow:inset 3px 0 0 var(--orange);border-radius:0 6px 6px 0}
/* e: the whole header turns white while the panel is open */
html[data-v="e"] .mega{background:#FFFFFF;border-top:1px solid #ECECEC}
html[data-v="e"] .hdr.mega-open .hdr-bar{background:#FFFFFF;border-bottom-color:#ECECEC}
html[data-v="e"] .hdr.mega-open .nav-a{color:#6A6A6A}
html[data-v="e"] .hdr.mega-open .nav-a.on,html[data-v="e"] .hdr.mega-open .nav-a:hover,html[data-v="e"] .hdr.mega-open .nav-dd .nav-a{color:#111}
html[data-v="e"] .hdr.mega-open .dd-tog{color:#111}
html[data-v="e"] .hdr.mega-open .hp{color:#111}
html[data-v="e"] .hdr.mega-open .nav-blk{background:rgba(0,0,0,.06)}
html[data-v="e"] .hdr-bar{transition:background .3s,border-color .3s}
html[data-v="e"] .nav-a{transition:color .3s}

/* ===== dark services panel iterations, picked by data-w ===== */
html[data-w="a"] .mega-in,html[data-w="e"] .mega-in{grid-template-columns:1fr 38%;padding-top:0;padding-bottom:0;width:auto;margin-left:max(40px,calc(50% - 600px));margin-right:0}
html[data-w="a"] .mega-list,html[data-w="e"] .mega-list{padding:36px 0 40px}
html[data-w="a"] .mega-pv,html[data-w="e"] .mega-pv{aspect-ratio:auto;height:100%;border-radius:0}
html[data-w="b"] .mega-list ul{gap:0 36px}
html[data-w="b"] .mega-hd{margin-left:0}
html[data-w="b"] .mega-list button{border-radius:0;border-bottom:1px solid #222;padding:18px 40px 18px 0}
html[data-w="b"] .mega-list button.on{background:none}
html[data-w="b"] .mega-list b{transition:color .2s,transform .4s var(--ease)}
html[data-w="b"] .mega-list button.on b{color:var(--orange);transform:translateX(6px)}
html[data-w="b"] .mega-list svg{right:2px}
html[data-w="b"] .mega-pv{border-radius:2px}
html[data-w="c"] .mega{background:#0A0A0A}
html[data-w="c"] .mega-list ul{gap:12px}
html[data-w="c"] .mega-list button{background:#151515;border:1px solid #1F1F1F;border-radius:8px;transition:background .25s,border-color .25s,transform .3s var(--ease)}
html[data-w="c"] .mega-list button.on{background:#1B1B1B;border-color:#333;transform:translateY(-2px)}
html[data-w="c"] .mega-pv{border-radius:8px}
html[data-w="d"] .mega-foot{background:var(--orange);border-top:0}
html[data-w="d"] .mega-foot .wrap{height:68px}
html[data-w="d"] .mega-foot button,html[data-w="d"] .mega-foot a{color:#0A0A0A;font-weight:700}
html[data-w="d"] .mega-foot svg{color:#0A0A0A}
html[data-w="d"] .mega-foot button:hover,html[data-w="d"] .mega-foot a:hover{color:#FFFFFF}
html[data-w="d"] .mega-list button.on,html[data-w="e"] .mega-list button.on{background:#191919;box-shadow:inset 3px 0 0 var(--orange);border-radius:0 6px 6px 0}
html[data-w="e"] .mega{background:#141414}

/* ===== services panel, bolder looks, picked by data-x ===== */
.mega-list .tile-img{display:none}
/* 1: the hovered service's photo fills the whole panel behind the list */
html[data-x="1"] .mega-in{grid-template-columns:minmax(0,760px)}
html[data-x="1"] .mega-pv{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;z-index:0;background:#0A0A0A}
html[data-x="1"] .mega-pv::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.94) 55%,rgba(10,10,10,.5) 80%,rgba(10,10,10,.2) 100%)}
html[data-x="1"] .mega-list,html[data-x="1"] .mega-foot{position:relative;z-index:1}
html[data-x="1"] .mega-in{padding-top:44px;padding-bottom:52px}
html[data-x="1"] .mega-list button.on{background:rgba(255,255,255,.08)}
html[data-x="1"] .mega-foot{background:rgba(10,10,10,.75);border-top-color:rgba(255,255,255,.08)}
/* 2: big type list, no descriptions */
html[data-x="2"] .mega-in{grid-template-columns:minmax(0,1fr) 340px;gap:64px;padding-top:30px;padding-bottom:40px}
html[data-x="2"] .mega-list ul{grid-template-columns:1fr 1fr;gap:0 40px}
html[data-x="2"] .mega-list span{display:none}
html[data-x="2"] .mega-hd{margin-left:0}
html[data-x="2"] .mega-list button{border-radius:0;border-bottom:1px solid #222;padding:16px 40px 16px 0}
html[data-x="2"] .mega-list b{font-size:28px;font-weight:700;letter-spacing:-.01em;color:#7A7A7A;transition:color .25s,transform .45s var(--ease)}
html[data-x="2"] .mega-list button.on{background:none}
html[data-x="2"] .mega-list button.on b{color:var(--text);transform:translateX(10px)}
html[data-x="2"] .mega-list svg{right:0;width:22px;height:22px;margin-top:-11px}
html[data-x="2"] .mega-pv{aspect-ratio:4/5;border-radius:4px}
/* 4: photo tiles, title on the photo */
html[data-x="4"] .mega-in{grid-template-columns:1fr;padding-top:30px;padding-bottom:36px}
html[data-x="4"] .mega-pv{display:none}
html[data-x="4"] .mega-list ul{grid-template-columns:repeat(4,1fr);gap:14px}
html[data-x="4"] .mega-list button{aspect-ratio:4/3;overflow:hidden;padding:0;border-radius:8px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px;isolation:isolate}
html[data-x="4"] .mega-list .tile-img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease)}
html[data-x="4"] .mega-list button::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,0) 30%,rgba(10,10,10,.9) 100%);transition:background .3s}
html[data-x="4"] .mega-list button.on .tile-img{transform:scale(1.07)}
html[data-x="4"] .mega-list button.on::before{background:linear-gradient(180deg,rgba(10,10,10,0) 20%,rgba(10,10,10,.92) 100%)}
html[data-x="4"] .mega-list b{font-size:18px;color:#FFFFFF}
html[data-x="4"] .mega-list span{display:none}
html[data-x="4"] .mega-list svg{top:16px;right:16px;margin:0;opacity:1;transform:rotate(-45deg);color:#FFFFFF;transition:color .2s,transform .4s var(--ease)}
html[data-x="4"] .mega-list button.on svg{color:var(--orange);transform:rotate(0)}
/* 5: orange heading block on the left, list on the right */
html[data-x="5"] .mega-in{grid-template-columns:1fr;padding-top:32px;padding-bottom:36px}
html[data-x="5"] .mega-pv{display:none}
html[data-x="5"] .mega-list{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:stretch}
html[data-x="5"] .mega-hd{margin:0;padding:28px 28px;border-radius:8px;background:var(--orange);color:#0A0A0A;font-size:30px;line-height:1.15;letter-spacing:-.01em;text-transform:none;font-weight:700;display:flex;align-items:flex-end}
html[data-x="5"] .mega-list ul{gap:2px 28px}
html[data-x="5"] .mega-list button.on{background:#1A1A1A;box-shadow:inset 3px 0 0 var(--orange);border-radius:0 6px 6px 0}
/* 3: two-tone: list on a lighter dark slab, photo slab darker with caption arrow */
html[data-x="3"] .mega{background:linear-gradient(90deg,#161616 0,#161616 64%,#0B0B0B 64%)}
html[data-x="3"] .mega-in{grid-template-columns:1fr 360px;gap:80px}
html[data-x="3"] .mega-list button{border-radius:0;padding-left:22px}
html[data-x="3"] .mega-list button::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--orange);transform:scaleY(0);transition:transform .35s var(--ease)}
html[data-x="3"] .mega-list button.on{background:none}
html[data-x="3"] .mega-list button.on::before{transform:none}
html[data-x="3"] .mega-pv{aspect-ratio:1;border-radius:50% 50% 6px 6px}
@media (max-width:1180px){ html[data-x="4"] .mega-list ul{grid-template-columns:repeat(2,1fr)} html[data-x="5"] .mega-list{grid-template-columns:1fr} }

/* ===== iterations on the orange-block panel (data-x="5"), picked by data-y ===== */
/* 1: block with a deep gradient and a big arrow, hairline rows */
html[data-y="1"] .mega-hd{position:relative;background:linear-gradient(145deg,#FF8A3D 0%,#F96C12 45%,#D9560A 100%);box-shadow:0 24px 50px rgba(255,94,8,.18)}
html[data-y="1"] .mega-hd::after{content:"";position:absolute;top:26px;right:26px;width:34px;height:34px;border-top:3px solid #0A0A0A;border-right:3px solid #0A0A0A;transform:translate(-4px,4px);transition:transform .5s var(--ease)}
html[data-y="1"] .hdr.mega-open .mega-hd::after{transform:none;transition-delay:.25s}
html[data-y="1"] .mega-list ul{gap:0 32px}
html[data-y="1"] .mega-list button{border-radius:0;border-bottom:1px solid #222;padding:16px 40px 16px 0}
html[data-y="1"] .mega-list button.on{background:none;box-shadow:none}
html[data-y="1"] .mega-list b{transition:color .2s,transform .4s var(--ease)}
html[data-y="1"] .mega-list button.on b{color:var(--orange);transform:translateX(6px)}
html[data-y="1"] .mega-list svg{right:2px}
/* 2 and 5: the heading block and the hovered photo share the left column */
html[data-y="2"] .mega-in,html[data-y="5"] .mega-in{grid-template-columns:300px 1fr;grid-template-rows:auto 1fr;column-gap:44px}
html[data-y="2"] .mega-list,html[data-y="5"] .mega-list{display:contents}
html[data-y="2"] .mega-hd{grid-column:1;grid-row:1;border-radius:8px 8px 0 0;font-size:26px;padding:24px 26px}
html[data-y="2"] .mega-pv{display:block;grid-column:1;grid-row:2;aspect-ratio:auto;min-height:170px;border-radius:0 0 8px 8px}
html[data-y="2"] .mega-list ul,html[data-y="5"] .mega-list ul{grid-column:2;grid-row:1/3}
/* 3: the hovered row fills with orange too */
html[data-y="3"] .mega-list button{border-radius:6px;transition:background .25s}
html[data-y="3"] .mega-list button.on{background:var(--orange);box-shadow:none;border-radius:6px}
html[data-y="3"] .mega-list button.on b{color:#0A0A0A}
html[data-y="3"] .mega-list button.on span{color:#2B1405}
html[data-y="3"] .mega-list button.on svg{color:#0A0A0A}
/* 4: outlined block, orange type, photo thumbnails on every row */
html[data-y="4"] .mega-hd{background:none;box-shadow:inset 0 0 0 2px var(--orange);color:var(--orange);font-size:34px}
html[data-y="4"] .mega-list button{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:center;padding:10px 44px 10px 10px}
html[data-y="4"] .mega-list .tile-img{display:block;grid-row:1/3;width:64px;height:64px;object-fit:cover;border-radius:6px;opacity:.75;transition:opacity .3s,transform .5s var(--ease)}
html[data-y="4"] .mega-list b,html[data-y="4"] .mega-list span{grid-column:2}
html[data-y="4"] .mega-list span{margin-top:0}
html[data-y="4"] .mega-list button.on{background:#191919;box-shadow:none;border-radius:8px}
html[data-y="4"] .mega-list button.on .tile-img{opacity:1;transform:scale(1.06)}
/* 5: the hovered photo sits inside the orange block as a duotone */
html[data-y="5"] .mega-hd,html[data-y="5"] .mega-pv{grid-column:1;grid-row:1/3}
html[data-y="5"] .mega-pv{display:block;aspect-ratio:auto;border-radius:8px;background:var(--orange);isolation:isolate}
html[data-y="5"] .mega-pv img{filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply}
html[data-y="5"] .mega-pv::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(255,94,8,0) 35%,rgba(255,94,8,.96) 82%)}
html[data-y="5"] .mega-hd{position:relative;z-index:3;background:none;pointer-events:none}

/* ===== services panel, new perspectives, picked by data-z ===== */
/* 1: accordion of photo strips; the hovered one opens wide */
html[data-z="1"] .mega-in{grid-template-columns:1fr;padding-top:26px;padding-bottom:30px}
html[data-z="1"] .mega-pv{display:none}
html[data-z="1"] .mega-list ul{display:flex;gap:8px;height:400px}
html[data-z="1"] .mega-list li{flex:1;min-width:0;transition:flex .6s var(--ease)}
html[data-z="1"] .mega-list li:has(button.on){flex:4.2}
html[data-z="1"] .mega-list button{height:100%;padding:22px 20px;border-radius:8px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end}
html[data-z="1"] .mega-list .tile-img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(.6) brightness(.7);transition:filter .5s,transform 1s var(--ease)}
html[data-z="1"] .mega-list button::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.1) 30%,rgba(10,10,10,.92) 100%)}
html[data-z="1"] .mega-list button.on{background:none}
html[data-z="1"] .mega-list button.on .tile-img{filter:none;transform:scale(1.04)}
html[data-z="1"] .mega-list b{font-size:20px;color:#fff;white-space:nowrap}
html[data-z="1"] .mega-list button:not(.on) b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:17px;color:#D8D8D8}
html[data-z="1"] .mega-list span{color:#CFCFCF;max-height:0;opacity:0;overflow:hidden;transition:opacity .4s .15s}
html[data-z="1"] .mega-list button.on span{max-height:60px;opacity:1}
html[data-z="1"] .mega-list svg{top:20px;right:20px;margin:0}
/* 2: horizontal filmstrip of tall cards */
html[data-z="2"] .mega-in{grid-template-columns:1fr;padding-right:0;padding-top:28px;padding-bottom:34px;max-width:none;margin-right:0}
html[data-z="2"] .mega-pv{display:none}
html[data-z="2"] .mega-hd{margin-left:0}
html[data-z="2"] .mega-list ul{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:250px;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:80px}
html[data-z="2"] .mega-list ul::-webkit-scrollbar{display:none}
html[data-z="2"] .mega-list li{scroll-snap-align:start}
html[data-z="2"] .mega-list button{padding:0 0 4px;background:none!important}
html[data-z="2"] .mega-list .tile-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:8px;margin-bottom:14px;transition:transform .7s var(--ease),filter .4s;filter:brightness(.85)}
html[data-z="2"] .mega-list button.on .tile-img{transform:translateY(-6px);filter:none}
html[data-z="2"] .mega-list button.on b{color:var(--orange)}
html[data-z="2"] .mega-list svg{top:auto;bottom:30px;right:4px}
/* 3: full-screen takeover, giant list and a tall photo */
html[data-z="3"] .mega{background:#090909}
html[data-z="3"] .mega-in{grid-template-columns:1fr 42%;height:calc(calc(100svh*var(--vz,1)) - 128px);min-height:520px;padding-top:0;padding-bottom:0;max-width:none;margin-right:0;gap:60px}
html[data-z="3"] .mega-list{align-self:center}
html[data-z="3"] .mega-list ul{grid-template-columns:1fr;gap:0}
html[data-z="3"] .mega-list button{padding:6px 60px 6px 16px;background:none!important}
html[data-z="3"] .mega-list b{font-size:clamp(30px,calc(3.4vw*var(--vz,1)),46px);letter-spacing:-.02em;line-height:1.15;color:#4E4E4E;transition:color .25s,transform .5s var(--ease)}
html[data-z="3"] .mega-list button.on b{color:#fff;transform:translateX(14px)}
html[data-z="3"] .mega-list span{display:none}
html[data-z="3"] .mega-list svg{width:28px;height:28px;margin-top:-14px}
html[data-z="3"] .mega-pv{aspect-ratio:auto;height:100%;border-radius:0}
/* 4: titles on the left, a large photo card with the details on the right */
html[data-z="4"] .mega-in{grid-template-columns:340px 1fr;gap:36px}
html[data-z="4"] .mega-list ul{grid-template-columns:1fr;gap:2px}
html[data-z="4"] .mega-list button{padding:11px 44px 11px 16px}
html[data-z="4"] .mega-list span{display:none}
html[data-z="4"] .mega-list b{font-size:18px;color:#9A9A9A}
html[data-z="4"] .mega-list button.on{background:#1A1A1A}
html[data-z="4"] .mega-list button.on b{color:#fff}
html[data-z="4"] .mega-pv{aspect-ratio:auto;min-height:420px;border-radius:10px}
html[data-z="4"] .mega-pv::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 100%)}
html[data-z="4"] .mega-cap{position:absolute;left:32px;right:32px;bottom:30px;z-index:3;display:flex;flex-direction:column;gap:6px}
html[data-z="4"] .mega-cap b{font-size:34px;font-weight:700;letter-spacing:-.01em;color:#fff}
html[data-z="4"] .mega-cap span{font-size:17px;color:#D4D4D4}
html[data-z="4"] .mega-cap em{font-style:normal;margin-top:14px;align-self:flex-start;display:inline-flex;gap:10px;align-items:center;height:48px;padding:0 22px;border-radius:6px;background:var(--orange);color:#0A0A0A;font-weight:700;font-size:16px;cursor:pointer}
html[data-z="4"] .mega-cap.in b,html[data-z="4"] .mega-cap.in span{animation:capIn .5s var(--ease) both}
html[data-z="4"] .mega-cap.in span{animation-delay:.05s}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* 5: big text list, the photo floats along with the pointer */
html[data-z="5"] .mega-in{grid-template-columns:1fr;position:static;padding-top:30px;padding-bottom:40px}
html[data-z="5"] .mega-list ul{gap:0 48px}
html[data-z="5"] .mega-hd{margin-left:0}
html[data-z="5"] .mega-list button{padding:14px 40px 14px 0;border-radius:0;border-bottom:1px solid #222;background:none!important}
html[data-z="5"] .mega-list b{font-size:32px;letter-spacing:-.015em;color:#E6E6E6}
html[data-z="5"] .mega-list span{display:none}
html[data-z="5"] .mega-list:hover b{color:#555}
html[data-z="5"] .mega-list button.on b{color:#fff}
html[data-z="5"] .mega-pv{position:absolute;left:0;top:0;width:220px;aspect-ratio:3/4;z-index:5;pointer-events:none;border-radius:8px;opacity:0;scale:.85;transition:opacity .25s,scale .35s var(--ease);box-shadow:0 30px 60px rgba(0,0,0,.6)}
html[data-z="5"] .mega.pv-on .mega-pv{opacity:1;scale:1}

/* ===== reference round, picked by data-r ===== */
.r-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:6px;background:var(--orange);color:#0A0A0A;font-weight:700;font-size:16px;transition:background .25s}
.r-btn svg{transition:transform .3s var(--ease)}
.r-btn:hover svg{transform:translateX(4px)}
/* floating card, detached from the bar (1, 3) */
html[data-r="1"] .mega,html[data-r="3"] .mega,html[data-r="2"] .mega{left:max(24px,calc(50% - 640px));right:max(24px,calc(50% - 640px));top:calc(100% + 12px);border:1px solid #2A2A2A;border-radius:16px;overflow:hidden}
html[data-r="1"] .mega-in,html[data-r="3"] .mega-in,html[data-r="2"] .mega-in{width:auto;max-width:none;margin:0;padding:22px}
html[data-r="1"] .mega-dim,html[data-r="2"] .mega-dim,html[data-r="3"] .mega-dim{background:rgba(0,0,0,.35)}
/* 1: photo card on the left, compact list with round thumbnails */
html[data-r="1"] .mega{background:rgba(18,18,18,.94);backdrop-filter:blur(18px)}
html[data-r="1"] .mega-in{grid-template-columns:300px 1fr;gap:28px}
html[data-r="1"] .r-feat{position:relative;border-radius:10px;overflow:hidden;min-height:330px}
html[data-r="1"] .r-feat .mega-pv{display:block;position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
html[data-r="1"] .r-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.85));z-index:1}
html[data-r="1"] .r-feat-tx{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:6px}
html[data-r="1"] .r-feat-tx b{font-size:22px;color:#fff;line-height:1.2}
html[data-r="1"] .r-feat-tx span{font-size:15px;color:#D0D0D0}
html[data-r="1"] .mega-hd{margin-top:6px}
html[data-r="1"] .mega-list ul{gap:2px 16px}
html[data-r="1"] .mega-list button{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;padding:10px 40px 10px 10px;border-radius:10px}
html[data-r="1"] .mega-list .tile-img{display:block;grid-row:1/3;width:48px;height:48px;border-radius:50%;object-fit:cover;outline:1px solid #333;transition:outline-color .25s,transform .4s var(--ease)}
html[data-r="1"] .mega-list b,html[data-r="1"] .mega-list span{grid-column:2}
html[data-r="1"] .mega-list b{font-size:17px}
html[data-r="1"] .mega-list span{margin-top:0;font-size:15px}
html[data-r="1"] .mega-list button.on{background:#1F1F1F}
html[data-r="1"] .mega-list button.on .tile-img{outline-color:var(--orange);transform:scale(1.06)}
html[data-r="1"] .mega-foot{background:none;border-top-color:#232323}
html[data-r="1"] .mega-foot .wrap,html[data-r="3"] .mega-foot .wrap{width:auto;max-width:none;padding:0 32px}
/* 2: blurred bento, the hero shows through */
html[data-r="2"] .mega{background:rgba(14,14,14,.95);backdrop-filter:blur(40px) saturate(1.2)}
html[data-r="2"] .mega-in{grid-template-columns:1fr 330px;gap:14px;padding:14px}
html[data-r="2"] .mega-list{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:20px}
html[data-r="2"] .mega-list button.on{background:rgba(255,255,255,.07)}
html[data-r="2"] .r-side{display:grid;grid-template-rows:1fr auto;gap:14px}
html[data-r="2"] .r-side .mega-pv{aspect-ratio:auto;min-height:190px;border-radius:12px}
html[data-r="2"] .r-ask{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:20px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
html[data-r="2"] .r-ask b{font-size:19px;color:#fff}
html[data-r="2"] .r-ask span{font-size:15px;color:#B4B4B4;margin-bottom:10px}
html[data-r="2"] .mega-foot{display:none}
/* 3: help column + grouped columns, floating */
html[data-r="3"] .mega{background:#121212}
html[data-r="3"] .mega-in{grid-template-columns:270px 1fr;gap:36px;padding:30px 30px 30px 30px}
html[data-r="3"] .mega-pv{display:none}
html[data-r="3"] .r-help{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding-right:32px;border-right:1px solid #262626}
html[data-r="3"] .r-help b{font-size:22px;color:#fff;line-height:1.2}
html[data-r="3"] .r-help span{font-size:15px;color:#A8A8A8;margin-bottom:14px}
html[data-r="3"] .r-tel{margin-top:8px;font-size:15px;color:#CFCFCF;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#555}
html[data-r="3"] .mega-hd{display:none}
html[data-r="3"] .mg-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
html[data-r="3"] .mg-h{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:0 0 10px 12px}
html[data-r="3"] .mg ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
html[data-r="3"] .mega-list button{padding:10px 36px 10px 12px}
html[data-r="3"] .mega-list b{font-size:17px}
html[data-r="3"] .mega-list span{font-size:15px;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s var(--ease),opacity .3s}
html[data-r="3"] .mega-list button.on span{max-height:50px;opacity:1}
html[data-r="3"] .mega-list button.on{background:#1C1C1C}
html[data-r="3"] .mega-list svg{right:12px}
html[data-r="3"] .mega-foot{background:#0D0D0D;border-top-color:#222}
/* 4: groups, then services, then photo (three columns) */
html[data-r="4"] .mega-in{grid-template-columns:1fr 320px;gap:40px}
html[data-r="4"] .mega-list{display:grid;grid-template-columns:280px 1fr;gap:0 28px;align-items:start}
html[data-r="4"] .mega-hd{display:none}
html[data-r="4"] .r-cats{display:flex;flex-direction:column;gap:4px;padding-right:28px;border-right:1px solid #232323;min-height:100%}
html[data-r="4"] .r-cat{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:16px 16px;border-radius:8px;font-size:19px;font-weight:700;color:#8A8A8A;transition:background .2s,color .2s}
html[data-r="4"] .r-cat svg{opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .3s var(--ease);color:var(--orange)}
html[data-r="4"] .r-cat.act{background:#1A1A1A;color:#fff}
html[data-r="4"] .r-cat.act svg{opacity:1;transform:none}
html[data-r="4"] .r-panes{position:relative}
html[data-r="4"] .r-pane{list-style:none;margin:0;padding:0;display:none;gap:4px}
html[data-r="4"] .r-pane.act{display:grid;animation:capIn .45s var(--ease) both}
html[data-r="4"] .mega-list button.on{background:#161616}
html[data-r="4"] .mega-list b{font-size:21px}
html[data-r="4"] .mega-pv{aspect-ratio:4/5;border-radius:10px}
/* 5: editorial index, big word on the left, groups with leader lines */
html[data-r="5"] .mega-in{grid-template-columns:1fr 210px;gap:36px;padding-top:36px;padding-bottom:40px}
html[data-r="5"] .mega-list{display:grid;grid-template-columns:200px 1fr;gap:24px}
html[data-r="5"] .mega-hd{display:none}
html[data-r="5"] .r-big{margin:0;font-size:46px;font-weight:700;letter-spacing:-.02em;line-height:1;color:#fff}
html[data-r="5"] .mg-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
html[data-r="5"] .mg-h{position:relative;margin:0 0 14px;padding-top:16px;font-size:15px;font-weight:700;color:#fff}
html[data-r="5"] .mg-h::before{content:"";position:absolute;left:0;top:0;width:22px;height:3px;background:var(--orange)}
html[data-r="5"] .mg ul{list-style:none;margin:0;padding:0}
html[data-r="5"] .mega-list button{padding:9px 28px 9px 0;border-radius:0;background:none!important;border-bottom:1px dotted #3A3A3A}
html[data-r="5"] .mega-list b{font-size:17px;font-weight:500;color:#BDBDBD;transition:color .2s,transform .4s var(--ease)}
html[data-r="5"] .mega-list span{display:none}
html[data-r="5"] .mega-list button.on b{color:#fff;transform:translateX(6px)}
html[data-r="5"] .mega-list svg{right:0}
html[data-r="5"] .mega-pv{aspect-ratio:3/4;border-radius:4px}
html[data-r="3"] .mg ul,html[data-r="5"] .mg ul,html[data-r="4"] .r-pane{grid-template-columns:1fr}
html[data-r="4"] .r-pane.act{display:grid}

/* ===== motion on look r3, picked by data-a ===== */
@media (prefers-reduced-motion:no-preference){
  html[data-a] .hdr .mega-list li{transition-delay:0s}
  html[data-a] .hdr.mega-open .mega-list li{transition-delay:calc(.08s + var(--k) * 45ms)}
  html[data-a] .mg-h{opacity:0;transform:translateX(-10px);transition:opacity .2s,transform .3s}
  html[data-a] .hdr.mega-open .mg-h{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--g) * 80ms)}
  html[data-a] .r-help{opacity:0;transform:translateY(10px);transition:opacity .2s,transform .3s}
  html[data-a] .hdr.mega-open .r-help{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease)}
}
html[data-a] .mg{position:relative}
html[data-a] .mega-list button{transition:background .25s}
/* a: orange line draws under the hovered row, title slides */
html[data-a="a"] .mega-list button{border-radius:0;background:none!important;padding-left:0;margin-left:12px}
html[data-a="a"] .mega-list button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
html[data-a="a"] .mega-list button.on::after{transform:none}
html[data-a="a"] .mega-list b{transition:transform .45s var(--ease),color .2s}
html[data-a="a"] .mega-list button.on b{transform:translateX(8px);color:#fff}
html[data-a="a"] .mega-list button.on span{transform:translateX(8px)}
html[data-a="a"] .mega-list span{transition:max-height .35s var(--ease),opacity .3s,transform .45s var(--ease)}
html[data-a="a"] .mg-h{margin-left:12px}
/* b: a photo slides open inside the hovered row */
html[data-a="b"] .mega-list button{display:grid;grid-template-columns:0 1fr;column-gap:0;align-items:center;transition:grid-template-columns .5s var(--ease),column-gap .5s var(--ease),background .25s}
html[data-a="b"] .mega-list button.on{grid-template-columns:72px 1fr;column-gap:14px}
html[data-a="b"] .mega-list .tile-img{display:block;grid-row:1/3;width:72px;height:0;transition:clip-path .55s var(--ease),height .5s var(--ease)!important;object-fit:cover;border-radius:6px;clip-path:inset(0 100% 0 0 round 6px);transition:clip-path .55s var(--ease)}
html[data-a="b"] .mega-list button.on .tile-img{clip-path:inset(0 0 0 0 round 6px);height:56px}
html[data-a="b"] .mega-list b,html[data-a="b"] .mega-list span{grid-column:2}
html[data-a="b"] .mega-list span{margin-top:0}
/* c: one highlight that glides between rows and columns */
html[data-a="c"] .mg-wrap{position:relative}
html[data-a="c"] .r-spot{position:absolute;left:0;top:0;z-index:0;border-radius:8px;background:#1E1E1E;box-shadow:inset 3px 0 0 var(--orange);opacity:0;pointer-events:none;transition:transform .45s var(--ease),width .45s var(--ease),height .45s var(--ease),opacity .25s}
html[data-a="c"] .mg-wrap.sp-on .r-spot{opacity:1}
html[data-a="c"] .mg ul,html[data-a="c"] .mg-h{position:relative;z-index:1}
html[data-a="c"] .mega-list button.on{background:none}
html[data-a="c"] .mg-wrap.sp-on .mega-list button:not(.on) b{color:#7A7A7A}
html[data-a="c"] .mega-list b{transition:color .25s}
/* d: letters roll on hover */
html[data-a="d"] .mega-list .rl2{display:block;overflow:hidden;height:1.3em;max-height:none;opacity:1;margin:0;font-size:inherit;color:inherit;line-height:1.3;white-space:pre}
html[data-a="d"] .rl2 i{display:inline-block;font-style:normal;text-shadow:0 1.3em 0 var(--orange);transition:transform .55s var(--ease);transition-delay:calc(var(--i) * 18ms)}
html[data-a="d"] .mega-list button.on .rl2 i{transform:translateY(-1.3em)}
html[data-a="d"] .mega-list button.on{background:none}
html[data-a="d"] .mega-list svg{transition:opacity .2s,transform .45s var(--ease)}
html[data-a="d"] .mega-list button.on svg{transform:translateX(4px)}
/* e: the hovered service's photo fades in behind its column */
html[data-a="e"] .mg-bg{position:absolute;inset:-14px -10px;border-radius:12px;overflow:hidden;opacity:0;transition:opacity .45s;pointer-events:none}
html[data-a="e"] .mg-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 4s linear}
html[data-a="e"] .mg-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.72),rgba(18,18,18,.9))}
html[data-a="e"] .mg.lit .mg-bg{opacity:1}
html[data-a="e"] .mg.lit .mg-bg img{transform:scale(1)}
html[data-a="e"] .mg-h,html[data-a="e"] .mg ul{position:relative}
html[data-a="e"] .mega-list button.on{background:rgba(255,255,255,.08)}

/* ===== iterations on r3 + a="e", picked by data-e ===== */
/* 1: one photo behind all three columns, crossfading */
html[data-e="1"] .mg-bg{display:none}
html[data-e="1"] .mg-wrap{position:relative}
html[data-e="1"] .wrap-bg{position:absolute;inset:-30px -30px -30px -24px;overflow:hidden;opacity:0;transition:opacity .5s;pointer-events:none}
html[data-e="1"] .wrap-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .6s,transform 3s var(--ease)}
html[data-e="1"] .wrap-bg img.on{opacity:1;transform:scale(1)}
html[data-e="1"] .wrap-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,18,18,.92),rgba(18,18,18,.7) 55%,rgba(18,18,18,.55))}
html[data-e="1"] .mg-wrap.lit .wrap-bg{opacity:1}
html[data-e="1"] .mg{position:relative}
html[data-e="1"] .mega-list button.on{background:rgba(255,255,255,.1);backdrop-filter:blur(8px)}
/* 2: the photo wipes up from the bottom in full colour */
html[data-e="2"] .mg-bg{opacity:1;clip-path:inset(100% 0 0 0 round 12px);transition:clip-path .7s var(--ease)}
html[data-e="2"] .mg.lit .mg-bg{clip-path:inset(0 0 0 0 round 12px)}
html[data-e="2"] .mg-bg::after{background:linear-gradient(180deg,rgba(14,14,14,.55),rgba(14,14,14,.82))}
html[data-e="2"] .mg-bg img{transform:scale(1.2)}
html[data-e="2"] .mg.lit .mg-bg img{transform:scale(1);transition:transform 1.4s var(--ease)}
/* 3: frosted card on the hovered row, over the photo */
html[data-e="3"] .mega-list button.on{background:rgba(255,255,255,.12);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 30px rgba(0,0,0,.35);border-radius:10px}
html[data-e="3"] .mg-bg::after{background:linear-gradient(180deg,rgba(18,18,18,.5),rgba(18,18,18,.8))}
/* 4: the lit column widens, the others give way */
html[data-e="4"] .mg-wrap{transition:grid-template-columns .6s var(--ease)}
html[data-e="4"] .mg-wrap:has(> .mg:nth-child(1).lit){grid-template-columns:1.7fr .8fr .8fr}
html[data-e="4"] .mg-wrap:has(> .mg:nth-child(2).lit){grid-template-columns:.8fr 1.7fr .8fr}
html[data-e="4"] .mg-wrap:has(> .mg:nth-child(3).lit){grid-template-columns:.8fr .8fr 1.7fr}
html[data-e="4"] .mg-wrap:has(.lit) .mg:not(.lit){opacity:.45;transition:opacity .4s}
html[data-e="4"] .mg{transition:opacity .4s}
html[data-e="4"] .mg-bg::after{background:linear-gradient(90deg,rgba(18,18,18,.88),rgba(18,18,18,.45))}
/* 5: the photo drifts with the pointer, an orange frame draws round the column */
html[data-e="5"] .mg-bg img{transform:translate(calc(var(--mx,0) * -24px),calc(var(--my,0) * -18px)) scale(1.12);transition:transform .5s var(--ease)}
html[data-e="5"] .mg.lit .mg-bg img{transform:translate(calc(var(--mx,0) * -24px),calc(var(--my,0) * -18px)) scale(1.12)}
html[data-e="5"] .mg-bg::before{content:"";position:absolute;inset:0;z-index:2;border-radius:12px;border:1px solid var(--orange);clip-path:inset(0 100% 100% 0);transition:clip-path .8s var(--ease)}
html[data-e="5"] .mg.lit .mg-bg::before{clip-path:inset(0 0 0 0)}

/* ===== refinements of e=1, picked by data-f ===== */
html[data-f] .mega-foot button{display:none}
html[data-f] .mega-foot .wrap{justify-content:flex-end}
html[data-f] .wrap-bg img.on{animation:fKen 9s linear forwards}
@keyframes fKen{from{transform:scale(1.1)}to{transform:scale(1.02)}}
html[data-f] .f-cap{position:absolute;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;pointer-events:none;opacity:0}
html[data-f] .f-cap.in{animation:capIn .6s var(--ease) forwards}
html[data-f] .f-cap b{font-size:30px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.1}
html[data-f] .mega-list .f-cap span,html[data-f] .f-cap span{font-size:15px;color:#D6D6D6;max-height:none;opacity:1;margin:0}
html[data-f] .wrap-bg{opacity:1}
html[data-f] .mega-list button.on{background:rgba(255,255,255,.1);backdrop-filter:blur(8px);box-shadow:inset 3px 0 0 var(--orange)}
html[data-f] .mega-list span{color:#C8C8C8}
html[data-f] .mg-h{text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* a: photo under the whole panel, fading in from behind the help column */
html[data-f="a"] .mega-in{position:relative;min-height:330px;padding-bottom:96px}
html[data-f="a"] .wrap-bg{inset:0;z-index:0}
html[data-f="a"] .wrap-bg::after{background:linear-gradient(90deg,#121212 0,#121212 250px,rgba(18,18,18,.82) 420px,rgba(18,18,18,.45) 75%,rgba(18,18,18,.35)),linear-gradient(0deg,rgba(18,18,18,.75),transparent 45%)}
html[data-f="a"] .r-help,html[data-f="a"] .mg-wrap{position:relative;z-index:1}
html[data-f="a"] .r-help{border-right-color:rgba(255,255,255,.08)}
html[data-f="a"] .f-cap{right:32px;bottom:26px}
/* b: photo only behind the columns, soft edge, taller so it breathes */
html[data-f="b"] .mg-wrap{min-height:300px;padding-bottom:80px}
html[data-f="b"] .wrap-bg{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
html[data-f="b"] .wrap-bg::after{background:linear-gradient(90deg,rgba(18,18,18,.85),rgba(18,18,18,.5) 70%,rgba(18,18,18,.35)),linear-gradient(0deg,rgba(18,18,18,.8),transparent 50%)}
html[data-f="b"] .f-cap{right:6px;bottom:4px}
/* c: like b, the hovered title turns orange and the caption sits bottom-left with a line */
html[data-f="c"] .mg-wrap{min-height:300px;padding-bottom:84px}
html[data-f="c"] .wrap-bg{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 18%)}
html[data-f="c"] .wrap-bg::after{background:linear-gradient(0deg,rgba(18,18,18,.9),rgba(18,18,18,.55) 60%,rgba(18,18,18,.7))}
html[data-f="c"] .mega-list button.on{background:none;backdrop-filter:none;box-shadow:none}
html[data-f="c"] .mega-list button.on b{color:var(--orange)}
html[data-f="c"] .mega-list svg{transition:transform .4s var(--ease)}
html[data-f="c"] .mega-list button.on svg{transform:translateX(5px)}
html[data-f="c"] .f-cap{left:12px;right:auto;bottom:4px;align-items:flex-start;text-align:left;padding-top:14px;border-top:2px solid var(--orange)}

/* ===== bolder photo transitions on e=1, picked by data-k ===== */
html[data-k] .wrap-bg{opacity:1}
html[data-k] .wrap-bg > img{display:none}
html[data-k] .mg-wrap{min-height:290px}
html[data-k] .k-l{position:absolute;inset:0;overflow:hidden}
html[data-k] .k-l img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transform:none;animation:none}
/* 1: the photo arrives in four vertical slices, one after the other */
html[data-k="1"] .k-l img{clip-path:inset(0 calc(100% - (var(--s) + 1) * 25%) 0 calc(var(--s) * 25%));transform:translateY(105%);transition:transform .8s var(--ease);transition-delay:calc(var(--s) * 70ms)}
html[data-k="1"] .k-l.in img{transform:none}
html[data-k="1"] .k-l.out img{transform:translateY(-12%);transition:transform 1.1s var(--ease)}
/* 2: dark panel, the pointer is a flashlight that shows the photo */
html[data-k="2"] .k-l img{opacity:0;transition:opacity .5s}
html[data-k="2"] .k-l.in img{opacity:1}
html[data-k="2"] .k-l.out img{opacity:0}
html[data-k="2"] .wrap-bg::after{background:radial-gradient(circle 300px at var(--x,70%) var(--y,50%),rgba(18,18,18,.15),rgba(18,18,18,.55) 55%,rgba(18,18,18,.94))}
/* 3: each new photo wipes in left to right behind an orange edge */
html[data-k="3"] .k-l{clip-path:inset(0 100% 0 0);transition:clip-path .85s var(--ease)}
html[data-k="3"] .k-l.in{clip-path:inset(0 0 0 0)}
html[data-k="3"] .k-l::after{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--orange);transform:translateX(0);opacity:1;transition:left .85s var(--ease),opacity .3s .8s}
html[data-k="3"] .k-l.in::after{left:calc(100% - 3px);opacity:0}
html[data-k="3"] .k-l img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
html[data-k="3"] .k-l.in img{transform:none}
/* 4: fly-through: the old photo rushes past, the new one comes into focus */
html[data-k="4"] .k-l{opacity:0;transform:scale(1.25);filter:blur(14px);transition:opacity .7s,transform 1.1s var(--ease),filter .9s var(--ease)}
html[data-k="4"] .k-l.in{opacity:1;transform:none;filter:none}
html[data-k="4"] .k-l.out{opacity:0;transform:scale(.88);filter:blur(6px)}

/* ===== iterations on the fly-through, picked by data-m ===== */
html[data-m] .wrap-bg::after{background:linear-gradient(90deg,rgba(18,18,18,.86),rgba(18,18,18,.5) 60%,rgba(18,18,18,.35)),linear-gradient(0deg,rgba(18,18,18,.6),transparent 40%)}
html[data-m] .mg-wrap{min-height:320px}
html[data-m="1"] .k-l{transition:opacity .8s,transform 1.4s var(--ease),filter 1s var(--ease)}
html[data-m="1"] .k-l.rev{transform:scale(.8)}
html[data-m="1"] .k-l.rev.in{transform:none}
html[data-m="1"] .k-l.out{transform:scale(1.35);filter:blur(10px)}
html[data-m="2"] .k-l .k-st{transform:scale(1.5)!important;filter:blur(22px);opacity:.55!important;mix-blend-mode:screen;transition:transform 1.2s var(--ease),opacity 1.2s}
html[data-m="2"] .k-l.in .k-st{transform:scale(1.04)!important;opacity:0!important}
html[data-m="2"] .k-l{transform:scale(1.45);transition:opacity .6s,transform 1.3s var(--ease),filter 1s var(--ease)}
html[data-m="2"] .k-l.in{transform:none}
html[data-m="3"] .k-l{transform:scale(.25);filter:blur(4px);transition:opacity .5s,transform 1.1s var(--ease),filter .8s,border-radius 1.1s var(--ease);border-radius:16px}
html[data-m="3"] .k-l.in{transform:none;border-radius:0}
html[data-m="3"] .k-l.out{transform:scale(1.1);opacity:0}
html[data-m="4"] .mega-in{position:relative;min-height:340px}
html[data-m="4"] .wrap-bg{inset:0;z-index:0}
html[data-m="4"] .wrap-bg::after{background:linear-gradient(90deg,rgba(14,14,14,.55),rgba(14,14,14,.45) 60%,rgba(14,14,14,.3)),linear-gradient(0deg,rgba(14,14,14,.7),transparent 45%)}
html[data-m="4"] .r-help,html[data-m="4"] .mg-wrap{position:relative;z-index:1}
html[data-m="4"] .r-help{align-self:start;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(14,14,14,.55);backdrop-filter:blur(16px)}
html[data-m="5"] .mega-list button{transition:transform .5s var(--ease),filter .5s,opacity .5s,background .25s}
html[data-m="5"] .mg-wrap:has(button.on) .mega-list button:not(.on){transform:scale(.96);filter:blur(1.2px);opacity:.55}
html[data-m="5"] .mega-list button.on{transform:scale(1.04);background:rgba(255,255,255,.12)}


/* ===== scroll films: one continuous shot, sentences typed by the scroll, the room wiped back to its "before" ===== */
html[data-hs] .hero{height:calc(100vh*var(--vz,1));height:calc(100lvh*var(--vz,1));max-height:none;min-height:0}
html[data-hs] .hero-media{position:sticky;top:0;height:calc(100vh*var(--vz,1));height:calc(100lvh*var(--vz,1))}
html[data-hs] .hero-in{position:sticky;top:0;height:calc(100svh*var(--vz,1));margin-top:-100vh;margin-top:-100lvh}
html[data-hs] .hv-v{display:none}
html[data-hs] .hv-v.hs-v{display:block;opacity:1;transition:none;will-change:transform;transform-origin:50% 50%}
html[data-hs] .hero-copy,html[data-hs] .hero-foot{will-change:opacity,transform}
html[data-hs] .hero::after{display:none}
html[data-hs] .hero::before{opacity:var(--hb,1)}
html[data-hs] .hero-foot{border-top-color:rgba(255,255,255,calc(.12 * var(--hb,1)))}
.hs-poster,.fx,.fx-hint,.fx-before,.fx-dim,.fx-edge,.fx-lab{display:none}
/* first visit: the build plays once on its own behind a spinner, then the header and the hero copy come in over its last frame */
.intro-load{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#0A0A0A;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s .6s}
html.intro .intro-load{opacity:1;visibility:visible;transition:none}
html.intro .intro-load.gone{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.intro-load i{width:46px;height:46px;border-radius:50%;border:2.5px solid rgba(255,255,255,.12);border-top-color:var(--orange);animation:ilSpin .85s linear infinite}
@keyframes ilSpin{to{transform:rotate(360deg)}}
html.intro,html.intro body{overflow:hidden}
html.intro .hdr,html.intro .fab,html.intro .fx-hint{opacity:0;visibility:hidden}
html.intro .hs-poster,html.intro .hs-scrim{opacity:0}
html[data-hs] .hs-scrim{transition:opacity 1.2s ease}
html.outro .hdr-bar,html.outro .fx-hint{animation:fade .8s ease backwards}
html.outro .fx-hint{animation-delay:1.2s}
html[data-hs] .hs-poster{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
html[data-hs] .fx-before,html[data-hs] .fx-dim,html[data-hs] .fx-edge,html[data-hs] .fx-lab,html[data-hs] .fx{display:block}
.fx-before{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);transform:scale(var(--bz,1));will-change:clip-path,transform}
.fx-dim{position:absolute;inset:0;z-index:3;background:rgba(0,0,0,var(--hd,0));pointer-events:none}
.fx-edge{position:absolute;z-index:4;top:0;bottom:0;left:calc(var(--w,0) * 100%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 28px rgba(0,0,0,.55);opacity:0;pointer-events:none}
.fx-lab{position:absolute;z-index:5;bottom:100px;margin:0;font-size:clamp(36px,calc(4.4vw*var(--vz,1)),68px);font-weight:700;line-height:1;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.55);opacity:0;pointer-events:none}
.fx-lab-b{left:40px}
.fx-lab-a{right:40px;color:var(--orange)}
.fx{position:absolute;z-index:6;left:0;right:0;top:50%;height:0;pointer-events:none}
.fx-s{position:absolute;left:0;right:0;top:0;margin:0;padding:0 20px;transform:translateY(-50%);text-align:center;font-size:clamp(40px,calc(5.4vw*var(--vz,1)),88px);font-weight:500;line-height:1.08;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.5);visibility:hidden}
.fx-s.on{visibility:visible}
.fx-s .ln{display:block}
.fx-s .fw{display:inline-block;white-space:nowrap}
.fx-s i{font-style:normal;visibility:hidden;position:relative}
.fx-s i.v{visibility:visible}
.fx-s i.k::after{content:"";position:absolute;left:100%;top:.14em;width:.075em;height:.8em;margin-left:.07em;background:var(--orange)}
.fx-s.done .o{color:var(--orange)}
html[data-hs] .fx-hint{display:flex;flex-direction:column;align-items:center;gap:12px;position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font-size:15px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* three chevrons lighting up top to bottom over "Scroll" */
.fx-hint .stk{display:flex;flex-direction:column;align-items:center}
.fx-hint .stk svg{display:block;margin-top:-10px;opacity:.15;animation:hsS 1.6s ease-in-out infinite}
.fx-hint .stk svg:first-child{margin-top:0}
.fx-hint .stk svg:nth-child(2){animation-delay:.3s}
.fx-hint .stk svg:nth-child(3){animation-delay:.32s}
@keyframes hsS{0%,100%{opacity:.15}30%{opacity:1}60%{opacity:.15}}
.fx-hint .hl{display:grid;justify-items:center;overflow:hidden;padding:2px 0}
.fx-hint .hl b{grid-area:1/1;font-weight:600;white-space:nowrap;transition:opacity .4s ease,transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){.fx-hint .stk svg{animation:none;opacity:.85}}
@media (max-width:900px){
  html[data-hs] .fx-hint{display:none}
  .fx-s{font-size:38px;padding:0 12px;letter-spacing:-.02em}
  .fx-s .ln{text-wrap:balance}
  .fx-lab{font-size:30px;bottom:96px}
  .fx-lab-b{left:20px}.fx-lab-a{right:20px}
}
/* ===== hero video from the job photos, picked by data-hv ===== */
.hv-v{display:none}
html[data-hv] .hero-media{left:0;width:100%;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
html[data-hv] .hero-media .slide{display:none}
html[data-hv] .hv-v{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
html[data-hv] .hv-v.on{opacity:1}
html[data-hv] .reel{display:none}
html[data-hv] .hero::before{background:linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.6) 34%,rgba(10,10,10,.08) 62%)}

@keyframes svxin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes svxpg{to{transform:scaleX(1)}}
/* ===== how it works, four layouts (data-v), compared with the review switcher ===== */
.hw{position:relative;overflow:clip}
.hw-bg,.hw-ic,.hw-cta{display:none}
.hw[data-v] .hw-cta{display:flex;margin-top:64px}
.hw[data-v] .hw-ic{display:grid;place-items:center;flex:none}
/* 1 rows, after Wolf's "Why choose us" grid: hairline cells, bold orange number, orange line icon; the row in the middle of the screen (or under the mouse) gets a light fill and an orange bar on its left edge */
.hw:is([data-v="1"],[data-v="6"]) .hw-grid{grid-template-columns:1fr;gap:0;margin-top:72px;padding-top:0;border-top:1px solid rgba(0,0,0,.12)}
.hw:is([data-v="1"],[data-v="6"]) .hw-grid::before,.hw:is([data-v="1"],[data-v="6"]) .hw-grid::after{display:none}
.hw:is([data-v="1"],[data-v="6"]) .hw-st{display:grid;grid-template-columns:120px 44px minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:28px;padding:44px 40px;border-bottom:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,0);opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease),background .45s var(--ease)}
.hw:is([data-v="1"],[data-v="6"]).in .hw-st{opacity:1;transform:none}
.hw:is([data-v="1"],[data-v="6"]).in .hw-st:nth-child(2){transition-delay:.1s,.1s,0s}.hw:is([data-v="1"],[data-v="6"]).in .hw-st:nth-child(3){transition-delay:.2s,.2s,0s}.hw:is([data-v="1"],[data-v="6"]).in .hw-st:nth-child(4){transition-delay:.3s,.3s,0s}
.hw:is([data-v="1"],[data-v="6"]) .hw-st::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;height:auto;border:0;border-radius:0;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.hw:is([data-v="1"],[data-v="6"]).in .hw-st::before{transition-delay:0s!important}
.hw:is([data-v="1"],[data-v="6"]) .hw-st.on,.hw:is([data-v="1"],[data-v="6"]) .hw-st:hover{background:#F6F6F6}
.hw:is([data-v="1"],[data-v="6"]) .hw-st.on::before,.hw:is([data-v="1"],[data-v="6"]) .hw-st:hover::before{transform:none}
.hw:is([data-v="1"],[data-v="6"]) .hw-grid:hover .hw-st.on:not(:hover){background:rgba(0,0,0,0)}
.hw:is([data-v="1"],[data-v="6"]) .hw-grid:hover .hw-st.on:not(:hover)::before{transform:scaleY(0)}
.hw:is([data-v="1"],[data-v="6"]) .hw-n{order:-2;font-size:60px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.hw:is([data-v="1"],[data-v="6"]) .hw-ic{order:-1;width:44px;height:44px;color:var(--orange)}
.hw:is([data-v="1"],[data-v="6"]) .hw-ic svg{width:32px;height:32px}
.hw:is([data-v="1"],[data-v="6"]) .hw-st h3{margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em}
.hw:is([data-v="1"],[data-v="6"]) .hw-st p{margin:0;font-size:18px;max-width:44ch;color:#555}
/* the step text: dim until its row is the one in focus, then it darkens and the step's own action slides in under it */
.hw-go{display:none}
.hw:is([data-v="1"],[data-v="6"]) .hw-d{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-left:32px;border-left:1px solid rgba(0,0,0,.12)}
.hw:is([data-v="1"],[data-v="6"]) .hw-d p{font-size:19px;line-height:1.55;color:#8A8A8A;transition:color .45s var(--ease)}
.hw:is([data-v="1"],[data-v="6"]) .hw-go{display:inline-flex;align-items:center;gap:10px;height:0;overflow:hidden;font-size:16px;font-weight:600;color:#0A0A0A;opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease),height .4s var(--ease),color .25s}
.hw:is([data-v="1"],[data-v="6"]) .hw-go svg{color:var(--orange);transition:transform .3s var(--ease)}
.hw:is([data-v="1"],[data-v="6"]) .hw-go:hover{color:var(--orange)}
.hw:is([data-v="1"],[data-v="6"]) .hw-go:hover svg{transform:translateX(4px)}
.hw:is([data-v="1"],[data-v="6"]) .hw-st.on .hw-d p,.hw:is([data-v="1"],[data-v="6"]) .hw-st:hover .hw-d p{color:#2A2A2A}
.hw:is([data-v="1"],[data-v="6"]) .hw-st.on .hw-go,.hw:is([data-v="1"],[data-v="6"]) .hw-st:hover .hw-go{height:24px;opacity:1;transform:none}
.hw:is([data-v="1"],[data-v="6"]) .hw-grid:hover .hw-st.on:not(:hover) .hw-d p{color:#8A8A8A}
.hw:is([data-v="1"],[data-v="6"]) .hw-grid:hover .hw-st.on:not(:hover) .hw-go{height:0;opacity:0;transform:translateY(-6px)}
.hw:is([data-v="1"],[data-v="6"]) .hw-grid .hw-st.hw-st.hw-st:focus-within .hw-go{height:24px;opacity:1;transform:none}
.hw:is([data-v="1"],[data-v="6"]) .hw-n{opacity:.32;transition:opacity .45s var(--ease)}
.hw:is([data-v="1"],[data-v="6"]) .hw-st.on .hw-n,.hw:is([data-v="1"],[data-v="6"]) .hw-st:hover .hw-n{opacity:1}
.hw:is([data-v="1"],[data-v="6"]) .hw-grid:hover .hw-st.on:not(:hover) .hw-n{opacity:.32}
/* 2 sticky: heading holds on the left while the steps scroll past on the right, the one in the middle of the screen lights up */
.hw[data-v="2"] .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:96px;align-items:start}
.hw[data-v="2"] .sh{grid-column:1;grid-row:1;position:sticky;top:210px;display:block;border-top:0;padding-top:0}
.hw[data-v="2"] .sh .lead{margin-top:28px}
.hw[data-v="2"] .hw-cta{grid-column:2;grid-row:2;margin:8px 0 0 56px;min-width:0;width:min(480px,100%)}
.hw[data-v="2"] .hw-grid{grid-column:2;grid-row:1;grid-template-columns:1fr;gap:0;margin:0;padding:0 0 0 56px}
.hw[data-v="2"] .hw-grid::before{left:15px;right:auto;top:16px;bottom:16px;width:1px;height:auto}
.hw[data-v="2"] .hw-grid::after{left:15px;top:16px;width:2px;height:calc(var(--hp,0) * (100% - 32px));margin:0 0 0 -.5px;transform:none;transition:none}
.hw[data-v="2"] .hw-st{min-height:min(calc(46svh*var(--vz,1)),420px);padding:6px 0 64px;opacity:.28;transition:opacity .5s}
.hw[data-v="2"] .hw-st.on,.hw[data-v="2"] .hw-st.done{opacity:1}
.hw[data-v="2"] .hw-st::before{left:-56px;top:0;width:32px;height:32px;border:1px solid rgba(0,0,0,.2);background:#fff;transition:background .4s,border-color .4s,transform .4s}
.hw[data-v="2"].in .hw-st::before{background:#fff;border-color:rgba(0,0,0,.2)}
.hw[data-v="2"] .hw-st.on::before,.hw[data-v="2"] .hw-st.done::before{background:var(--orange)!important;border-color:var(--orange)!important}
.hw[data-v="2"] .hw-st.on::before{transform:scale(1.15)}
.hw[data-v="2"] .hw-ic{width:56px;height:56px;border-radius:14px;background:#F2F2F2;color:#0A0A0A;margin-bottom:28px;transition:background .4s,color .4s}
.hw[data-v="2"] .hw-st.on .hw-ic{background:var(--orange);color:#fff}
.hw[data-v="2"] .hw-st h3{margin-top:10px;font-size:40px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.hw[data-v="2"] .hw-st p{font-size:19px;max-width:38ch}
/* 3 cards: four white cards on light gray, icon in an orange disc, big step number in the corner */
.hw[data-v="3"]{background:#F3F3F3}
.hw[data-v="3"] .hw-grid{gap:20px;margin-top:72px;padding:0}
.hw[data-v="3"] .hw-grid::before,.hw[data-v="3"] .hw-grid::after,.hw[data-v="3"] .hw-st::before{display:none}
.hw[data-v="3"] .hw-st{display:flex;flex-direction:column;min-height:400px;padding:36px 32px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.06);opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .3s}
.hw[data-v="3"].in .hw-st{opacity:1;transform:none}
.hw[data-v="3"].in .hw-st:nth-child(2){transition-delay:.1s}.hw[data-v="3"].in .hw-st:nth-child(3){transition-delay:.2s}.hw[data-v="3"].in .hw-st:nth-child(4){transition-delay:.3s}
.hw[data-v="3"].in .hw-st:hover{transform:translateY(-6px);transition-delay:0s;border-color:rgba(0,0,0,.16)}
.hw[data-v="3"] .hw-ic{width:60px;height:60px;border-radius:50%;background:var(--orange);color:#fff}
.hw[data-v="3"] .hw-n{position:absolute;top:30px;right:30px;font-size:56px;font-weight:300;letter-spacing:-.04em;line-height:1;color:#E2E2E2}
.hw[data-v="3"] .hw-st h3{margin-top:auto;padding-top:48px;font-size:26px;font-weight:600}
.hw[data-v="3"] .hw-st p{font-size:17px}
/* 4 photo: dark section over a darkened tile photo, steps on glass panels */
.hw[data-v="4"]{background:#0A0A0A;color:#fff;padding:140px 0 150px}
.hw[data-v="4"] .hw-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.32) saturate(.8)}
.hw[data-v="4"]::after{content:"";position:absolute;inset:0;background:linear-gradient(#0A0A0A,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 70%,#0A0A0A)}
.hw[data-v="4"] .wrap{position:relative;z-index:1}
.hw[data-v="4"] .sh{border-top-color:rgba(255,255,255,.18)}
.hw[data-v="4"] .sh .lead{color:rgba(255,255,255,.72)}
.hw[data-v="4"] .hw-grid{gap:16px;margin-top:80px;padding:0}
.hw[data-v="4"] .hw-grid::before,.hw[data-v="4"] .hw-grid::after,.hw[data-v="4"] .hw-st::before{display:none}
.hw[data-v="4"] .hw-st{padding:32px 28px 36px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease),background .3s}
.hw[data-v="4"].in .hw-st{opacity:1;transform:none}
.hw[data-v="4"].in .hw-st:nth-child(2){transition-delay:.1s}.hw[data-v="4"].in .hw-st:nth-child(3){transition-delay:.2s}.hw[data-v="4"].in .hw-st:nth-child(4){transition-delay:.3s}
.hw[data-v="4"] .hw-st:hover{background:rgba(255,255,255,.1)}
.hw[data-v="4"] .hw-st>.hw-n,.hw[data-v="4"] .hw-ic{display:inline-flex}
.hw[data-v="4"] .hw-ic{width:52px;height:52px;border-radius:50%;background:var(--orange);color:#fff;margin-bottom:40px}
.hw[data-v="4"] .hw-n{position:absolute;top:44px;right:28px;color:rgba(255,255,255,.5)}
.hw[data-v="4"] .hw-st h3{font-size:24px;font-weight:600}
.hw[data-v="4"] .hw-st p{color:rgba(255,255,255,.7)}
.hw[data-v="4"] .hw-cta{background:rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media (max-width:900px){
  .hw[data-v] .hw-grid{grid-template-columns:1fr!important;gap:14px;margin-top:48px;padding:0}
  .hw[data-v] .hw-grid::before,.hw[data-v] .hw-grid::after,.hw[data-v] .hw-st::before{display:none}
  .hw:is([data-v="1"],[data-v="6"]) .hw-grid{gap:0;margin-top:40px}
  .hw:is([data-v="1"],[data-v="6"]) .hw-st{grid-template-columns:auto 1fr;gap:8px 16px;padding:28px 20px}
  .hw:is([data-v="1"],[data-v="6"]) .hw-n{grid-row:1/span 2;font-size:40px;align-self:start}
  .hw:is([data-v="1"],[data-v="6"]) .hw-st h3{font-size:23px}.hw:is([data-v="1"],[data-v="6"]) .hw-st p{font-size:17px}
  .hw:is([data-v="1"],[data-v="6"]) .hw-ic{display:none}
  .hw:is([data-v="1"],[data-v="6"]) .hw-d{grid-column:2;padding-left:0;border-left:0}
  .hw:is([data-v="1"],[data-v="6"]) .hw-d p{color:#3F3F3F}
  .hw:is([data-v="1"],[data-v="6"]) .hw-go{height:24px;opacity:1;transform:none}
  .hw:is([data-v="1"],[data-v="6"]) .hw-n{opacity:1}
  .hw[data-v="2"] .wrap{display:block}
  .hw[data-v="2"] .sh{position:static}
  .hw[data-v="2"] .hw-st{min-height:0;padding:0 0 36px;opacity:1}
  .hw[data-v="2"] .hw-ic{margin-bottom:18px}
  .hw[data-v="2"] .hw-st h3{font-size:28px}
  .hw[data-v="2"] .hw-cta{position:static;margin:24px 0 0;width:100%}
  .hw[data-v="3"] .hw-st{min-height:0;padding:28px 24px}
  .hw[data-v="3"] .hw-st h3{padding-top:28px}
  .hw[data-v="4"] .hw-st{padding:28px 24px}
  .hw[data-v="4"] .hw-ic{margin-bottom:24px}
  .hw[data-v] .hw-cta{margin-top:40px}
}
/* review switchers, desktop only, each shows while its own section is on screen */
.rsw{position:fixed;z-index:60;left:50%;top:136px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(20,20,20,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:15px;transition:opacity .3s,transform .3s}
.rsw.off{opacity:0;transform:translate(-50%,-12px);pointer-events:none}
.rsw span{padding:0 10px 0 12px;color:rgba(255,255,255,.6)}
.rsw .rsw-sep{margin-left:8px;padding-left:16px;border-left:1px solid rgba(255,255,255,.16)}
.rsw button[data-btn]{padding:0 14px}
.rsw button{height:38px;padding:0 18px;border-radius:999px;color:#fff;font-weight:600;transition:background .25s}
.rsw button:hover{background:rgba(255,255,255,.1)}
.rsw button.on{background:var(--orange)}
@media (max-width:900px){.rsw{display:none}}
html.hdr-light .h-hA .h-glass,html.hdr-light .h-hA .h-mob{background:rgba(16,16,16,.88)!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 10px 30px rgba(0,0,0,.14)!important}
/* the intro transition on [data-in] dropped the colour fade, so the dark switch was instant; keep both */
html .h-hA .h-glass[data-in],html .h-hA .h-mob{transition:background-color .5s ease,border-color .5s ease,box-shadow .5s ease,opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),-webkit-backdrop-filter 1.4s var(--ease) calc(var(--d,0s) + .5s),backdrop-filter 1.4s var(--ease) calc(var(--d,0s) + .5s)}
.h-hA .h-glass,.h-hA .h-mob{transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
/* header right island: the phone reads as a contact, and the quote button catches the eye with a light that crosses it now and then */
html .h-hA .h-i3{padding:0 6px 0 6px;gap:6px}
/* Archivo runs a little wider than Roboto: keep the nav island at its old width so the gap to the call island stays the same */
html .h-nv>a{letter-spacing:-.007em}html .h-hA .h-i3 .h-bq,html .h-hA .h-i3 .h-pht{letter-spacing:-.008em}
html .h-wb .h-ab .h-typ{color:#fff}
html .h-hA .h-i3 .h-phc{height:50px;padding:0 18px 0 6px;gap:11px;border-radius:999px;transition:background .25s ease}
html .h-hA .h-i3 .h-phc:hover{background:rgba(255,255,255,.1)}
.h-hA .h-phi{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);transition:background .25s ease,color .25s ease}
.h-hA .h-phi svg{width:16px;height:16px}
.h-hA .h-phc:hover .h-phi{background:#fff;color:#0A0A0A}
.h-hA .h-pht{display:flex;flex-direction:column;line-height:1.15;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.005em}
.h-hA .h-pht small{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:2px}
html .h-hA .h-i3 .h-qa{height:50px;padding:0 7px 0 26px;gap:14px;font-size:17px;font-weight:600}
html .h-hA .h-i3 .h-qa .h-qt,html .h-hA .h-i3 .h-qa:hover .h-qt{transform:none}
html .h-hA .h-i3 .h-qa .h-qr{position:static;margin:0;width:36px;height:36px;padding:10px;box-sizing:border-box;border-radius:50%;background:#0A0A0A;color:#fff;opacity:1;transform:none;transition:transform .45s var(--ease)}
html .h-hA .h-i3 .h-qa:hover .h-qr,html .h-hA .h-i3 .h-qa:focus-visible .h-qr{opacity:1;transform:rotate(-45deg)}
.h-hA .h-i3 .h-qa::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.6) 50%,rgba(255,255,255,0));transform:translateX(-140%) skewX(-18deg);animation:hqsheen 7s cubic-bezier(.45,0,.25,1) 2.6s infinite;pointer-events:none}
.h-hA .h-i3 .h-qa:hover::after{animation:none;opacity:0}
@keyframes hqsheen{0%{transform:translateX(-140%) skewX(-18deg)}13%,100%{transform:translateX(330%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){.h-hA .h-i3 .h-qa::after{display:none}}
.rsw .rsw-x{display:grid;place-items:center;width:38px;padding:0;margin-left:4px;border-left:0;color:rgba(255,255,255,.6)}
.rsw .rsw-x:hover{color:#fff}
.rsw-gone .rsw{display:none}
.hw{transition:background-color .5s var(--ease),color .5s var(--ease)}
.rsw-fade>*{transition:opacity .3s var(--ease),transform .5s var(--ease),filter .3s var(--ease)!important}
.rsw-out>*{opacity:0!important;transform:translateY(14px)!important;filter:blur(6px)}
.hw.rsw-out>.hw-bg{transform:none!important}
/* after a switch the open slat's words are simply there, they rise in again from the next slat on */
.rsw-calm .svc-t>*{animation:none!important}
.rsw-still>* :not(.svc-pg),.rsw-still>* :not(.svc-pg)::before,.rsw-still>* :not(.svc-pg)::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:0s!important;animation-delay:0s!important}
/* ===== services as photo cards (wolfcarpenters-style); data-v picks the variation ===== */
.sx[hidden]{display:none}
.svx{padding:120px 0 110px;background:#0A0A0A;color:#fff}
.svx-h{text-align:center}
.svx-h .ty{margin-top:14px}
.svx-h .ty b{color:var(--orange)}
.svx-vp{margin-top:56px}
.svx-tr{list-style:none;display:flex}
.svc{position:relative;display:block;width:100%;height:100%;overflow:hidden;text-align:left;color:#fff;background:#151515}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 45%,rgba(0,0,0,.85));transition:opacity .4s}
.svx .svc-n{display:none}
.svc-n{position:absolute;z-index:1;top:22px;left:24px;font-size:15px;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.svc-t{position:absolute;z-index:1;left:24px;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px}
.svc-t b{font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.svc-t small{font-size:16px;line-height:1.4;color:rgba(255,255,255,.8);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .35s}
.svc-t em{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .35s}
.svc:hover img,.svc:focus-visible img{transform:scale(1.05)}
.svc:hover small,.svc:focus-visible small,.svc:hover em,.svc:focus-visible em{max-height:60px;opacity:1}
/* card caption: name, scope, then a hairline and the quote action with a round arrow */
.svc::after{background:linear-gradient(rgba(0,0,0,0) 38%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.9))}
.svc-t{left:28px;right:28px;bottom:28px;gap:0}
.svc-t b{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.12}
.svc-t small{margin-top:8px;font-size:16px;line-height:1.45;color:rgba(255,255,255,.72);max-width:30ch}
.svc-t em{justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:#fff}
.svc-t em svg{box-sizing:content-box;padding:10px;border-radius:50%;background:var(--orange);color:#fff;transition:transform .35s var(--ease),background .25s,color .25s}
.svc-t em:hover svg{background:#fff;color:#111}
.svc:hover small,.svc:focus-visible small{max-height:70px}
.svc:hover em,.svc:focus-visible em{max-height:90px}
.svx-f{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px}
.svx-cta{display:flex;align-items:center;gap:28px;min-width:min(520px,100%);height:76px;padding:0 12px 0 30px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#141414;color:#fff;text-align:left;transition:border-color .3s,background .3s}
.svx-cta span{flex:1;display:flex;flex-direction:column;gap:4px;line-height:1.2}
.svx-cta b{font-size:18px;font-weight:600;letter-spacing:-.01em}
.svx-cta small{font-size:15px;color:rgba(255,255,255,.64)}
.svx-cta i{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:50%;background:var(--orange);color:#0A0A0A;transition:background .3s,color .3s}
.svx-cta i svg{transition:transform .35s var(--ease)}
.svx-cta:hover{border-color:rgba(255,255,255,.34);background:#181818}
.svx-cta:hover i{background:#fff;color:#111}
.svx-ar{display:flex;gap:10px}
.svx-ar button{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#fff;transition:border-color .25s,background .25s}
.svx-ar button:hover{border-color:var(--orange);background:var(--orange)}
.svx-ar button:disabled{opacity:.3;pointer-events:none}
@media (min-width:901px){
  /* 1: Wolf's strip, tall cards edge to edge, arrows to page through */
  .svx[data-v="1"] .svx-vp{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .svx[data-v="1"] .svx-vp::-webkit-scrollbar{display:none}
  .svx[data-v="1"] .svx-tr li{flex:0 0 calc(calc(100vw*var(--vz,1)) / 4.25);aspect-ratio:3/4;scroll-snap-align:start;border-right:1px solid #0A0A0A}
  /* 2: all eight at once, a 4 x 2 grid inside the page width */
  .svx[data-v="2"] .svx-vp{width:min(var(--wrap),100% - 80px);margin-inline:auto}
  .svx[data-v="2"] .svx-tr{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .svx[data-v="2"] .svx-tr li{aspect-ratio:1}
  .svx[data-v="2"] .svx-ar{display:none}
  .svx[data-v="2"] .svx-f{justify-content:center}
  .svx[data-v="2"] .svc{border-radius:6px}
  /* 3: slats; the one under the mouse opens up */
  .svx[data-v="3"] .svx-vp{width:min(var(--wrap),100% - 80px);margin-inline:auto}
  .svx[data-v="3"] .svx-tr{height:clamp(440px,calc(62svh*var(--vz,1)),620px);gap:8px}
  .svx[data-v="3"] .svx-tr li{flex:1 1 0;min-width:0;transition:flex-grow .7s var(--ease)}
  .svx[data-v="3"] .svx-tr li:has(.on){flex-grow:5}
  .svx[data-v="3"] .svc{border-radius:6px}
  .svx[data-v="3"] .svc:not(.on) .svc-t{left:50%;bottom:28px;right:auto;transform:translateX(-50%)}
  .svx[data-v="3"] .svc:not(.on) .svc-t b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:20px;white-space:nowrap}
  .svx[data-v="3"] .svc:not(.on) .svc-t small,.svx[data-v="3"] .svc:not(.on) .svc-t em{display:none}
  .svx[data-v="3"] .svc.on small,.svx[data-v="3"] .svc.on em{max-height:90px;opacity:1}
  .svx[data-v="3"] .svc.on .svc-t b{font-size:32px}
  .svx[data-v="3"] .svc:not(.on)::after{background:rgba(0,0,0,.45)}
  .svx[data-v="3"] .svx-ar{display:none}
  /* 3, elevated: closed slats sit back in muted tone, the open one plays a slow push-in, its words rise in after it opens, and a hairline counts down to the next */
  .svx[data-v="3"] .svx-tr{height:clamp(480px,calc(66svh*var(--vz,1)),680px);gap:10px}
  .svx[data-v="3"] .svx-tr li{transition:flex-grow .55s cubic-bezier(.65,0,.25,1)}
  .svx[data-v="3"] .svc{border-radius:8px}
  .svx[data-v="3"] .svc img{transition:filter .5s var(--ease),transform 1s var(--ease)}
  .svx[data-v="3"] .svc:not(.on) img{filter:grayscale(.85) brightness(.55);transform:scale(1.12)}
  .svx[data-v="3"] .svc:not(.on):hover img{filter:grayscale(.4) brightness(.7)}
  .svx[data-v="3"] .svc.on img{filter:none;transform:scale(1)}
  .svx[data-v="3"] .svc:not(.on)::after{background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.55))}
  .svx[data-v="3"] .svc:not(.on) .svc-t{left:0;right:0;bottom:32px;transform:none;align-items:center}
  .svx[data-v="3"] .svc:not(.on) .svc-t b{font-size:22px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.92)}
  /* the caption is laid out at the open width from the start, so its lines never re-wrap while the slat grows */
  .svx[data-v="3"] .svc.on .svc-t{left:40px;right:auto;bottom:40px;width:calc(var(--ow,480px) - 80px)}
  .svx[data-v="3"] .svc.on .svc-t>*{animation:svxin .5s var(--ease) both}
  .svx[data-v="3"] .svc.on .svc-t b{font-size:clamp(32px,calc(4svh*var(--vz,1)),44px);animation-delay:.16s}
  .svx[data-v="3"] .svc.on .svc-t small{font-size:17px;animation-delay:.36s}
  .svx[data-v="3"] .svc.on .svc-t em{max-width:420px;animation-delay:.42s}
  .svx[data-v="3"] .svc-pg{position:absolute;z-index:2;left:0;bottom:0;height:2px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
  .svx[data-v="3"].play .svc.on .svc-pg{animation:svxpg 6s linear forwards}
  /* 3: the open photo comes alive, a short loop fades in over the still */
  .svx .svc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .9s ease}
  .svx[data-v="3"] .svc.on video.live{opacity:1}
  /* 3, open caption: deeper shade under the words, larger title, and a glass pill with the orange arrow in place of the hairline row */
  .svx[data-v="3"] .svc.on::after{background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.38) 62%,rgba(0,0,0,.82) 100%)}
  .svx[data-v="3"] .svc.on .svc-t b{font-size:clamp(34px,calc(4.4svh*var(--vz,1)),48px);font-weight:600;letter-spacing:-.025em;line-height:1.05}
  .svx[data-v="3"] .svc.on .svc-t small{margin-top:12px;font-size:18px;color:rgba(255,255,255,.82);max-width:34ch}
  .svx[data-v="3"] .svc.on .svc-t em{display:inline-flex;align-self:flex-start;max-width:none;gap:14px;margin-top:26px;margin-left:-24px;padding:7px 7px 7px 24px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);font-size:16px;font-weight:600;color:#fff;transition:background .3s ease,color .3s ease,border-color .3s ease}
  .svx[data-v="3"] .svc.on .svc-t em svg{width:18px;height:18px;padding:12px;background:var(--orange);color:#fff;transition:transform .45s var(--ease)}
  .svx[data-v="3"] .svc.on .svc-t em:hover{background:#fff;border-color:#fff;color:#0A0A0A}
  .svx[data-v="3"] .svc.on .svc-t em:hover svg{transform:rotate(-45deg);background:var(--orange);color:#fff}
  /* button options for Beto: every one starts on the same line as the title */
  .svx[data-v="3"] .svc.on .svc-t em{margin-left:0}
  /* A: solid orange pill */
  .svx[data-btn="a"][data-v="3"] .svc.on .svc-t em{padding:6px 6px 6px 24px;border-color:var(--orange);background:var(--orange);-webkit-backdrop-filter:none;backdrop-filter:none;color:#0A0A0A}
  .svx[data-btn="a"][data-v="3"] .svc.on .svc-t em svg{background:#0A0A0A;color:#fff}
  .svx[data-btn="a"][data-v="3"] .svc.on .svc-t em:hover{background:#fff;border-color:#fff}
  .svx[data-btn="a"][data-v="3"] .svc.on .svc-t em:hover svg{background:#0A0A0A}
  /* B: solid white pill */
  .svx[data-btn="b"][data-v="3"] .svc.on .svc-t em{padding:6px 6px 6px 24px;border-color:#fff;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;color:#0A0A0A}
  .svx[data-btn="b"][data-v="3"] .svc.on .svc-t em:hover{background:var(--orange);border-color:var(--orange)}
  .svx[data-btn="b"][data-v="3"] .svc.on .svc-t em:hover svg{background:#0A0A0A}
  /* C and D: no pill, the text itself sits on the title line */
  .svx[data-btn="c"][data-v="3"] .svc.on .svc-t em,.svx[data-btn="d"][data-v="3"] .svc.on .svc-t em{gap:16px;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:18px}
  .svx[data-btn="c"][data-v="3"] .svc.on .svc-t em:hover,.svx[data-btn="d"][data-v="3"] .svc.on .svc-t em:hover{background:none;color:#fff}
  .svx[data-btn="c"][data-v="3"] .svc.on .svc-t em svg,.svx[data-btn="d"][data-v="3"] .svc.on .svc-t em svg{padding:14px}
  /* C: text, then the orange circle. D: the circle leads */
  .svx[data-btn="d"][data-v="3"] .svc.on .svc-t em{flex-direction:row-reverse}
  /* 4: the page holds and the scroll slides the strip sideways */
  .svx[data-v="4"]{height:calc(calc(100svh*var(--vz,1)) + calc(120svh*var(--vz,1)));padding:0}
  .svx[data-v="4"] .svx-pin{position:sticky;top:0;height:calc(100svh*var(--vz,1));display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:clamp(120px,calc(15svh*var(--vz,1)),170px)}
  .svx[data-v="4"] .svx-h{text-align:left}
  .svx[data-v="4"] .svx-vp{margin-top:40px;padding-left:max(40px,(100% - var(--wrap)) / 2)}
  .svx[data-v="4"] .svx-tr{gap:16px;will-change:transform}
  .svx[data-v="4"] .svx-tr li{flex:0 0 auto;height:min(calc(58svh*var(--vz,1)),560px);aspect-ratio:3/4}
  .svx[data-v="4"] .svc{border-radius:6px}
  .svx[data-v="4"] .svx-ar{display:none}
}
@media (max-width:900px){
  .svx{padding:88px 0 80px}
  .svx-h{text-align:left}
  .svx-vp{margin-top:36px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 20px;scroll-padding:0 20px}
  .svx-vp::-webkit-scrollbar{display:none}
  .svx-tr{gap:10px}
  .svx-tr li{flex:0 0 calc(76vw*var(--vz,1));aspect-ratio:3/4;scroll-snap-align:start}
  .svc{border-radius:6px}
  .svc small,.svc em{max-height:90px!important;opacity:1!important}
  .svx-ar{display:none}
  .svx-cta{min-width:0;width:100%;height:auto;padding:14px 10px 14px 22px;gap:16px}
  .svx-cta b{font-size:17px}
}

/* ===== section options for Beto (About, Reviews, Contact): option 1 is the original markup ===== */
.vx{display:none}
[data-sw]:not([data-v="1"]):not(.ab[data-v="5"]):not(.cl[data-v="5"])>.wrap,.ab:not([data-v="1"]):not([data-v="5"])>img{display:none}
[data-sw][data-v="2"]>.vx[data-o="2"],[data-sw][data-v="3"]>.vx[data-o="3"]{display:block}
.ab:not([data-v="1"]):not([data-v="5"]){display:block;min-height:0;padding:130px 0}
.ab[data-v="2"]{padding-top:56px!important}
.vx-lk{display:inline-flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:#fff}
.vx-lk svg{color:var(--orange);transition:transform .3s var(--ease)}
.vx-lk:hover svg{transform:translateX(4px)}
.vx-st{display:inline-flex;gap:3px;color:var(--orange)}
.vx-av{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:#262626;color:#fff;font-style:normal;font-size:18px;font-weight:600}
.ab .vx .wrap{display:block;padding:0;gap:0}
.cl .vx .wrap{text-align:left}
.cl:not([data-v="1"]):not([data-v="5"]){display:flex;flex-direction:column}
.cl:not([data-v="1"]):not([data-v="5"])>.mp{order:2;margin-top:96px}
.cl:not([data-v="1"]):not([data-v="5"])>.lb{order:2;margin-top:96px}
.cl>.lb+.mp,.cl:not([data-v="1"]):not([data-v="5"])>.lb+.mp{margin-top:clamp(64px,calc(8vw*var(--vz,1)),120px)}
.cl:not([data-v="1"]):not([data-v="5"]){padding-bottom:0!important}
/* about 2: the work beside the words */
.ab .vx .ab2-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(64px,calc(8vw*var(--vz,1)),140px);align-items:start}
.ab:not([data-v="1"]):not([data-v="5"]){padding:clamp(120px,calc(11vw*var(--vz,1)),180px) 0 clamp(72px,calc(6.5vw*var(--vz,1)),104px)}
.ab2-m{position:relative;padding:0 clamp(40px,calc(5vw*var(--vz,1)),72px) clamp(56px,calc(6vw*var(--vz,1)),96px) 0}
.ab2-ph,.ab2-ph2{margin:0;overflow:hidden}
.ab2-ph{aspect-ratio:4/5;max-height:calc(76vh*var(--vz,1));border-radius:28px}
.ab2-ph2{position:absolute;right:0;bottom:0;width:42%;aspect-ratio:3/4;border-radius:22px;outline:10px solid #0A0A0A}
.ab2-m img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ab2-m figure:hover img{transform:scale(1.04)}
.ab2-t{max-width:640px}
.ab2-t .ty{margin-top:22px;font-size:clamp(40px,calc(3.8vw*var(--vz,1)),62px);line-height:1.06}
/* phones, About layouts 2 and 3: tighter space above the ABOUT label and between it and the title */
/* layout 2: the title sits right under the ABOUT kicker */
html body #about[data-v="5"] .ty{padding-top:0}
@media (max-width:760px){html body #about[data-v="5"]>.wrap{padding-top:72px}html body #about[data-v="5"] .ty,html body #about[data-v="2"] .ty{padding-top:0}html body #about[data-v="5"] .kic{margin-bottom:16px}html body #about[data-v="2"] .ab2-t{margin-top:-16px}html body #about[data-v="2"] .ab2-t .ty{margin-top:16px}}
.ab2-p{margin-top:32px;font-size:19px;line-height:1.7;color:rgba(255,255,255,.78)}
.ab2-m figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 20px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));color:#fff;font-size:16px;pointer-events:none}
.ab2-m figcaption b{font-weight:600}
.ab2-ph,.ab2-ph2{position:relative}
.ab2-ph2{position:absolute}
.ab2-ph2 figcaption{padding:40px 18px 16px;font-size:15px}
.ab2-f{display:grid;grid-template-columns:1.3fr 1fr 1fr;margin-top:48px;border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden}
.ab2-f>div{padding:24px 22px}
.ab2-f>div+div{border-left:1px solid rgba(255,255,255,.12)}
.ab2-f i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);color:var(--orange)}
.ab2-f i svg{width:20px;height:20px}
.ab2-f dt{margin-top:18px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ab2-f dd{margin-top:8px;font-size:17px;line-height:1.45;color:#fff;white-space:nowrap}
.ab2-a{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:40px}
.ab2-q{display:inline-flex;align-items:center;gap:20px;height:64px;padding:0 8px 0 30px;border-radius:999px;background:var(--orange);color:#0A0A0A;font-size:18px;font-weight:600;transition:background .3s}
.ab2-q em{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#0A0A0A;color:#fff;transition:transform .4s var(--ease)}
.ab2-q:hover{background:#FF7A2E}
.ab2-q:hover em{transform:rotate(-45deg)}
.ab2-d{display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 28px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:18px;font-weight:600;transition:background .3s,border-color .3s}
/* contact: the three actions a size up */
.cl-act .ab2-q,.cl-act .ab2-d{height:74px;font-size:20px}
.cl-act .ab2-q{padding:0 9px 0 36px;gap:24px}
.cl-act .ab2-q em{width:56px;height:56px}
.cl-act .ab2-d{padding:0 34px;gap:14px}
.cl-act .ab2-d svg{width:22px;height:22px}
.ab2-d svg{color:var(--orange)}
.ab2-d:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}
@media (max-width:900px){
  .ab .vx .ab2-g{grid-template-columns:1fr;gap:56px}
  .ab2-ph{max-height:none}
  .ab2-f{grid-template-columns:1fr}
  .ab2-f>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .ab2-f dd{white-space:normal}
  .ab2-q,.ab2-d{width:100%;justify-content:space-between}
  .ab2-d{justify-content:center}
}
/* about 3: one big statement, then the work */
.ab3-s{margin-top:28px;font-size:clamp(30px,calc(3.3vw*var(--vz,1)),52px);line-height:1.22;letter-spacing:-.02em;font-weight:500;color:rgba(255,255,255,.42);max-width:1180px}
.ab3-s em{font-style:normal;color:#fff}
.ab3-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:72px}
.ab3-strip figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:18px;overflow:hidden}
.ab3-strip img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ab3-strip figure:hover img{transform:scale(1.05)}
.ab3-strip figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0) 45%)}
.ab3-strip figcaption{position:absolute;z-index:1;left:22px;bottom:18px;font-size:20px;font-weight:600;color:#fff}
.ab3-f{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 32px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16)}
.ab3-f dt{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.ab3-f dd{margin-top:8px;font-size:18px;line-height:1.45;color:#fff}
.ab3-f a:hover{color:var(--orange)}
/* reviews 2: the score and one review at a time */
.rv2-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:96px;align-items:center}
.rv2-l .ty{margin-top:18px}
.rv2-sc{display:flex;align-items:center;gap:20px;margin:44px 0 36px;padding:24px 0;border-block:1px solid rgba(255,255,255,.14)}
.rv2-sc strong{font-size:72px;font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rv2-sc span{display:flex;flex-direction:column;gap:8px;font-size:17px;color:rgba(255,255,255,.72)}
.rv2-q{position:relative;margin:0;padding:56px 56px 48px;border-radius:28px;background:#151515;border:1px solid rgba(255,255,255,.08)}
.rv2-m{display:block;height:56px;font-size:120px;line-height:.9;font-weight:700;color:var(--orange)}
.rv2-q blockquote{margin:16px 0 0;font-size:clamp(24px,calc(2vw*var(--vz,1)),32px);line-height:1.38;letter-spacing:-.015em;color:#fff;min-height:6.9em;transition:opacity .35s ease}
.rv2-q figcaption{transition:opacity .35s ease}
.rv2-q figcaption{display:flex;align-items:center;gap:16px;margin-top:40px;font-size:15px;color:rgba(255,255,255,.6)}
.rv2-q figcaption span{display:flex;flex-direction:column;gap:2px}
.rv2-q figcaption b{font-size:17px;color:#fff}
.rv2-nav{position:absolute;right:48px;bottom:44px;display:flex;align-items:center;gap:10px}
.rv2-nav button{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);color:#fff;transition:background .25s,border-color .25s,color .25s}
.rv2-nav button:hover{background:var(--orange);border-color:var(--orange);color:#0A0A0A}
.rv2-n{order:-1;margin-right:10px;font-size:15px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
/* reviews 3: a slow wall of reviews */
.rv3-h{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.rv3-h .ty{margin-top:18px}
.rv3-sc{display:flex;align-items:center;gap:22px}
.rv3-sc strong{font-size:56px;font-weight:600;line-height:1;letter-spacing:-.03em}
.rv3-sc span{display:flex;flex-direction:column;gap:6px;font-size:16px;color:rgba(255,255,255,.72);padding-right:22px;border-right:1px solid rgba(255,255,255,.16)}
.rv3-rows{display:grid;gap:20px;margin-top:64px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rv3-row{display:flex;gap:20px;width:max-content;animation:rv3 130s linear infinite}
.rv3-rev{animation-direction:reverse}

@keyframes rv3{to{transform:translateX(calc(-50% - 10px))}}
.rv3-c{display:flex;flex-direction:column;gap:18px;width:400px;padding:30px;border-radius:22px;background:#151515;border:1px solid rgba(255,255,255,.08)}
.rv3-c p{flex:1;font-size:18px;line-height:1.5;color:#fff}
.rv3-c footer{display:flex;align-items:center;gap:14px;font-size:15px;color:rgba(255,255,255,.6)}
.rv3-c footer span{display:flex;flex-direction:column;gap:2px}
.rv3-c footer b{font-size:16px;color:#fff}
@media (prefers-reduced-motion:reduce){.rv3-row{animation:none}}
/* contact 2: the ways to reach us, beside a finished job */
.cl:not([data-v="1"]):not([data-v="5"]){padding-bottom:120px}
.cl2-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px;align-items:stretch;text-align:left}
.cl2-t .ty,.cl3-h .ty{font-size:clamp(44px,calc(5vw*var(--vz,1)),84px);letter-spacing:-.03em;line-height:1}
.cl2-p{margin-top:22px;font-size:21px;line-height:1.5;color:rgba(255,255,255,.78)}
.cl2-l{display:grid;margin-top:44px;border-top:1px solid rgba(255,255,255,.14)}
.cl2-r{display:flex;align-items:center;gap:22px;width:100%;padding:24px 8px 24px 0;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;text-align:left;transition:padding .35s var(--ease),background .3s}
.cl2-r i{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.18);color:var(--orange);transition:background .3s,color .3s,border-color .3s}
.cl2-r span{flex:1;display:flex;flex-direction:column;gap:4px}
.cl2-r b{font-size:21px;font-weight:600}
.cl2-r small{font-size:16px;color:rgba(255,255,255,.6)}
.cl2-r em{color:var(--orange);transition:transform .35s var(--ease)}
.cl2-r:hover{padding-left:12px}
.cl2-r:hover em{transform:translateX(6px)}
.cl2-r:hover i,.cl2-r.pri i{background:var(--orange);border-color:var(--orange);color:#0A0A0A}
.cl2-ph{position:relative;margin:0;min-height:560px;border-radius:24px;overflow:hidden}
.cl2-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cl2-ph figcaption{position:absolute;left:16px;right:16px;bottom:16px;display:grid;gap:14px;padding:22px 24px;border-radius:18px;background:rgba(12,12,12,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:17px;line-height:1.45;color:#fff}
.cl2-ph figcaption span{display:flex;flex-direction:column;gap:4px}
.cl2-ph small{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
/* footer 1: a closing line, the columns, then the wordmark */
.ft[data-v="1"]{padding-top:clamp(96px,calc(9vw*var(--vz,1)),140px);overflow:hidden}
.ft1-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap;padding-bottom:clamp(56px,calc(6vw*var(--vz,1)),88px);margin-bottom:clamp(56px,calc(6vw*var(--vz,1)),88px);border-bottom:1px solid rgba(255,255,255,.12)}
.ft1-h{font-size:clamp(44px,calc(5.4vw*var(--vz,1)),88px);font-weight:600;letter-spacing:-.035em;line-height:1;color:#fff}
.ft1-h b{color:var(--orange)}
.ft1-a{display:flex;gap:14px;flex-wrap:wrap}
.ft[data-v="1"] h3{font-size:13px;font-weight:700;letter-spacing:.16em;color:#fff}
.ft[data-v="1"] ul{gap:14px}
.ft[data-v="1"] ul a{font-size:17px;color:#E4E4E4}
.ft[data-v="1"] ul a:hover{color:var(--orange)}
.ft[data-v="1"] .ft-about{font-size:17px;color:rgba(255,255,255,.72)}
.ft[data-v="1"] .socials a{transition:background .3s,border-color .3s,color .3s}
.ft[data-v="1"] .ft-c b{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px}
.ft[data-v="1"] .ft-c span,.ft[data-v="1"] .ft-c a{font-size:16px;color:#E4E4E4}
.ft[data-v="1"] .ft-c li{gap:16px}
.ft[data-v="1"] .ft-c svg{margin-top:1px}
.ft[data-v="1"] .ft-bot{margin-top:clamp(64px,calc(7vw*var(--vz,1)),104px);font-size:15px;color:rgba(255,255,255,.55)}
.ft1-w{display:none}
.ft[data-v="1"] .ft1-w{display:block;margin:0 0 -0.19em;text-align:center;font-size:clamp(120px,calc(24vw*var(--vz,1)),420px);font-weight:700;letter-spacing:-.05em;line-height:.8;color:#151515;user-select:none;pointer-events:none;white-space:nowrap}
@media (max-width:900px){.ft1-top{align-items:flex-start;flex-direction:column}.ft1-a{width:100%}.ft1-a>*{flex:1 1 auto;justify-content:space-between}.ft1-a .ab2-d{justify-content:center}}
/* contact 1: steps, three ways in, then the details with icons and actions */
.cl1-lead{justify-content:center}
.cl[data-v="1"] .cl-act{gap:14px}
.cl1-wa svg{color:#25D366}
.cl-facts{grid-template-columns:repeat(3,1fr);gap:0;margin-top:96px;padding:0;border:0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.cl-facts>div{display:flex;flex-direction:column;align-items:flex-start;padding:40px 36px 44px}
.cl-facts>div:first-child{padding-left:0}
.cl-facts>div+div{border-left:1px solid rgba(255,255,255,.14)}
.cl-facts i{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border-radius:50%;background:rgba(255,94,8,.12);color:var(--orange)}
.cl-facts dt{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cl-facts dd{margin-top:10px;font-size:20px;font-weight:500;line-height:1.4;color:#fff;letter-spacing:-.01em}
.cl1-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:16px;font-weight:600;color:var(--orange)}
.cl1-go svg{transition:transform .35s var(--ease)}
.cl1-go:hover svg{transform:translate(3px,-3px)}
.cl1-st{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.cl1-st small{margin:0!important}
.cl-facts small{color:rgba(255,255,255,.6)}
@media (max-width:900px){
  .cl1-lead{justify-content:flex-start;text-align:left}
  .cl[data-v="1"] .cl-act>*{width:100%;justify-content:space-between}
  .cl[data-v="1"] .cl-act .ab2-d{justify-content:center}
  .cl-facts{grid-template-columns:1fr;margin-top:64px}
  .cl-facts>div{padding:32px 0}
  .cl-facts>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .cl-facts dd{font-size:18px;overflow-wrap:anywhere}
}
/* about 1: facts with icons, then the two actions */
.ab .ab-r{max-width:620px}
.ab .ab-r p{font-size:18px;line-height:1.7;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.ab[data-v="1"]::after{background:linear-gradient(180deg,rgba(10,10,10,.2) 0%,rgba(10,10,10,.7) 38%,rgba(10,10,10,.94) 58%,#0A0A0A 80%)}
.ab .ab-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ab .ab-facts>div{padding:22px 22px 24px}
.ab .ab-facts>div+div{border-left:1px solid rgba(255,255,255,.14)}
.ab .ab-facts i{display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:50%;background:rgba(255,94,8,.14);color:var(--orange)}
.ab .ab-facts dt{color:#fff}
.ab .ab-facts dd{margin-top:6px;font-size:16px;color:#fff}
.ab1-a{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
/* about 2: a single team photo, caption in two lines */
.ab2-m{padding:0}
.ab2-m .ab2-ph{aspect-ratio:4/5;max-height:calc(82vh*var(--vz,1));border-radius:28px}
.ab2-m figcaption{display:flex;flex-direction:column;gap:6px;padding:140px 32px 30px;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.82) 40%,rgba(0,0,0,0) 100%)}
.ab2-m figcaption small{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.ab2-m figcaption b{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.ab2-m .ab2-ph img{object-position:50% 30%}
.ab2-sig{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:28px}
.ab2-sig img{width:140px;height:auto;opacity:.92}
.ab2-sig span{font-size:15px;color:#fff}
@media (max-width:900px){.ab2-sig img{width:120px}}
/* reviews 2: no box, stars on top, a progress line */
.rv2-q{padding:0 0 0 clamp(32px,calc(4vw*var(--vz,1)),64px);border:0;border-radius:0;background:none}
.rv2-q::before{content:"";position:absolute;left:0;top:-48px;bottom:-48px;width:1px;background:rgba(255,255,255,.14)}
.rv2-top{display:flex;align-items:center;gap:14px;font-size:15px;color:rgba(255,255,255,.6)}
.rv2-st{display:flex;gap:3px;color:var(--orange)}
.rv2-q blockquote{margin-top:28px;font-size:clamp(28px,calc(2.4vw*var(--vz,1)),40px);line-height:1.3;letter-spacing:-.02em;min-height:6.6em;font-weight:500}
.rv2-q blockquote,.rv2-q figcaption{transition:opacity .35s ease,transform .45s var(--ease)}
.rv2-q figcaption{margin-top:36px}
.rv2-q .vx-av{background:var(--orange);color:#0A0A0A}
.rv2-nav{right:0;bottom:41px}
.rv2-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-top:40px}
.rv2-bar i{height:3px;border-radius:3px;background:rgba(255,255,255,.14);transition:background .4s}
.rv2-bar i.past{background:rgba(255,94,8,.45)}
.rv2-bar i.on{background:var(--orange)}
.rv2-sc strong{font-size:96px}
@media (max-width:900px){
  .ab .ab-facts{grid-template-columns:1fr}
  .ab .ab-facts>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .ab .ab-facts>div{display:grid;grid-template-columns:40px 1fr;column-gap:16px;padding:18px 20px}
  .ab .ab-facts dt,.ab .ab-facts dd{grid-column:2}.ab .ab-facts dt{position:relative}.ab .ab-facts i{position:absolute;left:-56px;top:0;margin:0}
  .ab1-a>*{width:100%;justify-content:space-between}.ab1-a .ab2-d{justify-content:center}
  .ab2-m figcaption{padding:72px 22px 22px}.ab2-m figcaption b{font-size:19px}
  .rv2-q{padding:0;border-left:0}.rv2-q::before{display:none}
  .rv2-q blockquote{font-size:24px;min-height:0}
  .rv2-nav{position:static;margin-top:28px}
  .rv2-sc strong{font-size:72px}
}
/* footer 1, refined: hairline columns, icon circles, live hours, back to top */
.ft[data-v="1"] .ft-grid{grid-template-columns:1.35fr 1fr 1.1fr 1.3fr;gap:0}
.ft[data-v="1"] .ft-grid>div{padding:0 clamp(24px,calc(3vw*var(--vz,1)),48px)}
.ft[data-v="1"] .ft-grid>div:first-child{padding-left:0}
.ft[data-v="1"] .ft-grid>div:last-child{padding-right:0}
.ft[data-v="1"] .ft-grid>div+div{border-left:1px solid rgba(255,255,255,.1)}
.ft[data-v="1"] .brand img{width:104px}
.ft[data-v="1"] .ft-about{margin-top:26px;font-size:17px;line-height:1.65;max-width:340px}
.ft[data-v="1"] .socials{margin-top:28px}
.ft[data-v="1"] .socials a{width:48px;height:48px;background:none;border:1px solid rgba(255,255,255,.18);color:#fff}
.ft[data-v="1"] .socials a:hover{background:var(--orange);border-color:var(--orange);color:#0A0A0A}
.ft[data-v="1"] ul:not(.ft-c) a{display:inline-flex;transition:color .25s,transform .35s var(--ease)}
.ft[data-v="1"] ul:not(.ft-c) a:hover{transform:translateX(6px)}
.ft[data-v="1"] .ft-c{gap:24px}
.ft[data-v="1"] .ft-c svg{box-sizing:content-box;width:18px;height:18px;padding:10px;margin-top:0;border-radius:50%;background:rgba(255,94,8,.12)}
.ft[data-v="1"] .ft-c a:hover{color:var(--orange)}
.ft1-st{margin-top:6px}
.ft1-st .cl3-now{font-size:15px}
.ft[data-v="1"] .ft-c .ft1-soft{margin-top:2px;font-size:15px;color:rgba(255,255,255,.55)}
.ft[data-v="1"] .ft-bot{align-items:center}
.ft1-up{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff!important;font-weight:600;transition:background .3s,border-color .3s}
.ft1-up:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}
.ft1-up svg{transition:transform .35s var(--ease)}
.ft1-up:hover svg{transform:translateY(-3px)}
.ft[data-v="1"] .ft-bot>span:last-child{display:inline-flex;align-items:center;gap:24px;flex-wrap:wrap}
@media (max-width:900px){
  .ft[data-v="1"] .ft-grid{grid-template-columns:1fr 1fr;gap:44px 0}
  .ft[data-v="1"] .ft-grid>div{padding:0}
  .ft[data-v="1"] .ft-grid>div+div{border-left:0}
  .ft[data-v="1"] .ft-grid>div:nth-child(3){padding-left:20px}
  .ft[data-v="1"] .ft-grid>div:last-child{padding-top:36px;border-top:1px solid rgba(255,255,255,.1)}
  .rv3-sc{flex-wrap:wrap;row-gap:16px}
  .rv3-sc .vx-lk{flex-basis:100%;white-space:nowrap}
  .rv3-sc span{border-right:0;padding-right:0}
}
/* about 3 (ab4), refined: photos stay in colour and brighten as they pass the centre; details and actions wait for the last word */
@media (min-width:901px){
  .ab4-st{--sc:clamp(200px,calc(20vw*var(--vz,1)),320px);padding:0 clamp(28px,calc(3.2vw*var(--vz,1)),60px)}
  .ab4-t{gap:20px}
  .ab4-t img{border-radius:24px;transition:none}
  .ab4-txt{font-size:clamp(30px,calc(3vw*var(--vz,1)),46px);line-height:1.22}
  .ab4-txt .w{color:#383838}
  .ab4-f{opacity:0;transform:translateY(18px);margin-top:48px;transition:opacity .7s ease,transform .8s var(--ease)}
  .ab4-a{display:flex;justify-content:center;gap:14px;margin-top:28px;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .7s ease .15s,transform .8s var(--ease) .15s}
  .ab4.done .ab4-f,.ab4.done .ab4-a{opacity:1;transform:none;pointer-events:auto}
}
@media (max-width:900px){
  .ab4-a{display:flex;flex-direction:column;gap:12px;margin-top:28px}
  .ab4-a>*{width:100%;justify-content:space-between}.ab4-a .ab2-d{justify-content:center}
}
/* reviews option 3 (base): ruled editorial wall, one featured quote */
.rv1-sc{display:flex;align-items:center;gap:20px;justify-self:end;padding-bottom:8px}
.rv1-sc strong{font-size:88px;line-height:.85;font-weight:700;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.rv1-sc span{display:flex;flex-direction:column;gap:8px}
.rv1-sc small{white-space:nowrap;font-size:16px;color:rgba(255,255,255,.62)}
.rv1-lk{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;margin-left:20px;padding:0 0 0 28px;height:56px;border-left:1px solid rgba(255,255,255,.14);color:#fff;font-weight:500;font-size:17px}
.rv1-lk svg{color:var(--orange);transition:transform .3s var(--ease)}.rv1-lk:hover svg{transform:translateX(4px)}
.rv1-st{display:inline-flex;gap:3px;color:var(--orange);font-style:normal}
.rv1-g{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;margin-top:64px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:28px;overflow:hidden}
.rv1-c{grid-column:span 4;display:flex;flex-direction:column;gap:22px;padding:36px 36px 32px;background:#0A0A0A;transition:background .4s ease}
.rv1-c:hover{background:#121212}
.rv1-c p{flex:1;margin:0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.86)}
.rv1-c footer{display:flex;align-items:center;gap:14px;font-size:15px;color:rgba(255,255,255,.55)}
.rv1-c footer span{display:flex;flex-direction:column;gap:2px}
.rv1-c footer b{font-size:16px;color:#fff;font-weight:600}
.rv1-c .vx-av{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;font-style:normal;font-weight:600;background:#1C1C1C;color:#fff;transition:background .4s ease,color .4s ease}
.rv1-c:hover .vx-av{background:var(--orange);color:#0A0A0A}
.rv1-f{grid-column:span 8;grid-row:span 2;justify-content:space-between;gap:40px;padding:56px;background:#101010}
.rv1-f:hover{background:#141414}
.rv1-qg{color:var(--orange)}
/* the grid comes in as one block, so its gray hairline background never shows through cards still fading in */
.js .rv1-g .rv-up{opacity:1;transform:none;transition:background .4s ease}
.rv1-f blockquote{margin:0;font-size:clamp(30px,calc(2.7vw*var(--vz,1)),44px);line-height:1.25;letter-spacing:-.02em;font-weight:500;color:#fff}
.rv1-f blockquote em{font-style:normal;color:var(--orange)}
.rv1-f footer{padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.rv1-f .vx-av{width:56px;height:56px;font-size:20px;background:var(--orange);color:#0A0A0A}
.rv1-f footer b{font-size:18px}
.rv1-f .rv1-st{margin-left:auto}
@media (max-width:1100px){.rv1-c{grid-column:span 6}.rv1-f{grid-column:span 12;grid-row:auto}.rv1-sc strong{font-size:64px}}
@media (max-width:900px){
  .rvw .sh{grid-template-columns:1fr}
  .rv1-sc{justify-self:start;flex-wrap:wrap;gap:16px}
  .rv1-lk{flex-basis:100%;margin:0;padding:0;height:auto;border:0}
  .rv1-g{grid-template-columns:1fr;margin-top:40px;border-radius:22px}
  .rv1-c,.rv1-f{grid-column:auto;padding:28px 24px}
  .rv1-f{gap:28px}.rv1-f blockquote{font-size:26px}
  .rv1-f .rv1-st{display:none}
  .rv1-c:nth-child(n+6){display:none}
}
/* contact 4: option 3's ways in, then the details as open rows instead of a second row of cards */
.cl4-l{margin-top:72px;border-top:1px solid rgba(255,255,255,.14)}
.cl4-r{display:grid;grid-template-columns:160px minmax(0,1fr) auto;align-items:center;gap:32px;padding:30px 4px;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;transition:padding .45s var(--ease)}
.cl4-r small{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.cl4-r b{font-size:clamp(24px,calc(2.2vw*var(--vz,1)),34px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.cl4-r em{display:inline-flex;align-items:center;gap:10px;font-style:normal;font-size:17px;font-weight:600;color:rgba(255,255,255,.7);transition:color .3s}
.cl4-r em svg{transition:transform .35s var(--ease)}
a.cl4-r:hover{padding-left:16px;padding-right:16px}
a.cl4-r:hover em{color:var(--orange)}
a.cl4-r:hover em svg{transform:translate(3px,-3px)}
.cl4-h{flex-direction:column;align-items:flex-end!important;gap:6px!important}
.cl4-h u{text-decoration:none;font-weight:400}
.cl4-h .cl3-now{color:#fff}
/* contact 3: three big ways in, then the practical details */
.cl3 .wrap{text-align:left}
.cl3-h .ty{font-size:clamp(48px,calc(6vw*var(--vz,1)),96px);letter-spacing:-.035em;line-height:.98}
.cl3-lead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:28px;font-size:clamp(20px,calc(1.6vw*var(--vz,1)),24px);line-height:1.4;color:#fff}
.cl3-lead span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--orange);color:var(--orange);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.cl3-lead span+*,.cl3-lead span:not(:first-child){margin-left:6px}
.cl3-g{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;margin-top:64px}
.cl3-c{display:flex;flex-direction:column;justify-content:space-between;gap:72px;min-height:340px;padding:32px;border-radius:28px;background:#141414;border:1px solid rgba(255,255,255,.08);color:#fff;text-align:left;transition:background .35s,border-color .35s,transform .45s var(--ease)}
.cl3-top{display:flex;justify-content:space-between;align-items:flex-start}
.cl3-top i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.07);color:var(--orange)}
.cl3-top em{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;color:#0A0A0A;transition:transform .45s var(--ease)}
.cl3-b{display:flex;flex-direction:column;gap:10px}
.cl3-b small{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cl3-b b{font-size:clamp(28px,calc(2.4vw*var(--vz,1)),38px);font-weight:600;letter-spacing:-.02em;line-height:1.08;font-variant-numeric:tabular-nums}
.cl3-b>span{font-size:17px;line-height:1.5;color:rgba(255,255,255,.7);max-width:360px}
.cl3-c:hover{transform:translateY(-6px);background:#1A1A1A;border-color:rgba(255,255,255,.16)}
.cl3-c:hover .cl3-top em{transform:rotate(-45deg)}
.cl3-c.pri{background:var(--orange);border-color:var(--orange);color:#0A0A0A}
.cl3-c.pri:hover{background:#FF7A2E;border-color:#FF7A2E}
.cl3-c.pri .cl3-top i{background:rgba(0,0,0,.12);color:#0A0A0A}
.cl3-c.pri .cl3-top em{background:#0A0A0A;color:#fff}
.cl3-c.pri small{color:rgba(0,0,0,.62)}
.cl3-c.pri .cl3-b>span{color:rgba(0,0,0,.74)}
.cl3-c.wa .cl3-top i{color:#25D366}
.cl3-info{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border-radius:28px;border:1px solid rgba(255,255,255,.1);overflow:hidden}
.cl3-i{display:flex;gap:20px;padding:32px;color:#fff;transition:background .3s}
.cl3-i+.cl3-i{border-left:1px solid rgba(255,255,255,.1)}
a.cl3-i:hover{background:#141414}
.cl3-i>i{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.16);color:var(--orange)}
.cl3-i>span{display:flex;flex-direction:column;gap:8px;min-width:0}
.cl3-i small{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cl3-i b{font-size:19px;word-break:normal;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.cl3-i u{display:inline-flex;align-items:center;gap:6px;margin-top:6px;text-decoration:none;font-size:16px;font-weight:600;color:var(--orange)}
.cl3-i u svg{transition:transform .3s var(--ease)}
a.cl3-i:hover u svg{transform:translate(2px,-2px)}
.cl3-i .cl3-sub{color:rgba(255,255,255,.7);font-weight:400}
.cl3-now{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-size:16px;font-weight:600;color:#fff}
.cl3-now::before{content:"";width:8px;height:8px;border-radius:50%;background:#3DDC84}
.cl3-now.off::before{background:rgba(255,255,255,.4)}
@media (max-width:900px){
  .ab:not([data-v="1"]):not([data-v="5"]),.rvw,.cl:not([data-v="1"]):not([data-v="5"]){padding-block:88px}
  .rv2-g,.cl2-g{grid-template-columns:1fr;gap:44px}
  .ab3-strip{grid-template-columns:1fr 1fr}
  .ab3-f{grid-template-columns:1fr 1fr}
  .cl3-g,.cl3-info{grid-template-columns:1fr}
  .cl4-r{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .cl4-r b{font-size:22px;overflow-wrap:anywhere}
  .cl4-h{align-items:flex-start!important}
  a.cl4-r:hover{padding-left:0;padding-right:0}
  .cl3-c{min-height:0;gap:40px;padding:26px}
  .cl3-i+.cl3-i{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .cl3-i{padding:24px}
  .cl3-i b{font-size:17px;overflow-wrap:normal}
  .rv2-q{padding:36px 28px 104px}
  .rv2-nav{left:28px;right:auto;bottom:28px}
  .rv3-h,.cl3-h{flex-direction:column;align-items:flex-start}
  .rv3-c{width:300px}
  .cl2-ph{min-height:420px}
}
@media (max-width:560px){.ab3-f{grid-template-columns:1fr}}
/* how it works: the lead reads at full strength, option 1 keeps its button beside it */
.hw .sh .lead{font-size:clamp(20px,calc(1.6vw*var(--vz,1)),24px);line-height:1.5;color:#1A1A1A;max-width:560px}
.hw-cta2{display:none}
.hw:is([data-v="1"],[data-v="6"]) .hw-cta{display:none}
.hw:is([data-v="1"],[data-v="6"]) .hw-cta2{display:flex;width:100%;max-width:560px;margin-top:32px}
.hw:is([data-v="1"],[data-v="6"]) .hw-act{flex-direction:column;align-items:flex-start;gap:0;max-width:600px;margin-top:36px}
.hw-btns{display:flex;align-items:center;flex-wrap:wrap;gap:28px}
.hw-call{display:flex;align-items:center;gap:14px;color:#0A0A0A}
.hw-call i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(10,10,10,.16);transition:background .3s,border-color .3s,color .3s}
.hw-call span{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.hw-call small{font-size:15px;color:rgba(10,10,10,.6)}
.hw-call b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.hw-call:hover i{background:#0A0A0A;border-color:#0A0A0A;color:#fff}
.hw-note{width:100%;margin-top:28px;padding-top:20px;border-top:1px solid rgba(10,10,10,.12);font-size:16px;color:rgba(10,10,10,.64)}
@media (max-width:900px){.hw-btns{width:100%;gap:20px}.hw-btns .ab2-q{width:100%;justify-content:space-between}}

/* footer options */
.ft:not([data-v="1"]){padding-top:110px}
.ft .fx-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:80px;padding:28px 0 36px;border-top:1px solid rgba(255,255,255,.12);font-size:15px;color:rgba(255,255,255,.55)}
.fx-up{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600}
.fx-up svg{color:var(--orange);transition:transform .3s var(--ease)}
.fx-up:hover svg{transform:translateY(-3px)}
.ft .vx h3{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.ft .vx ul{gap:14px}
.ft .vx ul a,.ft .vx ul span{font-size:17px;color:#E4E4E4;line-height:1.45}
.ft .vx ul a:hover{color:var(--orange)}
.fx-lg{width:120px}
.fx-h2{margin-top:36px}
.fx-p{margin-top:18px;font-size:17px;line-height:1.6;color:#E4E4E4}
@media (max-width:900px){
}

/* about 4: pinned statement, words light up on scroll, photo reels run past on both sides */
[data-sw][data-v="4"]>.vx[data-o="4"]{display:block}
.ab[data-v="4"]{padding:0;height:calc(220vh*var(--vz,1));overflow:clip}
.ab[data-v="4"]>.ab4{height:100%}
.ab:not([data-v="1"]):not([data-v="5"])::after{display:none}

.ab4-mid{padding-top:56px}
.ab4-st{position:sticky;top:0;height:calc(100vh*var(--vz,1));height:calc(100svh*var(--vz,1));display:grid;grid-template-columns:var(--sc) minmax(0,1fr) var(--sc);align-items:center;gap:0;--sc:clamp(170px,calc(19vw*var(--vz,1)),310px);padding:0 clamp(16px,calc(2.4vw*var(--vz,1)),40px)}
.ab4-reel{height:100%;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.ab4-t{display:flex;flex-direction:column;gap:16px;will-change:transform}
.ab4-t img{display:block;flex:none;width:100%;height:max(calc(var(--sc) * 1.3),calc(34vh*var(--vz,1)));object-fit:cover;border-radius:18px;filter:grayscale(1) brightness(.5);transition:filter .8s ease}
.ab4-t img.on{filter:none}
.ab4-mid{padding:0 clamp(32px,calc(5vw*var(--vz,1)),96px);text-align:center}
.ab4-txt{max-width:860px;margin:28px auto 0;font-size:clamp(28px,calc(3.2vw*var(--vz,1)),50px);line-height:1.2;font-weight:500;letter-spacing:-.022em}
.ab4-txt .w{color:#2E2E2E;transition:color .3s ease}
.ab4-txt .w.on{color:#fff}
.ab4-txt em{font-style:normal}
.ab4-txt em .w.on{color:var(--orange)}
.ab4-f{display:grid;grid-template-columns:1.25fr 1fr 1fr;width:min(820px,100%);margin:56px auto 0;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.03);opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s var(--ease)}
.ab4.done .ab4-f{opacity:1;transform:none}
.ab4-f>div{display:grid;grid-template-columns:44px auto;column-gap:16px;align-items:center;align-content:center;padding:22px 24px;text-align:left}
.ab4-f i{grid-row:1/3}
.ab4-f dt{align-self:end}
.ab4-f dd{align-self:start}
.ab4-f>div+div{border-left:1px solid rgba(255,255,255,.12)}
.ab4-f i{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,94,8,.12);color:var(--orange)}
.ab4-f i svg{width:20px;height:20px}
.ab4-f dt{margin-top:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ab4-f dd{margin-top:4px;font-size:16px;line-height:1.4;color:#fff;white-space:nowrap}
@media (max-width:900px){
  .ab[data-v="4"]{height:auto;padding:88px 0}
  .ab[data-v="4"]>.ab4{height:auto}
  .ab4-st{position:static;height:auto;display:block;padding:0}
  .ab4-reel{-webkit-mask-image:none;mask-image:none;overflow:hidden}
  .ab4-t{flex-direction:row;gap:10px;width:max-content}
  .ab4-t img{width:calc(44vw*var(--vz,1));height:auto;aspect-ratio:4/5;border-radius:14px}
  .ab4-mid{padding:56px 20px}
  .ab4-f{grid-template-columns:1fr;gap:0}
  .ab4-f>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .ab4-f dd{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.ab4-txt .w{color:#fff}.ab4-t img{filter:none}.ab4-f{opacity:1;transform:none}}
/* every small uppercase label (Address, Languages, Hours, Call, Email...) is white, site-wide */
.ab-facts dt,.ab .ab-facts dt,.ab2-f dt,.ab3-f dt,.ab4-f dt,.cl-facts dt,.ft[data-v="1"] .ft-c b,.cl2-ph small,.cl3-b small,.cl3-i small,.cl4-r small,.ft h3,.ft .vx h3,.ab2-m figcaption small,.mega-hd,.sugg p,.stats span,.rvn span{color:#fff}
.ft-bot a.ft-home,.fx-bot a.ft-home{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:4px;transition:color .3s,text-decoration-color .3s}.ft-bot a.ft-home:hover,.fx-bot a.ft-home:hover{color:#fff;text-decoration-color:#fff}
.ft[data-v="1"] .ft-bot>span:last-child{display:inline;gap:0}

/* About option 5: option 1 layout over a darkened loop of the crew at work */
.ab[data-v="5"]>img{display:none}
.ab[data-v="5"]::after{display:none}
/* layout 2: heading on top of the left column, the crew video as a card under it */
.ab5-m{display:none;position:relative;margin-top:40px;aspect-ratio:4/3;border-radius:28px;overflow:hidden;background:#161616}
.ab[data-v="5"] .ab5-m{display:block}
.ab[data-v="5"]>.wrap{align-items:start}
@media (min-width:901px){.ab[data-v="5"]>.wrap{align-items:stretch}.ab[data-v="5"]>.wrap>div:first-child{display:flex;flex-direction:column}.ab[data-v="5"] .ab5-m{flex:1;aspect-ratio:auto;min-height:360px}}
.ab5-v{display:block;width:100%;height:100%;object-fit:cover}
.ab5-m.play::after,.ab5-m.play .ab5-p{opacity:0;pointer-events:none}
.ab5-in{position:absolute;inset:0;z-index:4;background:#000;transition:opacity .4s}
.ab5-in video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.ab5-in .vm-fx{width:72px;height:72px;margin:-36px 0 0 -36px}.ab5-in .vm-s{left:12px;bottom:12px;width:40px;height:40px}
.ab5-m::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,10,10,.78) 100%);pointer-events:none}
.ab5-m .ab5-p{display:flex;left:28px;bottom:28px;top:auto}
@media (max-width:700px){.ab5-m{margin-top:28px;border-radius:24px}.ab5-m .ab5-p{left:20px;bottom:20px}.ab5-pc{width:56px;height:56px}.ab5-pc svg{width:22px;height:22px}}

/* one layout switcher for the whole page, docked on the right; the per-section pills give way to it */
.rsw{display:none!important}
/* page-wide layout dock: one icon per section on the right edge; it opens leftward into a panel with real previews of each layout */
.lsd{position:fixed;z-index:70;right:16px;top:50%;transform:translateY(-50%);display:flex;align-items:stretch;border-radius:20px;background:rgba(16,16,16,.9);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 48px rgba(0,0,0,.45);color:#fff;font:400 15px/1.3 Archivo,system-ui,sans-serif;transition:opacity .3s,transform .45s cubic-bezier(.22,1,.36,1),visibility .45s}
.lsd-fly{position:fixed;z-index:71;right:96px;top:0;width:292px;padding:20px 20px 22px;border-radius:20px;background:rgba(20,20,20,.94);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 56px rgba(0,0,0,.5);color:#fff;font:400 15px/1.3 Archivo,system-ui,sans-serif;opacity:0;visibility:hidden;transform:translateX(10px) scale(.97);transform-origin:right center;transition:opacity .2s,transform .35s cubic-bezier(.22,1,.36,1),visibility .35s,top .38s cubic-bezier(.22,1,.36,1)}
.lsd-fly.on{opacity:1;visibility:visible;transform:none}
/* a tall card (the rotating words) stays inside the screen and scrolls, with room at the bottom */
.lsd-fly{box-sizing:border-box;max-height:calc(calc(100vh*var(--vz,1)) - 24px);overflow:hidden auto;overscroll-behavior:contain;padding-bottom:32px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.lsd-fly::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:28px}
.lsd-wm{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.lsd-wm label{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:600;color:#fff}
.lsd-wm output{font-size:15px;font-weight:500;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.lsd-wm input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:8px 0 4px;background:none;cursor:pointer}
.lsd-wm input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#8fb4e0,#e8e8e8 50%,#ff9a4d)}
.lsd-wm input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#8fb4e0,#e8e8e8 50%,#ff9a4d)}
.lsd-wm input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:#fff;border:3px solid var(--orange)}
.lsd-wm input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--orange)}
.lsd-wm-k{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:rgba(255,255,255,.62)}
.lsd-wm-k button{padding:4px 10px;border:0;border-radius:8px;background:none;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.lsd-wm-k button:hover{background:rgba(255,255,255,.1)}
.lsd-hz input[type=range]::-webkit-slider-runnable-track{background:rgba(255,255,255,.28)}
.lsd-hz input[type=range]::-moz-range-track{background:rgba(255,255,255,.28)}
.lsd-lg{display:grid;gap:6px;margin-top:14px;font-size:15px;color:rgba(255,255,255,.75)}
.lsd-lg span{display:flex;align-items:center;gap:10px}.lsd-lg b{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.12);color:#fff;font-size:13px}
/* chat window: a light edge so it reads on the black sections too; inside stays as it is */
@media (min-width:761px){html body .drawer{border-color:rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 28px 80px rgba(0,0,0,.6),0 4px 16px rgba(0,0,0,.4)}
  /* chat option 2: the page behind dims and blurs while the chat is open */
  body::before{content:"";position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s}
  body.chat-open:has(#drawer[data-v="2"])::before{opacity:1;visibility:visible;transition:opacity .35s ease}
  body.chat-open:has(#drawer[data-v="2"]) .fab{z-index:95}}
/* the booking link (?book-appointment): on a computer the page behind blurs and the chat comes in with a spring */
@media (min-width:761px){
  body.chat-book.chat-open::before{opacity:1;visibility:visible;transition:opacity .5s ease}
  body.chat-book.chat-open .fab{z-index:95}
  body.chat-book .scrim{display:block;z-index:84;background:transparent}
  body.chat-book .drawer{transform:translateY(48px) scale(.86)}
  body.chat-book.chat-open .drawer{transform:none;transition:transform .62s cubic-bezier(.34,1.45,.5,1),opacity .28s ease}}
@media (min-width:761px) and (prefers-reduced-motion:reduce){body.chat-book .drawer,body.chat-book.chat-open .drawer{transform:none;transition:opacity .2s ease}}
.lsd-rw ul{list-style:none;margin:10px -8px 0;padding:0;max-height:300px;overflow-y:auto}
.lsd-rw li{position:relative;display:flex;align-items:center;gap:10px;height:44px;padding:0 4px 0 8px;border-radius:10px;transition:background .2s}
.lsd-rw li:hover{background:rgba(255,255,255,.06)}
.lsd-rw li.now::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--orange)}
.lsd-rw .sw{position:relative;flex:none;width:34px;height:20px;border:0;border-radius:10px;background:rgba(255,255,255,.18);cursor:pointer;transition:background .2s}
.lsd-rw .sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.lsd-rw .sw[aria-checked="true"]{background:var(--orange)}.lsd-rw .sw[aria-checked="true"]::after{transform:translateX(14px)}
.lsd-rw .ed{flex:1;min-width:0;height:32px;margin:0;padding:0 8px;border:1px solid transparent;border-radius:8px;background:none;color:#fff;font:inherit;font-size:15px;font-weight:500;text-align:left;transition:border-color .2s,background .2s,opacity .2s}
.lsd-rw .ed:hover{border-color:rgba(255,255,255,.14)}
.lsd-rw .ed:focus{outline:0;border-color:var(--orange);background:rgba(255,255,255,.06)}
.lsd-rw li.off .ed{opacity:.45}
.lsd-rw .rm{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:none;color:rgba(255,255,255,.5);cursor:pointer;opacity:0;transition:opacity .2s,background .2s,color .2s}
.lsd-rw li:hover .rm,.lsd-rw .rm:focus-visible{opacity:1}.lsd-rw .rm:hover{background:rgba(255,255,255,.1);color:#fff}
.lsd-rw .rm:disabled{display:none}
.lsd-rw form{position:relative;margin-top:10px}
.lsd-rw form input{display:block;width:100%;height:40px;box-sizing:border-box;padding:0 46px 0 12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:15px}
.lsd-rw form input::placeholder{color:rgba(255,255,255,.45)}
.lsd-rw form input:focus{outline:0;border-color:var(--orange)}
.lsd-rw form button{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:7px;background:var(--orange);color:#0A0A0A;cursor:pointer}
.lsd-rw form button:disabled{background:rgba(255,255,255,.12);color:rgba(255,255,255,.4);cursor:default}
.lsd-rw .hint{margin:8px 0 0;font-size:15px;color:rgba(255,255,255,.5)}
/* About layout 2 on desktop: the video comes in as the last letter of "Based in Peabody" lands (its last letter starts at .75s) */
@media (min-width:901px){.js #about[data-v="5"]:not(.hin) .ab5-m.rv-st{opacity:0;animation:none}.js #about[data-v="5"].hin .ab5-m.rv-st.in{--rd:.75s!important;animation-duration:.6s}}
@media (min-width:761px){html body .h-hA .h-nv,html body .h-hA .h-i3{zoom:var(--hz,1.07)}}
.lsd-pg{display:none}
.lsd-pg.on{display:block;animation:lsdIn .3s cubic-bezier(.22,1,.36,1)}
@keyframes lsdIn{from{opacity:0;transform:translateY(var(--dy,6px))}}
.lsd-pg h4{font-size:18px;font-weight:700;letter-spacing:-.01em}
.lsd-pg p{margin:3px 0 16px;font-size:15px;color:rgba(255,255,255,.62)}
.lsd-th{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lsd-t{position:relative;padding:0;border:1.5px solid rgba(255,255,255,.12);border-radius:12px;background:#1d1d1d;cursor:pointer;overflow:hidden;transition:border-color .2s,transform .3s cubic-bezier(.22,1,.36,1)}
.lsd-t svg{display:block;width:100%;height:auto}
.lsd-t b{position:absolute;right:6px;bottom:6px;min-width:20px;padding:0 5px;border-radius:6px;background:rgba(0,0,0,.72);font-size:15px;font-weight:700;line-height:20px;text-align:center;color:#fff}
.lsd-t.on b{background:var(--orange)}
.lsd-t:hover{border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.lsd-t.on{border:2px solid var(--orange)}
/* the active layout reads on any thumbnail, orange ones too: a white ring off the edge, a white number, the others dimmed */
.lsd-t{opacity:.5;transition:opacity .15s ease,transform .15s ease,border-color .15s ease}.lsd-t:hover,.lsd-t:focus-visible{opacity:.85}
.lsd-t.on{opacity:1;border-color:#fff;outline:2px solid #fff;outline-offset:3px}
.lsd-t.on b{background:#fff;color:#0a0a0a}
/* hide or show the whole section from its card */
.lsd-hd{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;margin-top:12px;padding:0 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:none;color:#fff;font-family:inherit;font-size:15px;font-weight:500;line-height:1;cursor:pointer;transition:background .2s,border-color .2s}
.lsd-hd:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.32)}
.lsd-hd svg{width:18px;height:18px;flex:none}
.lsd-hd[aria-pressed="true"]{border-color:var(--orange);background:var(--orange);color:#0a0a0a}
.lsd-i.off{opacity:.35}
.sw-off{display:none!important}
.lsd-ic{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px}
.lsd-mk{position:absolute;right:-1px;top:0;width:3px;height:22px;border-radius:2px;background:var(--orange);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.lsd-i{display:grid;place-items:center;width:48px;height:52px;padding:0;border:0;border-radius:13px;background:none;color:rgba(255,255,255,.6);cursor:pointer;transition:background .2s,color .2s}
.lsd-i svg{width:22px;height:22px}
.lsd-i:hover,.lsd-i.cur{color:#fff;background:rgba(255,255,255,.09)}
.lsd-i.here{color:#fff}
.lsd-x{display:grid;place-items:center;width:48px;height:30px;margin-top:2px;padding:0;border:0;border-top:1px solid rgba(255,255,255,.1);background:none;color:rgba(255,255,255,.45);cursor:pointer;transition:color .2s}
.lsd-x:hover{color:#fff}
.lsd-x svg{width:16px;height:16px}
.lsd-tab{position:fixed;z-index:70;right:0;top:50%;transform:translateY(-50%);display:none;place-items:center;width:28px;height:52px;padding:0;border:1px solid rgba(255,255,255,.12);border-right:0;border-radius:12px 0 0 12px;background:rgba(16,16,16,.85);color:rgba(255,255,255,.7);cursor:pointer;opacity:.6;transition:opacity .2s,width .25s cubic-bezier(.22,1,.36,1)}
.lsd-tab:hover,.lsd-tab:focus-visible{opacity:1;width:36px;color:#fff}
html.gsw-c .lsd{opacity:0;transform:translate(24px,-50%);pointer-events:none;visibility:hidden}
html.gsw-c .lsd-tab{display:grid}
@media (max-width:700px){.lsd{right:10px}.lsd-ic{padding:6px}.lsd-i{width:42px;height:44px}.lsd-x{width:42px}.lsd-fly{right:76px;width:min(264px,calc(100vw*var(--vz,1)) - 92px);padding:16px}.lsd-th{gap:8px}}

/* back to top: bottom left, from the second section on */
.btt{position:fixed;z-index:65;left:24px;bottom:24px;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(16,16,16,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1),border-color .2s,background .2s}
.btt.on{opacity:1;transform:none;pointer-events:auto}
.btt:hover{border-color:var(--orange);background:var(--orange);color:#111}
@media (max-width:700px){.btt{left:16px;bottom:16px;width:44px;height:44px}}

/* About option 1: same breathing room between the kicker and the title as the other sections */
.ab>.wrap .kic{margin-bottom:18px}
.ggw{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:0!important;white-space:nowrap}
.gg{display:inline-block;flex:none;width:1.05em;height:1.05em;margin-right:.45em}
/* contact 2: option 1 with the boxed info cards of option 3 */
.cl5-info{display:none!important}
.cl[data-v="5"] .cl5-info{display:grid!important;margin:96px 0;text-align:left}
.cl[data-v="5"] .cl-facts{display:none}
@media (max-width:760px){.cl[data-v="5"] .cl5-info{margin:64px 0}}
/* phone: the icon sits on top and each contact line sizes itself to the card, so the email stays on one line inside it */
@media (max-width:900px){
  .cl3-i{flex-direction:column;gap:16px;container-type:inline-size}
  .cl3-i b{font-size:clamp(15px,6.7cqi,20px);letter-spacing:-.01em;overflow-wrap:anywhere}
  .cl-facts>div{container-type:inline-size}
  .cl-facts dd{font-size:clamp(15px,6.7cqi,20px)}
}
/* the email is the longest line: its card gets the extra width so it stays on one line, address and hours keep plenty */
@media (min-width:1101px){html body .cl3-info{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr)}html body .cl3-info a[href^="mailto"] b{white-space:nowrap}}
/* about layout 2: play button over the video band, opens the full video */
.ab5-p{display:none;position:absolute;z-index:3;align-items:center;gap:16px;padding:0;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer}
.ab5-pc{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--orange);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.ab5-pc svg{display:block;width:24px;height:24px}
.ab5-pc::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,94,8,.55);animation:ab5p 2.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes ab5p{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.3);opacity:0}}
.ab5-pt{display:flex;flex-direction:column;gap:2px}
.ab5-pt b{font-size:18px;font-weight:600;letter-spacing:-.005em}
.ab5-pt small{font-size:15px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.ab5-p:hover .ab5-pc{transform:scale(1.08)}
.ab5-p:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:40px}
@media (prefers-reduced-motion:reduce){.ab5-pc::before{animation:none}}
.vm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:#000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.vm.on{opacity:1;visibility:visible}
.vm-b{position:relative;width:min(1200px,100%);aspect-ratio:1920/864;background:#000;border-radius:12px;overflow:hidden;transform:scale(.96);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.vm.on .vm-b{transform:none}
.vm-b video,.vm-b iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vm-x{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(20,20,20,.8);color:#fff;cursor:pointer;transition:background .2s}
.vm-x:hover{background:#333}
.vm-x svg{width:20px;height:20px}
@media (max-width:700px){.vm{padding:16px}.vm-x{top:16px;right:16px}}
.vm-b video{cursor:pointer}
.vm-fx{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;display:grid;place-items:center;border-radius:50%;background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;opacity:0;pointer-events:none}
.vm-fx svg{display:block;width:34px;height:34px}
.vm-fx.hold{animation:vmIn .32s cubic-bezier(.22,1,.36,1) forwards}
.vm-fx.pop{animation:vmPop 1.2s cubic-bezier(.22,1,.36,1) forwards}
@keyframes vmIn{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
@keyframes vmPop{0%{opacity:0;transform:scale(.6)}18%{opacity:1;transform:scale(1)}65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.vm-s{position:absolute;left:16px;bottom:18px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(15,15,15,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;transition:background .2s,transform .2s}
.vm-s:hover{background:rgba(50,50,50,.85);transform:scale(1.06)}
.vm-s svg{display:block;width:20px;height:20px}
.vm-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)}
.vm-bar i{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}

/* About text: owner's note with an orange rule that runs 24px past the text */
.ab-tt{margin:0 0 56px;font-size:46px;line-height:1.05;font-weight:700;letter-spacing:-.035em;color:#fff}.ab-tt span,.ab-tt b{color:var(--orange)}
.ab-l{position:relative;padding-left:28px;margin:0 0 72px}
.ab-l::before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:2px;border-radius:2px;background:var(--orange)}
.ab .ab-r .ab-l1{margin:0;font-size:26px;line-height:1.35;font-weight:500;letter-spacing:-.018em;color:#fff;text-wrap:balance}
.ab .ab-r .ab-l2{margin:18px 0 0;font-size:19px;line-height:1.55;letter-spacing:-.005em;color:rgba(255,255,255,.86);text-wrap:pretty}
.ab-l2 b{color:#fff;font-weight:600}
.ab-l .ab2-sig{margin-top:32px}
@media (max-width:900px){.ab-l{padding-left:22px;margin-bottom:56px}.ab .ab-r .ab-l1{font-size:22px}.ab .ab-r .ab-l2{font-size:17px}.ab-tt{font-size:36px;margin-bottom:44px}}

/* About layouts 1 and 2 on desktop: less empty band above the text */
@media (min-width:901px){.ab[data-v="1"],.ab[data-v="5"]{min-height:0}.ab[data-v="1"]>.wrap,.ab[data-v="5"]>.wrap{padding-top:96px}}

/* contact map: MapLibre dark map with the shop card laid over it, loaded when it comes near */
.cl .mp{position:relative;height:calc(62svh*var(--vz,1));min-height:520px;max-height:680px;background:#0e0e0e;overflow:hidden}
.mp .m{position:absolute;inset:0}.mp-fail{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;color:rgba(255,255,255,.65);font-size:16px}.mp-fail a{color:var(--orange);font-weight:600;text-decoration:underline}
.mp::before,.mp::after{content:"";position:absolute;left:0;right:0;height:96px;z-index:1;pointer-events:none}
.mp::before{top:0;background:linear-gradient(#0A0A0A,rgba(10,10,10,0))}
.mp::after{bottom:0;background:linear-gradient(rgba(10,10,10,0),#0A0A0A)}
.mp .fl{position:absolute;top:0;bottom:0;left:0;width:62%;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,10,.96),rgba(10,10,10,.85) 50%,rgba(10,10,10,0))}
.mp-c{position:absolute;z-index:2;left:calc((100% - min(var(--wrap),100% - 80px))/2);top:50%;transform:translateY(-50%);width:440px}
.mp-k{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.mp-k svg{width:18px;height:18px;color:var(--orange)}
.mp-a{display:block;font-size:60px;line-height:.98;font-weight:600;letter-spacing:-.045em;margin-top:22px;color:#fff}
.mp-a span{display:block;color:rgba(255,255,255,.42)}
.mp-t{display:flex;align-items:baseline;gap:6px;margin-top:22px;font-style:normal;font-size:22px;color:#fff;letter-spacing:-.01em}
.mp-t b{font-weight:600}
.mp-t span{font-weight:400;font-variant-numeric:tabular-nums}
.mp-h{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:28px;margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.mp-h div{display:flex;flex-direction:column;gap:4px}
.mp-h span{font-size:15px;color:rgba(255,255,255,.6)}
.mp-h [data-r="wk"] span,.mp-h [data-r="sat"] span{color:var(--orange);font-weight:600}
.mp-h b{font-size:16px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.mp-x{display:flex;align-items:center;gap:28px;margin-top:36px}
.mp-go{display:flex;align-items:center;gap:20px;padding:8px 8px 8px 22px;min-height:52px;border-radius:999px;background:var(--orange);color:#0A0A0A;font-weight:600;font-size:16px;text-decoration:none;transition:background .2s}
.mp-go:hover{background:#ff7629}
.mp-go i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#111;color:#fff}
.mp-go svg{transition:transform .25s}
.mp-go:hover svg{transform:translate(2px,-2px)}
.mp-tel{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:500;font-size:16px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:border-color .2s}
.mp-tel:hover{border-color:#fff}
.mp-tel svg{width:18px;height:18px}
.mp-pin{position:relative;width:64px;cursor:pointer}
.mp-pin img{display:block;width:60px;height:auto;margin:0 auto 10px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.65));animation:mpbob 3s ease-in-out infinite}
.mp-pin .sh{position:absolute;left:50%;bottom:-5px;width:30px;height:10px;margin-left:-15px;border-radius:50%;background:rgba(0,0,0,.7)}
.mp-pin .ring{position:absolute;left:50%;bottom:-8px;width:40px;height:16px;margin-left:-20px;border-radius:50%;border:1.5px solid var(--orange);animation:mprg 2.6s cubic-bezier(.22,1,.36,1) infinite;pointer-events:none}
@keyframes mpbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes mprg{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.mp-pin img,.mp-pin .ring{animation:none}}
.mp .maplibregl-ctrl-attrib{background:rgba(10,10,10,.7)!important;color:rgba(255,255,255,.6)!important;font-size:11px}
.mp .maplibregl-ctrl-attrib a{color:rgba(255,255,255,.7)!important}
.mp .maplibregl-ctrl-attrib-button{filter:invert(1)}
.mp .maplibregl-ctrl-bottom-right,.mp .maplibregl-ctrl-top-right{z-index:3}
.mp .maplibregl-ctrl-top-right{top:96px!important;right:24px!important}
.mp .maplibregl-ctrl-group{background:rgba(16,16,16,.96)!important;border:1px solid rgba(255,255,255,.12);border-radius:14px!important;box-shadow:none!important;overflow:hidden}
.mp .maplibregl-ctrl-group button{width:44px!important;height:44px!important}
.mp .maplibregl-ctrl-group button+button{border-top:1px solid rgba(255,255,255,.12)!important}
.mp .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
.mp .maplibregl-cooperative-gesture-screen{font-family:Archivo,sans-serif;font-size:16px;z-index:4}
@media (max-width:760px){
  .cl .mp{height:auto;min-height:0;max-height:none;overflow:visible;background:none}
  .mp .m{position:relative;height:440px}
  .mp::before,.mp::after{height:64px}
  .mp::after{bottom:auto;top:376px}
  .mp .fl{display:none}
  .mp .maplibregl-ctrl-top-right{top:72px!important;right:16px!important}
  .mp-c{position:relative;left:auto;top:auto;transform:none;width:auto;margin:-24px 24px 0;padding:8px 0 56px}
  .mp-a{font-size:44px}
  .mp-h{grid-template-columns:1fr;gap:12px}
  .mp-h div{flex-direction:row;justify-content:space-between}
  .mp-x{flex-direction:column;align-items:stretch;gap:20px}
  .mp-x .mp-go{justify-content:space-between}
  .mp-x .mp-tel{align-self:flex-start}
}
/* map at two thirds of its old height: the card tightens to fit */
.cl .mp{height:calc(41svh*var(--vz,1));min-height:380px;max-height:453px}
.mp::before,.mp::after{height:64px}
.mp .maplibregl-ctrl-top-right{top:64px!important}
.mp-a{font-size:48px;margin-top:16px}
.mp-t{margin-top:16px;font-size:20px}
.mp-h{margin-top:24px;padding-top:18px}
.mp-x{margin-top:24px}
@media (max-width:760px){
  .cl .mp{height:auto;min-height:0;max-height:none}
  .mp .m{height:293px}
  .mp::after{top:229px}
  .mp .maplibregl-ctrl-top-right{top:56px!important}
  .mp-a{font-size:40px}
}

/* follow our work: its own switcher, three layouts */
.fw{position:relative;margin:24px 0 96px;text-align:left}
.cl:not([data-v="1"]):not([data-v="5"])>.fw{margin-bottom:0}
.fw>div{display:none}.fw[data-v="1"]>.fw1,.fw[data-v="2"]>.fw2,.fw[data-v="3"]>.fw3{display:block}
.fw-in{width:min(var(--wrap),100% - 80px);margin-inline:auto}
.fw-k{font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0}
.fw-h{margin:16px 0 0;font-size:60px;font-weight:700;letter-spacing:-.035em;line-height:1.02;color:#fff}.fw-h b{color:var(--orange)}
.fw-ac{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fw-ig{display:inline-flex;align-items:center;gap:14px;min-height:72px;padding:0 9px 0 28px;border-radius:999px;background:var(--orange);color:#0A0A0A;font-size:19px;font-weight:600;transition:background .3s}.fw-ig:hover{background:#ff7629}
.fw-ig>svg{width:22px;height:22px}
.fw em{display:grid;place-items:center;flex:none;border-radius:50%;font-style:normal;transition:transform .35s}.fw a:hover em{transform:rotate(45deg)}
.fw-ig em{width:54px;height:54px;background:#0A0A0A;color:#fff;margin-left:8px}
.fw-sc{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);color:#fff;transition:border-color .3s,color .3s}.fw-sc:hover{border-color:var(--orange);color:var(--orange)}
.fw-sc svg{width:22px;height:22px}
/* 1: photos running behind */
.fw1{overflow:hidden}.fw-mq{padding:8px 0}.fw-tr{display:flex;gap:14px;width:max-content;animation:fwmq 60s linear infinite}
.fw-tr img{flex:none;width:300px;height:360px;border-radius:24px;object-fit:cover;display:block}
/* every photo in the strip opens the Instagram profile; the shade over them lets the clicks through, its buttons still take theirs and its text stays selectable, not a link */
.fw-tr>a{flex:none;display:block;border-radius:24px}.fw-ov{pointer-events:none}.fw-ov a,.fw-ov .fw-k,.fw-ov .fw-h{pointer-events:auto}.fw-ov .fw-k,.fw-ov .fw-h{cursor:text}
@keyframes fwmq{to{transform:translateX(-50%)}}@media (prefers-reduced-motion:reduce){.fw-tr{animation:none}}
.fw-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;background:rgba(10,10,10,.72)}
.fw-ov .fw-h{margin-bottom:32px}.fw-ov .fw-ac{justify-content:center}
/* 2: header and a row of photos */
.fw-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.fw-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:48px}
.fw-t{position:relative;display:block;aspect-ratio:1;border-radius:20px;overflow:hidden;color:#fff}
.fw-t img{width:100%;height:100%;object-fit:cover;display:block}
.fw-t::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.55);opacity:0;transition:opacity .3s}
.fw-t svg{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:1;opacity:0;transform:scale(.8);transition:.3s}
.fw-t:hover::after,.fw-t:hover svg{opacity:1}.fw-t:hover svg{transform:none}
/* 3: big named buttons */
.fw-g{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:center}
.fw-bt{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fw-pb{display:flex;align-items:center;gap:12px;min-height:84px;padding:0 12px 0 26px;border-radius:999px;border:1.5px solid rgba(255,255,255,.22);color:#fff;font-size:20px;font-weight:600;transition:border-color .3s,background .3s}
.fw-pb>svg{width:22px;height:22px;flex:none}
.fw-pb em{margin-left:auto;width:58px;height:58px;background:#1d1d1d;color:#fff}.fw-pb:hover{border-color:var(--orange)}
.fw-pb.on{background:var(--orange);border-color:var(--orange);color:#0A0A0A}.fw-pb.on em{background:#0A0A0A}.fw-pb.on:hover{background:#ff7629}
@media (max-width:980px){.fw-in{width:calc(100% - 48px)}.fw-g,.fw-bt{grid-template-columns:1fr}}
@media (max-width:760px){.fw{margin:16px 0 72px}.fw-h{font-size:40px}.fw-row{grid-template-columns:repeat(3,1fr);gap:10px}.fw-tr img{width:240px;height:400px}.fw-ov .fw-h{margin-bottom:24px}.fw-ig{width:100%;justify-content:space-between}.fw-ig em{margin-left:0}.fw-ov .fw-ac{justify-content:center}}

/* why choose us: 1 numbered grid, 2 cards with an icon */
.wy{padding:130px 0;background:#0A0A0A;color:#fff}
.wy-in{width:min(var(--wrap),100% - 80px);margin-inline:auto}
.wy-hd{text-align:center;margin-bottom:64px}
.wy-k{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.wy-k i{display:block;width:32px;height:2px;background:var(--orange)}
.wy-hd h2{margin:18px 0 0;font-size:64px;font-weight:700;letter-spacing:-.035em;line-height:1.02;color:#fff}.wy-hd h2 span,.wy-hd h2 b{color:var(--orange)}
.wy-lead{margin:18px auto 0;max-width:620px;font-size:19px;line-height:1.6;color:rgba(255,255,255,.8)}
.wy h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em;color:#fff}
.wy article p{margin:10px 0 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.8)}
.wy-g{display:grid;grid-template-columns:repeat(3,1fr)}
.wy article>i{display:block;color:var(--orange)}.wy article>i svg{display:block;width:100%;height:100%}
.wy[data-v="1"] .wy-g{gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.wy[data-v="1"] article{background:#121212;padding:44px 40px 48px;transition:background .3s}.wy[data-v="1"] article:hover{background:#171717}
.wy-no{display:block;font-size:64px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.wy[data-v="1"] article>i{width:36px;height:36px;margin:28px 0 30px}
.wy[data-v="2"] .wy-no{display:none}
.wy[data-v="2"] .wy-g{gap:20px}
.wy[data-v="2"] article{padding:40px 36px;border-radius:28px;background:#121212;border:1px solid rgba(255,255,255,.08);transition:transform .35s,border-color .35s}
.wy[data-v="2"] article:hover{transform:translateY(-6px);border-color:rgba(255,94,8,.5)}
.wy[data-v="2"] article>i{width:60px;height:60px;padding:15px;border-radius:16px;background:var(--orange);color:#0A0A0A;margin-bottom:32px}
@media (max-width:980px){.wy-in{width:calc(100% - 48px)}.wy-g{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.wy{padding:88px 0}.wy-hd{margin-bottom:44px}.wy-hd h2{font-size:42px}.wy-g{grid-template-columns:1fr}.wy[data-v="1"] article{padding:32px 24px}.wy-no{font-size:48px}.wy[data-v="1"] article>i{margin:20px 0 22px}.wy[data-v="2"] article{padding:32px 26px}}
/* Let's build it: closing call to action on orange, three layouts */
.lb{position:relative;overflow:hidden;background:var(--orange);color:#0a0a0a;text-align:left}
.cl .lb .wrap{text-align:left}
.lb>div{display:none}.lb[data-v="1"]>.lb1,.lb[data-v="2"]>.lb2,.lb[data-v="3"]>.lb3{display:block}
.lb1{padding:96px 0 88px}.lb3{padding:80px 0 88px}.lb2{padding:80px 0 0}
.lb-t{margin:0;font-size:clamp(72px,calc(14vw*var(--vz,1)),200px);font-weight:700;letter-spacing:-.06em;line-height:.9;color:#0a0a0a}.lb-t b{color:#fff}
.lb-r{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:40px;padding-top:32px;border-top:1px solid rgba(10,10,10,.25)}
.lb-r p{margin:0;max-width:440px;font-size:21px;line-height:1.4;font-weight:500;color:#0a0a0a}
.lb-bt{display:flex;gap:14px;flex-wrap:wrap}
.lb-bk,.lb-ol{display:inline-flex;align-items:center;min-height:72px;border-radius:999px;font:600 19px/1 Archivo,system-ui,sans-serif;cursor:pointer;text-decoration:none;transition:background .3s}
.lb-bk{gap:22px;padding:0 9px 0 34px;border:0;background:#0a0a0a;color:#fff}.lb-bk:hover{background:#222}
.lb-bk em{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:50%;background:var(--orange);color:#0a0a0a;font-style:normal;transition:transform .35s}.lb-bk:hover em{transform:translateX(4px)}
.lb-ol{gap:12px;padding:0 30px;border:1.5px solid rgba(10,10,10,.35);color:#0a0a0a;font-variant-numeric:tabular-nums}.lb-ol:hover{background:rgba(10,10,10,.08)}
.lb-r.lb-up{margin-top:0;padding:0 0 40px;border-top:0;border-bottom:1px solid rgba(10,10,10,.25)}
.lb-hg{font-size:clamp(96px,calc(19vw*var(--vz,1)),300px);white-space:nowrap;margin:24px 0 -.2em;padding-left:calc((100% - min(var(--wrap),100% - 80px))/2 - .04em)}
.lb-tr{display:flex;width:max-content;animation:lbmq 26s linear infinite}.lb-tr .lb-t{padding-right:.4em;white-space:nowrap}
@keyframes lbmq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lb-tr{animation:none}}
@media (max-width:980px){.lb-hg{padding-left:20px}}
/* phone: the big Let's build it fits the screen width, like the other layouts */
@media (max-width:900px){.lb-hg{font-size:calc(17vw*var(--vz,1));margin-bottom:40px}}
@media (max-width:900px){.lb1 .lb-t{font-size:calc(15vw*var(--vz,1));white-space:nowrap}.lb1{padding:64px 0 56px}.lb2{padding-top:56px}.lb3{padding:56px 0 56px}.lb-r{flex-direction:column;align-items:flex-start}.lb-r p{font-size:18px}.lb-bt{width:100%}.lb-bk,.lb-ol{width:100%;justify-content:space-between}.lb-ol{justify-content:center}}
/* map title layouts */
.mp-tt{display:none}
.mp[data-v="1"] .mp-tt[data-t="1"],.mp[data-v="2"] .mp-tt[data-t="2"],.mp[data-v="3"] .mp-tt[data-t="3"]{display:block}
.mp-a2{display:block;font-size:40px;line-height:1.1;font-weight:500;letter-spacing:-.035em;margin-top:18px;white-space:nowrap;color:#fff}
.mp-c2{display:block;font-style:normal;font-size:20px;margin-top:10px;color:rgba(255,255,255,.65)}
.mp-a3{display:block;font-size:84px;line-height:.95;font-weight:600;letter-spacing:-.05em;margin-top:14px;color:#fff}
.mp-a3 b{color:var(--orange)}
.mp-c3{display:flex;flex-direction:column;gap:2px;margin-top:22px;font-style:normal;font-size:17px;color:rgba(255,255,255,.65)}
.mp-c3 b{font-size:20px;font-weight:500;color:#fff}
@media (max-width:760px){.mp-a2{font-size:30px;white-space:normal}.mp-a3{font-size:64px}}
.mp-a3{font-size:64px}.mp-c3{margin-top:14px}.mp-a2{font-size:36px;margin-top:14px}
@media (max-width:760px){.mp-a2{font-size:30px}.mp-a3{font-size:56px}}

/* chat bubble: green online dot, and the message that pops up once, 15s after the bubble first shows (or 15s into the hero) */
.fab-on{position:absolute;right:2px;bottom:2px;width:16px;height:16px;border-radius:50%;background:#3ccf6e;border:3px solid var(--orange);transition:opacity .2s}
.fab-on::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #3ccf6e;opacity:0;animation:fabping 2.4s infinite}
@keyframes fabping{0%{transform:scale(.8);opacity:.8}100%{transform:scale(2);opacity:0}}
body.chat-open .fab-on{opacity:0}
.fab.hide.pk-force{opacity:1;pointer-events:auto;transform:none;transition:transform .7s cubic-bezier(.34,1.5,.5,1),opacity .3s ease}
body.pk-on .h-wb .h-sbar.h-fxb{transform:none}
.pk{position:fixed;z-index:61;right:28px;bottom:112px;width:300px;padding:20px 22px;border-radius:18px 18px 4px 18px;background:#fff;color:#111;font-size:17px;line-height:1.45;cursor:pointer;border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 40px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(12px) scale(.94);transform-origin:100% 100%;transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.pk.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.pk-x{position:absolute;top:-12px;left:-12px;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#222;color:#fff;display:grid;place-items:center;cursor:pointer}
.pk-x svg{width:12px;height:12px}
.pk-who{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.1)}
.pk-lg{flex:none;width:40px;height:44px;background:center/contain no-repeat}
.pk-who b{display:block;font-size:17px;line-height:1.2}
.pk-who small{display:flex;align-items:center;gap:7px;font-size:15px;color:#555}
.pk-who small i{width:8px;height:8px;border-radius:50%;background:#3ccf6e}
.pk p{margin:0}
@media (max-width:760px){.pk{left:16px;right:16px;width:auto;bottom:168px;border-radius:18px 18px 4px 18px}}
@media (prefers-reduced-motion:reduce){.pk,.pk.on{transition:none}.fab-on::after{animation:none}}

/* map card: phone as an outlined pill next to Get directions, hours a touch larger */
.cl .mp .mp-tel{gap:12px;min-height:52px;padding:8px 22px 8px 8px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:17px;font-variant-numeric:tabular-nums;transition:border-color .2s,background .2s}
.cl .mp .mp-tel:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.04)}
.cl .mp .mp-tel i{flex:none;width:36px;height:36px;border-radius:50%;background:#1d1d1d;color:var(--orange);display:grid;place-items:center}
.cl .mp .mp-tel svg{width:17px;height:17px}
.cl .mp .mp-h span{font-size:16px}.cl .mp .mp-h b{font-size:18px}
@media (max-width:760px){.cl .mp .mp-x .mp-tel{align-self:stretch}}


/* chat window: Becker header, welcome with example cards, one rounded field with the send arrow inside */
@media (min-width:761px){#drawer{height:min(680px,calc(calc(100vh*var(--vz,1)) - 150px));height:min(680px,calc(calc(100dvh*var(--vz,1)) - 150px))}}
#drawer .chat-hd{padding:22px 20px 0 24px;border-bottom:0;background:none}
#drawer .chat-hd img{width:46px}
#drawer .chat-hd strong{font-size:18px}
#drawer .chat-hd span::before{background:#3ccf6e}
#drawer .chat-x{background:none}#drawer .chat-x:hover{background:#262626}
#drawer:not(.chat-go) .chat-log{display:none}
#drawer .chat-ex{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px 24px 4px}
.chat-wel h3{font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:#fff}
.chat-wel h3 em{font-style:normal;color:var(--orange)}
.chat-wel p{margin:10px 0 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.75)}
.chat-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#drawer #examples{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
#drawer .ex-btn{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:16px;border-radius:16px;border:1px solid #2c2c2c;background:#191919;font-size:16px;font-weight:500;line-height:1.3;color:#fff}
#drawer .ex-btn:hover{border-color:var(--orange);background:#1c1c1c}
#drawer .ex-btn svg{width:24px;height:24px;color:var(--orange)}
#drawer .chat-ex .chat-or{display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;margin:18px 0 0;font-size:15px;color:rgba(255,255,255,.7)}
.chat-or svg{flex:none;color:var(--orange)}
#drawer .chat-form{align-items:center;gap:6px;margin:10px 24px 0;padding:0 7px;height:58px;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:#0d0d0d}
#drawer .chat-form:focus-within{border-color:var(--orange)}#drawer .chat-sug{margin:0 24px 8px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#141414;overflow:auto;max-height:calc(var(--vvh,100vh) * .42);box-shadow:0 14px 34px rgba(0,0,0,.5);animation:sugIn .28s cubic-bezier(.2,.7,.2,1)}#drawer .chat-sug:empty{display:none}@keyframes sugIn{from{opacity:0;transform:translateY(8px) scale(.98);filter:blur(6px)}}.sug-i{display:flex;gap:12px;align-items:center;width:100%;padding:12px 16px;text-align:left;border-top:1px solid rgba(255,255,255,.06);color:inherit;transition:background .15s}.sug-i:first-child{border-top:0}.sug-i>svg{flex:none;color:var(--orange)}.sug-i>div{min-width:0}.sug-i b{display:block;font-weight:500;font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sug-i span{display:block;margin-top:2px;font-size:14px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sug-i:hover,.sug-i[aria-selected=true]{background:#1f1f1f}.sug-g{margin:0;padding:6px 16px 8px;font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.4);text-align:right}.sug-hint{margin:0;padding:12px 16px;font-size:15px;color:rgba(255,255,255,.78);animation:sugIn .28s cubic-bezier(.2,.7,.2,1)}.chat-pin{flex:none;display:grid;place-items:center;width:0;opacity:0;overflow:hidden;color:var(--orange);transition:width .3s cubic-bezier(.2,.7,.2,1),opacity .3s}#chatForm.addr .chat-pin{width:30px;opacity:1}
/* while the keyboard rises the chat shows a copy of the box (ids stripped): it keeps the address pin and the focus border */
#drawer>.kbr .chat-form.addr .chat-pin{width:30px;opacity:1;transition:none}
#drawer>.kbr .chat-form{border-color:var(--orange)}@media (max-width:760px){#drawer .chat-sug{margin:0 16px 8px}
#drawer .sug-hint{padding:14px 16px 10px;color:#fff;font-size:16px}
#drawer .sug-acts{display:flex;gap:8px;padding:0 16px 14px}
#drawer .sug-acts .opt-btn{flex:1;text-align:center}
#drawer .sug-acts .opt-btn.go{background:var(--orange);border-color:var(--orange);color:#0A0A0A;font-weight:500}
#drawer>.chat-sug{position:absolute;margin:0;z-index:8;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sug-i{padding:11px 14px}}
#drawer.chat-go .chat-form{margin-top:12px}
#drawer .chat-form input{height:100%;padding:0 6px;border:0;background:none;border-radius:0}
#drawer .chat-up{width:44px;height:44px;padding:0;border:0;border-radius:12px;color:rgba(255,255,255,.8)}
#drawer .chat-up:hover{background:#1c1c1c;color:#fff}
#drawer .chat-send{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:var(--orange);color:#111}
#drawer .chat-send svg{display:block}
#drawer .chat-send:hover svg{animation:chatSend .55s cubic-bezier(.22,1,.36,1)}
@keyframes chatSend{0%{transform:none}40%{transform:translateY(-5px)}100%{transform:none}}
#drawer .chat-direct{display:block;margin:0;padding:12px 24px 20px;font-size:15px;color:rgba(255,255,255,.6)}
@media (prefers-reduced-motion:reduce){#drawer .chat-send:hover svg{animation:none}}

/* the longer domain email: let the contact row shrink and break after the @ */
.cl3-info>.cl3-i{min-width:0}

/* licensed line, social links, numbers */
.ft-lic{display:flex;align-items:flex-start;gap:12px;margin-top:20px;font-size:16px;line-height:1.45;color:#fff}
.ft-lic svg{flex:none;color:var(--orange);margin-top:2px}
.ab-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.ab-stats>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0 16px}
.ab-stats>div+div{border-left:1px solid rgba(255,255,255,.14)}
.ab-stats dd{margin:0;font-size:56px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--orange);font-variant-numeric:tabular-nums}
.ab-stats dt{font-size:17px;color:#fff}
.ab-stats{margin-top:40px}
.ab-stats dd{font-size:48px}
@media (min-width:761px){.rv2 .vx-lk+.rv-yelp{margin-left:28px}}
@media (max-width:760px){
  .ab-stats>div{padding:0 12px}
  .ab-stats dd{font-size:36px}
  .ab-stats dt{font-size:15px}
}

/* About layout 1 redesign: kicker and title top left, diorama top right, location line + numbers + facts in one row below */
.ab[data-v="1"]{display:block;min-height:0}
.ab[data-v="1"]::after{display:none}
.ab[data-v="1"]>.wrap>div{display:contents}
.ab[data-v="1"]>.wrap>div>.ab5-m{display:none}
.ab[data-v="1"] .ab-tt{margin:0 0 40px;font-size:clamp(44px,calc(4.4vw*var(--vz,1)),68px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.ab[data-v="1"] .ab-l{margin:0}
.ab[data-v="1"] h2.ty{font-size:clamp(30px,calc(2.8vw*var(--vz,1)),42px);line-height:1.1;letter-spacing:-.025em;font-weight:500}
.ab[data-v="1"] .ab1-a{margin-top:32px}
@media (min-width:901px){
.ab[data-v="1"]>img{inset:40px -4% auto auto;width:70%;height:auto;aspect-ratio:2400/1344;object-fit:cover;object-position:50% 50%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,#000 52%,transparent 96%);-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,#000 52%,transparent 96%);mask-composite:intersect}
.ab[data-v="1"]>.wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"k ." "t ." "l ." "h s" "a f";align-items:start;gap:0 clamp(48px,calc(6vw*var(--vz,1)),96px);padding:clamp(120px,calc(11vw*var(--vz,1)),170px) 0 clamp(80px,calc(7vw*var(--vz,1)),112px)}
.ab[data-v="1"] .kic{grid-area:k}.ab[data-v="1"] .ab-tt{grid-area:t;max-width:620px}.ab[data-v="1"] .ab-l{grid-area:l;max-width:560px}
.ab[data-v="1"] h2.ty{grid-area:h;align-self:start;margin-top:96px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.ab[data-v="1"] .ab-stats{grid-area:s;margin-top:96px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.ab[data-v="1"] .ab-facts{grid-area:f;margin-top:40px}
.ab[data-v="1"] .ab1-a{grid-area:a;align-self:start;margin-top:40px}
}
@media (max-width:900px){
.ab[data-v="1"]>img{inset:0 0 auto 0;width:100%;height:auto;aspect-ratio:2400/1344;opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.ab[data-v="1"]>.wrap{display:flex;flex-direction:column;gap:0;padding:120px 0 72px}
.ab[data-v="1"]>.wrap>*,.ab[data-v="1"]>.wrap>div>*{align-self:stretch}.ab[data-v="1"] .kic{order:1;text-align:left}.ab[data-v="1"] .ab-tt{order:2;font-size:40px;margin-bottom:28px}.ab[data-v="1"] .ab-l{order:3}
.ab[data-v="1"] h2.ty{order:4;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);font-size:28px}
.ab[data-v="1"] .ab-stats{order:5;margin-top:32px}.ab[data-v="1"] .ab-facts{order:6}.ab[data-v="1"] .ab1-a{order:7}
}

/* About: more air above every layout; layout 3 photo runs the full height of the text column */
.ab[data-v="2"]{padding-top:clamp(96px,calc(9vw*var(--vz,1)),136px)!important}
@media (min-width:901px){
html .ab[data-v="1"]>.wrap{padding-top:clamp(170px,calc(15vw*var(--vz,1)),230px)}
html .ab[data-v="1"]>img{top:clamp(80px,calc(7vw*var(--vz,1)),110px)}
html .ab[data-v="1"]>.wrap{grid-template-areas:"k ." "t ." "l s" "h f" "a f"}
html .ab[data-v="1"] .ab-stats{align-self:end;margin-top:0}
html .ab[data-v="1"] h2.ty{margin-top:80px}
html .ab[data-v="1"] .ab-facts{align-self:start;margin-top:80px}
html .ab[data-v="5"]>.wrap{padding-top:clamp(140px,calc(12vw*var(--vz,1)),180px)}
.ab[data-v="2"] .ab2-g{align-items:stretch}
.ab[data-v="2"] .ab2-m{display:flex;flex-direction:column}
.ab[data-v="2"] .ab2-m .ab2-ph{flex:1;aspect-ratio:auto;max-height:none;min-height:560px}
.ab[data-v="2"] .ab2-m .ab2-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
@media (max-width:900px){
html .ab[data-v="1"]>.wrap{padding-top:150px}
html .ab[data-v="5"]>.wrap{padding-top:168px}
}

/* About layout 1: the two buttons follow the heading in, one after the other */
.ab[data-v="1"] .ab1-a>*{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.ab[data-v="1"].hin .ab1-a>*{opacity:1;transform:none;transition-delay:.55s}
.ab[data-v="1"].hin .ab1-a>*+*{transition-delay:.72s}
@media (prefers-reduced-motion:reduce){.ab[data-v="1"] .ab1-a>*{opacity:1;transform:none;transition:none}}

/* services option 3: title column on the left, wide cards looping to the right, two cards per view */
.sv5{display:none}
.svx[data-v="5"]>:not(.sv5){display:none!important}
.svx[data-v="5"]>.sv5{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:clamp(32px,calc(4vw*var(--vz,1)),64px);align-items:start;width:min(var(--wrap),100% - 80px);margin-inline:auto}
.sv5-in{padding-top:8px}
.sv5 .kic{text-align:left}
.sv5 .ty{margin-top:14px}
.sv5-l{margin-top:28px;font-size:19px;line-height:1.55;color:rgba(255,255,255,.86);max-width:300px}
.sv5-nv{display:flex;gap:12px;margin-top:44px}
.sv5-nv button{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#fff;transition:background .25s,border-color .25s,color .25s}
.sv5-nv button:hover{background:var(--orange);border-color:var(--orange);color:#0A0A0A}
.sv5-vp{display:flex;gap:24px;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;-webkit-user-select:none;user-select:none}
.sv5-vp::-webkit-scrollbar{display:none}
.sv5-vp.dr{cursor:grabbing;scroll-snap-type:none}.sv5-vp.dr .c5{pointer-events:none}
.c5{flex:0 0 calc((100% - 24px)/2);scroll-snap-align:start;display:block;text-align:left;color:#fff}
.c5-im{display:block;aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:#161616}
.c5-im img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1);-webkit-user-drag:none}
.c5:hover .c5-im img{transform:scale(1.05)}
.c5-tx{display:flex;gap:22px;margin-top:24px}
.c5-n{font-size:64px;font-weight:700;line-height:.85;letter-spacing:-.05em;color:var(--orange);font-variant-numeric:tabular-nums}
.c5-tx b{display:block;font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.c5-tx small{display:block;margin-top:6px;font-size:16px;color:rgba(255,255,255,.88)}
.c5-tx em{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-style:normal;font-size:16px;font-weight:600;color:var(--orange)}
.c5-tx em svg{transition:transform .3s}.c5:hover .c5-tx em svg{transform:translateX(4px)}
@media (max-width:900px){
.svx[data-v="5"]>.sv5{display:block;width:auto}
.sv5-in{width:min(var(--wrap),100% - 48px);margin:0 auto 32px}
.sv5-nv{display:none}
.sv5-vp{gap:14px;padding:0 24px;scroll-padding:0 24px;cursor:auto}
.c5{flex-basis:84%}
.c5-n{font-size:44px}.c5-tx{gap:14px}.c5-tx b{font-size:22px}
}

/* reviews option 2: autoplay bar and pause button */
.rv2-bar i{position:relative;overflow:hidden}
.rv2-vp{overflow-x:clip;overflow-clip-margin:24px;touch-action:pan-y;cursor:grab}.rv2-vp.drag{cursor:grabbing;user-select:none;-webkit-user-select:none}
.rv2-tr{display:flex;gap:48px;will-change:transform}.rv2-tr.mv{transition:transform .6s var(--ease)}
.rv2-p{flex:0 0 100%;min-width:0}
/* the track is three reviews wide: neither the quote box nor its grid cell may grow to fit it */
.rv2-q,.rv2-g>*{min-width:0}.rv2-vp{width:100%;max-width:100%}
.rv2-q .rv2-p blockquote,.rv2-q .rv2-p figcaption{transition:none;opacity:1}
.rv2-bar i.on{background:rgba(255,255,255,.14)}
.rv2-bar i b{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:0 50%}
.rv2-bar i.on b{animation:rv2f 8s linear forwards}
.rv2-hold .rv2-bar i.on b,.rv2-away .rv2-bar i.on b{animation-play-state:paused}
@keyframes rv2f{to{transform:scaleX(1)}}
.rv2-ps .rv2-i-pl,.rv2-hold .rv2-ps .rv2-i-ps{display:none}
.rv2-hold .rv2-ps .rv2-i-pl{display:block}
@media (prefers-reduced-motion:reduce){.rv2-bar i.on b{animation:none;transform:none}.rv2-ps{display:none!important}}
/* hairline between About and What we do */
#services::before{content:"";display:block;width:min(var(--wrap),100% - 80px);height:1px;margin:-108px auto 108px;background:rgba(255,255,255,.16)}
@media (max-width:900px){#services::before{width:calc(100% - 48px);margin:-72px auto 72px}}
/* services option 1: the strip runs out to the right edge of the screen, two whole cards and the third one cut by the edge */
.svx{container-type:inline-size;--m:max(40px,(100cqw - var(--wrap))/2)}
@media (min-width:901px){ .svx[data-v="5"]>.sv5{width:auto;margin:0 0 0 var(--m)} .c5{flex-basis:calc((100% - var(--m) - 24px)/2)} }
/* reviews option 1, left column: title over one rating card (score, reviewer initials, links) */
.rv2 .rv2-l{align-self:center}
.rv2 .rv2-cd{margin-top:44px;max-width:460px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:#121212;overflow:hidden}
.rv2 .rv2-cd .rv2-sc{margin:0;padding:32px 32px 28px;border:0;gap:22px}
.rv2 .rv2-cd .rv2-sc strong{font-size:88px;line-height:.85}
.rv2 .rv2-cd .rv2-sc span{color:rgba(255,255,255,.86)}
.rv2-pp{display:flex;align-items:center;gap:16px;padding:0 32px 28px}
.rv2-avs{display:flex}.rv2-avs .vx-av{width:40px;height:40px;font-size:15px;background:#262626;color:#fff;border:2px solid #121212}
.rv2-avs .vx-av+.vx-av{margin-left:-10px}.rv2-avs .vx-av:first-child{background:var(--orange);color:#0A0A0A}
.rv2-pp p{margin:0;font-size:16px;color:rgba(255,255,255,.86)}
.rv2-ls{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.12)}
.rv2 .rv2-ls .vx-lk{justify-content:space-between;margin:0!important;padding:22px 32px;font-size:17px;white-space:nowrap;transition:background .25s}
.rv2 .rv2-ls .vx-lk+.vx-lk{border-left:1px solid rgba(255,255,255,.12)}
.rv2 .rv2-ls .vx-lk:hover{background:#1a1a1a}.rv2 .rv2-ls .vx-lk:hover svg{transform:translateX(4px)}
@media (max-width:900px){.rv2 .rv2-cd{margin-top:32px;max-width:none}.rv2 .rv2-cd .rv2-sc{padding:26px 24px 22px}.rv2 .rv2-cd .rv2-sc strong{font-size:68px}.rv2-pp{padding:0 24px 24px}.rv2 .rv2-ls .vx-lk{padding:20px 24px;flex-basis:auto}}
/* let's build it: three buttons, white on hover for the outlined ones, bigger line */
.lb .lb-r p{font-size:24px;line-height:1.4;max-width:420px}
.lb .lb-bt{justify-content:flex-end}
.lb .lb-ol{transition:background .3s,border-color .3s,color .3s}
.lb .lb-ol:hover{background:#fff;border-color:#fff;color:#0a0a0a}
.lb .lb-cb{background:none}
@media (max-width:1180px) and (min-width:761px){.lb .lb-r{flex-direction:column;align-items:flex-start}.lb .lb-bt{justify-content:flex-start}}
@media (max-width:760px){.lb .lb-r p{font-size:24px}.lb .lb-bt{justify-content:stretch}}
/* map right under Let's build it: the map grows up into the gap above it, the section box and the card stay where they were */
.cl>.lb+.mp,.cl:not([data-v="1"]):not([data-v="5"])>.lb+.mp{--g:clamp(64px,calc(8vw*var(--vz,1)),120px);overflow:visible}
.cl>.lb+.mp::before,.cl:not([data-v="1"]):not([data-v="5"])>.lb+.mp::before{display:none}
@media (min-width:761px){ .cl>.lb+.mp .m,.cl:not([data-v="1"]):not([data-v="5"])>.lb+.mp .m{top:calc(-1 * var(--g))} .cl>.lb+.mp .maplibregl-ctrl-top-right,.cl:not([data-v="1"]):not([data-v="5"])>.lb+.mp .maplibregl-ctrl-top-right{top:calc(64px + var(--g))!important} }
@media (max-width:760px){ .cl>.lb+.mp .m,.cl:not([data-v="1"]):not([data-v="5"])>.lb+.mp .m{margin-top:calc(-1 * var(--g));height:calc(293px + var(--g))} }
/* about: more room between the hairline and the title */
#about h2.ty{padding-top:64px}
@media (max-width:900px){#about h2.ty{padding-top:48px}}
#about[data-v="2"] h2.ty{padding-top:0;margin-top:18px}
/* contact: no hairline under Reviews, less room above the title */
#contact.cl{border-top:0;padding-top:80px}
@media (max-width:760px){#contact.cl{padding-top:56px}}
/* map flush under Let's build it: the left shade runs up with the map */
@media (min-width:761px){ .cl>.lb+.mp .fl,.cl:not([data-v="1"]):not([data-v="5"])>.lb+.mp .fl{top:calc(-1 * var(--g))} }
/* contact: the address, email and hours card comes in right after the buttons */
.js #contact .cl-act.rv-up{transition-delay:.12s}
.js #contact .cl-facts.rv-up,.js #contact .cl3-info.rv-up{transition-delay:.32s}
@media (max-width:760px){.js #contact .cl-facts.rv-up,.js #contact .cl3-info.rv-up{transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:0s}}
/* contact 3 and 4: See our latest projects always sits under Tell us about your job, as in the other layouts */
.cl:not([data-v="1"]):not([data-v="5"])>.fw{order:1}
.cl:not([data-v="5"])>.fw{margin-top:96px}
@media (max-width:760px){.cl:not([data-v="5"])>.fw{margin-top:64px}}
/* map: switching layouts fades the card only, the map itself never moves or blinks */
.mp.rsw-out>.m,.mp.rsw-out>.fl{opacity:1!important;transform:none!important;filter:none!important}
/* map flush under Let's build it: fully dark above Visit us on the left, only a light shade on the right (--ct is the card top, set by script), and a longer fade at the bottom */
@media (min-width:761px){
.cl>.lb+.mp::before,.cl:not([data-v="1"]):not([data-v="5"])>.lb+.mp::before{display:block;top:calc(-1 * var(--g));height:calc(var(--g) + var(--ct,40px) + 110px);background:linear-gradient(#0A0A0A calc(100% - 150px),rgba(10,10,10,0));-webkit-mask:linear-gradient(90deg,#000 40%,rgba(0,0,0,.35) 70%);mask:linear-gradient(90deg,#000 40%,rgba(0,0,0,.35) 70%)}
.cl .mp::after{height:240px;background:linear-gradient(rgba(10,10,10,0),rgba(10,10,10,.6) 50%,#0A0A0A)}
}
/* services layout 1: bigger lede and card text */
.sv5-l{font-size:20px;max-width:320px}
.c5-tx small,.c5-tx em{font-size:18px}
@media (min-width:901px){.c5-tx b{font-size:30px}}
/* entrance for every block inside the sections (tagged by script): fades and rises once, staggered row by row; uses translate so the blocks' own transforms stay intact */
@keyframes rvst{from{opacity:0;translate:0 26px}}
@keyframes rvsf{from{opacity:0}}
.js .rv-st:not(.in){opacity:0}
.js .rv-st.in{animation:rvst .9s var(--ease) var(--rd,0s) backwards}
.js .rv-st.rv-sf.in{animation-name:rvsf}
.js .rv-st:focus-visible,.js .rv-st:has(:focus-visible){opacity:1;animation:none;transition:none}
.js .rw-k:focus-visible,.js .rv-up:has(:focus-visible){opacity:1;transform:none;transition:none}

/* steps line: each number stays with its sentence */
.cl3-lead i{display:inline-flex;align-items:center;gap:14px;font-style:normal}
/* phone fixes (2026-10-27) */
@media (max-width:760px){
html body .h-wb .h-hA{top:26px}
html body .h-wb .h-tod .h-d{bottom:auto;height:68%;background-size:cover;background-position:80% 50%;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
html body .h-wb .h-rv .h-avs i{width:46px;height:46px;margin-left:-12px}
html body .h-wb .h-rv .h-avs i:first-child{margin-left:0}
html body .h-wb .h-rv .h-tx b{font-size:22px}
html body .h-wb .h-rv .h-tx span{font-size:17px}
html body .h-wb .h-dd .h-dsoc a{justify-content:center;align-content:center}
.ab[data-v="1"]{padding-top:72px}
html body .ab>img{top:56px!important}
html body .ab[data-v="1"]{padding-top:128px}
.ab2-q,.lb-bk,.mp-go{position:relative;justify-content:center!important;padding-inline:64px!important}
.ab2-q>em,.lb-bk>em,.mp-go>i{position:absolute;right:8px;top:0;bottom:0;margin:auto 0}
.mp-tel{position:relative;justify-content:center!important;padding-inline:56px!important}
.mp-tel>i{position:absolute;left:8px;top:0;bottom:0;margin:auto 0}
/* phone: the map card's two buttons match the "Let's build it" buttons (72px tall, 19px text, 54px circles) */
@media (max-width:760px){html body .mp .mp-x .mp-go,html body .cl .mp .mp-x .mp-tel{min-height:72px;font-size:19px;padding-inline:72px!important}
  html body .mp .mp-x .mp-go>i,html body .cl .mp .mp-x .mp-tel>i{width:54px;height:54px;left:auto;right:auto}
  html body .mp .mp-x .mp-go>i{right:9px}html body .cl .mp .mp-x .mp-tel>i{left:9px}
  html body .mp .mp-x .mp-go svg{width:20px;height:20px}html body .cl .mp .mp-x .mp-tel svg{width:20px;height:20px}}
.c5-tx small{line-height:1.5;min-height:3em}
.hw-note{font-size:18px;line-height:1.5;color:rgba(10,10,10,.8)}
.cl3-lead{flex-direction:column;align-items:flex-start;gap:14px}
.cl .mp::after{display:none}
.cl .mp .mp-c{margin-top:48px;padding-bottom:24px}
/* phones: the map sits inside the card, between the hours and the two buttons */
.cl .mp{display:flex;flex-direction:column}
.cl .mp .mp-c{display:contents}
.cl .mp .mp-c>*{margin-left:24px;margin-right:24px}
.cl .mp .mp-x{order:2;margin-bottom:24px}
html body .cl .mp .m{order:1;--g:0px;height:220px!important;margin:28px 0 4px!important}
/* the map fades softly into the page above and below; the pin, zoom and credits stay sharp */
.cl .mp .m .maplibregl-canvas{-webkit-mask-image:linear-gradient(transparent var(--g),#000 calc(var(--g) + 64px),#000 calc(100% - 64px),transparent);mask-image:linear-gradient(transparent var(--g),#000 calc(var(--g) + 64px),#000 calc(100% - 64px),transparent)}
.ft[data-v="1"]{padding-top:64px}
.ft1-top{display:none}
.ft .brand img{width:96px}
.ft-grid{gap:40px 24px}
html body .ft .ft-grid>div:first-child{padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
html body .ft .ft-grid>div:last-child{padding-top:40px;border-top:1px solid rgba(255,255,255,.12)}
.ft[data-v="1"] .ft-bot{flex-direction:column;gap:10px;margin-top:48px;padding-bottom:0}
@media (max-width:760px){html body .ft[data-v="1"] .ft1-w{margin:32px 0 -.13em;padding-bottom:0;font-size:calc((calc(100vw*var(--vz,1)) - 32px) / 4)}}
/* once the footer is 240px into the screen the bottom bar slides away, and on phones the chat bubble (and its peek message) goes with it */
html body.ft-in .h-wb .h-sbar.h-fxb{transform:translateY(calc(100% + 24px))}
@media (max-width:760px){html body.ft-in .fab.fab{opacity:0;pointer-events:none;transform:scale(0);transition:transform .7s cubic-bezier(.5,0,.66,-.5),opacity .3s ease .4s}html body.ft-in .pk.pk{opacity:0;pointer-events:none;transform:scale(.6);transform-origin:100% 100%;transition:transform .4s cubic-bezier(.55,0,.75,.2),opacity .3s ease}}

.btt{display:none!important}
.rvw .rv2-q{padding-bottom:0}
.hw-call{position:relative;width:100%;min-height:64px;justify-content:center;padding:8px 64px;border:1px solid rgba(10,10,10,.18);border-radius:999px}
.hw-call i{position:absolute;left:7px;top:0;bottom:0;margin:auto 0;width:48px;height:48px;border:0;background:rgba(10,10,10,.06)}
.hw-call{padding:8px 20px 8px 60px}
.hw-call span{flex-direction:row;align-items:baseline;gap:5px;white-space:nowrap}
.hw-call small{font-size:16px}
.hw-call small::after{content:" at"}
.hw-call b{font-size:17px}
.hw-btns{gap:12px}
html body .h-wb .h-dd .h-bq{position:relative;justify-content:center}
html body .h-wb .h-dd .h-bq svg{position:absolute;right:18px;top:0;bottom:0;margin:auto 0}
.rvw{padding-bottom:72px}
.ft[data-v="1"] .ft-bot{align-items:flex-start;text-align:left}
}
@media (min-width:901px){html{zoom:.92;--vz:1.087}}