/* Que Pasa Mexican Kitchen & Tequila (Destin)
   Editorial and photography-led, in the logo's colours: cantina black, bone and hot pink.
   Every section has its own composition: photo triptych hero, moving feature ribbon, editorial about with staggered
   photos, numbered dish list with a cursor-following plate, full-bleed split order block, expanding bar photo,
   one-at-a-time reviews, info-board location, giant order call-to-action footer.
   Square corners, hairline rules, soft realistic shadows. Headlines: Oswald caps. Accents: Playfair Display italic. */

@font-face{font-family:"Oswald";src:url(assets/fonts/oswald.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(assets/fonts/playfair-italic.woff2) format("woff2");font-style:italic;font-weight:500 700;font-display:swap}
@font-face{font-family:"Manrope";src:url(assets/fonts/manrope.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --bone:#F7F0E3; --bone-2:#EFE4CF; --paper:#FFFBF3; --ink:#141011; --ink-2:#1E1819; --ink-soft:#5A4E4A; --line:rgba(20,16,17,.14); --line-d:rgba(247,240,227,.18);
  --pink:#EC4394; --pink-d:#C4126A; --pink-dd:#A30D57; --gold:#E3A23B;
  --display:"Oswald","Arial Narrow",sans-serif; --serif:"Playfair Display",Georgia,serif; --body:"Manrope",system-ui,sans-serif;
  --shell:1360px; --gut:clamp(18px,4vw,56px); --hd-h:92px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 50px 90px -50px rgba(20,16,17,.6),0 18px 34px -24px rgba(20,16,17,.35);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bone);color:var(--ink);font:400 17px/1.7 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:.98;letter-spacing:.005em;text-transform:uppercase}
p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
figure{margin:0}
.shell{width:min(100% - var(--gut)*2,var(--shell));margin-inline:auto}
.skip{position:absolute;left:-999px;top:12px;z-index:100;padding:10px 16px;background:var(--pink-d);color:#fff}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px; box-shadow: 0 0 0 3px var(--ink); }
.ic{width:20px;height:20px;flex:none}
.neon{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;color:var(--pink-d)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 26px;font:600 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .35s,color .35s,box-shadow .35s}
.btn-ic{width:18px;height:18px;transition:transform .45s var(--ease)}
.btn:hover .btn-ic{transform:translateX(4px)}
.btn-pink{background:var(--pink-d);color:#fff}
.btn-pink:hover{background:var(--pink-dd)}
.btn-ghost{box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bone)}
.btn-light{background:var(--bone);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-line{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);color:#fff}
.btn-line:hover{background:#fff;color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

.kicker{display:inline-flex;align-items:center;gap:14px;margin-bottom:22px;font:500 13.5px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--pink-d)}
.kicker::before{content:"";width:40px;height:1px;background:currentColor}
.sec-head{margin-bottom:clamp(40px,5vw,72px)}
.sec-t{font-size:clamp(42px,5.6vw,92px)}
.sec-t .neon{font-size:.88em}
.lead{max-width:56ch;font-size:clamp(16.5px,1.3vw,18.5px);color:var(--ink-soft)}
.status,[data-open-status]{display:inline-flex;align-items:center;gap:9px;font-weight:700}
[data-open-status] i{width:8px;height:8px;border-radius:50%;background:#A89C90;flex:none}
[data-open-status].is-open i{background:#3DBE6A;box-shadow:0 0 0 4px rgba(61,190,106,.22)}

/* ---------- header: transparent over the photography, solid on scroll ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;color:var(--bone);background:linear-gradient(180deg,rgba(20,16,17,.6),rgba(20,16,17,0));transition:background .45s,transform .45s var(--ease)}
.site-header[data-state="scrolled"],.site-header[data-state="hidden"]{background:rgba(20,16,17,.97)}
.site-header[data-state="hidden"]{transform:translateY(-100%)}
.hd-in{display:flex;align-items:center;gap:28px;width:min(100% - var(--gut)*2,1480px);margin-inline:auto;height:var(--hd-h);transition:height .45s var(--ease)}
.site-header[data-state="scrolled"] .hd-in{height:74px}
.brand img{height:60px;width:auto;transition:height .45s var(--ease)}
.site-header[data-state="scrolled"] .brand img{height:48px}
.hd-nav{display:flex;align-items:center;gap:clamp(14px,2vw,34px);margin-left:auto}
.hd-nav a{position:relative;padding:10px 0;font:500 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--pink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.hd-nav a:hover::after,.hd-nav a[aria-current]::after{transform:none;transform-origin:left}
.hd-nav a[aria-current]{color:inherit}
.hd-nav .nv-order{order:9;padding:15px 24px;background:var(--pink-d);color:#fff;transition:background .3s}
.hd-nav .nv-order::after{display:none}
.hd-nav .nv-order:hover{background:var(--pink-dd)}
.hd-phone{display:none;align-items:center;gap:8px;margin-left:auto;font:500 15px/1 var(--display);letter-spacing:.1em}
.hd-phone .ic{width:17px;height:17px;color:var(--pink)}
.hd-burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line-d)}
.mnav{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;padding:100px var(--gut) 40px;background:var(--ink);color:var(--bone);opacity:0;transition:opacity .35s}
.mnav.is-open{opacity:1}
.mnav nav{display:grid}
.mnav nav a{padding:12px 0;border-bottom:1px solid var(--line-d);font:600 clamp(30px,8vw,44px)/1.1 var(--display);text-transform:uppercase}
.mnav nav a[aria-current]{color:var(--pink)}
.mnav-close{position:absolute;top:22px;right:var(--gut);width:48px;height:48px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-d)}
.mnav-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;font:500 22px/1 var(--display);letter-spacing:.06em}
.soc{display:flex;gap:10px}
.soc a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;transition:background .3s,color .3s,box-shadow .3s}
.soc a:hover{background:var(--pink-d);color:#fff;box-shadow:inset 0 0 0 1px var(--pink-d)}
.soc .ic{width:17px;height:17px}

/* ---------- 1. hero: full-screen photo triptych, title centred across it ---------- */
.hero{position:relative;display:grid;place-items:center;height:100svh;min-height:680px;max-height:1060px;overflow:hidden;background:var(--ink);color:var(--bone)}
.hx-panels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.hx-p{position:relative;overflow:hidden;background:var(--ink-2)}
.hx-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-shade{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(20,16,17,.86),rgba(20,16,17,.5) 78%),linear-gradient(180deg,rgba(20,16,17,.55) 0%,transparent 22%,transparent 62%,rgba(20,16,17,.92) 100%)}
.hx-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:110px var(--gut) 120px;text-align:center}
.hero-welcome{display:inline-flex;align-items:center;gap:16px;font:500 14px/1 var(--display);letter-spacing:.4em;text-transform:uppercase;color:var(--bone)}
.hero-welcome::before,.hero-welcome::after{content:"";width:44px;height:1px;background:var(--pink)}
.hero-title{margin-top:22px}
.ht-brand{display:block;font:600 clamp(84px,13.4vw,236px)/.84 var(--display);letter-spacing:-.005em;color:var(--bone);text-shadow:0 20px 60px rgba(0,0,0,.35)}
.hero-sub-t{display:block;margin-top:16px;font:italic 500 clamp(26px,3vw,50px)/1.1 var(--serif);text-transform:none;letter-spacing:0;color:#F46BAA;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hero-tag{margin-top:20px;font:500 14px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:#E1D6C4}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.hx-strip{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);width:min(100% - var(--gut)*2,1480px);margin-inline:auto;border-top:1px solid var(--line-d);font:500 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#E1D6C4}
.hx-strip li{display:flex;align-items:center;justify-content:center;padding:26px 12px}
.hx-strip li + li{border-left:1px solid var(--line-d)}
.hx-strip a{display:inline-flex;align-items:center;gap:10px;transition:color .3s}
.hx-strip a:hover{color:#fff}
.hx-strip .ic{width:16px;height:16px;color:var(--pink)}
.hx-strip .status{font-weight:500}

/* ---------- 2. features: a moving ribbon ---------- */
.features{overflow:hidden;background:var(--pink-d);color:#fff}
.mq{display:flex;width:max-content}
.mq-track{display:flex;flex:none;align-items:center;animation:mq 40s linear infinite}
.mq-track li{display:flex;align-items:center;gap:18px;padding:30px 44px 30px 0;white-space:nowrap}
.mq-track b{font:600 clamp(28px,3.2vw,48px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.mq-track em{font:italic 500 clamp(26px,3vw,44px)/1 var(--serif);color:#FFD6E8}
.mq-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.mq-ic .ic{width:24px;height:24px}
@keyframes mq{to{transform:translateX(-100%)}}

/* ---------- 3. about: editorial headline, staggered photos, since 2018 ---------- */
.about{padding:clamp(110px,13vw,190px) 0 clamp(90px,10vw,150px)}
.ab-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,7vw,120px);align-items:end}
.ab-head .sec-t{font-size:clamp(60px,8.6vw,150px);line-height:.88}
.ab-head .ctas{margin-top:30px}
.ab-photos{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:clamp(14px,2vw,30px);align-items:start;margin-top:clamp(60px,8vw,120px)}
.ab-ph{overflow:hidden;box-shadow:var(--shadow)}
.ab-ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ab-ph1{margin-top:clamp(60px,9vw,150px)}
.ab-ph3{margin-top:clamp(120px,16vw,260px)}
.ab-since{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;margin-top:clamp(60px,8vw,120px);padding-top:clamp(40px,5vw,70px);border-top:1px solid var(--line)}
.ab-year{font:600 clamp(110px,17vw,290px)/.78 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--pink-d)}
.ab-hist{max-width:34ch;font:italic 500 clamp(21px,2.1vw,32px)/1.4 var(--serif)}
.ab-hist span{display:block;margin-bottom:14px;font:500 13.5px/1 var(--display);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--pink-d)}

/* ---------- 4. ocean of flavors: numbered dish list, the plate follows the cursor ---------- */
.ocean{position:relative;padding:clamp(110px,13vw,180px) 0;overflow:hidden;background:var(--ink);color:var(--bone)}
.ocean .kicker{color:var(--pink)}
.ocean .neon{color:var(--pink)}
.oc-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,120px);align-items:start}
.oc-head{position:sticky;top:140px}
.oc-list{border-top:1px solid var(--line-d)}
.oc-row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;align-items:center;gap:20px;padding:24px 0;border-bottom:1px solid var(--line-d);transition:color .35s,padding .5s var(--ease)}
.oc-n{font:500 14px/1 var(--display);letter-spacing:.2em;color:var(--pink)}
.oc-name{font:600 clamp(34px,4.2vw,68px)/1 var(--display);text-transform:uppercase}
.oc-thumb{display:none;width:64px;height:64px;border-radius:50%;overflow:hidden}
.oc-thumb img{width:100%;height:100%;object-fit:cover}
.oc-ic{width:30px;height:30px;opacity:.45;transition:transform .5s var(--ease),opacity .35s}
.oc-row:hover,.oc-row:focus-visible{color:var(--pink);padding-left:22px}
.oc-row:hover .oc-ic{opacity:1;transform:rotate(45deg)}
.oc-float{position:absolute;left:0;top:0;z-index:3;width:clamp(220px,20vw,320px);pointer-events:none;opacity:0;visibility:hidden}
.oc-float img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 40px 60px -20px rgba(0,0,0,.8)}

/* ---------- 5. order now: full-bleed split ---------- */
.ordernow{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:min(94vh,920px)}
.on-photo{position:relative;overflow:hidden;background:var(--ink-2)}
.on-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.on-panel{display:flex;align-items:center;padding:clamp(80px,9vw,140px) clamp(30px,7vw,130px);background:var(--pink-d);color:#fff}
.on-copy{max-width:560px}
.ordernow .kicker{color:#FFF0F6}
.ordernow .sec-t{font-size:clamp(46px,5.4vw,96px)}
.ordernow .neon{color:var(--bone)}
.ordernow .lead{margin-top:26px;color:#FFE6F1}

/* ---------- 6. bar: the photo opens up to full screen ---------- */
.bar{background:var(--bone)}
.bar-stage{position:relative;display:flex;align-items:flex-end;min-height:100vh;overflow:hidden;color:var(--bone);background:var(--ink)}
.bar-bg{position:absolute;inset:-10% 0}
.bar-bg img{width:100%;height:100%;object-fit:cover}
.bar-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,16,17,.96) 0%,rgba(20,16,17,.72) 45%,rgba(20,16,17,.3) 100%)}
.bar-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px clamp(40px,7vw,120px);align-items:end;padding:clamp(160px,18vw,260px) 0 clamp(80px,9vw,120px)}
.bar .kicker{color:#FF8FC2}
.bar .neon{color:var(--pink)}
.bar .lead{margin-top:26px;color:#E3D8C6}
.bar-points{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;border-top:1px solid var(--line-d)}
.bar-points li{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-d);font:500 16.5px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase}
.bar-points span{font-size:12.5px;letter-spacing:.2em;color:#FF8FC2}

/* ---------- 7. reviews: one voice at a time ---------- */
.reviews{padding:clamp(110px,13vw,180px) 0}
.rv-in{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(40px,7vw,120px);align-items:center}
.rv-ctrl{display:flex;align-items:center;gap:18px;margin-top:44px}
.rv-prev,.rv-next{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,color .3s,box-shadow .3s}
.rv-prev:hover,.rv-next:hover{background:var(--ink);color:var(--bone);box-shadow:none}
.rv-count{font:500 16px/1 var(--display);letter-spacing:.18em;color:var(--ink-soft)}
.rv-count b{font-weight:600;color:var(--pink-d)}
.rv-stage{position:relative;display:grid;padding-top:40px}
.rv-stage::before{content:"\201C";position:absolute;left:-12px;top:-70px;font:italic 500 240px/1 var(--serif);color:var(--pink-d);opacity:.14}
.rv{grid-area:1/1;display:flex;flex-direction:column;gap:26px;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .6s,transform .6s var(--ease),visibility 0s .6s}
.rv.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .8s .2s,transform 1s var(--ease) .2s,visibility 0s}
.rv-stars{display:flex;gap:4px;color:var(--gold)}
.rv-stars .ic{width:18px;height:18px;fill:currentColor;stroke:none}
.rv blockquote{margin:0;font:italic 500 clamp(26px,2.9vw,46px)/1.28 var(--serif)}
.rv figcaption{display:flex;align-items:center;gap:16px}
.rv figcaption::before{content:"";width:40px;height:1px;background:var(--pink-d)}
.rv figcaption b{font:600 17px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.rv figcaption span{font-size:14px;color:var(--ink-soft)}
.rv-bar{grid-area:2/1;height:2px;margin-top:50px;background:var(--line)}
.rv-bar i{display:block;height:100%;background:var(--pink-d);transform:scaleX(0);transform-origin:left}
.rv-bar i.run{animation:rvbar 7s linear forwards}
@keyframes rvbar{to{transform:none}}

/* ---------- 8. location: an info board ---------- */
.dock-sec{padding:clamp(110px,13vw,170px) 0;background:var(--bone-2)}
.loc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:end;margin-bottom:clamp(50px,6vw,80px)}
.loc-board{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);background:var(--paper);box-shadow:var(--shadow)}
.loc-pic{position:relative;min-height:420px;overflow:hidden}
.loc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loc-info{padding:clamp(30px,4vw,60px)}
.loc-info dl{margin:0}
.li-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.li-row:first-child{padding-top:0}
.li-row dt{padding-top:5px;font:500 13px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--pink-d)}
.li-row dd{margin:0;font-weight:600}
.li-row dd a:hover{color:var(--pink-d)}
.li-big{font:500 30px/1 var(--display);letter-spacing:.04em}
.li-row .status{margin-top:12px;font-size:14px}
.loc-info .ctas{margin-top:30px}
.hours li{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:15px}
.hours li.is-today{color:var(--pink-d);font-weight:800}

