:root{
  --navy:#06111d;
  --navy2:#0a1b2b;
  --cyan:#00d6ff;
  --blue:#168dff;
  --cream:#f6f0e6;
  --white:#fff;
  --ink:#0a1320;
  --muted:#687482;
  --radius:26px;
  --shadow:0 24px 70px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,sans-serif;
  background:#fff;
  color:var(--ink);
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.splash{
  position:fixed;inset:0;z-index:9999;background:#000;
  display:grid;place-items:center;transition:opacity .55s ease,visibility .55s ease;
}
.splash.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.splash__video{width:100%;height:100%;object-fit:cover}
.splash__shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.18))}
.skip-btn{
  position:absolute;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));
  z-index:2;border:1px solid rgba(255,255,255,.55);background:rgba(3,10,18,.58);
  backdrop-filter:blur(10px);color:#fff;font-weight:800;letter-spacing:.12em;
  font-size:15px;padding:12px 18px;border-radius:999px;cursor:pointer
}
.site{opacity:1;transition:opacity .5s ease}.site--hidden{opacity:0}
.topbar{
  height:78px;position:fixed;z-index:1000;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;padding:0 5vw;
  background:rgba(4,14,25,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09)
}
.brand img{width:112px;height:66px;object-fit:contain}
.nav{display:flex;align-items:center;gap:28px;color:#fff;font-weight:700;font-size:14px}
.nav a{opacity:.9}.nav a:hover{opacity:1;color:var(--cyan)}
.nav-order{padding:12px 18px;border:1px solid var(--cyan);border-radius:999px}
.nav-toggle{display:none;background:none;border:0;padding:8px}.nav-toggle span{width:27px;height:2px;background:#fff;display:block;margin:5px}
.hero{min-height:100svh;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--navy)}
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
  transform:scale(1.32);
}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,11,20,.83),rgba(3,11,20,.5) 55%,rgba(3,11,20,.3)),linear-gradient(to top,rgba(3,11,20,.82),transparent 50%)}
.hero__content{position:relative;z-index:2;width:min(1160px,90vw);padding-top:75px;color:#fff}
.hero__logo{width:min(430px,70vw);margin-bottom:18px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.28))}
.eyebrow{margin:0 0 11px;font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.eyebrow.blue{color:#067be9}
.hero h1,.section-heading h2,.water-band h2,.catering h2,.story h2,.contact h2{
  font-family:"Playfair Display",Georgia,serif;margin:0;line-height:.97;
}
.hero h1{font-size:clamp(54px,8vw,105px);max-width:820px}
.hero h1 span{color:var(--cyan)}
.hero__copy{font-size:clamp(17px,2vw,22px);line-height:1.6;max-width:650px;color:#e6eef5}
.hero__actions,.contact__buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{
  min-height:52px;display:inline-flex;align-items:center;justify-content:center;
  padding:14px 22px;border-radius:999px;font-weight:900;font-size:14px;
  text-transform:uppercase;letter-spacing:.04em;transition:transform .2s ease,box-shadow .2s ease,background .2s ease
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--cyan);color:#00101a;box-shadow:0 12px 35px rgba(0,214,255,.25)}
.btn--outline{border:1px solid rgba(255,255,255,.7);color:#fff;background:rgba(4,14,25,.3)}
.btn--light{background:#fff;color:var(--navy)}
.scroll-cue{position:absolute;bottom:22px;z-index:2;color:#fff;font-size:30px;animation:bob 1.8s infinite ease-in-out}
@keyframes bob{50%{transform:translateY(7px)}}
.section{padding:110px 6vw}
.section-heading{max-width:740px;margin-bottom:45px}
.section-heading h2,.story h2{font-size:clamp(43px,6vw,76px)}
.section-heading>p:last-child{font-size:18px;line-height:1.7;color:var(--muted);max-width:660px}
.food-grid{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:1fr 1fr;gap:18px;max-width:1280px;margin:auto}
.food-card{position:relative;min-height:330px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.food-card--hero{grid-row:1/3;min-height:680px}
.food-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.food-card:hover img{transform:scale(1.04)}
.food-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(3,10,17,.75),transparent 55%)}
.food-card__label{position:absolute;z-index:2;left:28px;bottom:25px;color:#fff}
.food-card__label span{font-size:12px;letter-spacing:.16em;font-weight:900;color:var(--cyan)}
.food-card__label strong{display:block;font-size:clamp(26px,3vw,40px);margin-top:5px}
.water-band{min-height:360px;position:relative;display:grid;place-items:center;overflow:hidden;color:#fff;background:#071521}
.water-band video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  /* Crop the vertical video hard */
  transform:none;

  /* Move the gyro action into the frame */
  object-position:center 50%;

  filter:brightness(.82) contrast(1.05);
}
.water-band__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,24,45,.68),rgba(1,24,45,.18))}
.water-band__content{position:relative;z-index:2;width:min(1160px,88vw)}
.water-band h2{font-size:clamp(58px,8vw,104px);margin-bottom:28px}
.menu{background:#f7f9fb}
.menu-heading{margin-left:auto;margin-right:auto;text-align:center}
.menu-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 34px}
.menu-tab{
  padding:13px 22px;border-radius:999px;border:1px solid #dce3ea;background:#fff;
  font:800 14px "Montserrat";cursor:pointer;color:#475461
}
.menu-tab.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.menu-grid{width:min(1120px,100%);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.menu-item{
  background:#fff;border:1px solid #e5e9ee;border-radius:18px;padding:20px 22px;
  display:grid;grid-template-columns:1fr auto;gap:10px 22px;align-items:start
}
.menu-item h3{margin:0;font-size:18px}
.menu-item p{margin:0;color:#6c7782;font-size:14px;line-height:1.55;grid-column:1/2}
.menu-price{font-weight:900;color:#0b7dd9}
.menu-note{grid-column:1/-1;margin-top:6px;font-size:11px!important;font-weight:700;color:#9aa2aa!important;text-transform:uppercase;letter-spacing:.08em}
.menu-cta{text-align:center;margin:38px auto 0}
.menu-cta p{font-size:18px}
.catering{display:grid;grid-template-columns:1.1fr .9fr;background:var(--navy);color:#fff;min-height:650px}
.catering__image{min-height:570px}.catering__image img{width:100%;height:100%;object-fit:cover}
.catering__content{padding:80px 7vw;display:flex;flex-direction:column;justify-content:center}
.catering h2{font-size:clamp(50px,7vw,92px)}
.catering__content>p:not(.eyebrow){font-size:18px;line-height:1.7;color:#d7e1e9;max-width:560px}
.catering .btn{align-self:flex-start}
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;max-width:1380px;margin:auto}
.story__copy>p:not(.eyebrow){font-size:18px;line-height:1.8;color:var(--muted)}
.story__image{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.story__image img{width:100%;min-height:520px;object-fit:cover}
.story__actions{display:flex;gap:24px;margin-top:24px}
.text-link{font-weight:900;color:#067be9}
.contact{padding:105px 6vw;text-align:center;background:linear-gradient(145deg,#071522,#0b253c);color:#fff}
.contact__logo{width:min(360px,78vw);margin:0 auto 20px}
.contact h2{font-size:clamp(50px,7vw,85px)}
.contact>p{font-size:18px;color:#d4dfe8}
.contact__buttons{justify-content:center}
.socials{display:flex;justify-content:center;gap:12px;margin-top:34px}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);font-size:20px;font-weight:900}
footer{padding:25px 5vw;display:flex;justify-content:space-between;gap:18px;background:#030b12;color:#aab8c4;font-size:12px}
footer a{color:#fff}

@media (max-width:900px){
  .topbar{height:70px}.brand img{width:92px}
  .nav-toggle{display:block;position:relative;z-index:2}
  .nav{
    position:fixed;top:70px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;
    padding:25px 6vw;background:rgba(4,14,25,.98);gap:5px
  }
  .nav.is-open{display:flex}.nav a{padding:12px 0}.nav-order{text-align:center;margin-top:10px}
  .hero__content{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero__overlay{background:linear-gradient(to top,rgba(3,11,20,.88),rgba(3,11,20,.48))}
  .hero__actions{justify-content:center}
  .food-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .food-card--hero{grid-row:auto;min-height:460px}.food-card{min-height:380px}
  .menu-grid{grid-template-columns:1fr}
  .catering{grid-template-columns:1fr}.catering__image{min-height:430px}.catering__content{padding:65px 7vw}
  .story{grid-template-columns:1fr;gap:36px}.story__image{order:-1}.story__image img{min-height:360px}
}
@media (max-width:600px){
  .section{padding:82px 5vw}
  .hero__logo{width:75vw}
  .hero__copy{font-size:16px}
  .hero__actions,.contact__buttons{width:100%;display:grid}
  .btn{width:100%}
  .food-card,.food-card--hero{min-height:420px;border-radius:20px}
  .water-band{min-height:520px}
  .menu-item{grid-template-columns:1fr auto;padding:18px}
  .catering__image{min-height:360px}
  .story__image img{min-height:300px}
  footer{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
/* =========================================
   PITA MENU IMAGE SIZING
   ========================================= */

.menu-item {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 175px;
}

.menu-item__image {
  width: 180px;
  height: 145px;
  flex: 0 0 180px;
  overflow: hidden;
  border-radius: 14px;
}

.menu-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.menu-item__content {
  flex: 1;
}

.menu-item__content h3 {
  margin: 0 0 6px;
}

.menu-item__content p {
  margin: 0;
}
/* ANIMATED HEADER LOGO */
.site-logo-video {
    width: 120px;
    height: 70px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
/* ANIMATED BOTTOM LOGO */
.contact-logo-video {
    width: 220px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px;
    pointer-events: none;
}
/* ===== OVER THE TOPPINGS BOWL FEATURE ===== */

.menu-item:has(.menu-item__video) {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
}

.menu-item__video {
  width: 100%;
  display: flex;
  justify-content: center;
}

.menu-item__video video {
  display: block;
  width: 100%;
  max-width: 950px;
  height: auto;
  border-radius: 18px;
  object-fit: contain;
}

.menu-item:has(.menu-item__video) .menu-item__content {
  width: 100%;
  max-width: 850px;
  padding: 22px 20px 10px;
  text-align: center;
}

.menu-item:has(.menu-item__video) .menu-item__content h3 {
  font-size: 30px;
  margin-bottom: 8px;
}

.menu-item:has(.menu-item__video) .menu-item__content p {
  font-size: 17px;
  line-height: 1.6;
}
/* ===== CATERING BUTTON ===== */

.catering__content .btn {
  display: table;
  margin: 34px auto 0;
  padding: 18px 34px;
  min-width: 210px;
  text-align: center;
}

/* =========================================
   RESPONSIVE MENU CARD SIZING
   Laptop / Tablet / Phone
   ========================================= */

/* Laptop and smaller desktop screens */
@media (max-width: 1200px) and (min-width: 901px) {
  .menu-item {
    gap: 18px;
    min-height: 155px;
    padding: 18px;
  }

  .menu-item__image {
    width: 155px;
    height: 125px;
    flex: 0 0 155px;
  }
}

/* Tablet */
@media (max-width: 900px) and (min-width: 601px) {
  .menu-item {
    gap: 16px;
    min-height: 145px;
    padding: 16px;
  }

  .menu-item__image {
    width: 145px;
    height: 115px;
    flex: 0 0 145px;
  }

  .menu-item__content h3 {
    font-size: 17px;
  }

  .menu-item__content p {
    font-size: 13px;
    line-height: 1.45;
  }
}

/* Phone — stack the food image above the menu copy */
@media (max-width: 600px) {
  .menu-item {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .menu-item__image {
    width: 100%;
    height: 220px;
    flex: 0 0 auto;
    border-radius: 0;
  }

  .menu-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .menu-item__content {
    width: 100%;
    padding: 18px;
  }

  .menu-item__content h3 {
    font-size: 19px;
    margin-bottom: 7px;
  }

  .menu-item__content p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Keep the featured bowl/video card working as a full-width feature */
  .menu-item:has(.menu-item__video) {
    padding: 18px;
  }
/* ===== CAFFE CARD CLEANUP ===== */

.menu-item[data-category="caffe"] {
  min-height: 210px;
  padding: 18px 20px;
  gap: 20px;
  align-items: center;
}

.menu-item[data-category="caffe"] .menu-item__image {
  width: 190px;
  height: 165px;
  flex: 0 0 190px;

  background: #f7f7f7;
  border-radius: 16px;
  padding: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-item[data-category="caffe"] .menu-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
}

.menu-item[data-category="caffe"] .menu-item__content {
  flex: 1;
  padding-right: 8px;
}

.menu-item[data-category="caffe"] .menu-item__content h3 {
  font-size: 19px;
  line-height: 1.15;
  margin-bottom: 10px;
}

.menu-item[data-category="caffe"] .menu-item__content p {
  font-size: 14px;
  line-height: 1.55;
  max-width: 390px;
}
/* =========================================
   FRIDAY PIZZA SPECIAL
   ========================================= */

.pizza-special {
  width: 100%;
  background: #050505;
  overflow: hidden;
  margin-top: 50px;
}

.pizza-special img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: center;
  margin: 0 auto;
}
}
  /* Keep the featured bowl/video card working as a full-width feature */
  .menu-item:has(.menu-item__video) {
    padding: 18px;
  }


/* =========================================
   CAFFE — PORTRAIT DRINK IMAGES
   ========================================= */

.menu-item[data-category="caffe"] {
  min-height: 300px;
  padding: 20px 22px;
  gap: 24px;
  align-items: center;
}

.menu-item[data-category="caffe"] .menu-item__image {
  width: 170px;
  height: 260px;
  flex: 0 0 170px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: transparent;
}

.menu-item[data-category="caffe"] .menu-item__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
}

.menu-item[data-category="caffe"] .menu-item__content {
  flex: 1;
  padding: 0;
}

.menu-item[data-category="caffe"] .menu-item__content h3 {
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 8px;
}

.menu-item[data-category="caffe"] .menu-item__content p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
/* =========================================================
   FINAL RESPONSIVE OVERRIDES
   TABLET + MOBILE
   KEEP AT ABSOLUTE BOTTOM OF STYLES.CSS
   ========================================================= */


/* =========================
   TABLET
   601px — 900px
   ========================= */

@media (max-width: 900px) and (min-width: 601px) {

  /* HEADER */
  .topbar {
    height: 70px;
    padding: 0 4vw;
  }

  .site-logo-video {
    width: 100px;
    height: 60px;
  }

  /* HERO */
  .hero {
    min-height: 820px;
  }

  .hero__video {
    transform: scale(1.12);
    object-position: center center;
  }

  .hero__content {
    width: 88vw;
    padding-top: 90px;
  }

  .hero h1 {
    font-size: 68px;
  }

  .hero__copy {
    max-width: 600px;
  }

  /* FRIDAY PIZZA VIDEO */
  .pizza-special {
    width: 100%;
    margin: 0;
    padding: 35px 0;
    background: #fff;
    overflow: hidden;
    line-height: 0;
  }

  .pizza-special__video {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* MENU TABS */
  .menu-tabs {
    gap: 8px;
    padding: 0 3vw;
  }

  .menu-tab {
    padding: 11px 17px;
    font-size: 13px;
  }

  /* MENU */
  .menu-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .menu-item {
    min-height: 165px;
    padding: 16px;
    gap: 18px;
  }

  .menu-item__image {
    width: 160px;
    height: 130px;
    flex: 0 0 160px;
  }

  /* CAFFE — KEEP PORTRAIT */
  .menu-item[data-category="caffe"] {
    min-height: 285px;
  }

  .menu-item[data-category="caffe"] .menu-item__image {
    width: 165px;
    height: 245px;
    flex: 0 0 165px;
  }

  /* CATERING */
  .catering {
    grid-template-columns: 1fr;
  }

  .catering__image {
    min-height: 420px;
  }

  .catering__content {
    padding: 60px 7vw;
  }
}


/* =========================
   MOBILE
   600px AND BELOW
   ========================= */

@media (max-width: 600px) {

  /* HEADER */
  .topbar {
    height: 64px;
    padding: 0 18px;
  }

  .site-logo-video {
    width: 88px;
    height: 54px;
  }

  .nav {
    top: 64px;
  }

  /* HERO */
  .hero {
    min-height: 100svh;
  }

  .hero__video {
    transform: scale(1.05);
    object-position: center center;
  }

  .hero__content {
    width: 90vw;
    padding-top: 80px;
  }

  .hero__logo {
    width: 72vw;
  }

  .hero h1 {
    font-size: clamp(45px, 13vw, 65px);
  }

  .hero__copy {
    font-size: 15px;
    line-height: 1.5;
  }

  .hero__actions {
    width: 100%;
    gap: 10px;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* FRIDAY PIZZA VIDEO */
  .pizza-special {
    width: 100%;
    margin: 0;
    padding: 25px 0;
    background: #fff;
    overflow: hidden;
    line-height: 0;
  }

  .pizza-special__video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: cover;
    object-position: center;
  }

  /* SECTIONS */
  .section {
    padding: 70px 5vw;
  }

  .section-heading {
    margin-bottom: 30px;
  }

  .section-heading h2,
  .story h2 {
    font-size: 43px;
  }

  /* FOOD CARDS */
  .food-grid {
    gap: 14px;
  }

  .food-card,
  .food-card--hero {
    min-height: 340px;
  }

  /* MENU TABS — HORIZONTAL SCROLL */
  .menu-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 0 5vw 10px;
    margin-left: -5vw;
    margin-right: -5vw;
    scrollbar-width: none;
  }

  .menu-tabs::-webkit-scrollbar {
    display: none;
  }

  .menu-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 11px 16px;
    font-size: 13px;
  }

  /* REGULAR MENU CARDS */
  .menu-grid {
    grid-template-columns: 1fr;
  }

  .menu-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    overflow: hidden;
    min-height: 0;
  }

  .menu-item__image {
    width: 100%;
    height: 220px;
    flex: 0 0 auto;
    border-radius: 0;
  }

  .menu-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .menu-item__content {
    width: 100%;
    padding: 18px;
  }

  /* CAFFE MOBILE — PORTRAIT DRINKS */
  .menu-item[data-category="caffe"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 18px;
    min-height: 0;
  }

  .menu-item[data-category="caffe"] .menu-item__image {
    width: 180px;
    height: 275px;
    flex: 0 0 180px;
    border-radius: 14px;
    overflow: hidden;
  }

  .menu-item[data-category="caffe"] .menu-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .menu-item[data-category="caffe"] .menu-item__content {
    width: 100%;
    padding: 0;
    text-align: center;
  }

  /* FEATURED BOWL VIDEO */
  .menu-item:has(.menu-item__video) {
    padding: 14px;
  }

  .menu-item__video video {
    border-radius: 12px;
  }

  /* CATERING */
  .catering {
    grid-template-columns: 1fr;
  }

  .catering__image {
    min-height: 330px;
  }

  .catering__content {
    padding: 50px 6vw;
    text-align: center;
  }

  .catering .btn {
    margin-left: auto;
    margin-right: auto;
  }

  /* STORY */
  .story {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .story__image img {
    min-height: 300px;
  }

  /* CONTACT */
  .contact {
    padding: 75px 5vw;
  }

  .contact__buttons {
    display: grid;
    width: 100%;
  }

  /* FOOTER */
  footer {
    flex-direction: column;
    text-align: center;
  }
}