/* ============ Jumpa Rasa — brand tokens ============ */
:root{
  --rust:        #C85A32;
  --rust-dark:   #A8471F;
  --maroon:      #5B1E21;
  --orange:      #F28A4B;
  --charcoal:    #2B1B17;
  --cream:       #F7EBD9;
  --cream-dim:   #EEDFC4;
  --white:       #FFFDF9;

  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;

  --container: 1180px;
  --radius: 18px;
  --shadow-soft: 0 20px 45px -20px rgba(43,27,23,0.35);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0 0 .5em; font-weight:700; line-height:1.1; }
p{ margin:0 0 1em; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* subtle grain overlay for warmth */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 9999; opacity:.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family: var(--font-display);
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .6em;
}
.eyebrow--light{ color: var(--orange); }
.section-title{ font-size: clamp(2rem, 4vw, 2.8rem); color: var(--maroon); }
.menu-date{
  font-family: var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:.85rem; color: var(--orange); margin: -0.6em 0 1.4em;
}
.section-intro{ max-width: 640px; font-size: 1.08rem; color: #4a3630; }
.section-intro--dark{ color: var(--cream-dim); }
.section{ position:relative; padding: 96px 0; overflow:hidden; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-display); font-weight:600; font-size: .98rem;
  padding: 15px 30px; border-radius: 999px; border: 2px solid transparent;
  cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--rust); color: var(--white); box-shadow: var(--shadow-soft); }
.btn-primary:hover{ background: var(--rust-dark); }
.btn-ghost{ background: rgba(247,235,217,.08); color: var(--cream); border-color: rgba(247,235,217,.55); }
.btn-ghost:hover{ background: rgba(247,235,217,.16); }
.btn-outline-light{ background: transparent; color: var(--cream); border-color: rgba(247,235,217,.45); }
.btn-outline-light:hover{ background: rgba(247,235,217,.1); }
.btn-block{ width:100%; }

/* ============ decorative stripe arcs (brand motif) ============ */
.stripe-arc{
  position:absolute; width: 620px; height: 620px; border-radius:50%; pointer-events:none;
  background: repeating-radial-gradient(circle at center,
    transparent 0 46px,
    var(--orange) 46px 62px,
    transparent 62px 78px,
    var(--rust) 78px 94px,
    transparent 94px 110px,
    var(--maroon) 110px 126px);
  opacity:.16; z-index:0;
}
.stripe-arc--left{ left: -280px; top: -180px; }
.stripe-arc--right{ right: -280px; bottom: -220px; }

