/* ==========================================================================
   CHICKFLIX — home (cinema concept)
   One dark world; red and white bands act as screens. Front page only.
   ========================================================================== */
.cx{--ink:#1A1512;--chi:#D81F18;--tur:#D81F18;--chi-lt:#F0463D;--chi-dk:#A8120C;--bn:#FAF6F0;--sand:#F1E9DF;--mut:#54483F;
  --ln:rgba(26,21,18,.13);--dk:#17120F;--disp:var(--dsp);--bdy:var(--body);
  background:var(--bn);color:var(--ink);font-family:var(--bdy);font-size:17px;line-height:1.55}
.cx .wrap{max-width:1200px;margin-inline:auto;padding-inline:max(16px,var(--gut,16px))}
.cx h1,.cx h2,.cx h3,.cx p{margin:0}
.cxd{font-family:var(--disp);font-weight:600;line-height:1;letter-spacing:-.02em;
  text-wrap:balance;color:inherit}
.cx section[id]{scroll-margin-top:var(--hdr)}

/* buttons: same hover as the live site: lift + colour wipe rising from the bottom */
.cxb,.cxt__r button{position:relative;isolation:isolate;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease)}
.cxb::after,.cxt__r button::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease)}
.cxb:hover,.cxt__r button:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(26,21,18,.6)}
.cxb:hover::after,.cxt__r button:hover::after{transform:translateY(0)}
.cxb{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;
  border:2px solid transparent;border-radius:10px;font:700 16px/1 var(--bdy);cursor:pointer;
  background:none;color:inherit}
.cxb--red{background:var(--chi);color:var(--bn)}
.cxb--line{border-color:var(--ink)}.cxb--line:hover{color:var(--bn)}
.cxh .cxb--line,.cxv .cxb--line{border-color:#fff;color:#fff}
.cxh .cxb--line::after,.cxv .cxb--line::after{background:#fff}
.cxh .cxb--line:hover,.cxv .cxb--line:hover{color:var(--ink)}
.cxb--ink{background:var(--ink);color:var(--bn)}.cxb--ink::after{background:var(--chi)}
.cxt__r button::after{background:var(--chi)}
.cxw--alt .cxb--line:hover{color:var(--bn)}

/* ---- 1 hero: one wide film ---- */
.cxh{position:relative;overflow:hidden;min-height:min(100svh,880px);display:flex;align-items:flex-end;
  padding-top:var(--hdr);background:var(--dk);color:#fff}
.cxh__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cxh__shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(23,18,15,.9),rgba(23,18,15,.55) 55%,rgba(23,18,15,.15)),
  linear-gradient(0deg,rgba(23,18,15,.85),transparent 45%)}
.cxh__in{color:#fff;position:relative;z-index:3;padding-block:clamp(72px,9vw,120px) clamp(64px,7vw,96px)}
.cxh h1{font-size:clamp(2.5rem,6.6vw,5.6rem);max-width:13ch}
.cxh h1 .l1,.cxh h1 .l2{display:block;animation:cxrise .9s cubic-bezier(.2,.7,.2,1) both}
.cxh h1 .l2{color:var(--chi-lt);animation-delay:.18s}
.cx .cxh__sub{max-width:40ch;margin-top:22px;font-size:clamp(1.05rem,2vw,1.3rem)}
.cxh__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@keyframes cxrise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---- 2 explainer band ---- */
.cxe{background:var(--chi);color:#fff}
.cxe__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:clamp(36px,5vw,64px)}
.cxe article{padding:0 clamp(16px,3vw,40px);border-left:2px solid rgba(255,255,255,.45)}
.cxe article:first-child{padding-left:0;border-left:0}
.cxe h2{font-size:clamp(1.35rem,2.6vw,2rem);margin-bottom:10px}
.cxe p{max-width:32ch;font-weight:500}
@media(max-width:760px){.cxe__g{grid-template-columns:1fr;gap:28px}
  .cxe article{border-left:0;border-top:2px solid rgba(255,255,255,.45);padding:22px 0 0}
  .cxe article:first-child{border-top:0;padding-top:0}}

/* ---- 3 menu tickets ---- */
.cxm{padding-block:clamp(64px,9vw,112px);background:var(--bn)}
.cxm__h{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:40px}
.cxm__h h2{font-size:clamp(2rem,4.6vw,3.7rem);max-width:14ch}
.cxs .cxm__h h2{max-width:22ch}   /* this heading is longer than the menu one */
.cxw .wrap{max-width:980px}
.cxm .wrap{max-width:calc(1276px + 2 * max(16px,var(--gut,16px)))}
.cxt{display:grid;grid-template-columns:repeat(3,minmax(0,412px));gap:20px;justify-content:space-between}
.cxt__c{display:flex;flex-direction:column;background:#fff;color:var(--ink);overflow:hidden;border-radius:10px;
  box-shadow:0 0 0 1px var(--ln);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cxt__c:hover,.cxw__c:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--ln),0 28px 54px -30px rgba(26,21,18,.42)}
/* media frames match the photo shape: no bars, no backdrop */
.cxt__s,.cxw__m{position:relative;overflow:hidden;background:var(--sand)}
.cxt__s{aspect-ratio:412/209}
.cxt__s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block;transition:transform .85s var(--ease)}
.cxt__c:hover .cxt__s img{transform:scale(1.06)}
.cxt__r{display:flex;height:100px;align-items:center;justify-content:space-between;gap:16px;padding:clamp(14px,1.8vw,22px)}
.cxt__b h3{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.1}
.cxt__b p{margin-top:6px;font-size:14.5px;line-height:1.4;color:var(--mut)}
.cxt__r button{flex:none;border:0;background:var(--ink);color:var(--bn);font:700 14px/1 var(--bdy);
  padding:14px 20px;border-radius:10px;cursor:pointer;box-shadow:0 6px 14px -6px rgba(23,18,15,.45)}
