/* ==========================================================================
   Biryani Katha — comic-book landing page
   Artboard: 1512×5920. Scaling: 1rem = 10px @1512 (html font-size = 100vw/151.2)
   ========================================================================== */

:root {
  --green: #3e5626;
  --mustard: #c08529;
  --cream: #fadd9d;
  --grey: #dfdfdf;
  --ink: #000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: calc(100vw / 151.2); }

body {
  background: var(--green);
  overflow-x: hidden;
  font-family: 'Satoshi', sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  position: relative;
  width: 151.2rem;
  height: 592rem;
  margin: 0 auto;
}

/* ---- side pattern rails ---- */
.rail {
  position: absolute;
  top: 0;
  width: 5.4rem;
  height: 100%;
  background-image: url('assets/pattern-tile.png');
  background-size: 5.4rem 43.14rem;
  background-repeat: repeat-y;
  pointer-events: none;
}
.rail--left { left: 0; }
.rail--right { right: 0; }

/* ---- halftone dots (mustard on cream) — staggered lattices measured from design ---- */
.intro-dots,
.card-dots {
  position: absolute;
}
/* intro band: elliptical dots (x-stretched group), cell 44.7×16.05, stagger (22.35, 8.03) */
.intro-dots {
  background-image:
    radial-gradient(ellipse 0.22rem 0.16rem, var(--mustard) 78%, rgba(192, 133, 41, 0) 100%),
    radial-gradient(ellipse 0.22rem 0.16rem, var(--mustard) 78%, rgba(192, 133, 41, 0) 100%);
  background-size: 4.47rem 1.605rem, 4.47rem 1.605rem;
  background-position: 0.08rem 0.9rem, 2.31rem 0.1rem;
}
/* order cards: round dots, cell ~34×13, stagger (17, 6.5) */
.card-dots {
  background-image:
    radial-gradient(circle 0.13rem, var(--mustard) 78%, rgba(192, 133, 41, 0) 100%),
    radial-gradient(circle 0.13rem, var(--mustard) 78%, rgba(192, 133, 41, 0) 100%);
  background-size: 3.4rem 1.3rem, 3.4rem 1.3rem;
}
.card-dots--left {
  background-position: 3.25rem 0.1rem, 1.55rem 0.75rem;
}
.card-dots--right-top,
.card-dots--right-bottom {
  background-size: 3.44rem 1.27rem, 3.44rem 1.27rem;
  background-position: 3.22rem 0.95rem, 1.5rem 0.32rem;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: absolute;
  left: 10.7rem;
  top: 6.3rem;
  width: 129.9rem;
  height: 84.5rem;
  background: var(--mustard);
  border-radius: 1rem;
  overflow: hidden;
}
/* black frame drawn as overlay so children keep outer-edge coordinates */
.hero::after,
.cta::after,
.intro::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.3rem solid var(--ink);
  border-radius: 1rem;
  pointer-events: none;
  z-index: 50;
}

.hero-rays {
  position: absolute;
  left: -11.5rem;
  top: 0;
  width: 129.9rem;
  height: 106.5rem;
}

.hero-cream {
  position: absolute;
  left: 15.26rem;
  top: 15.52rem;
  width: 99.76rem;
  height: 51.31rem;
  background: var(--cream);
  border: 1.34rem solid var(--ink);
  border-radius: 0.76rem;
  overflow: hidden;
}

.cream-dots {
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 98.2rem;
  height: 48.4rem;
}

.hero-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 9.58rem;
  font-family: 'Bowlby One SC', cursive;
  font-weight: 400;
  font-size: 10rem;
  line-height: 1.2;
  color: var(--green);
  text-align: center;
  white-space: nowrap;
}

.hero-sub {
  position: absolute;
  left: 1.7rem;
  top: 41.44rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
}

.hero-spicebox {
  position: absolute;
  left: 90rem;
  top: 43rem;
  width: 35.75rem;
  height: 32.43rem;
}

/* ---- speech balloons (shared) ---- */
.balloon { position: absolute; }
.balloon-outer,
.balloon-inner { position: absolute; left: 0; }
.balloon-text {
  position: absolute;
  left: calc(50% - 0.25rem);
  transform: translateX(-50%);
  width: 37.9rem;
  font-size: 2rem;
  font-weight: 900;
  color: var(--ink);
  text-align: center;
}

/* ==========================================================================
   INTRO BAND — "Every story begins somewhere"
   ========================================================================== */
.intro {
  position: absolute;
  left: 10.7rem;
  top: 94.8rem;
  width: 129.6rem;
  height: 31.7rem;
  background: var(--cream);
  border-radius: 0.8rem;
  overflow: hidden;
}
.intro-dots {
  left: 0;
  top: 1.6rem;
  width: 129.6rem;
  height: 30.1rem;
}

.balloon--intro { left: 26.6rem; top: 4.9rem; width: 76.43rem; height: 21.6rem; }
.balloon--intro .balloon-outer { top: 0.83rem; width: 76.43rem; height: 20.77rem; }
.balloon--intro .balloon-inner { top: 0; width: 75.6rem; height: 20.72rem; }
.balloon--intro .balloon-text {
  top: 3.32rem;
  left: calc(50% - 0.415rem);
  width: 62.97rem;
  font-size: 3.655rem;
  font-weight: 700;
  color: #fff;
}

.intro-scroll {
  position: absolute;
  left: 55.9rem;
  top: 24.2rem;
  width: 17.8rem;
  padding: 0.9rem 0;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  background: #fff;
  border: 0.3rem solid var(--ink);
  border-radius: 10rem;
  box-shadow: 0.35rem 0.4rem 0 0 var(--ink);
}

/* ==========================================================================
   COMIC STORY GRID
   ========================================================================== */
.comic {
  position: absolute;
  left: 10.6rem;
  top: 130.5rem;
  width: 130rem;
  height: 218.9rem;
  background: #fff;
}

.panel { position: absolute; }
.panel-art,
.panel-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* overhang the frame a hair past the panel box so its solid stroke fully
   covers the image's clipped (anti-aliased) edge instead of landing on it */
.panel-border {
  z-index: 30;
  top: -0.3rem;
  left: -0.3rem;
  width: calc(100% + 0.6rem);
  height: calc(100% + 0.6rem);
}
/* panels sit grayed out; hovering reveals the colour, which lingers 10s after the pointer leaves */
.panel-art {
  filter: grayscale(1);
  transition: filter 0.45s ease 10s;
}
.panel:hover .panel-art {
  filter: grayscale(0);
  transition-delay: 0s;
}
/* clip art to the Figma mask quads (borders drawn on top cover the seam) */
.panel--1 .panel-art { clip-path: polygon(0% 0%, 78.94% 0%, 100% 83.32%, 0% 100%); }
.panel--2 .panel-art { clip-path: polygon(0% 0%, 100% 0%, 100% 86.33%, 25.9% 100%); }
.panel--3 .panel-art { clip-path: polygon(100% 0%, 89.89% 100%, 0% 100%, 0% 20.53%); }
.panel--4 .panel-art { clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 13.62% 11.01%); }
.panel--5 .panel-art { clip-path: polygon(0% 0%, 90.54% 0%, 100% 100%, 0% 85.12%); }
.panel--6 .panel-art { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 13.87% 91.81%); }
.panel--7 .panel-art { clip-path: polygon(0% 0%, 100% 13.91%, 100% 100%, 0% 100%); }
.comic .balloon,
.thought-cloud,
.spicebox-small { z-index: 40; }

