/* ============================================================
   PARK VIEW BISTRO — premium stylesheet
   Design system + components + motion-ready (content visible
   by default; GSAP only enhances, so it works offline too).
   ============================================================ */

:root{
  /* palette */
  --espresso:#1b130d;
  --espresso-2:#241a12;
  --charcoal:#2c2118;
  --cream:#fbf4e8;
  --cream-2:#f3e7d2;
  --ivory:#fffaf2;
  --card:#fffdf9;
  --ink:#2a2017;
  --ink-soft:#6b5a47;
  --muted:#9b876f;
  --brand:#e07a1f;
  --brand-2:#c5610f;
  --brand-3:#a64f0a;
  --brand-soft:#f7e3cb;
  --brand-ink:#894708;
  --tan:#caa56b;
  --gold:#eab552;
  --green:#2f9c5d;
  /* delivery brand accents */
  --doordash:#eb1700;
  --ubereats:#06c167;
  --line:rgba(43,33,24,.12);
  --line-2:rgba(43,33,24,.08);
  --line-dark:rgba(255,255,255,.12);
  /* radii */
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --pill:999px;
  /* shadows */
  --sh-sm:0 2px 10px rgba(27,19,13,.08);
  --sh:0 16px 44px rgba(27,19,13,.14);
  --sh-lg:0 34px 80px rgba(27,19,13,.30);
  --sh-brand:0 14px 34px rgba(224,122,31,.38);
  /* layout */
  --maxw:1160px;
  --header-h:72px;
  /* fonts */
  --font-display:'Fraunces','Georgia',serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  font-weight:400; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand-2); text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.08; margin:0 0 .4em; color:var(--ink); letter-spacing:-.01em; }