/* ---------- inner pages: full-bleed photo banner ---------- */
.phero{position:relative;display:flex;align-items:flex-end;min-height:min(80vh,780px);overflow:hidden;background:var(--ink);color:var(--bone)}
.phero-bg{position:absolute;inset:0}
.phero-bg img{width:100%;height:100%;object-fit:cover}
.phero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,17,.6) 0%,rgba(20,16,17,.2) 35%,rgba(20,16,17,.88) 100%)}
.phero-in{position:relative;padding:170px 0 clamp(60px,7vw,100px)}
.crumbs{display:flex;gap:10px;margin-bottom:24px;font:500 13px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:#fff}
.crumbs a:hover{color:#FFD6E8}
.phero-title{font-size:clamp(76px,12.4vw,220px);line-height:.84}
.phero-title .pt-b{color:#FF8FC2;font-size:.78em}
.gallery,.contact{padding:clamp(90px,10vw,150px) 0}
.g-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(170px,19vw,300px);grid-auto-flow:dense;gap:10px}
.g-grid li{min-height:0}
.g-0{grid-column:span 2;grid-row:span 2}
.g-3{grid-row:span 2}
.g-item{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:var(--bone-2);cursor:zoom-in}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.g-item:hover img{transform:scale(1.05)}
.g-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(transparent,rgba(20,16,17,.78));color:#fff;text-align:left;font:500 14px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)}
.g-item:hover .g-cap,.g-item:focus-visible .g-cap{opacity:1;transform:none}
.lightbox{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:14px;padding:24px;background:rgba(20,16,17,.96);opacity:0;transition:opacity .35s}
.lightbox.is-open{opacity:1}
.lb-fig{margin:0;max-width:min(92vw,1100px);text-align:center}
.lb-fig img{max-height:80svh;width:auto;margin:0 auto;transform:scale(.96);transition:transform .45s var(--ease)}
.lightbox.is-open .lb-fig img{transform:none}
.lb-fig figcaption{margin-top:16px;font:500 15px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.lb-close,.lb-nav{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-d);color:var(--bone);flex:none;transition:background .3s}
.lb-close:hover,.lb-nav:hover{background:var(--pink-d);box-shadow:none}
.lb-close{position:absolute;top:18px;right:18px}
.ct-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,7vw,120px);align-items:start}
.ct-list{margin-top:40px;border-top:1px solid var(--line)}
.ct-list li{display:grid;gap:8px;padding:28px 0;border-bottom:1px solid var(--line)}
.ct-list small{font:500 13px/1 var(--display);letter-spacing:.26em;text-transform:uppercase;color:var(--pink-d)}
.ct-big{font:600 clamp(34px,3.6vw,56px)/1 var(--display);text-transform:uppercase;transition:color .3s}
.ct-big:hover{color:var(--pink-d)}
.ct-list span{color:var(--ink-soft)}
.ct-hours{padding:clamp(34px,4vw,56px);background:var(--ink);color:var(--bone)}
.ct-hours small{display:block;margin-bottom:18px;font:500 13px/1 var(--display);letter-spacing:.26em;text-transform:uppercase;color:var(--pink)}
.ct-hours .hours li{padding:12px 0;border-bottom:1px solid var(--line-d)}
.ct-hours .hours li.is-today{color:var(--pink)}
.ct-hours .status{margin-top:18px;font-size:14px}
.mapband{height:clamp(360px,44vw,540px)}
.mapband iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.35)}