/* dialog bubbles follow the same gray → colour hover behaviour as the panels
   (white text is unaffected by the grayscale filter) */
.comic .balloon,
.thought-cloud {
  filter: grayscale(1);
  transition: filter 0.45s ease 10s;
}
/* each bubble is tied to its comic block — hovering either colours both.
   balloon 3 speaks for panels 3 & 4 (two tails); the cloud belongs to panel 6 */
.comic:has(.panel--1:hover, .balloon--1:hover, .spicebox-small:hover) .balloon--1,
.comic:has(.balloon--1:hover, .spicebox-small:hover) .panel--1 .panel-art,
.comic:has(.panel--2:hover, .balloon--2:hover) .balloon--2,
.comic:has(.balloon--2:hover) .panel--2 .panel-art,
.comic:has(.panel--3:hover, .panel--4:hover, .balloon--3:hover) .balloon--3,
.comic:has(.balloon--3:hover) :is(.panel--3, .panel--4) .panel-art,
.comic:has(.panel--5:hover, .balloon--4:hover) .balloon--4,
.comic:has(.balloon--4:hover) .panel--5 .panel-art,
.comic:has(.panel--6:hover, .thought-cloud:hover) .thought-cloud,
.comic:has(.thought-cloud:hover) .panel--6 .panel-art,
.comic:has(.panel--7:hover, .balloon--5:hover) .balloon--5,
.comic:has(.balloon--5:hover) .panel--7 .panel-art {
  filter: grayscale(0);
  transition-delay: 0s;
}

.spicebox-small {
  position: absolute;
  left: -7.3rem;
  top: 28.1rem;
  width: 16.7rem;
  height: 13.4rem;
}

.comic .balloon-text { color: #fff; }

.balloon--1 { left: -9.4rem; top: 17.2rem; width: 46rem; height: 13rem; }
.balloon--1 .balloon-outer { top: -0.7rem;  width: 46rem;   height: 13.7rem; }
.balloon--1 .balloon-inner { top: -1.2rem;  width: 45.5rem; height: 13.67rem; }
.balloon--1 .balloon-text  { top: 0.7rem; }

/* balloon 2 reuses balloon 5's assets — identical shape in Figma (Frame 46 / Frame 50) */
.balloon--2 { left: 92.5rem; top: 8.9rem; width: 46rem; height: 17.5rem; }
.balloon--2 .balloon-outer { top: 0.6rem;   width: 46rem;   height: 16.9rem; }
.balloon--2 .balloon-inner { top: 0;        width: 45.5rem; height: 16.97rem; }
.balloon--2 .balloon-text  { top: 2.7rem; }

.balloon--3 { left: 60.7rem; top: 43.1rem; width: 46rem; height: 18rem; }
.balloon--3 .balloon-outer { top: 0;        width: 46rem;   height: 18rem; }
.balloon--3 .balloon-inner { top: 0;        width: 45.5rem; height: 17.47rem; }
.balloon--3 .balloon-text  { top: 3rem; }

.balloon--4 { left: 5.7rem; top: 129.7rem; width: 46rem; height: 13.6rem; }
.balloon--4 .balloon-outer { top: -2.93rem; width: 46rem;   height: 16.23rem; }
.balloon--4 .balloon-inner { top: -2.35rem; width: 45.5rem; height: 15.95rem; }
.balloon--4 .balloon-text  { top: 3.5rem; }

.balloon--5 { left: 88rem; top: 158.5rem;  width: 46rem; height: 17.5rem; }
.balloon--5 .balloon-outer { top: 0.6rem;   width: 46rem;   height: 16.9rem; }
.balloon--5 .balloon-inner { top: 0;        width: 45.5rem; height: 16.97rem; }
.balloon--5 .balloon-text  { top: 3.7rem; }

.thought-cloud {
  position: absolute;
  left: 63.3rem;
  top: 86.3rem;
  width: 38.6rem;
  height: 36.8rem;
}
.cloud-shape {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  transform: scaleX(-1);
}
.cloud-text {
  position: absolute;
  left: calc(50% + 0.2rem);
  transform: translateX(-50%);
  top: 10.5rem;
  width: 22.6rem;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
}

/* ==========================================================================
   CTA — THE STORY CONTINUES
   ========================================================================== */
.cta {
  position: absolute;
  left: 10.6rem;
  top: 352.4rem;
  width: 129.9rem;
  height: 84.5rem;
  background: var(--mustard);
  border-radius: 1rem;
  overflow: hidden;
}

.cta-rays {
  position: absolute;
  left: 0;
  top: -10.46rem;
  width: 129.9rem;
  height: 106.5rem;
}

.cta-cream {
  position: absolute;
  left: 15.26rem;
  top: 10.52rem;
  width: 99.76rem;
  height: 51.31rem;
  background: var(--cream);
  border: 1.34rem solid var(--ink);
  border-radius: 0.76rem;
  overflow: hidden;
}

.cta-burst {
  position: absolute;
  left: 12.4rem;
  top: 0.9rem;
  width: 75.2rem;
  height: 63.2rem;
}

.cta-cloud {
  position: absolute;
  left: 7.8rem;
  top: 5.13rem;
  width: 80.9rem;
  height: 70.3rem;
}
.cloud-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cta-bowl {
  position: absolute;
  left: 80.1rem;
  top: 51.3rem;
  width: 34.9rem;
  height: 30.2rem;
}

/* ==========================================================================
   ORDER SECTION — tilted cards + coming-soon clouds
   ========================================================================== */
.order {
  position: absolute;
  left: 0;
  top: 439.6rem;
  width: 151.2rem;
  height: 61.5rem;
}

.card { position: absolute; }
.card img { position: absolute; }

.card--left { left: 10.5rem; top: 0.1rem; width: 60.4rem; height: 71.5rem; }
.card--left .card-shadow { left: 0; top: 1.7rem; width: 59rem; height: 69.5rem; }
.card--left .card-face   { left: 2.2rem; top: 0; width: 58.2rem; height: 66.9rem; }
.card--left .card-inner  { left: 4.8rem; top: 0.6rem; width: 52.5rem; height: 45.9rem; }
.card-dots--left { left: 5rem; top: 1.7rem; width: 51.2rem; height: 39.4rem; }

.looking-text {
  position: absolute;
  width: 43.1rem;
  font-family: 'Bowlby One SC', cursive;
  font-weight: 400;
  font-size: 8.396rem;
  line-height: 1.2;
  text-align: center;
  transform: rotate(-7.5deg);
}
.looking-text--shadow { left: 8.85rem; top: 2.8rem; color: var(--ink); }
.looking-text--green  { left: 8.35rem; top: 2.5rem; color: var(--green); }

.btn-cooking {
  position: absolute;
  left: 5rem;
  top: 41.55rem;
  width: 53.5rem;
  height: 20.35rem;
  text-decoration: none;
}
.btn-cooking-shadow { left: 0.6rem !important; top: 1rem !important; width: 52.3rem; height: 19.35rem; }
.btn-cooking-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 52.3rem;
  height: 19.35rem;
  transition: transform 0.15s ease;
}
.btn-cooking-face img { left: 0; top: 0; width: 52.3rem; height: 19.35rem; }
.btn-cooking-label {
  position: absolute;
  left: 7.69rem;
  top: 6.15rem;
  width: 37.63rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 5.4rem;
  color: #fff;
  text-align: center;
  transform: rotate(-7.5deg);
}
.btn-cooking:hover .btn-cooking-face,
.btn-cooking:focus-visible .btn-cooking-face { transform: translate(0.6rem, 1rem); }