h2{ font-size:clamp(2rem,4.6vw,3.2rem); }
ul{ margin:0; padding:0; list-style:none; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
section[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }
.eyebrow{
  font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:.22em; font-size:.76rem; color:var(--brand); margin:0 0 .6rem;
}
.lead{ color:var(--ink-soft); font-size:1.08rem; }

/* ---------- Buttons ---------- */
.btn{
  --b:var(--brand);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-body); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  padding:.92em 1.6em; border-radius:var(--pill); border:2px solid transparent;
  background:var(--brand); color:#fff; cursor:pointer; text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  box-shadow:var(--sh-sm); white-space:nowrap; will-change:transform;
}
.btn:hover{ background:var(--brand-2); transform:translateY(-3px); box-shadow:var(--sh-brand); color:#fff; }
.btn:active{ transform:translateY(-1px) scale(.98); }
.btn:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; }
.btn--lg{ padding:1.05em 1.9em; font-size:1.02rem; }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); box-shadow:none; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.btn--soft{ background:var(--brand-soft); color:var(--brand-ink); box-shadow:none; }
.btn--soft:hover{ background:#f3d4b3; color:var(--brand-ink); }
.btn--dark{ background:var(--espresso); color:var(--cream); }
.btn--dark:hover{ background:#000; color:#fff; }

/* ---------- Header / Nav ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--header-h);
  display:flex; align-items:center;
  background:transparent; transition:background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.header.scrolled{ background:rgba(20,14,9,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 30px rgba(0,0,0,.28); }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand img{ height:46px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.brand b{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; color:#fff; letter-spacing:.01em; }
.nav{ display:flex; align-items:center; gap:1.5rem; }
.nav a{ color:#f1e6d6; font-weight:600; font-size:.93rem; letter-spacing:.01em; position:relative; padding:.2rem 0; }
.nav a:not(.btn)::after{ content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px; background:var(--brand); transition:right .3s var(--ease); }
.nav a:not(.btn):hover::after, .nav a.active:not(.btn)::after{ right:0; }
.nav a:not(.btn):hover, .nav a.active:not(.btn){ color:#fff; }
.nav .btn{ padding:.6em 1.15em; font-size:.88rem; color:#fff; }
.nav .btn::after{ display:none; }
.burger{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; padding:10px; background:transparent; border:0; cursor:pointer; }
.burger span{ height:2px; background:#fff; border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero (3D layered) ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; perspective:1000px; }
.hero__layer{ position:absolute; inset:-6% ; will-change:transform; }
.hero__bg{ background-size:cover; background-position:center; transform:scale(1.08); }
.hero__tint{ background:
   radial-gradient(120% 90% at 80% 10%, rgba(224,122,31,.18), transparent 55%),
   linear-gradient(180deg, rgba(15,10,6,.55) 0%, rgba(15,10,6,.5) 35%, rgba(12,8,4,.9) 100%); }
.hero__grain{ background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size:3px 3px; opacity:.5; mix-blend-mode:overlay; }
.hero .wrap{ position:relative; z-index:3; padding-top:var(--header-h); transform-style:preserve-3d; }
.hero__inner{ max-width:680px; color:#fff; }
.hero__logo{ height:128px; width:auto; margin-bottom:18px; filter:drop-shadow(0 12px 30px rgba(0,0,0,.55)); }
.hero h1{ color:#fff; font-size:clamp(2.8rem,7.5vw,5.4rem); line-height:.98; margin:0 0 .15em; text-shadow:0 6px 30px rgba(0,0,0,.5); }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero__tag{ font-size:clamp(1.05rem,2.4vw,1.3rem); color:#f0e6d6; max-width:560px; margin:0 0 1.7rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__meta{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; color:#e9dcc9; font-size:.9rem; font-weight:600; }
.hero__meta span{ display:inline-flex; align-items:center; gap:.45em; }
.hero__scroll{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3; color:rgba(255,255,255,.75); font-size:1.5rem; animation:bob 2s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ---------- Section scaffolding ---------- */
.section{ padding:clamp(60px,9vw,120px) 0; position:relative; }
.section--dark{ background:var(--espresso); color:#efe3d2; }
.section--alt{ background:var(--cream-2); }
.section--espresso{ background:linear-gradient(180deg,var(--espresso),var(--espresso-2)); color:#efe3d2; }
.head{ max-width:680px; margin:0 auto clamp(34px,5vw,56px); text-align:center; }
.section--dark .head h2, .section--espresso .head h2{ color:#fff; }
.head p{ color:var(--ink-soft); margin:.5rem 0 0; }
.section--dark .head p, .section--espresso .head p{ color:#cdbda7; }
.rule{ width:58px; height:4px; border-radius:4px; background:var(--brand); margin:14px auto 0; }

/* ---------- About ---------- */
.about{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; }
.about__media{ position:relative; }
.about__media img{ border-radius:var(--r-lg); box-shadow:var(--sh-lg); width:100%; aspect-ratio:4/5; object-fit:cover; }
.about__media .badge{
  position:absolute; right:-18px; bottom:24px; background:var(--brand); color:#fff;
  font-family:var(--font-display); font-weight:600; padding:14px 20px; border-radius:var(--r);
  box-shadow:var(--sh-brand); line-height:1; text-align:center;
}
.about__media .badge small{ display:block; font-family:var(--font-body); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-top:5px; }
.about h2{ font-size:clamp(1.9rem,4.2vw,2.8rem); }
.about .lead{ margin-bottom:1.2rem; }
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.4rem; margin:1.2rem 0 1.6rem; }
.feature li{ position:relative; padding-left:1.7rem; font-weight:600; color:var(--ink); font-size:.96rem; }
.feature li::before{ content:""; position:absolute; left:0; top:.45em; width:9px; height:9px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }

/* ---------- Order Online ---------- */
.order-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:980px; margin:0 auto; }
.order-card{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 26px; text-align:center; box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.order-card:hover{ transform:translateY(-6px); box-shadow:var(--sh); border-color:transparent; }
.order-card__icon{ width:62px; height:62px; border-radius:18px; display:grid; place-items:center; font-size:1.7rem; margin-bottom:.4rem; color:#fff; }
.order-card--dd .order-card__icon{ background:var(--doordash); }
.order-card--ue .order-card__icon{ background:var(--ubereats); }
.order-card--call .order-card__icon{ background:var(--brand); }
.order-card h3{ font-size:1.25rem; margin:.1rem 0 0; }
.order-card p{ color:var(--ink-soft); font-size:.92rem; margin:0 0 .6rem; min-height:2.4em; }
.order-card .btn{ width:100%; }
.order-note{ text-align:center; color:var(--muted); font-size:.85rem; margin:22px auto 0; max-width:620px; }

/* ---------- Menu ---------- */
.menu-note{ text-align:center; color:var(--ink-soft); margin:0 auto 22px; max-width:620px; }
.menu-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:0 auto 40px; max-width:900px; }
.menu-tab{
  font-weight:700; font-size:.84rem; letter-spacing:.01em; color:var(--ink);
  background:var(--ivory); border:1px solid var(--line); padding:.55em 1.05em; border-radius:var(--pill);
  transition:all .22s var(--ease); cursor:pointer;
}
.menu-tab:hover{ background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-2px); }
.menu-cols{ columns:2; column-gap:54px; max-width:1000px; margin:0 auto; }
.menu-group{ break-inside:avoid; margin:0 0 34px; }
.menu-group h3{
  font-size:1.5rem; color:var(--brand-2); display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem;
}
.menu-group h3::after{ content:""; flex:1; height:2px; background:linear-gradient(90deg,var(--brand),transparent); opacity:.45; }
.menu-group .gnote{ font-size:.85rem; color:var(--muted); font-style:italic; margin:0 0 .8rem; }
.mi{ padding:.6rem 0; border-bottom:1px dashed var(--line); }
.mi:last-child{ border-bottom:0; }
.mi__top{ display:flex; align-items:flex-end; gap:.5rem; }
.mi__name{ font-weight:700; color:var(--ink); }
.mi__dots{ flex:1; border-bottom:2px dotted rgba(43,33,24,.22); transform:translateY(-5px); min-width:12px; }
.mi__price{ font-family:var(--font-display); font-weight:600; color:var(--brand-2); font-size:1.08rem; white-space:nowrap; }
.mi__desc{ margin:.2rem 0 0; font-size:.9rem; color:var(--ink-soft); }
.tag{ display:inline-block; font-weight:800; font-size:.6rem; letter-spacing:.06em; background:var(--brand-soft); color:var(--brand-ink); padding:.18em .5em; border-radius:5px; margin-left:.3rem; vertical-align:middle; cursor:help; }
.legend{ text-align:center; color:var(--ink-soft); font-size:.86rem; margin:32px auto 0; max-width:640px; }
.legend .sep{ margin:0 .4rem; color:var(--muted); }
.menu-pdf{ text-align:center; margin-top:.7rem; color:var(--muted); font-size:.85rem; }

/* ---------- Weekly Specials ---------- */
.spec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1000px; margin:0 auto; }
.spec{
  position:relative; border-radius:var(--r-lg); padding:30px 22px; text-align:center;
  background:linear-gradient(165deg,#33271b,#221913); border:1px solid rgba(234,181,82,.22);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  transform-style:preserve-3d; will-change:transform;
}
.spec:hover{ border-color:var(--gold); box-shadow:0 24px 50px rgba(0,0,0,.45); }
.spec__icon{ font-size:2.2rem; }
.spec__day{ font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--gold); font-size:.82rem; margin-top:.3rem; }
.spec__name{ font-family:var(--font-display); font-size:1.18rem; color:#fff; margin:.2rem 0 .5rem; }
.spec__price{ font-family:var(--font-display); font-weight:600; font-size:2.2rem; color:#fff; }
.spec__price span{ font-size:1.1rem; vertical-align:.35em; color:var(--gold); margin-right:.05em; }
.lunch{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap; max-width:1000px;
  margin:26px auto 0; padding:26px 32px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--brand),var(--brand-3)); box-shadow:var(--sh-brand);
}
.lunch__badge{ font-family:var(--font-display); font-weight:600; font-size:2.6rem; color:#fff; background:rgba(0,0,0,.16); border-radius:16px; padding:.18em .42em; line-height:1; }
.lunch__body{ flex:1; min-width:240px; color:#fff; }
.lunch__body h3{ color:#fff; margin:0 0 .15em; }
.lunch__avail{ font-weight:700; color:#fff2e2; margin:0 0 .5rem; font-size:.92rem; }
.lunch__items{ display:flex; flex-wrap:wrap; gap:.5rem; }
.lunch__items li{ background:rgba(255,255,255,.2); color:#fff; padding:.32em .8em; border-radius:var(--pill); font-weight:600; font-size:.88rem; }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:960px; margin:0 auto; }
.gallery-item{ margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--card); box-shadow:var(--sh-sm); aspect-ratio:4/3; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-item:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.gallery-item:hover img{ transform:scale(1.05); }

/* ---------- Hours ---------- */
.hours-wrap{ max-width:760px; margin:0 auto; }
.openbadge{ display:inline-flex; align-items:center; gap:.5ch; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; padding:.42em .95em; border-radius:var(--pill); }
.openbadge::before{ content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.openbadge.is-open{ background:rgba(47,156,93,.16); color:#43c07c; }
.openbadge.is-closed{ background:rgba(255,255,255,.1); color:#d7c7b1; }
.badge-row{ text-align:center; margin-bottom:18px; }
.hours-card{ background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:var(--r-lg); overflow:hidden; }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table th[scope=col]{ background:rgba(0,0,0,.25); color:var(--gold); text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; font-weight:800; padding:.85rem 1.1rem; text-align:left; }
.hours-table td, .hours-table th[scope=row]{ padding:.82rem 1.1rem; border-bottom:1px solid var(--line-dark); color:#ece1d0; }
.hours-table th[scope=row]{ text-align:left; font-weight:700; }
.hours-table tbody tr:last-child td, .hours-table tbody tr:last-child th{ border-bottom:0; }
.hours-table tr.today{ background:rgba(224,122,31,.16); }
.hours-table tr.today th[scope=row]{ color:var(--gold); }
.hours-table .closed{ color:#9c8a72; }
.hours-foot{ text-align:center; color:#c8b7a0; font-size:.85rem; margin-top:16px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px; }
.cc{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px 18px; text-align:center; box-shadow:var(--sh-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.cc:hover{ transform:translateY(-5px); box-shadow:var(--sh); }
.cc__i{ font-size:1.6rem; }
.cc__l{ font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; color:var(--brand-2); margin:.5rem 0 .3rem; }
.cc__v{ font-weight:700; color:var(--ink); }
.cc__v a{ color:var(--ink); }
.cc__v small{ display:block; font-weight:500; color:var(--muted); font-size:.82rem; margin-top:.2rem; }
.contact-cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

/* ---------- Location ---------- */
.loc-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(26px,4vw,46px); align-items:center; }
.map{ position:relative; padding-top:62%; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); background:#0c0905; }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.loc h2{ color:#fff; }
.loc p{ color:#cdbda7; }
.loc .addr{ color:#fff; font-weight:700; font-size:1.15rem; margin:.2rem 0 .6rem; }

/* ---------- Footer ---------- */
.footer{ background:#140d08; color:#c7b6a0; padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px; }
.footer .fbrand{ display:flex; gap:.9rem; align-items:flex-start; }
.footer .fbrand img{ height:58px; width:auto; }
.footer .fbrand b{ font-family:var(--font-display); font-size:1.25rem; color:#fff; display:block; }
.footer .fbrand p{ margin:.25rem 0 0; font-size:.9rem; }
.footer h4{ font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; color:var(--gold); margin:0 0 .7rem; }
.footer a{ color:#e3d4c0; }
.footer li, .footer p.fline{ font-size:.92rem; margin:.25rem 0; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding-top:18px; display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:space-between; font-size:.82rem; color:#8d7c68; }
.footer-bottom a{ color:#8d7c68; }

/* ---------- Reveal (only applied when JS+GSAP active) ---------- */
.has-anim .reveal{ opacity:0; }

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .about{ grid-template-columns:1fr; }
  .about__media{ max-width:460px; margin:0 auto; }
  .loc-grid{ grid-template-columns:1fr; }
  .order-grid{ grid-template-columns:1fr; max-width:440px; }
  .spec-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer .fbrand{ grid-column:1/-1; }
}
@media (max-width:760px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(18,12,7,.98); backdrop-filter:blur(12px); padding:.4rem 0 1rem; max-height:0; overflow:hidden;
    transition:max-height .35s var(--ease); border-top:1px solid rgba(255,255,255,.08);
  }
  .nav.open{ max-height:84vh; }
  .nav a{ padding:1rem 24px; border-bottom:1px solid rgba(255,255,255,.06); font-size:1rem; }
  .nav a:not(.btn)::after{ display:none; }
  .nav .btn{ margin:.7rem 24px 0; }
  .menu-cols{ columns:1; }
  body{ font-size:16px; }
}
@media (max-width:480px){
  .spec-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .feature{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  .has-anim .reveal{ opacity:1 !important; transform:none !important; }
}