/* ---------- footer: the order call to action ---------- */
.site-footer{background:var(--ink);color:var(--bone)}
.ft-cta{display:block;background:var(--pink-d);color:#fff;transition:background .4s}
.ft-cta:hover{background:var(--pink-dd)}
.ft-cta-in{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 40px;padding:clamp(56px,7vw,110px) 0}
.ft-cta-k{font:italic 500 clamp(30px,3.4vw,54px)/1 var(--serif);color:#FFD6E8}
.ft-cta-t{display:inline-flex;align-items:center;gap:.2em;font:600 clamp(58px,9.4vw,170px)/.9 var(--display);text-transform:uppercase}
.ft-cta-ic{width:.62em;height:.62em;stroke-width:1.4;transition:transform .6s var(--ease)}
.ft-cta:hover .ft-cta-ic{transform:rotate(45deg)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;gap:40px;padding:clamp(70px,8vw,110px) 0 clamp(40px,5vw,64px)}
.ft-brand img{height:64px;width:auto;margin-bottom:20px}
.ft-brand p{max-width:34ch;color:#CFC3B0}
.site-footer h3{font:500 13px/1 var(--display);letter-spacing:.28em;color:var(--pink);margin-bottom:18px}
.ft-links{display:grid;gap:10px;font:500 15px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase}
.site-footer a:hover{color:var(--pink)}
.ft-big{font:500 26px/1.1 var(--display);letter-spacing:.04em}
.site-footer p{margin-top:10px}
.ft-hours{font-size:14px}
.ft-hours li{border-bottom:1px solid var(--line-d)}
.ft-hours li.is-today{color:var(--pink)}
.ft-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:24px 0 32px;border-top:1px solid var(--line-d);font-size:13px;color:#A99C88}

/* ---------- phone dock ---------- */
.dock{display:none}

/* ---------- motion pre-state (never the LCP photo or title) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js.motion-pending .hero-welcome,html.js.motion-pending .hero-sub-t,html.js.motion-pending .hero-tag,html.js.motion-pending .hero-ctas,html.js.motion-pending .hx-strip,
  html.js.motion-pending .crumbs{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .rv-bar i.run{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hd-nav{display:none}
  .hd-phone{display:inline-flex}
  .hd-burger{display:inline-flex}
  .rv-in{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--hd-h:72px}
  .brand img{height:46px}
  .site-header[data-state="scrolled"] .hd-in{height:64px}
  .site-header[data-state="scrolled"] .brand img{height:40px}
  .hd-phone span{display:none}
  .hd-phone{width:48px;height:48px;justify-content:center;box-shadow:inset 0 0 0 1px var(--line-d)}
  .hero{height:auto;min-height:100svh;max-height:none}
  .hx-panels{grid-template-columns:1fr}
  .hx-2,.hx-3{display:none}
  .hx-copy{padding:120px var(--gut) 130px}
  .hero-ctas{display:none}
  .hx-strip{grid-template-columns:1fr;font-size:12.5px}
  .hx-strip li{padding:18px 8px}
  .hx-strip li:not(:nth-child(2)){display:none}
  .hx-strip li + li{border-left:0}
  .ab-head,.oc-in,.loc-head,.loc-board,.bar-in,.ct-in{grid-template-columns:1fr}
  .ab-photos{grid-template-columns:1fr 1fr;gap:12px}
  .ab-ph3{display:none}
  .ab-ph1{margin-top:60px}
  .ab-since{grid-template-columns:1fr;gap:20px}
  .oc-head{position:static}
  .oc-row{grid-template-columns:40px minmax(0,1fr) 64px;padding:16px 0}
  .oc-row:hover{padding-left:0}
  .oc-thumb{display:block}
  .oc-ic,.oc-float{display:none}
  .ordernow{grid-template-columns:1fr}
  .on-photo{height:88vw;max-height:620px}
  .bar-stage{min-height:0}
  .bar-points{grid-template-columns:1fr}
  .loc-pic{min-height:0;aspect-ratio:4/3}
  .g-grid{grid-template-columns:1fr 1fr;grid-auto-rows:46vw;gap:8px}
  .g-3{grid-row:span 1}
  .g-cap{opacity:1;transform:none;font-size:12px;padding:30px 12px 12px}
  .phero{min-height:62vh}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(3,58px) 1fr;height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--bone);color:var(--ink);box-shadow:0 -1px 0 var(--line),0 -18px 40px -24px rgba(20,16,17,.45);transition:transform .45s var(--ease)}
  .dk-ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:500 10px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
  .dk-ic + .dk-ic{box-shadow:inset 1px 0 0 var(--line)}
  .dk-ic .ic{width:21px;height:21px;color:var(--ink);stroke-width:1.6}
  .dk-ic:active{background:var(--bone-2)}
  .dk-order{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px 0 18px;background:var(--pink-d);color:#fff}
  .dk-order span{display:grid;gap:4px;white-space:nowrap;font:600 15.5px/1 var(--display);letter-spacing:.07em;text-transform:uppercase}
  .dk-order small{font:italic 500 12px/1 var(--serif);letter-spacing:0;text-transform:none;color:#FFF0F6}
  .dk-order .ic{width:24px;height:24px;stroke-width:1.6}
  .dk-order:active{background:var(--pink-dd)}
  .dock.is-tucked{transform:translateY(100%)}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  body{font-size:16px}
  .ft-grid{grid-template-columns:1fr}
  .ht-brand{font-size:clamp(68px,22vw,120px)}
  .sec-t{font-size:clamp(38px,11.4vw,58px)}
  .ab-head .sec-t{font-size:clamp(52px,15vw,80px)}
  .oc-name{font-size:clamp(28px,8.6vw,40px)}
  .li-row{grid-template-columns:1fr;gap:8px}
  .mq-track li{padding:22px 30px 22px 0}
  .mq-ic{width:44px;height:44px}
}

/* ---------- accessibility: the pause / play button of the blocks that move on their own ---------- */
.pp { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; color: inherit; background: none; border: 1px solid currentColor; cursor: pointer; }
.pp[hidden] { display: none; }
.pp svg { width: 18px; height: 18px; }
.pp .pp-play { display: none; }
.pp.is-paused .pp-pause { display: none; }
.pp.is-paused .pp-play { display: block; }
.pp-float { position: absolute; z-index: 5; right: 14px; top: 14px; color: #fff; background: rgba(15, 13, 11, .72); border-color: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pp-float.pp-b { top: auto; bottom: 14px; }
.pp-float.pp-l { right: auto; left: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rv-pp { width: 58px; height: 58px; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.features { position: relative; }

/* ---------- the accessibility statement page ---------- */
.a11y-page { padding: clamp(140px, 16vw, 200px) 0 clamp(70px, 9vw, 120px); }
.a11y-wrap { width: min(760px, 100% - 40px); margin: 0 auto; }
.a11y-page h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; margin: 0 0 .5em; }
.a11y-page h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.2; margin: 1.9em 0 .55em; }
.a11y-page p, .a11y-page li { font-size: 1.05rem; line-height: 1.7; max-width: 68ch; }
.a11y-page .a11y-lede { font-size: 1.15rem; }
.a11y-page ul { margin: 0 0 1em; padding-left: 1.3em; list-style: disc; }
.a11y-page li { margin: .35em 0; }
.a11y-page a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.a11y-page .a11y-date { margin-top: 2.4em; font-size: .95rem; }