.card--right { left: 72.7rem; top: 0; width: 67.8rem; height: 73.4rem; }
.card--right .card-shadow { left: 0; top: 3.5rem; width: 67.4rem; height: 73.4rem; }
.card--right .card-face   { left: 1.2rem; top: 0; width: 66.6rem; height: 73.4rem; }
.card--right .card-inner  { left: 4rem; top: 3.7rem; width: 61.6rem; height: 66rem; }
.card-dots--right-top    { left: 4rem; top: 4.6rem; width: 61.1rem; height: 39.4rem; }
.card-dots--right-bottom { left: 4rem; top: 44.4rem; width: 61.1rem; height: 12.4rem; }

/* ---- coming-soon clouds ---- */
.cloud-blob { position: absolute; }
.cloud-bg { position: absolute; }

.cloud-coming {
  position: absolute;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
}

.cloud--swiggy { left: 72.6rem; top: 4.8rem; width: 36.2rem; height: 25.2rem; }
.cloud--swiggy .cloud-bg { left: 0.3rem; top: 0.19rem; width: 35.9rem; height: 24.57rem; }
.swiggy-mark {
  position: absolute;
  left: 14.6rem;
  top: 3rem;
  width: 10.21rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.14rem;
}
.swiggy-pin { width: 3.97rem; height: 5.86rem; }
.swiggy-word { width: 10.21rem; height: 4.84rem; }
.coming--swiggy { left: 12.4rem; top: 14.8rem; width: 14.7rem; }
.cloud--swiggy .btn-order { top: 14.8rem; }

.cloud--zomato { left: 110.9rem; top: 3.8rem; width: 30.3rem; height: 25.3rem; }
.cloud--zomato .cloud-bg { left: -0.22rem; top: -0.52rem; width: 30.69rem; height: 26.05rem; }
.zomato-word { position: absolute; left: 3.2rem; top: 6.4rem; width: 24.4rem; height: 5.2rem; transform: scaleY(-1); }
.coming--zomato { left: 3.2rem; top: 13.1rem; width: 24.4rem; }
.cloud--zomato .btn-order { left: 8rem; top: 13.1rem; }

.cloud--menu { left: 83.3rem; top: 30.8rem; width: 27.3rem; height: 18.7rem; }
.cloud--menu .cloud-bg { left: 0; top: 0; width: 27.3rem; height: 18.68rem; }
.menu-bowl { position: absolute; left: 10.4rem; top: 3.4rem; width: 6.72rem; height: 5.81rem; }
.coming--menu { left: 3.7rem; top: 10.75rem; width: 20.2rem; }
.cloud--menu .btn-order { left: 6.5rem; top: 11rem; }

.cloud--petpooja { left: 104.5rem; top: 42.6rem; width: 32.44rem; height: 21.7rem; }
.cloud--petpooja .cloud-bg--shadow { left: 0.4rem; top: 0.8rem; width: 32.04rem; height: 20.9rem; }
.cloud--petpooja .cloud-bg--face { left: 0; top: 0; width: 32.04rem; height: 20.9rem; }
.petpooja-logo { position: absolute; left: 6.7rem; top: 5.5rem; width: 19.35rem; height: 3.61rem; }
.btn-order {
  position: absolute;
  left: 12.4rem;
  top: 11.5rem;
  width: 14.3rem;
  height: 3.7rem;
  text-decoration: none;
}
.btn-order-shadow { position: absolute; left: 0.1rem; top: 0.5rem; width: 14.2rem; height: 3.2rem; background: #E12F4C; }
.btn-order-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 14.1rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF7F8;
  font-size: 1.4rem;
  font-weight: 900;
  color: #E12F4C;
  transition: transform 0.15s ease;
}
.btn-order:hover .btn-order-face,
.btn-order:focus-visible .btn-order-face { transform: translate(0.1rem, 0.5rem); }

/* ==========================================================================
   LOGO PANEL
   ========================================================================== */
.logo-panel {
  position: absolute;
  left: 11.8rem;
  top: 505.4rem;
  width: 128.5rem;
  height: 38.6rem;
}
.logo-black { position: absolute; left: -1.7rem; top: 3.2rem; width: 127.9rem; height: 37.7rem; transform: scaleX(-1); }
.logo-white { position: absolute; left: 0; top: -2.05rem; width: 128.5rem; height: 39.75rem; transform: scaleX(-1); }
.footer-logo {
  position: absolute;
  left: 28.3rem;
  top: 8.7rem;
  width: 71.9rem;
  height: 29rem;
  overflow: hidden;
}
.footer-logo img {
  position: absolute;
  left: -17.22%;
  top: -117%;
  width: 134.57%;
  height: 333.5%;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: absolute;
  left: 10.1rem;
  top: 552.7rem;
  width: 130.4rem;
  height: 39.3rem;
  background: var(--mustard);
  border-radius: 5rem 5rem 0 0;
  overflow: hidden;
  color: var(--ink);
}