@media(max-width:1000px){.cxt{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cxt{grid-template-columns:1fr}.cxt__r{height:auto;flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  .cxt__b p{font-size:13px}.cxt__r button{width:100%;padding:12px 10px}}

/* ---- 4 how it's made ---- */
.cxr{padding-block:clamp(64px,9vw,120px) 0;background:var(--sand)}
.cxr__i{max-width:760px}
.cxr__i h2{font-size:clamp(2rem,5vw,4rem)}
.cxr__i p{margin-top:18px;color:var(--mut);max-width:46ch}
.cxr__g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);
  margin-top:48px;align-items:start}
.cxr__col{position:sticky;top:calc(var(--hdr) + 20px);display:flex;justify-content:flex-start;padding-bottom:20px}
.rscreen{position:relative;aspect-ratio:4/5;width:min(100%,520px);max-height:calc(100svh - var(--hdr) - 3rem);
  overflow:hidden;background:var(--dk);border-radius:10px;
  box-shadow:0 30px 60px -30px rgba(23,18,15,.5)}
.rmedia{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.rmedia.on{opacity:1}
.rmedia video{width:100%;height:100%;object-fit:cover;display:block}
.rmedia--raw{display:grid;place-items:center;
  background:radial-gradient(120% 90% at 30% 20%,var(--chi-lt),var(--chi) 45%,var(--chi-dk) 100%)}
.rmedia--raw img{width:100%;height:100%;object-fit:cover}
.rscreen__n{position:absolute;left:12px;top:12px;z-index:5;font-size:12px;font-weight:700;color:#fff;background:rgba(23,18,15,.7);padding:5px 10px;border-radius:999px}
.scene{min-height:68vh;display:flex;flex-direction:column;justify-content:center;padding-block:24px;max-width:46ch}
.scene .when{font:700 15px/1 var(--bdy);color:var(--chi);margin-bottom:14px}
.scene h3{font-size:clamp(1.9rem,4vw,3.1rem);margin-bottom:18px}
.scene p{color:var(--ink)}.scene p+p{margin-top:12px;color:var(--mut)}
.scene:last-child{min-height:56vh}
@media(max-width:860px){
  .cxr__g{grid-template-columns:1fr;gap:0}
  .cxr__col{top:var(--hdr);z-index:5;background:var(--sand);padding-block:10px}
  .cxr__col{padding-inline:0;margin-inline:-16px}
  .rscreen{width:100%;height:36svh;min-height:210px;aspect-ratio:auto;max-height:none;border-radius:0}
  .rmedia--raw img{height:100%;object-fit:cover}
  .scene{min-height:38vh;justify-content:flex-start;padding-top:28px}.scene:last-child{min-height:34vh}
}

/* ---- 4b behind the counter ---- */
.cxk{padding-block:clamp(56px,8vw,100px);background:var(--sand)}
.cxk h2{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:32px}
.reels__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem)}
.reels__c{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--dk);border-radius:10px}
.reels__c video{width:100%;height:100%;object-fit:cover;display:block}
.reels__c figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1rem .9rem;color:#fff;
  font:600 1.02rem/1.2 var(--bdy);background:linear-gradient(0deg,rgba(23,18,15,.85),transparent)}
