/* Home page: scroll hero (night -> dawn -> morning -> door clip -> monitor) and the sections under it.
   Loaded only on the Homepage template. Header, menu and footer styles are in pap-core.css. */
:root{
  --purple:#850D8C; --deep:#5E0863; --lime:#CFE132; --ink:#1C1220; --chalk:#F7F6F2; --white:#fff; --gold:#E9C46A; --muted:#5b5163;
  --sans:"Be Vietnam Pro","Avenir Next","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
body.pap-is-home{background:var(--ink);color:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;overflow-x:clip}
.pap-home,.pap-home *{box-sizing:border-box}
.pap-home h1,.pap-home h2,.pap-home h3,.pap-home p,.pap-home figure,.pap-home ul{margin:0;padding:0}
.pap-home a{color:inherit;text-decoration:none}
.pap-home :focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}

/* ---------- scroll scene ---------- */
.track{position:relative;height:700vh}
.scene{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#0d1626;isolation:isolate}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* stage: overlays drawn in the clip's own coordinates (1948 x 1064), moved with the camera */
.stage{position:absolute;left:0;top:0;width:1948px;height:1064px;transform-origin:0 0;pointer-events:none;z-index:2}
.lamp{position:absolute;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,226,160,.95),rgba(255,198,110,.45) 28%,rgba(255,180,90,.12) 60%,transparent);mix-blend-mode:screen}
.plate{position:absolute;left:883px;top:466px;width:206px;height:50px;border-radius:3px;background:#4a0a4f;
  box-shadow:inset 0 0 0 2.5px #e9dcc2,inset 0 0 0 5px #4a0a4f,inset 0 0 0 6px rgba(233,220,194,.55);
  display:flex;align-items:center;justify-content:center;gap:6px;overflow:hidden;filter:brightness(var(--lit,1))}