/* ============ header ============ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 18px 0;
}
.site-header.scrolled{
  background: rgba(247,235,217,.94); backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(43,27,23,.08);
  padding: 10px 0;
}
.header-inner{
  max-width: var(--container); margin:0 auto; padding: 0 28px;
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:42px; height:42px; object-fit:contain; filter: brightness(0) invert(1); transition: filter .3s ease; }
.site-header.scrolled .brand-mark{ filter: none; }
.brand-word{
  font-family: var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:.02em;
  color: var(--cream); transition: color .3s ease;
}
.site-header.scrolled .brand-word{ color: var(--maroon); }

.main-nav{ display:flex; align-items:center; gap: 30px; }
.main-nav a{
  font-family: var(--font-display); font-weight:600; font-size:.95rem;
  color: var(--cream); opacity:.92; transition: color .3s ease, opacity .2s ease;
}
.main-nav a:hover{ opacity:1; }
.site-header.scrolled .main-nav a{ color: var(--charcoal); }
.nav-cta{
  background: var(--rust); color: var(--white) !important; padding: 10px 22px; border-radius:999px;
  opacity:1 !important;
}
.nav-cta:hover{ background: var(--rust-dark); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{ display:block; height:2px; width:100%; background: var(--cream); transition: all .25s ease; }
.site-header.scrolled .nav-toggle span{ background: var(--charcoal); }

/* ============ hero ============ */
.hero{
  position:relative; min-height: 100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; overflow:hidden;
  padding: 140px 24px 90px;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(43,27,23,.72) 0%, rgba(43,27,23,.5) 38%, rgba(43,27,23,.78) 100%);
}
.hero-content{ position:relative; z-index:2; max-width: 680px; }
.hero-logo{ width: min(320px, 60vw); margin: 0 auto 18px; filter: brightness(0) invert(1) drop-shadow(0 10px 30px rgba(0,0,0,.45)); }
.hero-tagline{
  font-family: var(--font-display); color: var(--orange); font-weight:700;
  font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing:.03em; margin-bottom:.7em;
}
.hero-sub{ color: var(--cream); font-size: 1.1rem; max-width: 520px; margin: 0 auto 2em; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-quote{
  position:relative; z-index:2; margin-top: 56px; max-width: 560px; padding: 0 20px;
}
.hero-quote p{
  font-style: italic; color: rgba(247,235,217,.85); font-size:1.05rem; margin:0;
}
.scroll-cue{
  position:absolute; bottom: 26px; left:50%; transform: translateX(-50%); z-index:2;
  width:26px; height:42px; border:2px solid rgba(247,235,217,.6); border-radius:20px;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; transform: translateX(-50%);
  width:4px; height:8px; border-radius:2px; background: var(--orange);
  animation: cue 1.6s ease-in-out infinite;
}
@keyframes cue{ 0%{ opacity:1; top:7px;} 70%{ opacity:0; top:22px;} 100%{opacity:0; top:7px;} }

/* ============ about ============ */
.about{ background: var(--cream); }
.about-grid{
  position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items:center;
}
.about-copy .lede{ font-size:1.18rem; color: var(--maroon); font-weight:500; }
.about-copy em{ color: var(--rust); font-style: normal; font-weight:600; }
.about-photos{ position:relative; }
.about-photo{ border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.about-photo--main{ width:100%; height:auto; display:block; }
.about-photo--sub{
  position:absolute; width: 52%; aspect-ratio: 4/3; object-fit:cover;
  right:-8%; bottom:-10%; border:6px solid var(--cream); box-shadow: 0 18px 40px -12px rgba(43,27,23,.4);
}

/* ============ vision ============ */
.vision{
  background: linear-gradient(160deg, var(--maroon) 0%, var(--charcoal) 100%);
  text-align: center;
}
.vision-inner{ max-width: 780px; margin: 0 auto; }
.vision-statement{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2.1rem); line-height: 1.5;
  color: var(--cream); margin: 0;
}

/* ============ experiences ============ */
.experiences{ background: var(--maroon); color: var(--cream); }
.experiences .section-title{ color: var(--cream); }
.menu-journey{
  margin-top: 56px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.menu-card{
  background: rgba(247,235,217,.05); border: 1px solid rgba(247,235,217,.14);
  border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition: transform .25s ease, border-color .25s ease;
}
.menu-card:hover{ transform: translateY(-4px); border-color: rgba(242,138,75,.5); }
.menu-card-media{ aspect-ratio: 4/3; overflow:hidden; }
.menu-card-media img{ width:100%; height:100%; object-fit:cover; }
.menu-card-body{ padding: 22px 24px 26px; }
.menu-region{
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.72rem; font-weight:700; color: var(--orange);
}
.menu-card-body h3{ font-size:1.28rem; margin: .35em 0 .1em; color: var(--cream); }
.menu-native{ font-style: italic; color: rgba(247,235,217,.55); margin-bottom:.6em; font-size:.92rem; }
.menu-card-body p{ color: rgba(247,235,217,.82); font-size:.96rem; margin-bottom:.6em; }
.allergen{ font-size:.78rem; color: rgba(247,235,217,.5); }
.menu-card--feature{
  background: linear-gradient(135deg, var(--rust), var(--rust-dark)); justify-content:center; border:none;
}
.menu-card--feature .menu-region{ color: var(--cream); opacity:.85; }
.menu-card--feature h3{ font-size:1.5rem; }
.menu-card--feature p{ color: rgba(247,235,217,.92); }

.experiences-cta{
  margin-top: 70px; background: var(--cream); border-radius: 24px; overflow:hidden;
  display:grid; grid-template-columns: .9fr 1.1fr; align-items:stretch; box-shadow: var(--shadow-soft);
}
.experiences-cta-photo{ width:100%; height:100%; object-fit:cover; min-height: 220px; }
.experiences-cta-copy{ padding: 42px 46px; color: var(--charcoal); align-self:center; }
.experiences-cta-copy h3{ color: var(--maroon); font-size:1.7rem; }
.experiences-cta-copy p{ color:#4a3630; }

/* ============ stories ============ */
.stories{ background: var(--cream); }
.stories-grid{
  margin-top: 54px; display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;
}
.story-card{
  background: var(--white); border-radius: var(--radius); padding: 34px 34px 30px;
  box-shadow: var(--shadow-soft); border: 1px solid rgba(43,27,23,.06);
}
.story-card--image{ padding:0; overflow:hidden; }
.story-card--image img{ width:100%; height:auto; display:block; }
.story-tag{
  display:inline-block; font-family: var(--font-display); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--white); background: var(--rust);
  padding: 5px 14px; border-radius:999px; margin-bottom: 1em;
}
.story-card h3{ color: var(--maroon); font-size:1.4rem; margin-bottom:.15em; }
.story-kicker{ color: var(--rust); font-weight:600; font-size:.92rem; margin-bottom:.9em; }
.story-card p:not(.story-kicker){ color:#4a3630; }
.story-link{ color: var(--rust); font-weight:600; font-family: var(--font-display); font-size:.92rem; }
.story-link:hover{ color: var(--rust-dark); }

/* ============ video ============ */
.video{ background: var(--charcoal); color: var(--cream); }
.video .section-title{ color: var(--cream); }
.video-grid{
  margin-top: 54px; display:grid; grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: 190px; gap: 18px;
}
.video-tile{ position:relative; border-radius: 14px; overflow:hidden; display:block; }
.video-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.video-tile:hover img{ transform: scale(1.06); }
.video-tile--feature{ grid-row: span 2; }
.video-tile::after{ content:""; position:absolute; inset:0; background: rgba(43,27,23,.28); transition: background .3s ease; }
.video-tile:hover::after{ background: rgba(43,27,23,.15); }
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background: rgba(247,235,217,.92);
  color: var(--rust); display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.3); transition: transform .25s ease;
}
.video-tile:hover .play-btn{ transform: translate(-50%,-50%) scale(1.1); }
.video-follow{ margin-top: 44px; text-align:center; }

/* ============ waitlist ============ */
.waitlist{ background: linear-gradient(160deg, var(--rust) 0%, var(--rust-dark) 100%); color: var(--white); }
.waitlist .eyebrow{ color: var(--cream); }
.waitlist h2{ color: var(--white); font-size: clamp(2rem, 4vw, 2.6rem); }
.waitlist .section-intro{ color: rgba(255,253,249,.88); }
.waitlist-inner{ position:relative; z-index:1; text-align:center; }
.waitlist-inner .section-intro{ margin: 0 auto 2.2em; }
.waitlist-form{
  max-width: 520px; margin: 0 auto; background: var(--cream); border-radius: 22px; padding: 40px;
  text-align:left; box-shadow: 0 25px 60px -20px rgba(0,0,0,.35); color: var(--charcoal);
}
.form-row{ margin-bottom: 18px; }
.form-row label{ display:block; font-family: var(--font-display); font-weight:600; font-size:.9rem; margin-bottom:.4em; color: var(--maroon); }
.form-row input, .form-row textarea{
  width:100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid rgba(43,27,23,.18);
  background: var(--white); font-family: var(--font-body); font-size: .98rem; color: var(--charcoal);
  transition: border-color .2s ease;
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color: var(--rust); }
.form-row textarea{ resize: vertical; }
.form-note{ text-align:center; font-size:.82rem; color:#7a6459; margin: 14px 0 0; }
.form-error{ text-align:center; font-size:.88rem; color: var(--rust-dark); font-weight:600; margin: 14px 0 0; }
.waitlist-success{
  max-width: 520px; margin: 0 auto; background: var(--cream); border-radius: 22px; padding: 50px 40px;
  text-align:center; color: var(--charcoal); box-shadow: 0 25px 60px -20px rgba(0,0,0,.35);
}
.waitlist-success h3{ color: var(--maroon); font-size:1.6rem; }
.waitlist-success a{ color: var(--rust); font-weight:600; }

/* ============ footer ============ */
.site-footer{ background: var(--charcoal); color: var(--cream); padding: 56px 0 34px; text-align:center; }
.footer-mark{ width:56px; height:56px; margin: 0 auto 10px; object-fit:contain; filter: brightness(0) invert(1); }
.footer-word{ font-family: var(--font-display); font-weight:700; font-size:1.3rem; margin:0; }
.footer-tagline{ color: var(--orange); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin: .3em 0 1.1em; }
.footer-contact{ display:inline-flex; margin-bottom: 1.6em; }
.footer-instagram{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; margin-bottom: 1.8em;
  color: var(--cream); border: 1.5px solid rgba(247,235,217,.4);
  transition: border-color .2s ease, color .2s ease;
}
.footer-instagram:hover{ color: var(--orange); border-color: var(--orange); }
.footer-copy{ color: rgba(247,235,217,.45); font-size:.82rem; margin:0; }

/* ============ responsive ============ */
@media (max-width: 980px){
  .about-grid{ grid-template-columns:1fr; }
  .about-photos{ order:-1; }
  .about-photo--sub{ right: 4%; }
  .menu-journey{ grid-template-columns: repeat(2,1fr); }
  .stories-grid{ grid-template-columns:1fr; }
  .experiences-cta{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .video-tile--feature{ grid-column: span 2; grid-row: span 1; height: 260px; }
}
@media (max-width: 720px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width: min(78vw, 320px);
    background: var(--cream); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding: 100px 32px 40px; gap: 26px; transform: translateX(100%); transition: transform .3s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,.15);
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ color: var(--charcoal); font-size: 1.1rem; }
  .nav-cta{ width:100%; text-align:center; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .menu-journey{ grid-template-columns: 1fr; }
  .section{ padding: 70px 0; }
}