.footer-address { position: absolute; left: 5rem; top: 3.5rem; width: 37.9rem; }
.footer-address h3 { font-size: 3.3rem; font-weight: 900; }
.footer-address p { font-size: 1.6rem; font-weight: 500; color: #161616; line-height: 150%; }
.footer-address p a { color: inherit; text-decoration: none; }
.footer-address p a:hover { text-decoration: underline; }

.footer-divider {
  position: absolute;
  left: 51.7rem;
  top: 3.5rem;
  width: 0.1rem;
  height: 16.3rem;
  background: var(--ink);
}

.footer-links {
  position: absolute;
  left: 56.8rem;
  top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start;
}
.footer-link {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 500;
}
.footer-link--fixed { width: 7.51rem; justify-content: space-between; }
.link-arrow {
  width: 2.41rem;
  height: 2.41rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.link-arrow img {
  width: 1.14rem;
  height: 1.42rem;
  transform: rotate(45deg);
}
.footer-link:hover span:first-child { text-decoration: underline; }

.footer-form {
  position: absolute;
  left: 100rem;
  top: 3.5rem;
  width: 25.1rem;
  height: 32.7rem;
  background: var(--cream);
  border-radius: 0.7rem;
  box-shadow: 0.9rem 1rem 0 0 var(--ink);
}
.footer-form::after {
  /* Figma draws the black offset panel with its own radius */
  content: none;
}
.form-title {
  position: absolute;
  left: 1.8rem;
  top: 1.6rem;
  font-size: 2.1rem;
  font-weight: 500;
}
.form-fields {
  position: absolute;
  left: 1.8rem;
  top: 5.7rem;
  width: 21.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 1.4rem; font-weight: 500; }
.form-group input,
.form-group textarea {
  width: 100%;
  border: 0;
  border-radius: 0.4rem;
  background: #dec8a5;
  font-family: 'Satoshi', sans-serif;
  font-size: 1.5rem;
  padding: 0.6rem 0.8rem;
  resize: none;
}
.form-group input { height: 3.5rem; }
.form-group textarea { height: 9.6rem; }

.btn-submit {
  position: absolute;
  left: 1.8rem;
  top: 26.2rem;
  width: 21.5rem;
  height: 5rem;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.btn-submit::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.4rem;
  width: 21.5rem;
  height: 4.6rem;
  background: var(--ink);
}
.btn-submit-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 21.2rem;
  height: 4.5rem;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Satoshi', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  transition: transform 0.15s ease;
}
.btn-submit:hover .btn-submit-face,
.btn-submit:focus-visible .btn-submit-face { transform: translate(0.2rem, 0.4rem); }

.btn-submit[disabled] { cursor: default; opacity: 0.7; }

/* Shown in place of the form after a successful submission */
.form-thanks {
  position: absolute;
  left: 100rem;
  top: 3.5rem;
  width: 25.1rem;
  height: 32.7rem;
  background: var(--cream);
  border-radius: 0.7rem;
  box-shadow: 0.9rem 1rem 0 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.4rem;
}
.form-thanks[hidden] { display: none; }
.form-thanks-text {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  color: var(--green);
}

.footer-social {
  position: absolute;
  left: 5rem;
  top: 34.3rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.social-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 500;
  white-space: nowrap;
}
.social-item img { width: 2.4rem; height: 2.4rem; }
.social-item:hover span { text-decoration: underline; }

.footer-legal {
  position: absolute;
  left: calc(50% + 15.05rem);
  transform: translateX(-50%);
  top: 34.4rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.footer-legal a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 500;
  white-space: nowrap;
}
.footer-legal a:hover { text-decoration: underline; }

/* ==========================================================================
   ENTRY ANIMATIONS
   ========================================================================== */
[data-anim] { will-change: transform, opacity; }

[data-anim="pop"] {
  opacity: 0;
  transform: scale(0.2) rotate(-4deg);
  transform-origin: var(--origin, 50% 100%);
}
[data-anim="pop"].in {
  animation: popIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--delay, 0ms);
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.2) rotate(-4deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(1.5deg); }
  80%  { transform: scale(0.97) rotate(-0.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

[data-anim="cloud"] {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 85% 90%;
}
[data-anim="cloud"].in {
  animation:
    cloudIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    cloudFloat 4.5s 1.4s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0ms), calc(var(--delay, 0ms) + 1400ms);
}
@keyframes cloudIn {
  0%   { opacity: 0; transform: scale(0.4); }
  65%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cloudFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-0.8rem); }
}