.plate::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,240,210,.35) 50%,transparent 70%);transform:translateX(var(--sh,-120%))}
.plate svg{width:14px;height:14px;flex:none}
.plate b{font-weight:800;font-size:15.5px;letter-spacing:-.035em;color:#fff;white-space:nowrap}
.glass{position:absolute;top:640px;width:246px;text-align:center;font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;line-height:1.45;
  color:#F4D98A;-webkit-text-stroke:1.4px rgba(58,30,8,.85);paint-order:stroke fill;filter:brightness(var(--lit,1))}
.glass small{display:block;font-size:8.5px;letter-spacing:.3em;font-weight:800;margin-top:3px;-webkit-text-stroke-width:1px}
.g1{left:623px}.g2{left:1108px}
.sign{position:absolute;left:961px;top:604px;width:52px;height:62px;perspective:220px;filter:brightness(var(--lit,1))}
.sign::before,.sign::after{content:"";position:absolute;top:0;width:1px;height:24px;background:rgba(240,230,210,.8);transform-origin:top}
.sign::before{left:26px;transform:rotate(38deg)}
.sign::after{left:26px;transform:rotate(-38deg)}
.sign .card{position:absolute;left:4px;top:18px;width:44px;height:24px;transform-style:preserve-3d;transform:rotateY(var(--flip,0deg))}
.sign .card i{position:absolute;inset:0;display:grid;place-items:center;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-style:normal;font-weight:800;font-size:8.5px;letter-spacing:.1em;line-height:1}
.sign .card .c{background:#f2ece0;color:#4a0a4f}
.sign .card .o{background:var(--lime);color:#4a0a4f;transform:rotateY(180deg);font-size:9.5px}
.sign .card .o:before{content:"+";font-size:11px;margin-right:2px}

/* monitor screen (real HTML) */
.scr{position:absolute;z-index:4;left:0;top:0;opacity:0;pointer-events:none;border-radius:.25em;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 20%,#9a1aa1 0%,#850D8C 40%,#5E0863 100%);color:#fff;
  display:flex;flex-direction:column;padding:.9em 1.4em 1.2em}
.scr.live{pointer-events:auto}
.scr-bar{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:.82em;letter-spacing:-.02em;padding-bottom:.7em;border-bottom:1px solid rgba(255,255,255,.18)}
.scr-bar .wm span{position:relative;isolation:isolate;color:var(--ink);padding:0 .25em;margin-left:.3em}
.scr-bar .wm span::before{content:"";position:absolute;inset:.18em -.02em .04em;background:var(--lime);border-radius:.15em;z-index:-1;transform:skewX(-8deg)}
.scr-bar i{margin-left:auto;font:500 .78em/1 var(--mono);font-style:normal;letter-spacing:.08em;color:var(--lime)}
.scr-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.7em;min-height:0}
.scr h2{font-weight:800;letter-spacing:-.05em;line-height:.98;font-size:2.55em;text-wrap:balance;max-width:13em}
.scr h2 em{font-style:italic;font-weight:300;color:var(--lime)}
.scr p{font-size:1em;color:rgba(255,255,255,.86)}
.pills{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.2em}
.pills a{font-weight:700;font-size:.95em;padding:.55em 1em;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);transition:background .2s,color .2s}
.pills a:hover{background:#fff;color:var(--ink)}
.go{align-self:flex-start;margin-top:.3em;font-weight:800;font-size:1em;background:var(--lime);color:var(--ink);padding:.7em 1.2em;border-radius:999px}
.scr .rv{opacity:0;transform:translateY(.5em)}

/* intro, clock, skip */
.intro{position:absolute;z-index:9;left:max(clamp(18px,2.6vw,42px),env(safe-area-inset-left,0px));right:max(clamp(18px,2.6vw,42px),env(safe-area-inset-right,0px));bottom:calc(clamp(20px,5vh,48px) + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none}
.intro h1{font-weight:800;letter-spacing:-.05em;line-height:.95;font-size:clamp(30px,4.4vw,64px);max-width:10em;text-wrap:balance}
.intro h1 em{font-style:italic;font-weight:300;color:var(--lime)}
.intro p{margin-top:10px;font-weight:600;font-size:clamp(13px,1.1vw,16px);opacity:.92}
.intro .hint{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:right;white-space:nowrap;pointer-events:auto}
.intro .hint a{display:inline-block;margin-top:8px;padding:9px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.intro .hint a:hover{background:#fff;color:var(--ink)}
.intro-shade{position:absolute;inset:auto 0 0 0;height:46%;z-index:8;pointer-events:none;background:linear-gradient(rgba(13,22,38,0),rgba(13,22,38,.66))}
.clock{position:absolute;z-index:9;right:max(clamp(18px,2.6vw,42px),env(safe-area-inset-right,0px));top:calc(clamp(86px,13vh,120px) + env(safe-area-inset-top,0px));
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 13px;border-radius:999px;background:rgba(13,22,38,.42);pointer-events:none}
.clock b{font-weight:500;color:var(--lime)}
.load{position:absolute;z-index:3;left:0;bottom:0;height:2px;background:var(--lime);width:0;transition:width .2s,opacity .4s}

/* wall sign (rides on the purple wall inside) */
.wallsign{position:absolute;left:795px;top:178px;width:360px;height:74px;display:flex;align-items:center;justify-content:center;gap:12px;opacity:0}
.wallsign::before{content:"";position:absolute;inset:-60px -90px;border-radius:50%;background:radial-gradient(closest-side,rgba(207,225,50,.22),rgba(220,140,230,.14) 45%,transparent);opacity:var(--glow,0)}
.wallsign svg{position:relative;width:34px;height:34px;flex:none;filter:drop-shadow(0 0 6px rgba(207,225,50,var(--glow,0)))}
.wallsign b{position:relative;font-weight:800;font-size:31px;letter-spacing:-.04em;white-space:nowrap;color:#fff6ff;text-shadow:0 0 4px rgba(255,235,255,calc(var(--glow,0)*.9)),0 0 14px rgba(232,150,240,calc(var(--glow,0)*.75)),0 0 30px rgba(207,90,215,calc(var(--glow,0)*.55))}

/* ---------- home sections ---------- */
.w{max-width:1200px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.band{padding-block:clamp(64px,9vw,120px)}
.sec{scroll-margin-top:70px}
.eyebrow{font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.sec h2{font-weight:800;letter-spacing:-.055em;line-height:.96;text-wrap:balance;font-size:clamp(40px,6.6vw,88px)}
.sec h2 em{font-style:italic;font-weight:300}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,28ch);gap:20px 56px;align-items:end;margin-bottom:clamp(30px,4.5vw,60px)}
.head p{font-size:15.5px;opacity:.86}
@media(max-width:860px){.head{grid-template-columns:minmax(0,1fr)}}
.chalk{background:var(--chalk);color:var(--ink)}
.chalk .eyebrow,.chalk h2 em{color:var(--purple)}
.violet{background:linear-gradient(180deg,#33053a 0%,#45074b 100%);color:#fff}
.violet .eyebrow,.violet h2 em{color:var(--lime)}
.inky{background:var(--ink);color:#fff}
.inky .eyebrow,.inky h2 em{color:var(--lime)}
.limey{background:var(--lime);color:var(--ink)}
.limey .eyebrow{color:var(--deep)}
.limey h2 em{color:var(--purple)}
.btn{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap;font-weight:800;font-size:14.5px;padding:15px 24px;border-radius:999px;transition:background .2s,color .2s}
.btn.dark{background:var(--ink);color:#fff}.btn.dark:hover{background:var(--purple)}
.btn.lime{background:var(--lime);color:var(--ink)}.btn.lime:hover{background:#fff}
.btn.line{box-shadow:inset 0 0 0 1.5px currentColor}.btn.line:hover{background:currentColor}
.btn.line:hover span{color:var(--chalk)}
.tl{font-weight:700;border-bottom:2px solid currentColor;padding-bottom:2px}

/* services: four colour-blocked rooms */
.rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.room{border-radius:22px;padding:clamp(24px,3.2vw,42px);display:grid;gap:14px;align-content:start;min-height:clamp(280px,30vw,360px);position:relative;overflow:hidden}
.room .k{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.room h3{font-weight:800;letter-spacing:-.05em;line-height:.95;font-size:clamp(32px,3.8vw,52px);max-width:9em}
.room p{font-size:15.5px;max-width:34ch;opacity:.9}
.room .foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:18px}
.room .from{font-weight:800;letter-spacing:-.05em;font-size:clamp(28px,3vw,40px);font-variant-numeric:tabular-nums;line-height:1}
.room .from small{display:block;font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.room .mark{position:absolute;right:-.06em;top:-.2em;font-weight:800;font-size:clamp(150px,18vw,250px);line-height:1;letter-spacing:-.08em;opacity:.12;pointer-events:none}
.r1{background:var(--purple);color:#fff}.r1 .btn{background:var(--lime);color:var(--ink)}.r1 .btn:hover{background:#fff}
.r2{background:var(--lime);color:var(--ink)}.r2 .btn{background:var(--ink);color:#fff}.r2 .btn:hover{background:var(--purple)}
.r3{background:var(--ink);color:#fff}.r3 .btn{background:#fff;color:var(--ink)}.r3 .btn:hover{background:var(--lime)}
.r4{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}.r4 .mark{opacity:.06}.r4 .btn{background:var(--purple);color:#fff}.r4 .btn:hover{background:var(--ink)}
@media(max-width:760px){.rooms{grid-template-columns:minmax(0,1fr)}.room{min-height:0}}

/* client reviews, straight from the Google profile */
.revs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid rgba(255,255,255,.5)}
.rev{padding:clamp(24px,3vw,38px) clamp(14px,2vw,26px) 0 0;display:grid;grid-template-rows:1fr auto;gap:clamp(20px,2.6vw,30px)}
.rev+.rev{padding-left:clamp(14px,2vw,26px);border-left:1.5px solid rgba(255,255,255,.28)}
.rev blockquote{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.14;font-size:clamp(19px,1.95vw,25px);text-wrap:pretty}
.rev blockquote::before{content:"";display:block;width:26px;height:4px;border-radius:2px;background:var(--lime);margin-bottom:16px}
.rev figcaption{display:grid;gap:5px}
.rev figcaption b{font-weight:800;letter-spacing:-.02em;font-size:15.5px}
.rev figcaption span{font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@media(max-width:980px){
  .revs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rev:nth-child(3){padding-left:0;border-left:0}
  .rev:nth-child(n+3){border-top:1.5px solid rgba(255,255,255,.28);margin-top:26px}
}
@media(max-width:560px){
  .revs{grid-template-columns:minmax(0,1fr)}
  .rev,.rev+.rev{padding-left:0;border-left:0}
  .rev+.rev{border-top:1.5px solid rgba(255,255,255,.28);margin-top:24px}
}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid rgba(255,255,255,.5)}
.fact{padding:clamp(22px,3vw,36px) clamp(14px,2vw,26px) 0 0;display:grid;gap:10px;align-content:start}
.fact+.fact{padding-left:clamp(14px,2vw,26px);border-left:1.5px solid rgba(255,255,255,.28)}
.fact b{font-weight:800;letter-spacing:-.06em;line-height:.9;font-size:clamp(44px,6vw,86px);color:var(--lime);font-variant-numeric:tabular-nums;white-space:nowrap}
.fact b small{font-size:.42em;letter-spacing:-.03em;color:#fff;margin-left:.08em}
.fact span{font-size:15px;max-width:22ch;opacity:.9}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.fact:nth-child(3){padding-left:0;border-left:0}.fact:nth-child(n+3){border-top:1.5px solid rgba(255,255,255,.28);margin-top:24px}}
@media(max-width:420px){.facts{grid-template-columns:minmax(0,1fr)}.fact,.fact+.fact{padding-left:0;border-left:0}.fact+.fact{border-top:1.5px solid rgba(255,255,255,.28);margin-top:22px}}

/* our work: the showroom. One sticky stage; the camera slides sideways past four real
   devices, each photographed on a green screen so the client's work drops into the glass. */
.show-head{padding-top:clamp(64px,9vw,120px)}
.show-track{position:relative;height:400vh}
.show{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}

/* the big ghost words drifting behind everything, so the stage is never flat black */
.marq{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(10px,3vh,38px);pointer-events:none;overflow:hidden}
.marq-row{display:flex;width:200%;white-space:nowrap;will-change:transform}
.marq-row span{font-weight:800;letter-spacing:-.04em;line-height:.9;font-size:clamp(68px,13vw,190px);
  color:rgba(207,225,50,.09)}
.marq-row.marq-alt span{color:rgba(229,184,198,.08)}

/* objects peeking in from the edges */
.endcap{position:absolute;z-index:1;pointer-events:none;width:clamp(104px,13vw,214px);height:auto;will-change:transform}
.ec-l{left:0;bottom:7%;transform:translate3d(-26%,0,0) rotate(-18deg)}
.ec-r{right:0;top:11%;transform:translate3d(28%,0,0) rotate(14deg)}

.sroom{position:absolute;inset:0;z-index:2}
.stn{position:absolute;inset:0;--near:0;will-change:transform;
  display:grid;grid-template-columns:minmax(0,33%) minmax(0,67%);align-items:center;
  gap:clamp(22px,4vw,64px);
  padding:clamp(80px,13vh,124px) clamp(20px,5vw,72px) clamp(58px,9vh,86px);
  opacity:calc(.1 + .9*var(--near))}
.stn:first-child{--near:1}
.stn+.stn{transform:translate3d(100%,0,0)}
.stn::before{content:"";position:absolute;z-index:-1;left:62%;top:50%;width:92vmin;height:78vmin;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;opacity:var(--near);background:radial-gradient(closest-side,rgba(133,13,140,.6),rgba(133,13,140,0) 72%)}

.stn .info{display:grid;gap:clamp(8px,1.2vh,14px);align-content:center;justify-items:start}
.stn .idx{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.stn .idx b{font-weight:500;color:var(--lime)}
.stn .info h3{font-weight:800;letter-spacing:-.045em;line-height:.98;font-size:clamp(28px,3.6vw,56px);text-wrap:balance}
.stn .svc{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.stn .blurb{margin-top:6px;font-size:clamp(14px,1.15vw,16.5px);line-height:1.5;color:rgba(255,255,255,.78);max-width:34ch}

/* device = photo frame on top, the work showing through the hole where the green screen was */
.dev{position:relative;justify-self:center;width:100%}
/* a soft wash of light behind the device, so a near-black bezel still reads on the ink */
.dev::before{content:"";position:absolute;z-index:0;inset:-7% -5%;pointer-events:none;opacity:var(--near,1);
  background:radial-gradient(closest-side,rgba(255,255,255,.13),rgba(255,255,255,0) 72%)}
.dev .frame{position:relative;z-index:2;display:block;width:100%;height:auto}
.dev .scrn{position:absolute;z-index:1;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  overflow:hidden;background:linear-gradient(118deg,#3a0d3f 0%,#1a0b1e 48%,#120a16 100%)}
.dev .scrn>video,.dev .cyc img{display:block;width:100%;height:100%;object-fit:contain}
.cyc{position:relative;display:grid;width:100%;height:100%}
.cyc img{grid-area:1/1;opacity:0;transition:opacity .8s var(--ease)}
.cyc img.on{opacity:1}
.dev-mon{width:min(100%,560px,66vh)}
.dev-lap{width:min(100%,820px,88vh)}
.dev-tv{width:min(100%,880px,97vh)}
.dev-bb{width:min(100%,860px,84vh)}

/* the billboard panel is far wider than the artwork, so it gets a laid-out advert */
.bb{display:flex;align-items:center;gap:3.6%;width:100%;height:100%;padding:3% 3.4%;background:var(--lime)}
.bb-txt{flex:1 1 0;min-width:0;display:grid;gap:.4em}
.bb-txt b{font-weight:800;letter-spacing:-.045em;line-height:.95;font-size:clamp(13px,2.5vw,34px);color:var(--ink);text-wrap:balance}
.bb-txt span{font:500 clamp(7px,.85vw,11px)/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--purple)}
.bb .cyc{flex:0 0 30%;width:30%;height:100%}
.bb .cyc img{object-fit:cover;border-radius:3px}

.show-dots{position:absolute;z-index:5;left:0;right:0;bottom:clamp(16px,3.2vh,32px);display:flex;gap:9px;justify-content:center}
.show-dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.3);transition:background .3s,width .3s}
.show-dots i.on{width:27px;background:var(--lime)}

@media(max-width:880px){
  .stn{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(16px,2.6vh,28px);
    padding:clamp(76px,12vh,116px) 20px clamp(54px,8vh,80px)}
  .stn .info{justify-items:center;text-align:center}
  .stn .blurb{display:none}
  .stn::before{left:50%}
  .dev-mon{width:min(100%,420px,44vh)}
  .dev-lap{width:min(100%,560px,62vh)}
  .dev-tv{width:min(100%,560px,68vh)}
  .dev-bb{width:min(100%,560px,58vh)}
  .marq-row span{font-size:clamp(54px,17vw,120px)}
}

/* no JS, or reduced motion: the four stations simply stack */
.show-track.is-static{height:auto}
.is-static .show{position:relative;height:auto;overflow:visible;padding:0 0 40px}
.is-static .marq,.is-static .endcap,.is-static .show-dots{display:none}
.is-static .sroom{position:relative;inset:auto;display:grid;gap:clamp(34px,5vw,64px)}
.is-static .stn,.is-static .stn+.stn{position:relative;inset:auto;height:auto;padding:0 clamp(20px,5vw,72px);opacity:1;--near:1;transform:none}

.workfoot{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;padding-bottom:clamp(64px,9vw,120px)}
.workfoot p{font-size:15px;opacity:.85;max-width:52ch}

/* packages teaser */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.tier{padding:clamp(22px,3vw,34px) clamp(16px,2.4vw,30px);display:grid;gap:12px;align-content:start}
.tier+.tier{border-left:1.5px solid var(--ink)}
.tier:first-child{padding-left:0}
.tier h3{font-weight:800;letter-spacing:-.04em;font-size:clamp(24px,2.4vw,32px);line-height:1}
.tier .pr{font-weight:800;letter-spacing:-.06em;line-height:.95;font-size:clamp(44px,5vw,70px);color:var(--purple);font-variant-numeric:tabular-nums}
.tier .pr small{display:block;font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tier p{font-size:15px;color:var(--muted)}
.tier.mid{background:var(--purple);color:#fff;border-left:0;margin-block:-1.5px;padding-left:clamp(16px,2.4vw,30px)}
.tier.mid .pr{color:var(--lime)}.tier.mid .pr small,.tier.mid p{color:rgba(255,255,255,.82)}
.tier.mid+.tier{border-left:0}
.pkfoot{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:clamp(26px,4vw,40px);font-size:15.5px}
@media(max-width:860px){.tiers{grid-template-columns:minmax(0,1fr)}.tier,.tier:first-child{padding-left:0}.tier+.tier{border-left:0;border-top:1.5px solid var(--ink)}.tier.mid{padding-left:20px;padding-right:20px;margin:0}.tier.mid+.tier{border-top:0}}

/* how it works: the hanging sign flips CLOSED -> BACK SOON -> OPEN as the steps go by */
.howgrid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.hangwrap{position:sticky;top:clamp(100px,16vh,170px)}
.hang{display:block}
.hang .rod{display:block;width:min(86%,264px);height:6px;margin:0 auto;border-radius:3px;background:var(--ink)}
.hsign{position:relative;display:block;width:clamp(170px,21vw,226px);margin:0 auto;padding-top:38px;transform-origin:50% -6px;animation:hswing 5s ease-in-out infinite}
.hsign .ch{position:absolute;top:0;width:2px;height:42px;background:var(--ink);transform-origin:top}
.hsign .ch.a{left:50%;transform:rotate(26deg)}
.hsign .ch.b{left:50%;transform:rotate(-26deg)}
.hsign .card{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:19px 24px;border-radius:7px;background:#F7F1E4;color:var(--deep);
  transition:transform .22s ease-in,background .22s,color .22s;transform:rotateX(0)}
.hsign .card.turn{transform:rotateX(90deg)}
.hsign .card i{font-style:normal;font-weight:800;font-size:22px;line-height:1;color:var(--purple);opacity:.3;transition:opacity .3s,color .3s}
.hsign .card b{font-weight:800;font-size:clamp(16px,1.7vw,21px);letter-spacing:.09em;line-height:1;white-space:nowrap}
.hsign .card.open{background:var(--deep);color:#fff}
.hsign .card.open i{color:var(--lime);opacity:1}
@keyframes hswing{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}

.steps{display:grid;border-top:1.6px solid rgba(28,18,32,.3);margin:0;padding:0;list-style:none}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px clamp(18px,2.4vw,34px);
  padding:clamp(22px,3vw,34px) 0;border-bottom:1.6px solid rgba(28,18,32,.3);
  opacity:.45;transition:opacity .4s var(--ease)}
.step.is-on{opacity:1}
.step .n{grid-row:span 2;font-weight:800;letter-spacing:-.06em;line-height:.78;font-size:clamp(50px,6vw,84px);
  color:var(--ink);transition:color .4s}
.step.is-on .n{color:var(--purple)}
.step h3{align-self:center;font-weight:800;letter-spacing:-.04em;font-size:clamp(23px,2.5vw,34px);line-height:1.02}
.step p{font-size:15.5px;max-width:48ch;color:rgba(28,18,32,.78)}
@media(max-width:860px){
  .howgrid{grid-template-columns:minmax(0,1fr);gap:34px}
  .hangwrap{position:static}
  .hang .rod,.hsign{margin:0 0 0 18px}
  .step .n{grid-row:auto;font-size:clamp(42px,12vw,58px)}
  .step{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (prefers-reduced-motion:reduce){.hsign{animation:none}.hsign .card{transition:none}}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:28px 64px;align-items:start}
.faq h2{position:sticky;top:110px}
.qs{border-top:1.5px solid var(--ink)}
.qs details{border-bottom:1.5px solid var(--ink)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 0;font-weight:800;letter-spacing:-.03em;font-size:clamp(19px,1.9vw,25px)}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:600;font-size:22px;transition:transform .25s,background .2s}
.qs details[open] summary::after{transform:rotate(45deg);background:var(--purple)}
.qs details p{padding:0 0 24px;font-size:15.5px;color:var(--muted);max-width:62ch}
@media(max-width:860px){.faq{grid-template-columns:minmax(0,1fr)}.faq h2{position:static}}

@media (prefers-reduced-motion:reduce){
  .qs summary::after{transition:none}
  .track{height:auto}
  .scene{position:relative;height:100vh;height:100svh}
}

/* small object cutouts, sitting on the seam between bands */
.sec{position:relative}
.deco{position:absolute;z-index:3;pointer-events:none;-webkit-user-select:none;user-select:none;
  width:clamp(88px,10vw,150px);height:auto}
.deco-laptop-store{top:-30px;right:7%;transform:rotate(-7deg)}
.deco-swatch-fan{top:-26px;left:7%;transform:rotate(9deg);width:clamp(96px,11vw,166px)}
.deco-business-cards{top:-34px;right:11%;transform:rotate(6deg);width:clamp(78px,8.6vw,128px)}
.deco-price-tag{top:-38px;right:6%;transform:rotate(-11deg);width:clamp(34px,3.6vw,54px)}
.deco-paperclips{top:-24px;left:8%;transform:rotate(-16deg)}
.deco-notebook{top:-28px;right:8%;transform:rotate(5deg);width:clamp(96px,11vw,162px)}
@media(max-width:700px){
  .deco{width:clamp(62px,15vw,92px)}
  .deco-swatch-fan,.deco-notebook{width:clamp(68px,16vw,100px)}
  .deco-business-cards{width:clamp(56px,13vw,80px)}
  .deco-price-tag{width:clamp(26px,6vw,38px)}
  .deco-laptop-store,.deco-notebook{right:5%}
  .deco-paperclips,.deco-swatch-fan{left:5%}
}
@media (prefers-reduced-motion:reduce){.deco{transform:none}}

/* the road: a bus drives through as the band passes the viewport */
.sec.road{background:var(--ink);color:#fff;padding:clamp(64px,9vw,120px) 0 clamp(44px,6vw,80px)}
.sec.road .head h2 em{color:var(--lime)}
.sec.road .head p{color:rgba(255,255,255,.8)}
.road-stage{position:relative;margin:clamp(26px,4vw,52px) 0 clamp(22px,3vw,40px);
  height:clamp(210px,34vw,440px);overflow:hidden}
.road-sky{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,8,16,.25),rgba(14,8,16,.05) 40%,rgba(14,8,16,.35)),url(../images/street/street-bg.webp) 50% 82%/cover no-repeat}
.road-tar{display:none}
.road-dash{position:absolute;left:0;top:50%;width:300%;height:4px;margin-top:-2px;will-change:transform;
  background:repeating-linear-gradient(90deg,var(--lime) 0 46px,transparent 46px 108px);opacity:.5}

.bus{position:absolute;z-index:2;left:0;bottom:7%;width:clamp(460px,78vw,1040px);will-change:transform}
.bus .frame{position:relative;z-index:2;display:block;width:100%;height:auto}
.bus-ad{position:absolute;z-index:1;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  container-type:size;display:flex;align-items:center;overflow:hidden;background:var(--purple);
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px);background-size:7cqh 7cqh}
.ba-plus{flex:0 0 26cqw;align-self:stretch;display:grid;place-items:center;background:var(--lime);color:var(--purple);
  font-weight:900;font-size:92cqh;line-height:1;clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
.ba-word{display:grid;gap:0;padding:0 2cqw 0 1.5cqw;min-width:0;transform:rotate(-4deg)}
.ba-word b{font-weight:800;color:#fff;letter-spacing:-.045em;line-height:.95;font-size:19cqh;white-space:nowrap}
.ba-word em{font-style:italic;font-weight:300;color:var(--lime);letter-spacing:-.05em;line-height:.9;font-size:38cqh;margin:-.04em 0 .06em}
.ba-word small{font:500 6.6cqh/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.85;white-space:nowrap}
.ba-stripes{position:absolute;right:0;top:0;bottom:0;width:15cqw;
  background:repeating-linear-gradient(115deg,var(--lime) 0 3.2cqw,transparent 3.2cqw 6.4cqw);opacity:.9}
.ba-badge{position:absolute;z-index:2;right:5cqw;top:50%;width:62cqh;height:62cqh;margin-top:-31cqh;border-radius:50%;
  display:grid;place-items:center;text-align:center;background:#fff;color:var(--purple);
  font-weight:900;text-transform:uppercase;font-size:13cqh;line-height:.92;letter-spacing:-.02em;
  border:1.6cqh dashed var(--purple);outline:1.4cqh solid #fff;transform:rotate(12deg);animation:baWob 2.6s ease-in-out infinite alternate}
@keyframes baWob{from{transform:rotate(4deg) scale(.97)}to{transform:rotate(18deg) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.ba-badge{animation:none}}

.road-foot{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
.road-foot p{font-size:15px;color:rgba(255,255,255,.8);max-width:46ch}
@media(max-width:700px){
  .road-stage{height:clamp(168px,46vw,260px)}
  .bus{width:min(150vw,620px);bottom:13%}
}
@media (prefers-reduced-motion:reduce){.bus{transform:none!important;left:auto;right:4%}.road-dash{display:none}}

/* ---------- the lanyards: one per service, hanging from a rail ---------- */
.lys{list-style:none;margin:clamp(30px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 0}
.ly-cell{position:relative;display:flex;align-items:flex-start;justify-content:center;padding:0 clamp(6px,1vw,16px) clamp(10px,2vw,28px)}
.ly-cell::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:12px;background:linear-gradient(180deg,#3b2a44,var(--ink) 55%,#120a16)}
.ly-cell:first-child::before{border-radius:6px 0 0 6px}
.ly-cell:last-child::before{border-radius:0 6px 6px 0}
.ly{position:relative;display:block;container-type:inline-size;width:100%;max-width:230px;margin-top:6px;color:var(--ink);text-decoration:none;
  transform-origin:50% 0;animation:lySway 5.6s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -.9s);transition:transform .4s var(--ease)}
.ly-cell:nth-child(2) .ly{animation-duration:6.4s}.ly-cell:nth-child(3) .ly{animation-duration:5.1s}.ly-cell:nth-child(5) .ly{animation-duration:6s}
@keyframes lySway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
.ly:hover,.ly:focus-visible{animation-play-state:paused;transform:rotate(0deg) translateY(4px)}
.ly:focus-visible{outline:3px solid var(--purple);outline-offset:6px;border-radius:10px}
.ly>img{display:block;width:100%;height:auto;aspect-ratio:var(--ar)}
.ly-face{position:absolute;left:var(--cl);top:var(--ct);width:var(--cw);height:var(--ch);display:flex;flex-direction:column;gap:3cqw;padding:7cqw 6cqw 6cqw;overflow:hidden;text-align:left}
.ly-face i{font:normal 500 max(8.5px,4.3cqw)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.ly-face b{font-weight:800;font-size:max(15px,10cqw);line-height:.98;letter-spacing:-.045em}
.ly-face span{font-size:max(11px,6.3cqw);line-height:1.3;color:rgba(28,18,32,.78)}
.ly-face em{margin-top:auto;font:normal 800 max(11px,6.4cqw)/1.2 var(--sans);letter-spacing:-.01em;color:var(--purple)}
@media(max-width:1100px){.lys{grid-template-columns:repeat(3,minmax(0,1fr))}.ly-cell:nth-child(3n+1)::before{border-radius:6px 0 0 6px}.ly-cell:nth-child(3n)::before{border-radius:0 6px 6px 0}}
@media(max-width:620px){.lys{grid-template-columns:repeat(2,minmax(0,1fr))}.ly-cell:nth-child(n)::before{border-radius:0}.ly-cell:nth-child(2n+1)::before{border-radius:6px 0 0 6px}.ly-cell:nth-child(2n)::before{border-radius:0 6px 6px 0}.ly-cell{padding-inline:6px}}
@media(prefers-reduced-motion:reduce){.ly{animation:none}}

/* ======== reviews: sticky notes ======== */
.rv-sec .eyebrow,.how-sec .eyebrow{color:var(--purple)}
.rv-sec .revs{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0;gap:clamp(18px,2.4vw,36px);padding-top:clamp(10px,1.4vw,20px)}
.rv-sec .rev{position:relative;aspect-ratio:560/566;padding:clamp(34px,3.3vw,50px) clamp(16px,1.9vw,28px) clamp(18px,2vw,26px);border:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  background:var(--note) center/100% 100% no-repeat;color:var(--ink);transform:rotate(var(--r,0deg));transition:transform .35s var(--ease)}
.rv-sec .rev+.rev{border-left:0;padding-left:clamp(16px,1.9vw,28px)}
.rv-sec .rev:hover{transform:rotate(0deg) translateY(-4px)}
.rv-sec .rev blockquote{font-size:clamp(15px,1.28vw,19px);line-height:1.22;letter-spacing:-.025em}
.rv-sec .rev blockquote::before{display:none}
.rv-sec .rev figcaption b{font-size:15px}
.rv-sec .rev figcaption span{font-size:10px;color:currentColor;opacity:.7}
.rv-sec .rn1{--note:url(../images/notes/note-lime.webp);--r:-2deg}
.rv-sec .rn2{--note:url(../images/notes/note-purple.webp);--r:1.6deg;color:#fff}
.rv-sec .rn3{--note:url(../images/notes/note-cream.webp);--r:-1.1deg}
.rv-sec .rn4{--note:url(../images/notes/note-ink.webp);--r:2.2deg;color:#F6F1E7}
.rv-sec .rn2::after{content:"";position:absolute;left:12%;top:-9%;width:19%;aspect-ratio:1;background:url(../images/notes/clip.webp) center/contain no-repeat;transform:rotate(-24deg);pointer-events:none}
@media(max-width:1000px){.rv-sec .revs{grid-template-columns:repeat(2,minmax(0,1fr))}.rv-sec .rev:nth-child(n+3){border-top:0;margin-top:0}.rv-sec .rev:nth-child(3){padding-left:clamp(16px,1.9vw,28px);border-left:0}}
@media(max-width:560px){.rv-sec .revs{gap:22px 12px}.rv-sec .rev,.rv-sec .rev+.rev{padding:13% 11% 9%}.rv-sec .rev blockquote{font-size:12.5px}.rv-sec .rev figcaption b{font-size:12.5px}.rv-sec .rev figcaption span{font-size:8.5px}}

/* ======== our work: a slice of Main Street ======== */
.hs-sec{position:relative;background:var(--ink);color:#fff;padding:clamp(64px,9vw,120px) 0 clamp(54px,7vw,96px);overflow:hidden}
.hs-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,8,16,.55),rgba(14,8,16,.12) 38%,rgba(14,8,16,.5)),url(../images/street/street-bg.webp) 50% 85%/cover no-repeat}
.hs-in{position:relative;z-index:1}
.hs-sec .eyebrow{color:var(--lime)}.hs-sec .head h2 em{color:var(--lime)}.hs-sec .head p{color:rgba(255,255,255,.86)}
.hs-row{list-style:none;margin:clamp(34px,4.6vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,32px);align-items:end}
.hs-cell{display:block}
.hs{position:relative;display:block;container-type:inline-size;aspect-ratio:var(--ar,1.2);color:#fff;text-decoration:none;transition:transform .4s var(--ease)}
.hs:hover,.hs:focus-visible{transform:translateY(-6px)}
.hs:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.hs.c-purple{--ar:1.1664;--wl:13.7%;--wt:53.8%;--ww:50.3%;--wh:30.9%;--sl:16%;--st:14.9%;--sw:68%;--sh:14.6%}
.hs.c-gray{--ar:1.2265;--wl:16.7%;--wt:49.3%;--ww:50%;--wh:35.8%;--sl:18.4%;--st:12.8%;--sw:63.6%;--sh:12.6%}
.hs.c-chartreuse{--ar:1.355;--wl:15.1%;--wt:52.6%;--ww:50%;--wh:33.6%;--sl:20.3%;--st:15.2%;--sw:59.5%;--sh:14.6%}
.hs-img{position:relative;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
.hs-scr{position:absolute;z-index:2;left:var(--wl);top:var(--wt);width:var(--ww);height:var(--wh);background:#120b14;overflow:hidden}
.hs-scr img{display:block;width:100%;height:100%;object-fit:cover}
.hs-name{position:absolute;z-index:2;left:var(--sl);top:var(--st);width:var(--sw);height:var(--sh);display:grid;place-items:center;padding:0 1.6cqw;color:#F4E4B4;font-weight:800;font-size:5.2cqw;line-height:1.02;letter-spacing:-.02em;text-align:center;text-wrap:balance}
.hs-foot{display:flex;justify-content:center;margin-top:clamp(30px,4vw,54px)}
@media(max-width:700px){.hs-row{grid-template-columns:minmax(0,1fr);gap:26px;max-width:420px;margin-inline:auto}}

/* ======== how it works: three notes ======== */
.how-sec .howgrid{grid-template-columns:minmax(0,240px) minmax(0,1fr)}
.how-sec .steps{border-top:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);padding-top:6px}
.how-sec .step{position:relative;display:flex;flex-direction:column;gap:8px;aspect-ratio:560/566;padding:clamp(34px,3.3vw,50px) clamp(16px,1.8vw,26px) clamp(16px,2vw,24px);border:0;opacity:.62;
  background:var(--note) center/100% 100% no-repeat;transform:rotate(var(--r,0deg));transition:opacity .4s var(--ease),transform .4s var(--ease)}
.how-sec .step.is-on{opacity:1;transform:rotate(0deg) translateY(-6px)}
.how-sec .step:nth-child(1){--note:url(../images/notes/note-lime.webp);--r:-2deg}
.how-sec .step:nth-child(2){--note:url(../images/notes/note-purple.webp);--r:1.5deg;color:#fff}
.how-sec .step:nth-child(3){--note:url(../images/notes/note-cream.webp);--r:-1.2deg}
.how-sec .step .n{grid-row:auto;font-size:clamp(34px,3.6vw,52px);line-height:.9;color:var(--purple)}
.how-sec .step:nth-child(2) .n{color:var(--lime)}
.how-sec .step.is-on .n{color:var(--purple)}
.how-sec .step:nth-child(2).is-on .n{color:var(--lime)}
.how-sec .step h3{font-size:clamp(17px,1.5vw,22px);align-self:auto}
.how-sec .step p{font-size:clamp(12.5px,1vw,14.5px);line-height:1.4;color:inherit;opacity:.88}
@media(max-width:960px){.how-sec .howgrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.how-sec .steps{grid-template-columns:minmax(0,1fr);max-width:380px}.how-sec .step{aspect-ratio:auto;min-height:210px}.how-sec .step .n{grid-row:auto;font-size:40px}}

.hs-sec .head h2{white-space:nowrap;text-wrap:nowrap}
@media(max-width:700px){.hs-sec .head h2{font-size:clamp(28px,8.4vw,60px)}}

/* v2.16.21: bus graded for the night street; sticky notes on their own layers (no scroll flicker) */
.bus .frame{filter:brightness(.55) contrast(1.1) saturate(.8)}
.bus-ad{filter:brightness(.82) saturate(.95)}
.rv-sec .rev{backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;isolation:isolate;transform:rotate(var(--r,0deg)) translateZ(0)}
.rv-sec .rev:hover{transform:rotate(0deg) translate3d(0,-4px,0)}
.rv-sec .rn2::after{will-change:transform;backface-visibility:hidden}

/* v2.16.22: lanyard cards: a barcode and an access line instead of prices */
.ly-face .ly-bar{display:block;margin-top:auto;height:8cqw;border:0;text-decoration:none;opacity:.8;
  background:repeating-linear-gradient(90deg,var(--ink) 0 .9cqw,transparent .9cqw 1.7cqw,var(--ink) 1.7cqw 3.4cqw,transparent 3.4cqw 4.2cqw,var(--ink) 4.2cqw 4.9cqw,transparent 4.9cqw 6.4cqw)}
.ly-face small{font:normal 500 max(7.5px,3.6cqw)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(28,18,32,.6);margin-top:-1cqw}
.ly-face em{margin-top:2cqw}

/* v2.16.23: string lights over Main Street, even road head, personalised lanyard lines, centred shops on phones */
.hs-lights{width:100vw;margin:clamp(6px,1vw,16px) 0 clamp(-34px,-2.4vw,-12px) calc(50% - 50vw);pointer-events:none;position:relative;z-index:1}
.hs-lights svg{display:block;width:100%;height:auto}
.hs-lights .w1{stroke:rgba(20,10,16,.85);stroke-width:2}
.hs-row{margin-top:0}
.ly-face small{text-transform:none;letter-spacing:.04em;font-size:max(8px,3.9cqw)}
.sec.road{padding-block:clamp(64px,9vw,120px)}
.sec.road .head{align-items:center}
.road-side{display:grid;gap:16px}
.road-side p{margin:0}
.road-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.road-chips li{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 13px;border-radius:999px;background:rgba(207,225,50,.14);color:var(--lime)}
@media(max-width:700px){.hs-row{justify-items:center}.hs-cell{width:100%;display:flex;justify-content:center}.hs{width:100%}.hs-lights{margin-bottom:-6px}}
.road-chips{gap:6px}.road-chips li{font-size:9.5px;padding:8px 10px;letter-spacing:.08em}

/* v2.16.25: real photo hanging sign + delivery van */
.hang .rod,.hsign .ch{display:none}
.hsign{width:clamp(190px,19vw,262px);padding-top:0;margin:0 auto;transform-origin:50% 2%}
.hsign .card{position:relative;display:block;padding:0;border-radius:0;background:none;aspect-ratio:717/658;transform-origin:50% 0;transition:transform .22s ease-in}
.hsign .card.turn{transform:rotateX(90deg)}
.hsign .card .f{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:none}
.hsign .card .f.on{opacity:1}
.hsign .card.open{background:none}
@media(max-width:860px){.hang .rod,.hsign{margin:0 0 0 0}.hsign{width:clamp(200px,52vw,280px)}}
.bus.van{width:clamp(340px,44vw,620px);bottom:6%}
.bus.van .frame{filter:brightness(.8) saturate(.92)}
@media(max-width:700px){.bus.van{width:min(120vw,520px);bottom:10%}}

.van-box{position:relative;display:block;width:100%}

.van-ad{position:absolute;z-index:3;left:30.4%;top:47.9%;width:14.2%;aspect-ratio:172/91;container-type:size;box-sizing:border-box;display:flex;align-items:center;gap:2.5%;padding:0 4%;overflow:hidden;background:#F6F1E7;filter:brightness(.8)}
.van-ad i{flex:none;font-style:normal;font-weight:900;font-size:46cqh;line-height:.8;color:var(--purple)}
.van-ad span{display:grid;gap:0;min-width:0}
.van-ad b{font-weight:800;font-size:11.5cqh;line-height:1;letter-spacing:-.04em;color:var(--ink);white-space:nowrap}
.van-ad em{font-style:italic;font-weight:300;font-size:30cqh;line-height:.9;letter-spacing:-.05em;color:var(--purple)}
.van-ad{justify-content:center}.van-ad i{margin:0;padding:0}.van-ad span{margin:0}
.van-ad{padding:0 .9%;gap:.7%}

/* v2.16.26: lanyard link on one row, sign flips like a real door sign, home shop windows play, the van story */
.ly-face em{white-space:nowrap;font-size:max(10.5px,5.7cqw)}
.hsign{perspective:900px}
.hsign .card{transform-origin:50% 0;transition:transform .26s ease-out;will-change:transform;backface-visibility:hidden}
.hsign .card.turn{transform:rotateY(90deg);transition:transform .23s ease-in}
.hs-scr video{display:block;width:100%;height:100%;object-fit:cover}

.rd-lease{position:absolute;z-index:1;right:5%;bottom:8%;width:clamp(210px,24vw,340px);container-type:inline-size;display:block;color:var(--ink);text-decoration:none}
.rd-lease img{display:block;width:100%;height:auto}
.rd-board{position:absolute;left:15.9%;width:68%;top:15.3%;height:60.3%;display:grid;align-content:center;justify-items:center;gap:1cqw;text-align:center}
.rd-board small{font:500 max(8px,2.6cqw)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(28,18,32,.6)}
.rd-board b{font-weight:800;font-size:15cqw;line-height:.9;letter-spacing:-.06em;color:var(--purple)}
.rd-board span{font-weight:700;font-size:max(10px,3.4cqw)}
.rd-board i{margin-top:1cqw;font-style:normal;font-weight:800;font-size:max(9.5px,2.8cqw);padding:.6em 1.2em;border-radius:999px;background:var(--lime);transition:transform .4s var(--ease),background .3s}
.rd-lease.is-here i{transform:scale(1.08);background:var(--lime)}
.rd-lease.is-here .rd-board small{color:var(--purple)}
.bus.van{left:6%}
@media(max-width:700px){.rd-lease{width:min(44vw,200px);right:2%;bottom:10%}.bus.van{left:-2%;width:min(78vw,420px)}}
.rd-board span{color:var(--ink)}
@media(max-width:700px){.rd-lease{width:min(36vw,190px);right:1.5%;bottom:12%}.bus.van{left:0;width:min(60vw,380px)}}
@media(max-width:700px){.rd-board i,.rd-board small{display:none}.rd-board b{font-size:22cqw}.rd-board span{font-size:11cqw;text-align:center;line-height:1.1}}

/* v2.16.27: new storefront art on the home page */
.hs.c-gray{--ar:1.0136;--wl:17.51%;--wt:63.01%;--ww:34.76%;--wh:23.44%;--sl:40.37%;--st:33.6%;--sw:19.25%;--sh:8.13%;--fs:3.3cqw}
.hs.c-purple{--ar:1.0209;--wl:18.06%;--wt:61.03%;--ww:37.76%;--wh:25%;--sl:35.84%;--st:30.73%;--sw:27.77%;--sh:9.22%;--fs:4cqw}
.hs.c-chartreuse{--ar:1.0658;--wl:17.32%;--wt:62.28%;--ww:43.49%;--wh:24.72%;--sl:31.08%;--st:43.03%;--sw:37.62%;--sh:5.94%;--fs:3.3cqw}
.hs-name{font-size:var(--fs,4cqw);line-height:1;padding:0 .6cqw}

/* v2.16.29: road head centred, van drives right to left, tag on the left */
.sec.road .head{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.road-side{justify-items:center}
.road-chips{justify-content:center}
.deco-price-tag{right:auto;left:6%;transform:rotate(11deg)}
.bus.van{left:0}
@media(max-width:700px){.bus.van{left:0}}

/* v2.16.29: proof strip on the street */
.road-stage{height:auto;padding:clamp(40px,6vw,84px) 0}
.proof{list-style:none;margin:0 auto;padding:0 clamp(16px,4vw,48px);position:relative;z-index:2;max-width:1280px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.proof li{text-align:center;padding:clamp(20px,2.6vw,36px) clamp(12px,1.6vw,24px);background:rgba(20,10,22,.62);backdrop-filter:blur(3px);border-top:3px solid var(--lime)}
.proof b{display:block;font-weight:800;letter-spacing:-.06em;line-height:.85;font-size:clamp(54px,7vw,104px);color:var(--lime)}
.proof span{display:block;margin-top:12px;font-size:clamp(13px,1.2vw,16px);line-height:1.35;color:#fff}
@media(max-width:700px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}.road-stage{padding:32px 0}}
.proof{width:min(100%,1200px);box-sizing:border-box}.sec.road .head .eyebrow{text-align:center}
.sec.road .head h2{text-wrap:balance}
.road-stage .proof{margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;width:min(calc(100% - 32px),1200px)}

/* v2.16.31: one swinging OPEN sign; purple notes sit still (no repaint flicker); road head back; foot centred; tag on the left */
.hsign .card{transition:none;transform:none!important}
.hsign .card .f{opacity:1}
.hsign{width:clamp(200px,20vw,270px)}
.how-sec .step:nth-child(2),.how-sec .step:nth-child(2).is-on{transform:none;transition:opacity .4s var(--ease);will-change:auto}
.rv-sec .rn2,.rv-sec .rn2:hover{transform:none;transition:none;will-change:auto}
.sec.road .head{margin-bottom:20px}
.road-foot{justify-content:center;flex-direction:column;text-align:center}
.road-foot p{margin:0 auto}
.sec .deco-price-tag,.deco.deco-price-tag{right:auto!important;left:6%!important;transform:rotate(11deg)}

/* v2.16.32: sticky notes sit still (no tilt animation, no fade, no hover lift) */
.how-sec .step,.how-sec .step.is-on{opacity:1;transition:none;will-change:auto;transform:rotate(var(--r,0deg))}
.how-sec .step:nth-child(2),.how-sec .step:nth-child(2).is-on{transform:none}
.how-sec .step .n,.how-sec .step.is-on .n{transition:none}
.rv-sec .rev,.rv-sec .rev:hover{transition:none;will-change:auto;transform:rotate(var(--r,0deg))}
.rv-sec .rn2,.rv-sec .rn2:hover{transform:none}

/* road foot: same space under the button as above the line */
.sec.road{padding-bottom:clamp(32px,4vw,48px)}
.road-foot{margin-top:clamp(32px,4vw,48px)}

/* the intro computer screen in the new look: cream screen, ink type, note-coloured chips */
.scr{background:#F6F1E7;color:var(--ink)}
.scr-bar{border-bottom:1px solid rgba(28,18,32,.14)}
.scr-bar i{color:var(--purple)}
.scr h2 em{color:var(--purple)}
.scr p{color:rgba(28,18,32,.72)}
.pills a{box-shadow:none;color:var(--ink);border-radius:.3em;transform:rotate(-1.5deg)}
.pills a:nth-child(1){background:#D9DC5A}
.pills a:nth-child(2){background:#850D8C;color:#fff;transform:rotate(1.2deg)}
.pills a:nth-child(3){background:#EFE2C2;transform:rotate(-.6deg)}
.pills a:nth-child(4){background:#1C1220;color:#fff;transform:rotate(1.4deg)}
.pills a:hover{background:var(--lime);color:var(--ink)}
.go{background:var(--ink);color:#fff}
.go:hover{background:var(--purple)}

/* v2.16.35 computer-screen button: ink pill, lime arrow disc, finishes fading in before the screen goes live */
.scr .go{display:inline-flex;align-items:center;gap:.7em;padding:.45em .45em .45em 1.3em;margin-top:.5em;background:var(--ink);color:#fff;font-weight:800;border-radius:999px;transition:background .2s,color .2s}
.scr .go i{font-style:normal;display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--lime);color:var(--ink);transition:transform .2s}
.scr .go:hover{background:var(--purple)}
.scr .go:hover i{transform:translateX(.2em)}