@media(max-width:700px){
  .reels__g{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;
    scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .reels__c{scroll-snap-align:center;aspect-ratio:9/16}
}

/* ---- 5 proof + counters ---- */
.cxp{background:var(--bn);padding-block:clamp(64px,9vw,112px)}
.cxp__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,6vw,88px);align-items:start}
.cxp h2{font-size:clamp(2rem,4.6vw,3.7rem)}
.cxp__f div{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;padding:20px 0;border-top:1px solid var(--ln)}
.cxp__f div:last-child{border-bottom:1px solid var(--ln)}
.cxp__f .k{font:600 clamp(1.6rem,2.8vw,2.3rem)/1 var(--disp);color:var(--chi);min-width:3.2ch}
.cxp__f small{display:block;color:var(--mut);font-size:15px;margin-top:2px}
@media(max-width:860px){.cxp__g{grid-template-columns:1fr}}

.cxv{background:var(--dk);color:#fff;padding-block:clamp(56px,8vw,110px)}
.cxv__g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:center}
.cxv__logo{width:clamp(84px,9vw,120px);height:auto;margin-bottom:1.4rem}
.cxv h2{font-size:clamp(2rem,4.6vw,4rem);max-width:none}
.cxv h2 em{font-style:italic;color:var(--chi-lt);display:block}
.cxv__i{display:flex;flex-wrap:wrap;gap:12px 48px;margin-top:30px;color:rgba(255,255,255,.65)}
.cxv__i b{display:block;color:#fff}
.cxv__i a{color:inherit}
.cxv__map{width:100%;aspect-ratio:4/3;border:0;border-radius:10px;display:block;background:#2b2522}
.cxv__mapph{display:grid;place-items:center;text-align:center;padding:24px;color:rgba(255,255,255,.75);font-size:15px}
@media(max-width:860px){.cxv__g{grid-template-columns:1fr}.cxv__map{aspect-ratio:4/3}.cxv h2{font-size:clamp(1.9rem,8vw,2.6rem)}}

@media(prefers-reduced-motion:reduce){
  .cxh h1 .l1,.cxh h1 .l2{animation:none}.rmedia,.cxb,.cxt__c,.cxb::after,.cxt__r button::after{transition:none}
}

/* arrows for the swipeable strip, phones only */
.reels__w{position:relative}
.reels__a{display:none}
@media(max-width:700px){
  .reels__a{display:grid;place-items:center;position:absolute;top:calc(50% - 22px);z-index:3;width:44px;height:44px;
    border-radius:10px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 6px 18px rgba(23,18,15,.3)}
  .reels__a svg{width:20px;height:20px}
  .reels__a--p{left:6px}.reels__a--n{right:6px}
}


/* ---- 5b two ways + catering/franchise: clean cards ---- */
.cxw{padding-block:clamp(56px,8vw,104px);background:var(--bn)}
.cxw__h{max-width:640px;margin-bottom:clamp(24px,4vw,44px)}
.cxw__h h2{font-size:clamp(1.9rem,4.2vw,3.2rem)}
.cxw__h p{margin-top:14px;color:var(--mut);max-width:46ch}
.cxw__g{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.cxw__c{display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--ln);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cxw__m{aspect-ratio:1/1}
.cxw__m img,.cxw__m .cxc__gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cxw__m img{transition:transform .85s var(--ease)}
.cxw__c:hover .cxw__m img{transform:scale(1.06)}
.cxw__m.gl img{visibility:hidden}
.cxw__b{padding:clamp(18px,2.4vw,30px);display:flex;flex-direction:column;gap:12px;flex:1}
.cxw__k{align-self:flex-start;padding:4px 10px;border-radius:5px;background:var(--chi);color:#fff;
  font:700 12px/1.2 var(--bdy);letter-spacing:.06em;text-transform:uppercase}
.cxw__b h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.cxw__b p{color:var(--mut);max-width:44ch}
.cxw__l{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px;padding:0;list-style:none}
.cxw__l li{padding:6px 12px;border-radius:5px;background:var(--sand);font-size:14px;font-weight:600}
.cxw__b .cxb{align-self:flex-start;margin-top:auto}
.cxw__or{position:absolute;left:50%;top:clamp(90px,12vw,150px);z-index:5;width:54px;height:54px;margin-left:-27px;
  display:grid;place-items:center;border-radius:50%;background:var(--bn);color:var(--ink);
  font:italic 600 1.2rem/1 var(--disp);box-shadow:0 0 0 5px var(--chi),0 10px 24px rgba(0,0,0,.3)}
.cxw--alt{background:var(--sand)}
.cxw--alt .cxw__or{display:none}
@media(max-width:760px){.cxw__g{grid-template-columns:1fr}.cxw__or{display:none}}
@media(prefers-reduced-motion:reduce){.cxw__m img{transition:none}}
:focus-visible{outline:3px solid var(--chi);outline-offset:3px}

/* arrows (phones) */
.reels__w{position:relative}
.reels__a{display:none}
@media(max-width:700px){
  .reels__a{display:grid;place-items:center;position:absolute;top:calc(50% - 22px);z-index:3;width:44px;height:44px;
    border-radius:10px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 6px 18px rgba(23,18,15,.3)}
  .reels__a svg{width:20px;height:20px}
  .reels__a--p{left:6px}.reels__a--n{right:6px}
}

/* ===== added: the client's brief content in the 4.14 layout ==============
   Tagline, signatures and the sauce band. Colours come from the existing
   tokens so there is still one red in the system. */
.cxh__tag{margin:0 0 .85rem;font:600 .8rem/1 var(--cond,inherit);
  letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.9}
.cxh__sub b{color:#fff;font-weight:700}

.cxs{padding-block:clamp(3rem,7vw,5.5rem);background:var(--bone,#FAF6F0)}
.cxs__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin-top:clamp(1.4rem,3vw,2.2rem)}
.cxs__g .sgc{background:#fff;color:var(--ink);margin:0;padding:10px 10px 1.1rem;
  border-radius:10px;box-shadow:0 0 0 1px var(--ln)}
.cxs__g .sgc__ph{display:block;position:relative;aspect-ratio:1;overflow:hidden;
  border-radius:10px}   /* 10px is this theme's card radius, not the old circle */
.cxs__g .sgc__ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.cxs__g .sgc__ph:hover img{transform:scale(1.04)}
.cxs__g .sgc__n{display:none}            /* six dishes are not a sequence */
.cxs__g .sgc__b{padding:1rem clamp(.9rem,2vw,1.25rem) 0}
.cxs__g .sgc__b h3{margin:0 0 .3rem;font-size:1.15rem;line-height:1.05}
.cxs__g .sgc__b p{margin:0;font-size:.89rem;line-height:1.5;opacity:.72}
@media(max-width:860px){.cxs__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cxs__g{grid-template-columns:1fr}}

.cxf{padding-block:clamp(3rem,7vw,5.5rem);background:#17120F;color:#FAF6F0}
.cxf__g{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.cxf__g > div p{max-width:46ch;opacity:.74;margin:.9rem 0 1.5rem}
.cxf__s{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:rgba(250,246,240,.14);border-block:1px solid rgba(250,246,240,.14)}
.cxf__s li{background:#17120F;padding:.9rem 1.1rem;display:flex;
  flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline}
.cxf__s b{font-size:1.02rem}
.cxf__s span{font-size:.87rem;opacity:.62}
@media(max-width:800px){.cxf__g{grid-template-columns:1fr}}

/* ==========================================================================
   NOW SHOWING  the dish rail  (replaces the .cxm card grid)
   The dish photos are cut out on the same bone as the page, so there is no
   card and no frame: the food sits straight on the paper.
   ========================================================================== */
.cxn{background:var(--bn);padding-block:clamp(54px,6.5vw,88px);overflow:hidden;
  border-top:1px solid var(--ln)}
.cxn__h{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;
  margin-bottom:clamp(22px,2.8vw,34px)}
.cxn__e{display:flex;align-items:center;gap:.6rem;margin:0 0 .85rem;
  font:600 .76rem/1 var(--cond,inherit);letter-spacing:.22em;text-transform:uppercase;
  color:var(--chi)}
.cxn__e::before{content:"";width:26px;height:2px;background:currentColor}
.cxn h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.cxn__v{position:relative}
.cxn__t{display:flex;gap:clamp(14px,2vw,34px);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;cursor:grab;
  padding-inline:max(16px,var(--gut,16px))}
.cxn__t::-webkit-scrollbar{display:none}
.cxn__t.is-grab{cursor:grabbing;scroll-behavior:auto}
/* Only once the pointer has actually travelled. Killing pointer events on
   mousedown made the Order buttons dead, because the click then resolved
   against the track instead of the button. */
.cxn__t.is-dragging .cxdh{pointer-events:none}
.cxdh{flex:0 0 clamp(208px,19vw,258px);cursor:pointer;outline:none}
.cxdh__m{position:relative;aspect-ratio:1/1;margin-bottom:.9rem}
.cxdh__m img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;
  background:var(--bn);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.cxdh__m::after{content:"";position:absolute;left:16%;right:16%;bottom:2%;height:14px;z-index:0;
  background:radial-gradient(ellipse at center,rgba(26,21,18,.26),rgba(26,21,18,0) 72%);
  opacity:0;transition:opacity .45s}
.cxdh:hover .cxdh__m img,.cxdh:focus-visible .cxdh__m img{transform:translateY(-14px) scale(1.04)}
.cxdh:hover .cxdh__m::after,.cxdh:focus-visible .cxdh__m::after{opacity:1}
.cxdh__k{position:absolute;top:-6px;left:-6px;z-index:2;pointer-events:none;
  font:700 clamp(2.4rem,3.6vw,3.4rem)/1 var(--disp);color:transparent;
  -webkit-text-stroke:1.6px var(--chi);letter-spacing:-.04em;transition:opacity .4s}
.cxdh:hover .cxdh__k{opacity:.45}
.cxdh__n{font-size:clamp(1.06rem,1.4vw,1.24rem);margin-bottom:.3rem}
.cxdh__d{font-size:.86rem;line-height:1.45;color:var(--mut)}
.cxdh__o{display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem;
  background:none;border:0;padding:0;cursor:pointer;
  font:700 .76rem/1 var(--cond,inherit);letter-spacing:.16em;text-transform:uppercase;
  color:var(--chi);opacity:0;transform:translateY(5px);
  transition:opacity .3s,transform .3s}
.cxdh__o svg{width:14px;height:14px}
.cxdh:hover .cxdh__o,.cxdh:focus-visible .cxdh__o{opacity:1;transform:none}
.cxdh:focus-visible .cxdh__n{text-decoration:underline}
.cxn__p{margin-top:clamp(20px,2.4vw,30px);height:2px;background:var(--ln);
  border-radius:999px;overflow:hidden}
.cxn__p i{display:block;height:100%;width:100%;background:var(--chi);
  border-radius:999px;transform-origin:left;transform:scaleX(.1)}
.cxn__hint{display:none}

/* ==========================================================================
   THE LINEUP  the signature index  (replaces the .cxs card grid)
   No photo grid at all. The names carry the section and one dish follows
   the pointer, so it can never read as the rail again.
   ========================================================================== */
.cxl{background:var(--dk);color:#fff;padding-block:clamp(54px,6.5vw,88px)}
.cxl__e{display:flex;align-items:center;gap:.6rem;margin:0 0 .85rem;
  font:600 .76rem/1 var(--cond,inherit);letter-spacing:.22em;text-transform:uppercase;
  color:var(--chi-lt)}
.cxl__e::before{content:"";width:26px;height:2px;background:currentColor}
.cxl__h{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;
  margin-bottom:clamp(26px,3.4vw,44px)}
.cxl h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.cxl .cxb--line{border-color:#fff;color:#fff}
.cxl .cxb--line:hover{background:#fff;color:var(--dk)}
.cxl__g{position:relative}
/* GSAP owns this element's transform, so it is centred on the pointer with
   negative margins, never a percentage translate. */
.cxl__s{--d:clamp(190px,17vw,250px);position:absolute;top:0;left:0;z-index:5;
  width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.cxl__s.live{opacity:1}
.cxl__sw{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--bn);
  box-shadow:0 26px 60px rgba(0,0,0,.5);transform:scale(.82);
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cxl__s.live .cxl__sw{transform:scale(1)}
.cxl__sw::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px solid rgba(216,31,24,.4)}
.cxl__i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.07);
  transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.cxl__i.on{opacity:1;transform:scale(1)}
.cxl__l{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.cxl__r{border-bottom:1px solid rgba(255,255,255,.14)}
.cxl__t{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(12px,1.8vw,24px);width:100%;background:none;border:0;
  padding:clamp(13px,1.9vw,26px) 2px;text-align:left;cursor:pointer;color:inherit;font:inherit}
.cxl__k{font:700 .82rem/1 var(--cond,inherit);letter-spacing:.14em;
  color:rgba(255,255,255,.42);transition:color .3s}
.cxl__nm{font-size:clamp(1.4rem,3.6vw,2.9rem);color:rgba(255,255,255,.62);
  transform-origin:left center;
  transition:color .3s,transform .45s cubic-bezier(.2,.7,.2,1)}
.cxl__ar{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.5);
  transition:background .3s,color .3s,border-color .3s,transform .45s}
.cxl__ar svg{width:16px;height:16px}
.cxl__r.on .cxl__k{color:var(--chi-lt)}
.cxl__r.on .cxl__nm{color:#fff;transform:translateX(6px)}
.cxl__r.on .cxl__ar{background:var(--chi);border-color:var(--chi);color:#fff;
  transform:translateX(4px)}
.cxl__r:not(.on) .cxl__t:hover .cxl__nm{color:rgba(255,255,255,.85);transform:translateX(5px)}
.cxl__x{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.cxl__r.on .cxl__x{grid-template-rows:1fr}
.cxl__xi{overflow:hidden}
.cxl__xi p{margin:0;padding:0 0 clamp(14px,1.6vw,20px) calc(2.1rem + clamp(12px,1.8vw,24px));
  color:rgba(255,255,255,.66);font-size:.94rem;max-width:54ch}
.cxl__mi{display:none}

@media (max-width:860px){
  .cxn__h,.cxl__h{grid-template-columns:1fr;align-items:start}
  .cxn__h .cxb,.cxl__h .cxb{justify-self:start;margin-top:4px}
  .cxn__t{scroll-snap-type:x mandatory;padding-bottom:4px;gap:22px}
  .cxdh{flex:0 0 58vw;scroll-snap-align:center}
  .cxdh__o{opacity:1;transform:none}
  .cxn__hint{display:block;margin:12px 0 0;font:600 .72rem/1 var(--cond,inherit);
    letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
  .cxl__s{display:none}
  .cxl__nm{font-size:1.16rem}
  .cxl__xi{padding-left:calc(2.1rem + 12px)}
  .cxl__xi p{padding:0 0 16px 0;font-size:.92rem}
  .cxl__mi{display:block;width:104px;height:104px;border-radius:50%;object-fit:cover;
    background:var(--bn);float:left;margin:0 14px 10px 0}
}

/* ==========================================================================
   LOUD  two ways to have it, and catering / franchise
   Desktop is the skewed split, phones get the switch. The mockup palette is
   mapped onto ours: its cream is our bone, its near-black our ink, its red
   our red. It had a yellow we do not: bone carries the badges and the disc,
   sand carries the catering card.
   ========================================================================== */
/* Anton and Archivo are scoped to these two sections; the rest of the page
   keeps Fraunces, Barlow Condensed and Inter. */
.cxtape,.cxlo,.cxchk,.cxcc{--dsp:Anton,Impact,'Arial Narrow',sans-serif;
  --bdy:Archivo,system-ui,sans-serif;font-family:var(--bdy)}
/* these two sections were authored standalone, so they carry the few base
   rules they relied on rather than assuming the theme's */
.cxtape *,.cxlo *,.cxcc *{box-sizing:border-box}
.cxlo ul,.cxcc ul{list-style:none;margin:0;padding:0}
.cxlo img,.cxcc img{display:block;max-width:100%}
.cxcc h2,.cxcc p{margin:0}

/* ------------------------------------------------------------- the tape */
.cxtape{position:relative;z-index:5;background:var(--chi);overflow:hidden;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:9px 0}
.cxtape__t{display:flex;width:max-content;will-change:transform}
.cxtape__t span{font-family:var(--dsp);font-size:clamp(15px,1.6vw,22px);letter-spacing:.08em;
  color:var(--bn);text-transform:uppercase;white-space:nowrap;padding-right:0}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cxtape__t{animation:marq 22s linear infinite}

/* ============================================ 1. the split =============== */
.cxlo{background:var(--bn)}
.cxlo__sw{display:none}
.cxlo__r{display:flex;overflow:hidden;position:relative;
  height:clamp(460px,54vw,600px);
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.cxhf{position:relative;flex:1 1 0;overflow:hidden;text-decoration:none;color:var(--bn);
  transform:skewX(-7deg);border:0;padding:0;background:none;font:inherit;text-align:left;
  transition:flex-grow .45s cubic-bezier(.2,.8,.2,1)}
.cxhf:first-child{margin-left:-70px;border-right:4px solid var(--ink)}
.cxhf:last-child{margin-right:-70px}
.cxlo__r:hover .cxhf{flex-grow:.78}
.cxlo__r .cxhf:hover,.cxlo__r .cxhf:focus-visible{flex-grow:1.55;outline:none}
.cxhf__m{position:absolute;inset:0;transform:skewX(7deg);margin:0 -70px;display:block}
.cxhf__k--m,.cxhf__t--m{display:none}
.cxhf__m img{width:100%;height:100%;object-fit:cover}
.cxhf__m::after{content:"";position:absolute;inset:0}
.cxhf--h .cxhf__m::after{background:linear-gradient(180deg,rgba(26,21,18,.15) 0%,rgba(26,21,18,.9) 78%)}
.cxhf--r .cxhf__m::after{background:linear-gradient(180deg,rgba(120,12,6,.2) 0%,rgba(52,6,3,.92) 78%)}
.cxhf__b{position:absolute;bottom:44px;transform:skewX(7deg);width:min(420px,38vw)}
.cxhf--h .cxhf__b{left:clamp(40px,7.6vw,110px)}
.cxhf--r .cxhf__b{right:clamp(40px,7.6vw,110px);text-align:right}
.cxhf__k--d{display:inline-block}
.cxhf__k{background:var(--bn);color:var(--ink);
  font:800 12px/1 var(--bdy);letter-spacing:.16em;text-transform:uppercase;padding:7px 12px}
.cxhf--h .cxhf__k{transform:rotate(-2deg)}
.cxhf--r .cxhf__k{transform:rotate(2deg)}
.cxhf__t{display:block;font-family:var(--dsp);font-size:clamp(58px,8.2vw,118px);line-height:.86;
  text-transform:uppercase;margin-top:10px}
.cxhf--h .cxhf__t{text-shadow:5px 5px 0 var(--chi)}
.cxhf--r .cxhf__t{text-shadow:5px 5px 0 var(--ink)}
.cxhf__l{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cxhf--r .cxhf__l{justify-content:flex-end}
.cxhf__l li{font:700 13px/1 var(--bdy);border:2px solid var(--bn);padding:6px 12px;border-radius:999px}
.cxhf__go{margin-top:20px;display:inline-flex;align-items:center;gap:10px;
  font:800 16px/1 var(--bdy);padding:16px 26px;border-radius:999px}
.cxhf--h .cxhf__go{background:var(--bn);color:var(--ink)}
.cxhf--r .cxhf__go{background:var(--chi);color:var(--bn)}
.cxhf__go svg{width:17px;height:17px}
.cxlo__or{position:absolute;left:50%;top:50%;z-index:4;
  transform:translate(-50%,-50%) rotate(-8deg);
  width:clamp(84px,8vw,112px);aspect-ratio:1/1;border-radius:50%;
  background:var(--bn);border:4px solid var(--ink);display:grid;place-items:center;
  font-family:var(--dsp);font-size:clamp(26px,2.6vw,34px);text-transform:uppercase;color:var(--ink)}
/* ------------------------------------------------------- the checker rule */
.cxchk{height:26px;border-bottom:4px solid var(--ink);
  background-image:repeating-conic-gradient(var(--chi) 0% 25%,var(--bn) 0% 50%);
  background-size:26px 26px}

/* ============================================ 2. crowd and city ========== */
.cxcc{background:var(--bn);padding:clamp(26px,3.4vw,40px) 0 clamp(30px,3.6vw,44px)}
.cxcc__w{max-width:1440px;margin-inline:auto;
  padding-left:max(16px,4.4vw,env(safe-area-inset-left,0px));
  padding-right:max(16px,4.4vw,env(safe-area-inset-right,0px))}
.cxcc__h{display:flex;align-items:center;justify-content:space-between;gap:40px}
.cxcc h2{font-family:var(--dsp);font-size:clamp(34px,4.6vw,66px);line-height:.9;text-transform:uppercase}
.cxcc h2 span{color:var(--chi)}
.cxcc h2 b{font-weight:inherit}
.cxcc__sm{display:none}
.cxcc__s{max-width:300px;font:600 16px/1.5 var(--bdy);text-align:right}
.cxcc__g{margin-top:clamp(14px,2vw,28px);display:flex;gap:clamp(12px,2vw,28px)}
.cxcard{flex:1;display:flex;gap:20px;align-items:center;text-decoration:none;min-width:0;
  border:4px solid var(--ink);padding:18px;box-shadow:10px 10px 0 var(--ink);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.cxcard--a{background:var(--sand);color:var(--ink);transform:rotate(-1.4deg)}
.cxcard--b{background:var(--chi);color:var(--bn);transform:rotate(1.4deg)}
.cxcard:hover,.cxcard:focus-visible{transform:rotate(0deg) translateY(-10px);
  box-shadow:0 28px 60px rgba(0,0,0,.3);outline:none}
.cxcard img{width:190px;height:150px;object-fit:cover;border:3px solid var(--ink);flex:none}
.cxcard__k{display:inline-block;font:800 11px/1 var(--bdy);letter-spacing:.16em;
  text-transform:uppercase;padding:5px 10px}
.cxcard--a .cxcard__k{background:var(--ink);color:var(--bn)}
.cxcard--b .cxcard__k{background:var(--bn);color:var(--ink)}
.cxcard__t{display:block;font-family:var(--dsp);font-size:clamp(24px,2.9vw,42px);line-height:.95;
  text-transform:uppercase;margin-top:10px}
.cxcard__p{display:block;font:600 15px/1.4 var(--bdy);margin-top:8px}
.cxcard__go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font:800 15px/1 var(--bdy);text-transform:uppercase;letter-spacing:.06em}
.cxcard__go svg{width:16px;height:16px}
.cxcc__call{display:none}

/* ================================================= the phone layout ===== */
@media (max-width:860px){
  .cxtape__t{animation-duration:16s}
  .cxlo{padding:16px 16px 20px}
  /* the switch replaces the split: one panel at a time */
  .cxlo__sw{display:flex;background:var(--ink);padding:4px;border-radius:999px}
  .cxlo__sw button{flex:1;appearance:none;border:0;cursor:pointer;height:46px;border-radius:999px;
    font:800 14px/1 var(--bdy);letter-spacing:.12em;text-transform:uppercase;
    background:none;color:var(--bn);transition:background .25s,color .25s}
  .cxlo__sw button[aria-pressed="true"]{background:var(--bn);color:var(--ink)}
  .cxlo__r{display:block;height:auto;border:0;margin-top:14px;overflow:visible}
  .cxhf{display:none;transform:none;margin:0!important;border:0!important;width:100%}
  .cxhf.on{display:block}
  .cxhf__m{position:relative;inset:auto;transform:none;margin:0;height:280px;
    border:4px solid var(--ink);overflow:hidden}
  .cxhf--h .cxhf__m::after{background:linear-gradient(180deg,rgba(26,21,18,0) 42%,rgba(26,21,18,.9) 100%)}
  .cxhf--r .cxhf__m::after{background:linear-gradient(180deg,rgba(90,10,5,0) 42%,rgba(52,6,3,.92) 100%)}
  .cxhf__k--d,.cxhf__t--d{display:none}
  .cxhf__k--m{display:inline-block;position:absolute;left:12px;top:12px;z-index:2;
    font-size:10px;letter-spacing:.14em;padding:6px 10px;transform:rotate(-3deg)}
  .cxhf--r .cxhf__k--m{transform:rotate(3deg)}
  .cxhf__t--m{display:block;position:absolute;left:14px;right:14px;bottom:12px;z-index:2;
    color:var(--bn);font-size:52px;margin:0;text-shadow:3px 3px 0 var(--chi)}
  .cxhf--r .cxhf__t--m{text-shadow:3px 3px 0 var(--ink)}
  .cxhf__b{position:static;transform:none;width:auto;text-align:left!important}
  .cxhf__l{margin-top:12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    justify-content:flex-start!important;padding-bottom:2px}
  .cxhf__l::-webkit-scrollbar{display:none}
  .cxhf__l li{flex:none;color:var(--ink);border-color:var(--ink);white-space:nowrap;padding:7px 13px}
  .cxhf__go{margin-top:14px;display:flex;justify-content:center;width:100%;height:56px;padding:0;
    border-radius:0;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
    text-transform:uppercase;letter-spacing:.08em}
  .cxhf--h .cxhf__go{background:var(--chi);color:var(--bn)}
  .cxhf--r .cxhf__go{background:var(--bn);color:var(--ink)}
  .cxlo__or{display:none}
  .cxchk{height:18px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
  .cxcc{padding:18px 0 26px}
  .cxcc__h{display:block}
  .cxcc__lg{display:none}
  .cxcc__sm{display:block}
  .cxcc__s{max-width:none;text-align:left;margin-top:6px;font-size:14px}
  .cxcc__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
  .cxcard{display:block;padding:0;border-width:3px;box-shadow:4px 4px 0 var(--ink);transform:none}
  .cxcard:hover,.cxcard:focus-visible{transform:translateY(-4px)}
  .cxcard img{width:100%;height:96px;border:0;border-bottom:3px solid var(--ink)}
  .cxcard__in{display:block;padding:10px 11px 13px}
  .cxcard__k{font-size:9px;letter-spacing:.14em;padding:0;background:none!important;color:inherit!important}
  .cxcard__t{font-size:24px;margin-top:5px}
  .cxcard__p{display:none}
  .cxcard__go{margin-top:9px;font-size:12px}
  .cxcc__call{margin-top:12px;display:flex;align-items:center;justify-content:center;height:48px;
    border:3px solid var(--ink);color:var(--ink);text-decoration:none;
    font:800 14px/1 var(--bdy);text-transform:uppercase;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}