[data-anim="burst"] {
  opacity: 0;
  transform: scale(0) rotate(-25deg);
  transform-origin: 50% 50%;
}
[data-anim="burst"].in {
  animation: burstIn 0.7s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes burstIn {
  0%   { opacity: 0; transform: scale(0) rotate(-25deg); }
  70%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

[data-anim="panel"] {
  opacity: 0;
  transform: translateY(2.4rem);
}
[data-anim="panel"].in {
  animation: panelIn 0.55s ease-out both;
  animation-delay: var(--delay, 0ms);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(2.4rem); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-anim="rise"] {
  opacity: 0;
  transform: translateY(1.6rem);
}
[data-anim="rise"].in {
  animation: riseIn 0.5s ease-out both;
  animation-delay: var(--delay, 0ms);
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(1.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}

html.noanim [data-anim] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .cloud-shape { transform: scaleX(-1) !important; }
}

/* ==========================================================================
   MOBILE — ≤768px
   Re-bases the rem unit to a 430px artboard (1rem = 10px @430) and converts
   the absolutely-positioned desktop collage into a stacked flow: hero, intro,
   comic strip (one panel per row, balloons between), CTA, cards, footer.
   ========================================================================== */
@media (max-width: 768px) {
  html { font-size: calc(100vw / 43); }

  .stage { width: 100%; height: auto; }
  /* pattern rails shrink to the comic's edge-strip scale and run the full page;
     sections overlap their inner 0.4rem, so they read as cards on the page */
  .rail {
    width: 1.6rem;
    background-size: 1.6rem 12.82rem;
  }

  .hero,
  .intro,
  .comic,
  .cta,
  .order,
  .logo-panel,
  .footer {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 2.4rem);
    margin: 1.2rem auto 0;
  }

  /* ---- hero ---- */
  .hero { height: 48rem; margin-top: 1.2rem; }
  .hero::after,
  .cta::after,
  .intro::after { border-width: 0.5rem; }
  .hero-rays { left: calc(50% - 32.5rem); top: -3rem; width: 65rem; height: 53.3rem; }
  .hero-cream { left: 2.4rem; top: 3.5rem; width: 35.8rem; height: 20rem; border-width: 0.5rem; }
  .cream-dots { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-title { top: 3.4rem; font-size: 3rem; }
  .hero-sub { left: 1.5rem; right: 1.5rem; top: 13.6rem; font-size: 1.3rem; text-align: center; }
  .hero-spicebox { left: calc(50% - 11rem); top: 25.5rem; width: 22rem; height: 20rem; }

  /* ---- intro band ---- */
  .intro { height: 17rem; }
  .intro-dots { left: 0; top: 0; width: 100%; height: 100%; }
  .balloon--intro { left: 2.3rem; top: 2.5rem; width: 36rem; height: 9.8rem; }
  .balloon--intro .balloon-outer { top: 0.4rem; width: 36rem; height: 9.8rem; }
  .balloon--intro .balloon-inner { top: 0; width: 35.6rem; height: 9.76rem; }
  .balloon--intro .balloon-text { top: 1.4rem; width: 29.7rem; font-size: 1.7rem; }
  .intro-scroll { left: calc(50% - 5.3rem); top: 12.7rem; width: 10.6rem; padding: 0.5rem 0; font-size: 1.3rem; border-width: 0.25rem; box-shadow: 0.25rem 0.3rem 0 0 var(--ink); }

  /* ---- comic strip: Figma mobile artboard (402px wide, 1px = 0.10697rem) ----
     full-bleed green sheet with pattern rails at the edges, a white inner page,
     and the same panel art re-framed by the even mobile border set (border-m*) */
  .comic {
    width: 100%;
    height: 197.03rem;
    margin: 1.2rem 0 0;
    background-color: var(--green);
    /* white inner page behind the panels (Frame 113) */
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: 2.35rem 2.46rem;
    background-size: 38.29rem 192.54rem;
  }
  .comic::before,
  .comic::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.6rem;
    background-image: url('assets/pattern-tile.png');
    background-size: 1.6rem 12.82rem;
    background-repeat: repeat-y;
  }
  .comic::before { left: 0; }
  .comic::after { right: 0; }

  /* inline styles from the Figma collage carry the geometry, hence !important;
     z-index restacks the interlocking edges to the mobile layer order */
  .comic .panel { position: absolute !important; }
  .panel--1 { left: 2.35rem !important; top: 2.36rem !important; width: 38.30rem !important; height: 25.20rem !important; z-index: 4; }
  .panel--2 { left: 2.35rem !important; top: 24.28rem !important; width: 38.34rem !important; height: 28.33rem !important; z-index: 5; }
  .panel--3 { left: 2.30rem !important; top: 51.88rem !important; width: 38.40rem !important; height: 24.99rem !important; z-index: 6; }
  .panel--4 { left: 2.28rem !important; top: 74.77rem !important; width: 38.40rem !important; height: 36.46rem !important; z-index: 1; }
  .panel--5 { left: 2.30rem !important; top: 107.39rem !important; width: 38.40rem !important; height: 27.33rem !important; z-index: 2; }
  .panel--6 { left: 2.30rem !important; top: 133.04rem !important; width: 38.40rem !important; height: 37.38rem !important; z-index: 3; }
  .panel--7 { left: 2.35rem !important; top: 169.01rem !important; width: 38.29rem !important; height: 26.00rem !important; z-index: 7; }

  /* same art, mobile borders: hide the desktop frames, paint border-m* on top */
  .panel-border { display: none; }
  .panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
  }
  .panel--1::after { background-image: url('assets/border-m1.svg'); }
  .panel--2::after { background-image: url('assets/border-m2.svg'); }
  .panel--3::after { background-image: url('assets/border-m3.svg'); }
  .panel--4::after { background-image: url('assets/border-m4.svg'); }
  .panel--5::after { background-image: url('assets/border-m5.svg'); }
  .panel--6::after { background-image: url('assets/border-m6.svg'); }
  .panel--7::after { background-image: url('assets/border-m7.svg'); }

  /* art fills each quad; corners traced from the border-m* paths */
  .panel-art { object-fit: cover; }
  .panel--1 .panel-art { clip-path: polygon(0.56% 0.85%, 99.16% 0.85%, 99.16% 82.88%, 0.56% 98.87%); }
  .panel--2 .panel-art { clip-path: polygon(0.56% 15.96%, 99.28% 0.75%, 99.28% 99.04%, 0.56% 92.80%); }
  .panel--3 .panel-art { clip-path: polygon(0.56% 0.85%, 99.44% 8.26%, 99.44% 86.21%, 0.56% 98.87%); }
  .panel--4 .panel-art { clip-path: polygon(0.66% 9.16%, 99.44% 0.59%, 99.44% 99.24%, 0.56% 85.58%); }
  .panel--5 .panel-art { clip-path: polygon(0.56% 0.78%, 99.44% 17.57%, 99.44% 98.85%, 0.56% 87.71%); }
  .panel--6 .panel-art { clip-path: polygon(0.56% 0.57%, 99.44% 9.14%, 99.44% 91.71%, 0.56% 99.19%); }
  .panel--7 .panel-art { clip-path: polygon(0.56% 11.38%, 99.44% 0.82%, 99.44% 99.11%, 0.56% 99.11%); }

  /* spice-box sticker rides the left edge of panel 1 */
  .spicebox-small { left: 1.83rem; top: 15.68rem; width: 6.85rem; height: 5.49rem; }

  /* balloons keep their desktop markup, but the mobile shapes (tails point
     where the design says) are painted by pseudo-elements instead of the imgs */
  .comic .balloon-outer,
  .comic .balloon-inner { display: none; }
  .comic .balloon::before,
  .comic .balloon::after {
    content: '';
    position: absolute;
    left: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .comic .balloon-text { z-index: 1; width: 22.2rem; font-size: 1.35rem; line-height: 1.7rem; }

  .comic .balloon--1 { left: 1.13rem; top: 7.92rem; width: 26.95rem; height: 7.61rem; }
  .balloon--1::before { top: -0.41rem; width: 26.92rem; height: 8.02rem; background-image: url('assets/balloon-m1-outer.svg'); }
  .balloon--1::after  { top: -0.70rem; width: 26.62rem; height: 8.00rem; background-image: url('assets/balloon-m1-inner.svg'); }
  .balloon--1 .balloon-text { top: 0; }

  .comic .balloon--2 { left: 14.52rem; top: 30.01rem; width: 26.98rem; height: 10.35rem; }
  .balloon--2::before { top: 0.35rem; width: 27.20rem; height: 9.99rem; background-image: url('assets/balloon-m2-outer.svg'); }
  .balloon--2::after  { top: 0; width: 26.90rem; height: 10.04rem; background-image: url('assets/balloon-m2-inner.svg'); }
  .balloon--2 .balloon-text { top: 1.33rem; width: 25.2rem; }

  .comic .balloon--3 { left: 4.17rem; top: 75.41rem; width: 31.16rem; height: 12.19rem; }
  .balloon--3::before { top: -2.66rem; width: 31.16rem; height: 14.86rem; background-image: url('assets/balloon-m3-outer.svg'); }
  .balloon--3::after  { top: -2.48rem; width: 30.82rem; height: 14.32rem; background-image: url('assets/balloon-m3-inner.svg'); }
  .balloon--3 .balloon-text { top: 2.1rem; width: 25.7rem; }

  .comic .balloon--4 { left: 5.65rem; top: 108.71rem; width: 30.24rem; height: 8.94rem; }
  .balloon--4::before { top: 0.17rem; width: 30.24rem; height: 10.86rem; background-image: url('assets/balloon-m4-outer.svg'); }
  .balloon--4::after  { top: 0.47rem; width: 29.91rem; height: 10.40rem; background-image: url('assets/balloon-m4-inner.svg'); }
  .balloon--4 .balloon-text { top: 2.3rem; width: 24.9rem; }

  .comic .balloon--5 { left: 14.87rem; top: 165.05rem; width: 26.51rem; height: 10.09rem; }
  .balloon--5::before { top: 0.35rem; width: 26.51rem; height: 9.74rem; background-image: url('assets/balloon-m5-outer.svg'); }
  .balloon--5::after  { top: 0; width: 26.22rem; height: 9.78rem; background-image: url('assets/balloon-m5-inner.svg'); }
  .balloon--5 .balloon-text { top: 2.13rem; width: 21.9rem; }

  .thought-cloud {
    left: 2.30rem;
    top: 128.47rem;
    width: 22.35rem;
    height: 21.28rem;
  }
  .cloud-shape { display: none; }
  .thought-cloud::before {
    content: '';
    position: absolute;
    left: 1.66rem;
    top: 1.58rem;
    width: 19.04rem;
    height: 18.19rem;
    background-image: url('assets/cloud-m.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .cloud-text { top: 6.08rem; width: 13.1rem; font-size: 1.35rem; line-height: 1.7rem; z-index: 1; }

  /* touch has no hover: art starts grey and its colour scrubs in with scroll
     position (inline grayscale set per-frame by main.js) */
  .panel-art,
  .comic .balloon,
  .thought-cloud {
    transition: none;
    will-change: filter;
  }

  /* ---- CTA: cloud art above, bowl below ---- */
  .cta { height: 58rem; }
  .cta-rays { left: calc(50% - 37.5rem); top: -1rem; width: 75rem; height: 61.5rem; }
  .cta-cream { left: 2.4rem; top: 4rem; width: 35.8rem; height: 24rem; border-width: 0.5rem; }
  .cta-burst { left: 2.3rem; top: 1.5rem; width: 36rem; height: 30.3rem; }
  .cta-cloud { left: 1.3rem; top: 3rem; width: 38rem; height: 33rem; }
  .cta-bowl { left: calc(50% - 11rem); top: 37rem; width: 22rem; height: 19rem; }

  /* ---- order cards: stacked ---- */
  .order { height: 88rem; }

  /* left card × 0.63 */
  .card--left { left: 1.3rem; top: 0; width: 38rem; height: 45rem; }
  .card--left .card-shadow { left: 0; top: 1.1rem; width: 37.2rem; height: 43.8rem; }
  .card--left .card-face   { left: 1.4rem; top: 0; width: 36.7rem; height: 42.1rem; }
  .card--left .card-inner  { left: 3rem; top: 0.4rem; width: 33.1rem; height: 28.9rem; }
  .card-dots--left { left: 3.2rem; top: 1.1rem; width: 32.3rem; height: 24.8rem; }
  .looking-text { width: 27.2rem; font-size: 5.3rem; }
  .looking-text--shadow { left: 5.6rem; top: 1.8rem; }
  .looking-text--green  { left: 5.3rem; top: 1.6rem; }
  .btn-cooking { left: 3.2rem; top: 26.2rem; width: 33.7rem; height: 12.8rem; }
  .btn-cooking-shadow { left: 0.4rem !important; top: 0.65rem !important; width: 33rem; height: 12.2rem; }
  .btn-cooking-face { width: 33rem; height: 12.2rem; }
  .btn-cooking-face img { width: 33rem; height: 12.2rem; }
  .btn-cooking-label { left: 4.8rem; top: 3.9rem; width: 23.7rem; font-size: 3.4rem; }

  /* right card × 0.56 */
  .card--right { left: 1.3rem; top: 46.5rem; width: 38rem; height: 41rem; }
  .card--right .card-shadow { left: 0; top: 2rem; width: 37.7rem; height: 41.1rem; }
  .card--right .card-face   { left: 0.7rem; top: 0; width: 37.3rem; height: 41.1rem; }
  .card--right .card-inner  { left: 2.2rem; top: 2.1rem; width: 34.5rem; height: 37rem; }
  .card-dots--right-top    { left: 2.2rem; top: 2.6rem; width: 34.2rem; height: 22.1rem; }
  .card-dots--right-bottom { left: 2.2rem; top: 24.9rem; width: 34.2rem; height: 6.9rem; }

  .cloud--swiggy { left: 1.2rem; top: 49.2rem; width: 20.3rem; height: 14.1rem; }
  .cloud--swiggy .cloud-bg { left: 0.2rem; top: 0.1rem; width: 20.1rem; height: 13.8rem; }
  .swiggy-mark { left: 8.2rem; top: 1.7rem; width: 5.7rem; }
  .swiggy-pin { width: 2.2rem; height: 3.3rem; }
  .swiggy-word { width: 5.7rem; height: 2.7rem; }
  .coming--swiggy { left: 6.9rem; top: 8.3rem; width: 8.2rem; }
  .cloud--swiggy .btn-order { top: 8.3rem; }

  .cloud--zomato { left: 22.7rem; top: 48.6rem; width: 17rem; height: 14.2rem; }
  .cloud--zomato .cloud-bg { left: -0.1rem; top: -0.3rem; width: 17.2rem; height: 14.6rem; }
  .zomato-word { left: 1.8rem; top: 3.6rem; width: 13.7rem; height: 2.9rem; }
  .coming--zomato { left: 1.8rem; top: 7.3rem; width: 13.7rem; }
  .cloud--zomato .btn-order { left: 4.45rem; top: 7.3rem; }

  .cloud--menu { left: 7.2rem; top: 63.7rem; width: 15.3rem; height: 10.4rem; }
  .cloud--menu .cloud-bg { left: 0; top: 0; width: 15.3rem; height: 10.4rem; }
  .menu-bowl { left: 5.8rem; top: 1.9rem; width: 3.8rem; height: 3.3rem; }
  .coming--menu { left: 2.1rem; top: 6rem; width: 11.3rem; }
  .cloud--menu .btn-order { left: 3.6rem; top: 6rem; }

  .cloud--petpooja { left: 19.1rem; top: 70.3rem; width: 18.2rem; height: 12.1rem; }
  .cloud--petpooja .cloud-bg--shadow { left: 0.2rem; top: 0.45rem; width: 18rem; height: 11.7rem; }
  .cloud--petpooja .cloud-bg--face { left: 0; top: 0; width: 18rem; height: 11.7rem; }
  .petpooja-logo { left: 3.8rem; top: 3.1rem; width: 10.8rem; height: 2rem; }
  .btn-order { left: 6.9rem; top: 6.4rem; width: 8.1rem; height: 2.4rem; }
  .btn-order-shadow { left: 0.1rem; top: 0.3rem; width: 8rem; height: 1.9rem; }
  .btn-order-face { width: 7.9rem; height: 2rem; font-size: 1rem; }
  .btn-order:hover .btn-order-face,
  .btn-order:focus-visible .btn-order-face { transform: translate(0.1rem, 0.3rem); }

  .cloud-coming { font-size: 1.2rem; }

  /* ---- logo panel × 0.316 ---- */
  .logo-panel { height: 12.3rem; margin-top: 1.6rem; }
  .logo-black { left: -0.5rem; top: 1rem; width: 40.4rem; height: 11.9rem; }
  .logo-white { left: 0; top: -0.65rem; width: 40.6rem; height: 12.6rem; }
  .footer-logo { left: 8.9rem; top: 2.75rem; width: 22.7rem; height: 9.2rem; }

  /* ---- footer: stacked flow ---- */
  .footer {
    height: auto;
    margin-top: 1.6rem;
    border-radius: 2.4rem 2.4rem 0 0;
    padding: 3.2rem 2.4rem 2.8rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }
  .footer-address { position: static; width: auto; }
  .footer-address h3 { font-size: 2.4rem; }
  .footer-address p { font-size: 1.5rem; }
  .footer-divider { position: static; width: 100%; height: 0.1rem; }
  .footer-links { position: static; }
  .footer-form { position: static; width: 100%; height: auto; padding: 1.8rem; }
  .form-title { position: static; left: auto; top: auto; }
  .form-fields { position: static; left: auto; top: auto; width: 100%; margin-top: 1.4rem; }
  .btn-submit { position: relative; left: 0; top: 0; margin-top: 1.8rem; display: block; }
  .form-thanks { position: static; width: 100%; height: 20rem; }
  .footer-social { position: static; flex-wrap: wrap; row-gap: 1rem; }
  .footer-legal { position: static; left: auto; transform: none; }
}

/* ==========================================================================
   TOP BAR — cream comic bar with brand + page links (all pages)
   Desktop: inline links with a green pill on the current page.
   Mobile: brand + hamburger; links live in a dropdown card (main.js toggles).
   ========================================================================== */
.topbar {
  position: absolute;
  left: 32.3rem;
  top: 1.9rem;
  width: 85.8rem;
  height: 7rem;
  background: var(--cream);
  border-radius: 0.5rem;
  box-shadow: 0.6rem 0.7rem 0 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.1rem 0 1.7rem;
  z-index: 500;
}
.topbar-brand {
  font-family: 'Bowlby One SC', cursive;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: var(--green);
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}
.topbar-menu {
  display: flex;
  align-items: center;
  gap: 3.7rem;
}
.topbar-menu a {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.topbar-menu a:hover { color: var(--green); }
.topbar-menu a.is-current {
  background: var(--green);
  color: var(--cream);
  padding: 0.75rem 1.7rem;
  border-radius: 999px;
}
.topbar-menu a.is-current:hover { color: var(--cream); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  width: 4.4rem;
  height: 4.4rem;
  background: var(--cream);
  border: 0.3rem solid var(--ink);
  border-radius: 0.8rem;
  cursor: pointer;
}
.nav-toggle-bar {
  width: 2.3rem;
  height: 0.38rem;
  background: var(--ink);
  border-radius: 0.3rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* open state: bars fold into an X */
.nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(0.98rem) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-0.98rem) rotate(-45deg); }

@media (max-width: 768px) {
  .topbar {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 2.4rem);
    height: 6rem;
    margin: 1.2rem auto 0;
    padding: 0 1rem 0 1.5rem;
    box-shadow: 0.45rem 0.5rem 0 0 var(--ink);
  }
  .topbar-brand { font-size: 2rem; }
  .nav-toggle { display: flex; }
  .topbar-menu {
    position: absolute;
    top: calc(100% + 1rem);
    right: 0;
    min-width: 20rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.4rem 0;
    background: var(--cream);
    border: 0.3rem solid var(--ink);
    border-radius: 1rem;
    box-shadow: 0.45rem 0.5rem 0 0 var(--ink);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.6);
    transform-origin: top right;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
  }
  .topbar-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
  .topbar-menu a {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.3rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.1;
    padding: 0.55rem 2rem;
  }
  .topbar-menu a.is-current {
    background: none;
    color: var(--green);
    padding: 0.55rem 2rem;
    border-radius: 0;
    text-decoration: underline;
  }
  .topbar-menu a.is-current:hover { color: var(--green); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bar, .topbar-menu { transition: none; }
}

/* ==========================================================================
   INNER PAGES — About Us + coming-soon (Menu, Events, Join Our Team)
   One framed mustard panel on a short stage, then the shared footer.
   ========================================================================== */
.stage--page { height: 138.7rem; }
.stage--page .footer { top: 99.4rem; }

.page-panel {
  position: absolute;
  left: 10.7rem;
  top: 6.3rem;
  width: 129.9rem;
  height: 84.2rem;
  background: var(--mustard);
  border-radius: 1rem;
  overflow: hidden;
}
/* black frame drawn as overlay, same idiom as .hero::after */
.page-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.3rem solid var(--ink);
  border-radius: 1rem;
  pointer-events: none;
  z-index: 50;
}
.page-rays {
  position: absolute;
  left: 0;
  top: -11.2rem;
  width: 129.9rem;
  height: 106.5rem;
}

/* dotted cream inset panel (lattice values shared with .intro-dots) */
.page-dots {
  position: absolute;
  left: 15.3rem;
  width: 99.3rem;
  border: 1.3rem solid var(--ink);
  border-radius: 1rem;
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse 0.22rem 0.16rem, var(--mustard) 78%, rgba(192, 133, 41, 0) 100%),
    radial-gradient(ellipse 0.22rem 0.16rem, var(--mustard) 78%, rgba(192, 133, 41, 0) 100%);
  background-size: 4.47rem 1.605rem, 4.47rem 1.605rem;
  background-position: 0.08rem 0.9rem, 2.31rem 0.1rem;
  z-index: 10;
}
.page-dots--about { top: 5.3rem; height: 75.9rem; }
.page-dots--coming { top: 15.5rem; height: 51.3rem; }

