/* La Moliisana – concept site. Structure, type scale and motion rebuilt after bavet.eu (Awwwards SOTD 2023). */
:root{
  --red:#C6372D; --red-d:#A42B23; --cream:#F5EFE6; --light:#FBF9F5; --ink:#33302D; --white:#fff;
  --f-display:"League Gothic","Impact","Arial Narrow",sans-serif;
  --f-head:"Teko","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --gap:1rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-family:var(--f-body);line-height:1.5;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;scroll-behavior:auto}
@media (min-width:1921px){html{font-size:20px}}
body{margin:0;background:var(--cream);color:var(--ink);font-weight:500;overflow-x:hidden}
html.intro body{overflow:hidden}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
p{margin:0}
h1,h2,h3,h4,h5{margin:0;font-family:var(--f-head);font-weight:500;line-height:.9;text-transform:uppercase}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.on-red :focus-visible,.bbar :focus-visible,.foot :focus-visible,.mnav :focus-visible{outline-color:#fff}
.skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--red);color:#fff;padding:.75rem 1rem;border-radius:.5rem;font-family:var(--f-head);text-transform:uppercase;font-size:1.25rem}
.skip:focus{top:1rem}

/* ---------- layout ---------- */
.container{width:100%;margin-inline:auto;padding-inline:6.9vw}
@media (min-width:640px){.container{max-width:640px;padding-inline:2rem}}
@media (min-width:768px){.container{max-width:768px}}
@media (min-width:1024px){.container{max-width:1024px;padding-inline:4rem}}
@media (min-width:1280px){.container{max-width:1280px;padding-inline:3rem}:root{--gap:1.5rem}}
@media (min-width:1536px){.container{max-width:1536px}}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.apply-py{padding-block:4rem}.apply-pt{padding-top:4rem}.apply-pb{padding-bottom:4rem}
@media (min-width:768px){.apply-py{padding-block:7rem}.apply-pt{padding-top:7rem}.apply-pb{padding-bottom:7rem}}

/* ---------- type ---------- */
.display{font-family:var(--f-display);font-weight:400;line-height:.85;text-transform:uppercase;letter-spacing:.004em;-webkit-text-stroke:.022em currentColor;paint-order:stroke fill}
.display-2{font-size:23vw}
.display-3{font-size:3.6rem}
@media (min-width:768px){.display-2{font-size:10.5rem}.display-3{font-size:5.6rem}}
@media (min-width:1280px){.display-3{font-size:7rem}}
.h2{font-family:var(--f-head);font-size:2.5rem;line-height:.9;text-transform:uppercase}
@media (min-width:768px){.h2{font-size:3rem}}
.h5{font-family:var(--f-head);font-size:1.375rem;line-height:.95;text-transform:uppercase}
@media (min-width:768px){.h5{font-size:1.5rem}}
.t-red{color:var(--red)}.t-white{color:#fff}.t-center{text-align:center}
.ol{color:var(--cream);-webkit-text-stroke:1px var(--red)}
del{text-decoration-thickness:2px}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-block;border:1px solid transparent;border-radius:.5rem;font-family:var(--f-head);font-size:1.25rem;font-weight:500;line-height:.8;padding:1.339rem 1.5rem 1.037rem;text-transform:uppercase;transition:all .25s var(--ease);user-select:none;cursor:pointer;text-align:center}
.btn-icon{padding-right:5.9rem;text-align:left}
.btn-icon::after{content:"";position:absolute;right:1.5rem;top:50%;width:2.6rem;height:1.5rem;transform:translateY(-50%);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 14' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 7h39M34 1.5 40 7l-6 5.5'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 14' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 7h39M34 1.5 40 7l-6 5.5'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .25s var(--ease)}
.btn-icon:hover::after{transform:translate(.4rem,-50%)}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-light{background:#fff;border-color:#fff;color:var(--red)}
.btn-light:hover{background:var(--red-d);border-color:var(--red-d);color:#fff}
.btn-ol-light{border-color:#fff;color:#fff}
.btn-ol-light:hover{background:#fff;color:var(--red)}
.btn-ol-red{border-color:var(--red);color:var(--red)}
.btn-ol-red:hover{background:var(--red);color:#fff}
@keyframes wiggle{40%{transform:scale(1)}50%{transform:scale(1.1)}60%{transform:scale(1)}}
.wiggle{display:inline-block;animation:wiggle 2.4s ease infinite}

/* ---------- header ---------- */
.hdr{position:absolute;top:0;left:0;z-index:60;width:100%;max-width:100vw;color:var(--ink);padding-block:1rem;transition:transform .5s var(--ease),background-color .3s}
@media (min-width:768px){.hdr{padding-block:2rem}}
@media (min-width:1280px){.hdr{padding-block:0}}
.hdr.is-in,.hdr.is-out{position:fixed;background:var(--cream);border-bottom:1px solid #e3ddd2}
.hdr.is-in{transform:translateY(-101%)}
.hdr.is-out{transform:translateY(0)}
.hdr__bar{position:relative;display:grid;grid-template-columns:3rem 1fr 3rem;align-items:center;padding-inline:6.9vw}
@media (min-width:640px){.hdr__bar{padding-inline:2rem}}
@media (min-width:1280px){.hdr__bar{display:flex;justify-content:center;height:5.5rem;padding:0}}
.hdr__nav{display:contents}
.hdr__col{display:none}
@media (min-width:1280px){
  .hdr__nav{display:flex;align-items:center;justify-content:center;width:100%}
  .hdr__col{display:flex;width:calc(50% - 5rem)}
  .hdr__col--l{justify-content:flex-end}
  .hdr__col li{padding-inline:1.5rem}
  .hdr__col--l li:last-child{padding-right:3rem}
  .hdr__col--r li:first-child{padding-left:3rem}
  .hdr__col a{display:block;font-family:var(--f-head);font-size:1.5rem;line-height:.9;text-transform:uppercase;padding:2rem 0 1.8rem;transition:color .25s}
  .hdr__col a:hover{color:var(--red)}
}
.hdr__logo{grid-column:2;justify-self:center;display:flex;align-items:center;justify-content:center;color:var(--red);transform-origin:50% 50%}
@media (min-width:1280px){.hdr__logo{flex:0 0 10rem}}
.wm{font-family:var(--f-display);font-size:2.1rem;line-height:.8;text-transform:uppercase;white-space:nowrap;-webkit-text-stroke:.03em currentColor;letter-spacing:.01em;padding-top:.15em}
.wm sup{font-family:var(--f-body);font-size:.22em;-webkit-text-stroke:0;vertical-align:top;position:relative;top:.35em;margin-left:.1em}
.lang{position:absolute;right:3.5rem;top:50%;transform:translateY(-50%);z-index:5;display:none}
@media (min-width:1280px){.lang{display:block}}
.lang__cur,.lang__opt{display:block;width:3rem;height:3rem;border-radius:.5rem;font-family:var(--f-head);font-size:1.5rem;line-height:1;padding-top:.3rem;text-align:center;transition:background .3s,color .3s}
.lang__cur{background:#fff;color:var(--red)}
.lang__opt{background:var(--red);color:#fff;margin-top:.75rem}
.lang__opt:hover{background:var(--red-d)}
.lang__drop{position:absolute;top:100%;left:0;opacity:0;visibility:hidden;transform:translateY(-.25rem);transition:opacity .25s,transform .25s,visibility .25s}
.lang:hover .lang__drop,.lang:focus-within .lang__drop,.lang.open .lang__drop{opacity:1;visibility:visible;transform:none}
.burger{grid-column:3;justify-self:end;position:relative;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;width:3rem;height:3rem;border-radius:.75rem;background:#fff;padding-inline:.85rem;z-index:70}
.burger i{display:block;height:2px;border-radius:2px;background:var(--red);transition:transform .3s,opacity .3s}
.burger i:nth-child(1),.burger i:nth-child(2){width:1.25rem}
.burger i:nth-child(2),.burger i:nth-child(3){margin-top:.375rem}
.burger i:nth-child(3){width:.75rem}
html.menu-open .burger i:nth-child(1){transform:translateY(.47rem) rotate(45deg)}
html.menu-open .burger i:nth-child(2){transform:rotate(-45deg)}
html.menu-open .burger i:nth-child(3){opacity:0}
@media (min-width:1280px){.burger{display:none}}
.mnav{position:fixed;inset:0;z-index:58;background:var(--red);color:#fff;padding:7rem 6.9vw 8rem;display:flex;flex-direction:column;overflow:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--ease),visibility 0s .6s}
html.menu-open .mnav{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s var(--ease)}
html.menu-open{overflow:hidden}
html.menu-open .hdr__logo{color:#fff}
html.menu-open .hdr{background:transparent;border-color:transparent;transform:none}
html.menu-open .toast{display:none}
.mnav a.mnav__l{display:block;font-family:var(--f-head);font-size:2.6rem;line-height:.9;text-transform:uppercase;padding:.8rem 0}
.mnav__h{font-family:var(--f-head);font-size:1.375rem;text-transform:uppercase;color:rgba(255,255,255,.5);margin:2.5rem 0 1rem}
.mnav__langs{display:flex;gap:.5rem}
.lbox{display:block;width:3rem;height:3rem;border-radius:.5rem;font-family:var(--f-head);font-size:1.5rem;line-height:1;padding-top:.3rem;text-align:center;background:var(--red-d);color:#fff;transition:background .25s,color .25s}
.lbox[aria-pressed="true"]{background:#fff;color:var(--red)}
.lbox:hover{background:#fff;color:var(--red)}

/* ---------- bottom action bar ---------- */
.bbar{position:fixed;left:50%;bottom:1.5rem;z-index:55;transform:translateX(-50%);width:calc(100% - 1rem);max-width:26rem}
@media (min-width:768px){.bbar{width:auto;max-width:none}}
.bbar__in{display:flex;gap:.375rem;padding:.375rem;border-radius:.75rem;background:var(--red);box-shadow:0 20px 25px -5px rgba(0,0,0,.18),0 8px 10px -6px rgba(0,0,0,.12)}
.bbar .btn{flex:1 1 0;min-width:0;padding:1.2rem .3rem .95rem;font-size:1.05rem;white-space:nowrap}
@media (min-width:768px){.bbar .btn{flex:none;min-width:8.2rem;padding-inline:1.25rem;font-size:1.25rem}}

/* ---------- hero + loader ---------- */
.loader{display:none}
html.intro .loader{display:block;position:fixed;inset:0;z-index:40;pointer-events:none}
.loader__mask{position:absolute;inset:0;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1366' height='1800' viewBox='0 0 1366 1800'%3E%3Cpath fill-rule='evenodd' d='M1366 0H0v1800h1366zM596 697c-112 0-203 91-203 203s91 203 203 203h175c112 0 203-91 203-203s-91-203-203-203z' fill='%23000'/%3E%3C/svg%3E") center/100% auto no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1366' height='1800' viewBox='0 0 1366 1800'%3E%3Cpath fill-rule='evenodd' d='M1366 0H0v1800h1366zM596 697c-112 0-203 91-203 203s91 203 203 203h175c112 0 203-91 203-203s-91-203-203-203z' fill='%23000'/%3E%3C/svg%3E") center/100% auto no-repeat;
  will-change:transform}
@media (orientation:portrait){.loader__mask{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='2400' viewBox='0 0 800 2400'%3E%3Cpath fill-rule='evenodd' d='M800 0H0v2400h800zM400 940c-95 0-172 77-172 172v176c0 95 77 172 172 172s172-77 172-172v-176c0-95-77-172-172-172z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='2400' viewBox='0 0 800 2400'%3E%3Cpath fill-rule='evenodd' d='M800 0H0v2400h800zM400 940c-95 0-172 77-172 172v176c0 95 77 172 172 172s172-77 172-172v-176c0-95-77-172-172-172z' fill='%23000'/%3E%3C/svg%3E")}}
.loader__rings{position:absolute;left:50%;top:50%;width:63vw;transform:translate(-50%,-50%);overflow:visible}
.loader__rings rect{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
@media (orientation:portrait){.loader__rings{width:92vw}}
.loader__rings--p{display:none}
@media (orientation:portrait){.loader__rings--l{display:none}.loader__rings--p{display:block}}

.hero{position:relative;overflow:hidden}
.cinema{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}
.cinema__rot{display:flex;flex-direction:column;gap:2rem;width:130%;flex:0 0 130%;transform:rotate(-32deg)}
@media (min-width:768px){.cinema__rot{transform:rotate(-8deg)}}
.cinema__row{white-space:nowrap}
.cinema__track{display:inline-flex;will-change:transform}
.cinema__unit{display:inline-flex;align-items:center;gap:1rem;padding-inline:1rem;flex:none}
.cw{display:inline-flex;align-items:center;white-space:nowrap;font-size:8rem}
@media (min-width:768px){.hero .cw{font-size:10.5rem}}
.cw.t-red{color:var(--red)}
.dot{display:inline-block;width:1rem;height:1rem;border-radius:50%;background:var(--red);margin-inline:.35em}
.hero__grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;min-height:100vh;min-height:100svh;padding:6rem .625rem}
.hero__picwrap{grid-column:1/-1}
@media (min-width:768px){.hero__picwrap{grid-column:3/span 8}}
@media (min-width:1024px){.hero__picwrap{grid-column:2/span 10}}
@media (min-width:1280px){.hero__picwrap{grid-column:3/span 8}}
.hero__pic{position:relative;display:block;padding-bottom:60%;border-radius:9999px;overflow:hidden;transform-origin:50% 50%}
@media (orientation:portrait){.hero__pic{padding-bottom:150%}}
@media (orientation:portrait) and (min-width:768px){.hero__pic{padding-bottom:110%}}
.hero__pic img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:50% 72%;border-radius:9999px}
@media (orientation:portrait){.hero__pic img{object-position:50% 60%}}
.hero__ov{position:absolute;inset:0;background:var(--red);opacity:0;pointer-events:none;border-radius:9999px}
html.intro .hero__pic{transform:scale(1.25)}
html.intro .hero__pic img{transform:scale(.75)}
html.intro .hero__ov{opacity:1}
html.intro .loader__rings rect{opacity:0;transform:scale(1.25)}
html.intro .bbar{opacity:0;transform:translate(-50%,160%)}
html.intro .hero .cinema__row:nth-child(odd) .cinema__shift{transform:translateX(-25%)}
html.intro .hero .cinema__row:nth-child(even) .cinema__shift{transform:translateX(25%)}
html.intro .hdr__col li,html.intro .lang,html.intro .burger{transform:translateY(-7rem)}
html.intro .lang{transform:translateY(-7rem)}
html.intro .hdr__logo{color:#fff;transform:translateY(calc(50vh - 2.75rem)) scale(2.4)}
@media (min-width:768px){html.intro .hdr__logo{transform:translateY(calc(50vh - 3.75rem)) scale(3)}}
@media (min-width:1280px){html.intro .hdr__logo{transform:translateY(calc(50vh - 2.75rem)) scale(3)}}

/* ---------- story / burst ---------- */
.story{overflow:hidden;padding-top:2rem}
.story__scene{grid-column:2/span 10;position:relative}
@media (min-width:768px){.story__scene{grid-column:4/span 6}}
.burst{position:relative;aspect-ratio:1;width:100%;pointer-events:none;transform-style:preserve-3d}
.burst svg.burst__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.burst__text{position:absolute;left:50%;top:50%;width:75%;height:75%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.burst__text svg{width:70%;overflow:visible}
@media (min-width:1280px){.burst__text svg{width:58%}}
.burst__hover{position:absolute;left:-25%;top:-25%;width:150%;height:150%;border-radius:50%;display:none}
@media (min-width:1280px) and (hover:hover){.burst__hover{display:block}}
.story__h{grid-column:1/-1;margin-top:3rem;color:var(--red)}
@media (min-width:1024px){.story__h{grid-column:2/span 10}}
@media (min-width:1280px){.story__h{grid-column:3/span 8}}
.story__p{grid-column:1/-1;margin-top:1.5rem;color:var(--red)}
@media (min-width:768px){.story__p{grid-column:2/span 10}}
@media (min-width:1024px){.story__p{grid-column:3/span 8}}
@media (min-width:1280px){.story__p{grid-column:4/span 6;margin-top:3rem}}

/* text clip reveal (SplitText masks) */
.tcr-line-mask{padding-top:.16em;margin-top:-.16em;overflow:clip}

/* ---------- plates ---------- */
.plates{position:relative;overflow-x:clip;padding-top:5rem;padding-bottom:4rem}
@media (min-width:1024px){.plates{padding-top:2rem}}
@media (min-width:1280px){.plates{padding-top:0}}
@media (min-width:768px){.plates{padding-bottom:7rem}}
.plates__scene{position:relative;display:grid;height:160vw;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
@media (min-width:640px){.plates__scene{height:76vw;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}}
.pcell{position:relative;display:flex;align-items:center;justify-content:center;z-index:1}
.pcell.is-up{z-index:3}
.pcell:nth-child(2){opacity:0;pointer-events:none}
@media (min-width:640px){.pcell:nth-child(2){opacity:1;pointer-events:auto}}
.pcell__in{position:relative;width:100%;height:100%}
.pcell__pos{position:absolute;display:flex;align-items:center;justify-content:center;transform:translate(var(--mx),var(--my))}
.pcell:nth-child(even) .pcell__pos{right:0}
@media (min-width:640px){.pcell__pos{transform:translate(var(--tx),var(--ty))}}
.plate{position:relative;width:199px;aspect-ratio:1}
@media (min-width:640px){.plate{width:22vw}}
.plate__btn{position:relative;display:block;width:100%;height:100%;border-radius:50%;cursor:pointer}
.plate__btn img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(80,40,20,.12))}
.plate__spin{width:100%;height:100%}
.hover-arrow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.hover-arrow svg{width:3rem;overflow:visible;transform:translateY(-1.5rem)}
@media (min-width:1024px){.hover-arrow svg{width:4rem}}
@media (min-width:1280px){.hover-arrow svg{width:5rem}}
.ha--a{transform:rotate(55deg)}.ha--b{transform:rotate(150deg)}
@media (min-width:640px){.ha--a{transform:rotate(-10deg)}.ha--b{transform:rotate(200deg)}}
.plates__text{position:absolute;inset:0;pointer-events:none;z-index:0}
.ptxt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;visibility:hidden}
.ptxt.is-on{visibility:visible}
.ptxt span{display:block;font-family:var(--f-display);font-size:clamp(120px,15vw,380px);line-height:.84;text-transform:uppercase}
.ptxt .f{color:var(--red);-webkit-text-stroke:.02em var(--red)}
.ptxt .o{color:var(--cream);-webkit-text-stroke:1px var(--red)}
@media (min-width:1024px){.ptxt .o{-webkit-text-stroke-width:2px}}
.wobble-on{filter:url(#wobble)}
.plates__cta{position:relative;z-index:4;text-align:center;margin-top:7rem}
@media (min-width:640px){.plates__cta{margin-top:2rem}}
@media (min-width:768px){.plates__cta{margin-top:0}}

/* ---------- menu (Bavet menu-page grid) ---------- */
.menu-sec{padding-bottom:5rem}
.menu-sec__title{color:var(--red);text-align:center;max-width:14ch;margin-inline:auto}
.menu-sec__sub{color:var(--red);text-align:center;margin-top:1.5rem}
.mcat{margin-top:4.5rem}
.mcat__t{font-family:var(--f-display);font-size:2.6rem;line-height:.85;color:var(--red);text-transform:uppercase;-webkit-text-stroke:.02em currentColor;margin-bottom:1.25rem}
@media (min-width:768px){.mcat__t{font-size:3.2rem}}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (min-width:768px){.mgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
@media (min-width:1280px){.mgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}}
.mcard{display:flex;flex-direction:column;background:var(--light);border-radius:1rem;padding:1rem 1rem 1.25rem;transition:transform .35s var(--ease)}
@media (min-width:1024px){.mcard{padding:1.25rem 1.25rem 1.5rem}}
.mcard__plate{position:relative;width:78%;margin:0 auto 1.25rem;aspect-ratio:1;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.mcard:hover .mcard__plate{transform:rotate(18deg) scale(1.04)}
.mcard__plate img{width:100%;height:100%;object-fit:contain}
.pplate{position:absolute;inset:4%;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .55rem #fff,inset 0 0 0 calc(.55rem + 1.5px) rgba(198,55,45,.45),0 10px 18px rgba(80,40,20,.08);display:flex;align-items:center;justify-content:center}
.pplate b{font-family:var(--f-display);font-weight:400;color:var(--red);font-size:clamp(2.2rem,5vw,3.6rem);line-height:.8;-webkit-text-stroke:.02em currentColor;padding-top:.1em}
.mcard__row{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.mcard__n{font-family:var(--f-head);font-size:1.3rem;line-height:.95;text-transform:uppercase;color:var(--red)}
.mcard__p{font-family:var(--f-head);font-size:1.3rem;line-height:.95;color:var(--red);white-space:nowrap}
.mcard__d{font-size:.875rem;line-height:1.35;margin-top:.5rem;color:var(--ink)}
.mcard--txt{justify-content:flex-start}
.mcard--quip{background:transparent;justify-content:center;text-align:center;padding:1rem}
.mcard--quip p{font-family:var(--f-head);font-size:1.9rem;line-height:.92;text-transform:uppercase;color:var(--red)}
@media (min-width:1280px){.mcard--quip p{font-size:2.2rem}}
.star{color:var(--red);font-size:.8em;vertical-align:.1em;margin-left:.15em}
.mbar{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;background:var(--light);border-radius:1rem;padding:1rem 1rem 1rem 1.5rem}
.mbar p{font-family:var(--f-head);font-size:1.5rem;line-height:.95;text-transform:uppercase;color:var(--red)}
@media (min-width:768px){.mbar p{font-size:1.9rem}}

/* ---------- place slider ---------- */
.place{position:relative;margin-inline:.5rem;border-radius:.75rem;overflow:hidden;background:var(--red);color:#fff;isolation:isolate}
.place__bg{position:absolute;inset:0;overflow:hidden;z-index:-1}
.place__track{display:flex;height:100%;width:max-content;animation:slidebg 48s linear infinite}
.place__slide{position:relative;flex:0 0 auto;width:calc(100vw - 1rem);height:100%}
.place__slide img{width:100%;height:100%!important;object-fit:cover}
.place__slide::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
@keyframes slidebg{to{transform:translateX(-50%)}}
.cities{position:absolute;top:0;left:0;display:flex;overflow:hidden;padding-block:1.5rem;width:100%}
.cities__run{display:flex;flex:none;align-items:center;gap:.5rem;padding-right:.5rem;animation:runleft 40s linear infinite}
.cities__run .h5{white-space:nowrap}
.cities__run i{display:block;width:.625rem;height:1px;background:#fff;margin-bottom:.25rem}
@keyframes runleft{to{transform:translateX(-100%)}}
.place__body{position:relative}
.place__inner{grid-column:1/-1;margin:12rem 0 2rem;text-align:center}
@media (min-width:1024px){.place .g12{min-height:100vh;align-items:center}.place__inner{margin:5rem 0}}
@media (min-width:1280px){.place__inner{grid-column:3/span 8}}
.place__inner .btn{margin-top:1rem}
@media (min-width:1024px){.place__inner .btn{margin-top:2rem}}

/* ---------- record / pinned ---------- */
.rec{position:relative;overflow:hidden}
.rec__head{grid-column:1/-1;text-align:center}
@media (min-width:1024px){.rec__head{grid-column:2/span 10}}
@media (min-width:1280px){.rec__head{grid-column:3/span 8}}
.rec__head h2{color:var(--red)}
.rec__copy{color:var(--red);margin:1rem auto 0;max-width:40rem;text-align:center}
@media (min-width:768px){.rec__copy{margin-top:2rem}}
@media (min-width:1280px){.rec__copy{margin-top:3rem}}
.rec__copy p+p{margin-top:.6rem}
.rec__scroll{position:relative}
.rec__stage{position:relative;height:100vh;height:100svh}
.rec__cinema{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);max-width:100%;overflow:hidden}
.rec__cinema .cinema__rot{transform:none;width:100%;flex:none}
.rec__cinema .cw{font-size:6rem}
@media (min-width:768px){.rec__cinema .cw{font-size:7.5rem}}
.rec__grid{position:relative;height:100%;display:grid;align-items:center}
.rec__wrap{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.rec__disc{grid-column:1/-1;order:2}
@media (min-width:1024px){.rec__disc{grid-column:span 6}}
.rec__imgwrap{position:relative;margin:0 auto;width:78%}
@media (min-width:1024px){.rec__imgwrap{width:75%}}
.circle-mask{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);border-radius:50%;background:var(--red)}
.rec__record{position:relative;width:100%;height:auto;border-radius:50%;box-shadow:0 0 0 .6rem rgba(255,255,255,.0)}
.rec__card{display:none;order:1;grid-column:span 3}
.rec__card--r{order:3}
@media (min-width:1024px){.rec__card{display:block}}
.rec__card figure{margin:0;aspect-ratio:9/16;border-radius:1rem;overflow:hidden;background:#2a1b17}
.rec__card img{width:100%;height:100%!important;object-fit:cover}
.rec__card figcaption{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);width:82%;text-align:center;font-family:var(--f-body);font-weight:600;font-size:.95rem;line-height:1.35}
.rec__card figcaption span{background:rgba(255,255,255,.88);color:var(--red);padding:.1rem .35rem;border-radius:.25rem;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rec__card{position:relative}

/* ---------- takeout ---------- */
.take{background:var(--red);color:#fff;position:relative;z-index:1;overflow-x:clip}
.take__col{grid-column:1/-1}
@media (min-width:1024px){.take__col{grid-column:3/span 8}}
.take__imgs{position:relative;padding:11.5%}
.take__imgs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;height:auto}
.take__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.take__ring text{font-family:var(--f-display);font-size:86px;letter-spacing:.09em;fill:#fff;text-transform:uppercase}
.take__boxes{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
@media (min-width:768px){.take__boxes{margin-top:3rem}}
.tbox{width:28vw;border-radius:1rem;background:#fff;color:var(--red);padding:1.05rem .5rem .75rem;text-align:center;font-family:var(--f-head);font-size:1.25rem;line-height:.9;text-transform:uppercase;transition:transform .3s var(--ease)}
.tbox:hover{transform:translateY(-.25rem)}
@media (min-width:640px){.tbox{width:8rem;padding-block:1.35rem 1.05rem}}
.take__cap{margin-top:1rem;text-align:center;font-family:var(--f-head);font-size:1.25rem;text-transform:uppercase}
@media (min-width:768px){.take__cap{margin-top:1.5rem}}

/* ---------- reserve (app section) ---------- */
.app{background:var(--red);color:#fff;overflow:hidden;position:relative}
.app .g12{align-items:center;position:relative}
.app__phonecol{grid-column:1/-1;justify-self:center;width:12rem;position:relative}
@media (min-width:768px){.app__phonecol{width:15rem}}
@media (min-width:1024px){.app__phonecol{grid-column:3/span 4;width:100%;max-width:22rem}}
.app__wob{position:absolute;left:50%;top:50%;transform:translate(-62%,-50%);font-family:var(--f-display);font-size:clamp(150px,25vw,190px);line-height:.82;text-align:center;text-transform:uppercase;color:#fff;-webkit-text-stroke:.02em #fff;white-space:nowrap;pointer-events:none;z-index:0}
@media (min-width:1280px){.app__wob{font-size:240px;transform:translate(-78%,-50%)}}
.app__wob span{display:block}
.phone{position:relative;z-index:1;width:100%;aspect-ratio:9/18.6;border-radius:2.6rem;padding:.6rem;background:linear-gradient(150deg,#e9e9ee 0%,#9a9aa2 45%,#d7d7dc 100%);box-shadow:0 40px 60px -20px rgba(40,0,0,.45);transform:rotate(-16deg)}
@media (max-width:1023px){.phone{border-radius:2rem;padding:.45rem}}
.phone__screen{position:relative;width:100%;height:100%;border-radius:2.1rem;overflow:hidden;background:#F3EADF;display:flex;flex-direction:column;color:var(--ink)}
@media (max-width:1023px){.phone__screen{border-radius:1.65rem}}
.phone__notch{position:absolute;top:.55rem;left:50%;transform:translateX(-50%);width:32%;height:1.35rem;border-radius:1rem;background:#111;z-index:2}
.phone__top{background:var(--red);color:#fff;padding:2.6rem .9rem .8rem;display:flex;align-items:center;gap:.6rem}
.phone__av{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;font-family:var(--f-display);font-size:1.25rem;-webkit-text-stroke:.02em currentColor;padding-top:.15rem}
.phone__nm{font-weight:600;font-size:.95rem;line-height:1.1}
.phone__st{font-size:.7rem;opacity:.8}
.phone__hero{background:var(--red);color:#fff;padding:.4rem .9rem 1.4rem;border-bottom-left-radius:1.4rem 1rem;border-bottom-right-radius:1.4rem 1rem}
.phone__big{font-family:var(--f-display);font-size:2.9rem;line-height:.85;text-transform:uppercase;-webkit-text-stroke:.02em #fff}
.phone__chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}
.phone__chips span{background:#fff;color:var(--red);border-radius:2rem;padding:.3rem .6rem .15rem;font-family:var(--f-head);font-size:1rem;line-height:1;text-transform:uppercase}
@media (max-width:1023px){.phone__big{font-size:1.9rem}.phone__chips span{font-size:.75rem;padding:.2rem .45rem .1rem}.phone__hero{padding-bottom:.9rem}}
.phone__chat{flex:1;padding:1.1rem .75rem;display:flex;flex-direction:column;justify-content:flex-start;gap:.6rem;background-image:radial-gradient(rgba(198,55,45,.08) 1px,transparent 1.2px);background-size:14px 14px}
.bub{max-width:86%;font-size:.78rem;line-height:1.35;padding:.55rem .7rem .4rem;border-radius:.9rem;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bub--out{align-self:flex-end;background:#fff;border-bottom-right-radius:.2rem}
.bub--day{align-self:center;background:rgba(255,255,255,.75);font-size:.65rem;padding:.2rem .55rem;border-radius:.4rem;text-transform:uppercase;letter-spacing:.04em}
.bub small{display:block;text-align:right;font-size:.62rem;opacity:.6;margin-top:.2rem}
.bub--typing{align-self:flex-start;background:#fff;border-bottom-left-radius:.2rem;display:flex;gap:.25rem;padding:.65rem .75rem}
.bub--typing i{width:.4rem;height:.4rem;border-radius:50%;background:#bbb;animation:typing 1.2s infinite}
.bub--typing i:nth-child(2){animation-delay:.2s}.bub--typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-.25rem);opacity:1}}
.phone__in{display:flex;gap:.45rem;align-items:center;padding:.55rem .6rem 1.1rem}
.phone__in span{flex:1;background:#fff;border-radius:1rem;padding:.45rem .7rem;font-size:.72rem;color:#999}
.phone__in b{width:2rem;height:2rem;border-radius:50%;background:var(--red);display:grid;place-items:center}
@media (max-width:1023px){.phone__top{padding-top:2rem}.bub{font-size:.62rem}.phone__nm{font-size:.8rem}}
.app__art{grid-column:1/-1;margin-top:6rem}
@media (min-width:1024px){.app__art{grid-column:8/span 5;margin-top:0}}
.app__art h2{color:#fff}
.app__art p{margin-top:1.5rem;color:rgba(255,255,255,.82);max-width:30rem}
.app__qr{display:none;align-items:center;gap:1.5rem;margin-top:3rem}
@media (min-width:1280px){.app__qr{display:flex}}
.app__qr .qr{width:7rem;height:7rem;background:#fff;padding:.45rem;border-radius:.25rem}
.app__qr .qr svg{width:100%;height:100%}
.app__qr .scan{width:16rem;color:#fff}
.app__art .btn{margin-top:2.5rem}
@media (min-width:1280px){.app__art .btn{margin-top:3rem}}

/* ---------- reputation cards ---------- */
.rep__h{grid-column:1/-1;text-align:center;color:var(--red);margin-bottom:3rem}
@media (min-width:1024px){.rep__h{grid-column:3/span 8;margin-bottom:4rem}}
.rep__cards{row-gap:1rem}
@media (min-width:1280px){.rep__cards{row-gap:1.5rem}}
.rcard{grid-column:span 6;display:flex;align-items:center;justify-content:center;background:var(--light);border-radius:1rem;padding:2rem 1rem;min-height:12rem;text-align:center;color:var(--red);transition:background-color .3s,color .3s}
@media (min-width:768px){.rcard{padding:4rem 3.5rem;min-height:15.5rem}}
@media (min-width:1024px){.rcard{grid-column:span 3;padding:4rem 2rem}}
.rcard:hover{background:var(--red);color:#fff}
.rcard__big{display:block;font-family:var(--f-display);font-size:3.2rem;line-height:.82;text-transform:uppercase;-webkit-text-stroke:.02em currentColor}
@media (min-width:1280px){.rcard__big{font-size:3.9rem}}
.rcard__sm{display:inline-block;margin-top:.45rem;font-family:var(--f-head);font-size:1.1rem;line-height:1;padding:.25rem .45rem .05rem;border:1.5px solid currentColor;border-radius:.3rem;text-transform:uppercase}
.rcard__n{display:block;margin-top:.6rem;font-size:.8rem;opacity:.75}

/* ---------- split blocks ---------- */
.split{position:relative;margin:.5rem .5rem 0}
.split__img{display:block;width:100%;height:100vw!important;object-fit:cover;border-radius:.75rem;margin-bottom:.5rem;position:relative;z-index:1}
@media (min-width:1024px){.split__img{position:absolute;top:0;height:100%!important;width:calc(50% - .25rem);margin-bottom:0}.split--r .split__img{right:0}.split--l .split__img{left:0}}
.split__body{position:relative;border-radius:1rem}
.split__bg{position:absolute;top:0;height:100%;width:100%;border-radius:1rem;background:var(--light)}
@media (min-width:1024px){.split__bg{width:calc(50% - .25rem)}.split--r .split__bg{left:0}.split--l .split__bg{right:0}}
.split__art{position:relative;grid-column:1/-1;padding:10rem 0 1.5rem}
@media (min-width:768px){.split__art{padding:7rem 0}}
@media (min-width:1024px){.split--r .split__art{grid-column:1/span 6;padding:12rem 0 3rem;min-height:49vw;display:flex;flex-direction:column;justify-content:flex-end}}
@media (min-width:1280px){.split--r .split__art{padding:16rem 3rem 6rem 0}}
@media (min-width:1024px){.split--l .split__art{grid-column:8/span 5;padding:4rem 0}}
@media (min-width:1280px){.split--l .split__art{grid-column:7/span 6;padding:9rem 0 9rem 6rem}}
.split h2{color:var(--red);margin-bottom:2rem}
@media (min-width:1280px){.split h2{margin-bottom:2.5rem}}
.stamp{position:absolute;color:var(--red);pointer-events:none}
.stamp--q{right:0;top:0;width:32%;max-width:12rem;margin:1rem}
@media (min-width:1024px){.stamp--q{right:calc(50% + 1.5rem)}}
.stamp--v{right:0;top:0;width:10rem;margin:1rem}
@media (min-width:768px){.stamp--v{width:12rem;margin:2rem}}
.gbadge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-head);font-size:1.3rem;line-height:1;text-transform:uppercase;color:var(--red);border:1.5px solid var(--red);border-radius:2rem;padding:.55rem .9rem .3rem;margin-bottom:1.75rem}
.gbadge b{font-weight:500}
.quote{margin:0 0 1.5rem;max-width:34rem}
.quote p{font-size:1rem;line-height:1.55}
.quote p::before{content:"\201C"}.quote p::after{content:"\201D"}
.quote footer{margin-top:.5rem;font-family:var(--f-head);font-size:1.15rem;line-height:1;text-transform:uppercase;color:var(--red)}
.split .btn{margin-top:1rem}
@media (min-width:768px){.split .btn{margin-top:1.5rem}}
.vlist{display:grid;gap:1rem;margin-bottom:.5rem;max-width:30rem}
.vlist div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;border-bottom:1px solid #e6dfd4;padding-bottom:.9rem}
.vlist dt{font-family:var(--f-head);font-size:1.25rem;line-height:1;text-transform:uppercase;color:var(--red);padding-top:.2rem}
.vlist dd{margin:0;line-height:1.45}
.vlist a{border-bottom:1px solid var(--red);color:var(--red)}
.vbtns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.vbtns .btn{margin-top:0}

/* ---------- gallery (gazet) ---------- */
.gal{position:relative;overflow:hidden}
.gal__sketch{position:absolute;right:-8rem;top:4rem;width:14rem;pointer-events:none;color:var(--red);animation:tease 6s ease infinite}
@media (min-width:768px){.gal__sketch{right:-1rem;width:16rem}}
@media (min-width:1024px){.gal__sketch{width:20rem}}
@media (min-width:1280px){.gal__sketch{width:28rem;right:-1rem}}
@keyframes tease{0%,to{transform:translateX(0)}33%,66%{transform:translateX(1rem)}}
.gal__logo{display:table;margin:0 auto;text-align:center;color:var(--red)}
.gal__logo span{display:block;font-family:var(--f-display);line-height:.82;text-transform:uppercase;-webkit-text-stroke:.025em currentColor}
.gal__logo span:first-child{font-size:4.3rem;letter-spacing:.012em}
.gal__logo span:last-child{font-size:4.7rem}
.gal__sub{color:var(--red);text-align:center;margin-top:1.5rem}
.gal__strip{position:relative;margin-top:2rem}
@media (min-width:768px){.gal__strip{margin-top:3rem}}
@media (min-width:1280px){.gal__strip{margin-top:4rem}}
.gal__track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;padding-bottom:.5rem;overscroll-behavior-x:contain}
.gal__track::-webkit-scrollbar{display:none}
.gal__track.is-drag{cursor:grabbing;scroll-snap-type:none}
@media (min-width:1280px){.gal__track{gap:1.5rem}}
.gcard{flex:0 0 82%;scroll-snap-align:start;user-select:none}
@media (min-width:768px){.gcard{flex-basis:calc((100% - 1rem)/2)}}
@media (min-width:1280px){.gcard{flex-basis:calc((100% - 3rem)/3)}}
.gcard__img{height:16rem;border-radius:1rem;overflow:hidden}
.gcard__img img{width:100%;height:100%!important;object-fit:cover;transition:transform .8s var(--ease);pointer-events:none}
.gcard:hover .gcard__img img{transform:scale(1.04)}
.gcard__tag{margin:1rem 0 .5rem;line-height:1.25}
.gcard h3{font-family:var(--f-head);font-size:1.9rem;line-height:.9;color:var(--red);margin-bottom:.5rem}
.gcard p:last-child{color:#2b2623}
.gal__cta{text-align:center;margin-top:2rem}
@media (min-width:768px){.gal__cta{margin-top:3rem}}

/* ---------- footer ---------- */
.foot{background:var(--red);color:#fff;margin-top:.5rem}
.foot__top{padding-top:4rem}
@media (min-width:768px){.foot__top{padding-top:6rem}}
@media (min-width:1280px){.foot__top{padding-top:7rem}}
.foot__brand{grid-column:1/-1;position:relative;justify-self:center;text-align:center}
@media (min-width:768px){.foot__brand{justify-self:start;text-align:left}}
@media (min-width:1280px){.foot__brand{grid-column:1/span 3}}
.foot__brand .wm{font-size:3.1rem;color:#fff}
@media (min-width:1280px){.foot__brand .wm{font-size:3.7rem}}
.foot__say{width:8rem;margin-top:3rem;color:#fff}
@media (max-width:1279px){.foot__say{display:none}}
.foot__cols{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:3rem 1.5rem;margin-top:4rem}
@media (min-width:768px){.foot__cols{grid-template-columns:repeat(3,1fr);margin-top:4rem}}
@media (min-width:1280px){.foot__cols{grid-column:4/span 6;grid-row:1;margin-top:0}}
.foot h3{font-family:var(--f-head);font-size:1.5rem;opacity:.45;padding-bottom:.75rem}
.foot__cols ul{display:flex;flex-direction:column;gap:.85rem}
@media (min-width:768px){.foot__cols ul{gap:1rem}}
.foot__cols li{line-height:1.2}
.foot__cols a{transition:color .2s,opacity .2s}
.foot__cols a:hover{opacity:.7}
.foot__side{grid-column:1/-1;margin-top:4rem;display:flex;flex-wrap:wrap;gap:3rem}
@media (min-width:1280px){.foot__side{grid-column:10/span 3;grid-row:1;margin-top:0;flex-direction:column;gap:4rem}}
.foot__soc{display:flex;gap:1.75rem}
.foot__soc a{display:block;width:2rem;height:2rem;transition:transform .25s}
.foot__soc a:hover{transform:translateY(-3px)}
.foot__soc svg{width:100%;height:100%}
.foot__langs{display:flex;gap:.5rem}
.foot__bot{margin-top:4rem;border-top:1px solid rgba(255,255,255,.22);padding:2rem 0 9rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-size:.9rem;color:rgba(255,255,255,.6)}
@media (min-width:768px){.foot__bot{padding-bottom:7.5rem}}
.foot__bot a{color:#fff}
.foot__bot a:hover{text-decoration:underline}

/* ---------- concept toast ---------- */
.toast{position:fixed;left:1rem;bottom:6.5rem;z-index:80;max-width:min(22rem,calc(100% - 2rem));background:var(--light);color:var(--ink);border:1px solid rgba(198,55,45,.35);border-radius:.75rem;box-shadow:0 18px 40px -12px rgba(60,20,10,.35);padding:.9rem 2.6rem .9rem 1rem;font-size:.85rem;line-height:1.4;transform:translateY(1rem);opacity:0;transition:opacity .4s,transform .4s}
@media (min-width:768px){.toast{bottom:1.5rem}}
.toast.show{opacity:1;transform:none}
.toast b{color:var(--red);font-weight:600}
.toast__x{position:absolute;right:.4rem;top:.4rem;width:2rem;height:2rem;border-radius:.4rem;display:grid;place-items:center;color:var(--red)}
.toast__x:hover{background:rgba(198,55,45,.08)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .loader{display:none!important}
  .wobble-on{filter:none}
}