.page-title {
  margin-top: 2.6rem;
  font-family: 'Bowlby One SC', cursive;
  font-weight: 400;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--green);
  text-align: center;
}

.about-card {
  position: relative;
  width: 87.2rem;
  margin: 3.7rem auto 0;
  padding: 5.6rem 5.4rem 5rem;
  background: var(--green);
  border-radius: 0.8rem;
  box-shadow: -1.5rem 1.5rem 0 0 var(--ink);
  text-align: center;
  color: #e6e9e3;
}
.about-card h2 {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.about-card p {
  margin-top: 1.8rem;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.28;
}
.about-card .about-close {
  font-weight: 900;
  color: #fff;
}

.coming-big {
  margin: 4.6rem auto 0;
  font-family: 'Bowlby One SC', cursive;
  font-weight: 400;
  font-size: 9.7rem;
  line-height: 1.26;
  color: var(--green);
  text-align: center;
}

.page-spicebox {
  position: absolute;
  z-index: 20;
}
.page-spicebox--about {
  left: 96.8rem;
  top: 13.7rem;
  width: 25rem;
}
.page-spicebox--coming {
  left: 92rem;
  top: 44rem;
  width: 34rem;
  transform: rotate(-12deg);
}

/* footer link for the page you're on */
.footer-link.is-current span:first-child {
  color: var(--green);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .stage--page { height: auto; }
  .stage--page .footer { top: auto; }

  .page-panel {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 2.4rem);
    height: auto;
    margin: 1.2rem auto 0;
    padding: 2rem 1.6rem 2.4rem;
  }
  .page-panel::after { border-width: 0.5rem; }
  .page-rays {
    left: calc(50% - 32.5rem);
    top: -3rem;
    width: 65rem;
    height: 53.3rem;
  }
  .page-dots {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    border-width: 0.5rem;
    padding: 2.4rem 1.6rem 3rem;
  }
  .page-dots--about { top: auto; height: auto; }
  .page-dots--coming { top: auto; height: auto; padding-bottom: 4rem; }

  .page-title { margin-top: 0; font-size: 4.6rem; }

  .about-card {
    width: auto;
    margin: 1.4rem auto 0;
    padding: 2.6rem 1.8rem 2.4rem;
    box-shadow: -0.6rem 0.6rem 0 0 var(--ink);
  }
  .about-card h2 { font-size: 2.1rem; }
  .about-card p { margin-top: 1.6rem; font-size: 1.5rem; }

  .coming-big { margin: 2.4rem auto 0; font-size: 4.4rem; }

  .page-spicebox--about {
    left: auto;
    right: 0.5rem;
    top: 7.2rem;
    width: 9.5rem;
  }
  .page-spicebox--coming {
    position: relative;
    left: auto;
    top: auto;
    width: 20rem;
    margin: 2.4rem 1rem 0 auto;
  }
}

/* ==========================================================================
   MENU PAGE — delivery menu as flowing HTML on the shared frame.
   Palette lifted from the Figma "Menu" design: cream sheet, red section heads,
   gold dish names/prices, muted-tan descriptions, green wordmark.
   ========================================================================== */
.stage--menu {
  height: auto;
  --m-cream: #fbf0c4;
  --m-red: #c22924;
  --m-name: #b3701b;
  --m-gold: #c1841f;
  --m-desc: #a98a52;
}

.menu-main {
  position: relative;
  z-index: 1;
  padding: 10.5rem 9rem 5rem;
}

.menu-sheet {
  max-width: 124rem;
  margin: 0 auto;
  background: var(--m-cream);
  border: 0.9rem solid var(--m-red);
  border-radius: 1.6rem;
  box-shadow:
    inset 0 0 0 0.4rem var(--m-cream),
    inset 0 0 0 0.68rem var(--m-gold),
    0.8rem 1rem 0 0 var(--ink);
  padding: 5.5rem 7.5rem 6rem;
}

/* ---- brand header: green wordmark (cropped from footer-logo.png) + label ---- */
.menu-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 19.1rem;
  overflow: hidden;
}
.menu-wordmark {
  display: block;
  width: 52rem;
  height: 19.1rem;
  background-image: url('assets/footer-logo.png');
  background-repeat: no-repeat;
  background-size: 73rem 73rem;
  background-position: -10.5rem -27rem;
}
.menu-delivery {
  margin: 1rem 0 0;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--m-gold);
}

/* ---- category ---- */
.menu-cat { margin-top: 4rem; }
.menu-cat-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--m-red);
  margin: 0 0 1.6rem;
}

/* ---- veg / non-veg diet marks (scale with the heading via em) ---- */
.diet {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  vertical-align: 0.04em;
  margin-left: 0.12em;
  border-radius: 0.1em;
  position: relative;
}
.diet--veg { border: 0.07em solid #3e7d2c; }
.diet--veg::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: #3e7d2c;
}
.diet--non { border: 0.07em solid var(--m-red); }
.diet--non::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  border-left: 0.16em solid transparent;
  border-right: 0.16em solid transparent;
  border-bottom: 0.28em solid var(--m-red);
}

/* ---- items ---- */
.menu-list { list-style: none; }
.mi {
  display: flex;
  gap: 1.3rem;
  padding: 1.15rem 0;
}
.mi-chev { flex: none; width: 2rem; height: 2.4rem; position: relative; }
.mi-chev::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.62rem;
  width: 0.85rem;
  height: 0.85rem;
  border-top: 0.32rem solid var(--m-red);
  border-right: 0.32rem solid var(--m-red);
  transform: rotate(45deg);
}
.mi-body { flex: 1 1 auto; min-width: 0; }
.mi-top { display: flex; align-items: baseline; gap: 1.4rem; }
.mi-name {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--m-name);
}
.mi-price {
  margin-left: auto;
  flex: none;
  font-size: 2rem;
  font-weight: 700;
  color: var(--m-name);
  white-space: nowrap;
}
.mi-desc {
  margin-top: 0.4rem;
  max-width: 84rem;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--m-desc);
}
.mi-serve {
  margin-top: 0.15rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--m-desc);
}

/* footer flows beneath the (variable-length) menu instead of the fixed artboard slot */
.stage--menu .footer {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  margin: 4rem 0 0;
}

@media (max-width: 768px) {
  .menu-main { padding: 1.6rem 1rem 2.4rem; }
  .menu-sheet {
    max-width: none;
    padding: 2.8rem 1.8rem 3rem;
    border-width: 0.5rem;
    border-radius: 1rem;
    box-shadow:
      inset 0 0 0 0.25rem var(--m-cream),
      inset 0 0 0 0.42rem var(--m-gold),
      0.5rem 0.6rem 0 0 var(--ink);
  }
  .menu-brand { height: 11rem; }
  .menu-wordmark {
    width: 30rem;
    height: 11rem;
    background-size: 42.1rem 42.1rem;
    background-position: -6.05rem -15.55rem;
  }
  .menu-delivery { font-size: 2.3rem; margin-top: 0.6rem; }
  .menu-cat { margin-top: 3rem; }
  .menu-cat-title { font-size: 2.7rem; margin-bottom: 1.2rem; }
  .mi { gap: 0.9rem; padding: 0.95rem 0; }
  .mi-chev { width: 1.5rem; height: 1.9rem; }
  .mi-chev::before { left: 0.15rem; top: 0.5rem; width: 0.65rem; height: 0.65rem; border-top-width: 0.26rem; border-right-width: 0.26rem; }
  .mi-top { gap: 0.9rem; }
  .mi-name { font-size: 1.75rem; }
  .mi-price { font-size: 1.7rem; }
  .mi-desc, .mi-serve { font-size: 1.45rem; }
  .stage--menu .footer { left: auto; transform: none; margin: 1.6rem auto 0; }
}