/* =========================================================
   Big Bites Pizza & Kebab — hand-built HTML/CSS copy
   Design width: 1440px (matches the original)
   ========================================================= */

/* ---------- Fonts (copied from the original site) ---------- */
@font-face{font-family:"BB Sans";src:url("../assets/fonts/sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BB Sans";src:url("../assets/fonts/sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"BB Sans";src:url("../assets/fonts/sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"BB Sans";src:url("../assets/fonts/sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"BB Script";src:url("../assets/fonts/script.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BB Display";src:url("../assets/fonts/display.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BB Brush";src:url("../assets/fonts/brush.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BB Comic";src:url("../assets/fonts/comic.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BB Neon";src:url("../assets/fonts/neon.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BB Review";src:url("../assets/fonts/review-body.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"BB Name";src:url("../assets/fonts/review-name.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --yellow:#fbca1f;
  --gold:#ffce00;
  --orange:#ea5130;
  --cream:#f5f5ef;
  --white:#fefefe;
  --neon-yellow:#fee17b;
  --nav-ink:#304254;
  --nav-h:48px;
  --design-w:1440px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  margin:0;
  background:#fff;
  color:#000;
  font-family:"BB Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
p{margin:0}

/* =========================================================
   Top navigation
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.07);
  display:flex;align-items:center;justify-content:flex-end;
}
/* brand logo, far left — pushes everything else to the right */
.nav__brand{
  margin-right:auto;
  display:flex;align-items:center;
  height:100%;padding:0 0 0 16px;
}
.nav__brand img{
  height:42px;width:auto;
  object-fit:contain;
  transition:transform .2s ease;
}
.nav__brand:hover img{transform:scale(1.06)}

.nav__list{
  list-style:none;margin:0;padding:0 16px 0 0;
  display:flex;align-items:center;gap:32px;
}
.nav__list a{
  font-size:15px;font-weight:700;line-height:22px;
  color:var(--nav-ink);
  white-space:nowrap;
  transition:color .18s ease;
}
.nav__list a:hover{color:var(--orange)}
.nav__toggle{
  display:none;
  background:none;border:0;cursor:pointer;
  padding:0 18px;height:100%;
  color:var(--nav-ink);
  font-size:22px;line-height:1;
}

/* =========================================================
   Floating "Order Now" button (home page)
   ========================================================= */
.fab-order{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;
  background:var(--yellow);color:#111;
  border-radius:999px;
  font-size:15px;font-weight:700;line-height:20px;letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.38);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.fab-order svg{width:18px;height:18px;flex:none;fill:currentColor}
.fab-order:hover{background:#ffd84d;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.fab-order:active{transform:translateY(0)}
@media (max-width:600px){
  .fab-order{right:14px;bottom:14px;padding:13px 20px;font-size:14px}
}

/* =========================================================
   Section scaffolding
   Every section renders a 1440px-wide "stage" that is scaled
   down proportionally on smaller desktop widths, so the copy
   stays pixel-faithful to the original.
   ========================================================= */
.section{position:relative;width:100%;overflow:hidden}
.stage{
  position:relative;z-index:1;
  width:var(--design-w);
  margin:0 auto;
}
.abs{position:absolute}

/* =========================================================
   Scroll-entrance animations (same behaviour as the original:
   the photo backdrop lifts out of shadow while the content
   fades and slides into place, once, on first view)
   ========================================================= */
.section--photo::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:#07090b;opacity:.62;pointer-events:none;
  transition:opacity 1.15s cubic-bezier(.22,.61,.36,1);
}
.section--photo.is-in::after{opacity:0}

.js .rv{
  opacity:0;
  transform:translate(var(--dx,0px),var(--dy,26px));
  transition:opacity .8s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .95s cubic-bezier(.22,.61,.36,1) var(--d,0s);
  will-change:opacity,transform;
}
.js .is-in .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .section--photo::after{opacity:0;transition:none}
  .btn-ordernow{animation:none}
}

/* Proportional scaling between 1000px and 1440px so the copy stays
   pixel-faithful on smaller desktops. tan(atan2()) turns 100vw/1440px
   into the unitless ratio that scale() needs. */
@media (max-width:1439px) and (min-width:1000px){
  :root{--s:tan(atan2(100vw,1440px))}
  .stage{transform:scale(var(--s));transform-origin:top left;margin:0}
  .section--hero{height:calc(618px * var(--s))}
  .section--about{height:calc(468px * var(--s))}
  .section--oven{height:calc(607px * var(--s))}
  .section--happy{height:calc(486px * var(--s))}
  .section--menu{height:calc(554px * var(--s))}
  .section--reviews{height:calc(452px * var(--s))}
  .section--footer{height:calc(258px * var(--s))}
  .section--copy{height:calc(76px * var(--s))}
}

/* =========================================================
   1. Hero
   ========================================================= */
.section--hero{
  margin-top:var(--nav-h);
  background:#0d1216 url("../assets/img/hero-smoke.jpg") center/cover no-repeat;
}
.section--hero .stage{height:618px}
.hero__logo{position:absolute;top:82px;left:548px;width:338px;height:376px;object-fit:contain}
.hero__cta{
  position:absolute;top:449px;left:50%;margin-left:-115px;
  width:230px;height:57px;
  display:flex;align-items:center;justify-content:center;
  padding-bottom:13px;
  border:4px solid var(--yellow);border-radius:999px;
  font-family:"BB Script",cursive;
  font-size:21.33px;line-height:29px;color:var(--cream);
  transition:background-color .2s ease,color .2s ease;
}
.hero__cta:hover{background:var(--yellow);color:#111}

/* =========================================================
   2. About
   ========================================================= */
.section--about{background:#000 url("../assets/img/about-bg.jpg") center 44%/cover no-repeat}
.section--about .stage{height:468px}
.about__title{
  position:absolute;top:65px;left:50%;margin-left:-281px;width:562px;
  margin-top:0;margin-bottom:0;
  font-family:"BB Script",cursive;font-weight:400;
  font-size:42.64px;line-height:59px;text-align:center;color:var(--yellow);
}
.about__copy{
  position:absolute;top:148px;left:50%;margin-left:-446.5px;width:893px;
  font-size:17.6px;line-height:24px;color:var(--white);text-align:justify;
}
.about__copy .hl{color:var(--yellow)}

/* =========================================================
   3. "It's Pizza & Kebab O'Clock"
   ========================================================= */
.section--oven{background:#0d1216 url("../assets/img/oven-fire.jpg") center 8.7%/cover no-repeat}
.section--oven .stage{height:607px}
.oven__its{
  position:absolute;left:270px;top:85px;width:152px;z-index:3;
  font-family:"BB Script",cursive;font-weight:400;
  font-size:98.07px;line-height:137px;color:var(--yellow);text-align:center;
}
.oven__big{
  position:absolute;left:269px;top:173px;width:430px;z-index:2;
  font-family:"BB Display",Impact,sans-serif;font-weight:400;
  font-size:143.33px;line-height:133px;color:var(--orange);text-align:left;
  text-transform:uppercase;
}
.oven__oclock{
  position:absolute;left:269px;top:351px;width:252px;z-index:4;
  font-family:"BB Brush",cursive;font-weight:400;
  font-size:120.8px;line-height:169px;color:var(--yellow);text-align:center;
}
.oven__actions{position:absolute;left:880px;top:177px;width:197px;display:flex;flex-direction:column;gap:13px}

/* animated ORDER NOW sprite (2 frames, exactly like the original GIF) */
/* two-frame sprite of the original's animated ORDER NOW button */
.btn-ordernow{
  display:block;width:197px;height:50px;
  background-image:url("../assets/img/order-now.png");
  background-repeat:no-repeat;
  background-size:394px 50px;
  background-position:0 0;
  animation:orderNowBlink 1.1s steps(1) infinite;
}
@keyframes orderNowBlink{
  0%,49.99%{background-position:0 0}
  50%,100%{background-position:-197px 0}
}
/* =========================================================
   4. Millions of Happy Customers
   ========================================================= */
.section--happy{background:#fff}
/* faint BIG BITES watermark, matching the original's tint */
.section--happy::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/img/watermark.png") center 46%/1440px auto no-repeat;
  opacity:.17;pointer-events:none;
}
.section--happy .stage{height:486px}
.happy__title{
  position:absolute;top:108px;left:50%;margin-left:-268.5px;width:537px;
  margin-block:0;
  font-family:"BB Script",cursive;font-weight:400;
  font-size:42.64px;line-height:59px;text-align:center;color:var(--orange);
}
.happy__copy{
  position:absolute;top:184px;left:50%;margin-left:-414px;width:828px;
  font-family:"BB Comic",cursive;
  font-size:23.34px;line-height:32px;text-align:center;color:#000;
}

/* =========================================================
   5. Taste our Menu
   ========================================================= */
.section--menu{background:#8c0000 url("../assets/img/red-bg.jpg") center 37%/cover no-repeat}
.section--menu .stage{height:554px}
/* both product shots are mirrored in the original; the slice is also rotated 39.1° */
.menu__slice{position:absolute;left:187px;top:205px;width:257px;height:274px}
.menu__slice img{width:100%;height:100%;transform:rotate(39.1deg) scaleX(-1)}
.menu__wrap{position:absolute;left:984px;top:220px;width:256px;height:338px}
.menu__wrap img{width:100%;height:100%;transform:scaleX(-1)}
.menu__taste,.menu__word{
  font-family:"BB Neon",cursive;font-weight:400;text-align:center;margin:0;
}
.menu__taste{
  position:absolute;left:541px;top:79px;width:308px;
  font-size:175.11px;line-height:148px;color:var(--neon-yellow);
  text-shadow:0 0 18px rgba(254,225,123,.95),0 0 45px rgba(255,196,0,.75),0 0 90px rgba(255,170,0,.55);
}
.menu__word{
  position:absolute;left:694px;top:215px;width:186px;
  font-size:175.11px;line-height:147.06px;color:#fff;
  text-shadow:0 0 16px rgba(255,255,255,.95),0 0 40px rgba(255,255,255,.7),0 0 80px rgba(255,230,180,.5);
}
.menu__cta{
  position:absolute;left:564px;top:398px;width:332px;height:79px;
  display:flex;align-items:center;justify-content:center;
  border:6px solid var(--white);border-radius:999px;
  font-size:24px;font-weight:700;line-height:33px;color:var(--white);
  transition:background-color .2s ease,color .2s ease;
}
.menu__cta:hover{background:var(--white);color:#b00000}

/* =========================================================
   6. Reviews
   ========================================================= */
.section--reviews{background:#111 url("../assets/img/chalkboard.jpg") center 17%/cover no-repeat}
.section--reviews .stage{height:452px}
.reviews__title{
  position:absolute;top:33px;left:50%;margin-left:-114px;width:228px;margin-block:0;
  font-family:"BB Script",cursive;font-weight:400;
  font-size:86.75px;line-height:104px;text-align:center;color:var(--cream);
}
.reviews__grid{
  position:absolute;top:184px;left:134px;width:1171px;
  display:grid;grid-template-columns:repeat(3,371px);gap:29px;
  align-items:start;
}
.review__name{
  margin:0;font-family:"BB Name",cursive;font-weight:400;
  font-size:29.33px;line-height:41px;text-align:center;color:var(--gold);
}
.review__text{
  margin:13px 0 0;font-family:"BB Review",sans-serif;font-weight:500;
  font-size:12.4px;line-height:17px;text-align:center;color:var(--cream);
  letter-spacing:.14px;
}
.review__stars{margin:14px auto 0;display:block;width:171px;height:32px}

/* =========================================================
   7. Footer + copyright
   ========================================================= */
.section--footer{background:var(--yellow)}
.section--footer .stage{height:258px}
/* links removed — the logo now centres in the footer bar */
.footer__logo{position:absolute;left:50%;margin-left:-100.5px;top:26px;width:201px;height:224px;object-fit:contain}
.section--copy{background:var(--yellow)}
.section--copy .stage{height:76px}
.copyright{
  position:absolute;top:30px;left:50%;margin-left:-300px;width:600px;
  font-size:12px;line-height:16px;text-align:center;color:#000;white-space:nowrap;
}

/* =========================================================
   Mobile / small-tablet layout (< 1000px)
   Same content, stacked — mirrors the original's mobile view.
   ========================================================= */
@media (max-width:999px){
  .nav__list{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:0;
    border-bottom:0 solid rgba(0,0,0,.08);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
    /* while collapsed the panel must paint nothing at all — otherwise its
       background bleeds under the border and leaves a hairline on the hero */
    background-clip:padding-box;
  }
  .nav__list.is-open{max-height:340px;border-bottom-width:1px}
  .nav__list li{border-top:1px solid rgba(0,0,0,.06)}
  .nav__list a{display:block;padding:14px 20px;font-size:16px}
  .nav__toggle{display:block}

  .stage{width:100%;height:auto !important;padding:0 22px}
  .abs,.hero__logo,.hero__cta,.about__title,.about__copy,
  .oven__its,.oven__big,.oven__oclock,.oven__actions,
  .happy__title,.happy__copy,.menu__slice,.menu__wrap,
  .menu__taste,.menu__word,.menu__cta,
  .reviews__title,.reviews__grid,
  .footer__logo,.copyright{
    position:static;left:auto;top:auto;right:auto;
    margin-left:auto;margin-right:auto;width:auto;max-width:100%;
  }

  /* hero */
  .section--hero .stage{padding:60px 22px 70px;display:flex;flex-direction:column;align-items:center}
  .hero__logo{width:min(268px,72vw);height:auto}
  .hero__cta{width:230px;margin-top:26px}

  /* about */
  .section--about .stage{padding:52px 22px 58px}
  .about__title{font-size:38px;line-height:50px;margin-bottom:22px}
  .about__copy{font-size:16.5px;line-height:24px}
  .about__copy p+p{margin-top:14px}

  /* oven */
  .section--oven .stage{padding:46px 22px 54px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .oven__its{font-size:64px;line-height:70px}
  .oven__big{font-size:74px;line-height:70px;text-align:center}
  .oven__oclock{font-size:66px;line-height:86px}
  .oven__actions{display:flex;flex-direction:column;align-items:center;gap:13px;margin-top:24px}

  /* happy */
  .section--happy{background-size:150% auto}
  .section--happy .stage{padding:56px 22px 62px}
  .happy__title{font-size:36px;line-height:48px;margin-bottom:20px}
  .happy__copy{font-size:19px;line-height:28px}

  /* menu */
  .section--menu .stage{padding:40px 22px 56px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .menu__slice{width:150px;height:auto;align-self:flex-start;margin:0 0 -30px}
  .menu__wrap{width:110px;height:auto;align-self:flex-end;margin:-40px 0 0}
  .menu__taste{font-size:96px;line-height:88px}
  .menu__word{font-size:56px;line-height:52px}
  .menu__cta{width:min(332px,86vw);height:70px;font-size:21px;margin-top:26px}

  /* reviews */
  .section--reviews .stage{padding:40px 22px 56px}
  .reviews__title{font-size:62px;line-height:78px;margin-bottom:16px}
  .reviews__grid{display:grid;grid-template-columns:1fr;gap:34px}
  .review__text{font-size:14px;line-height:20px}

  /* footer */
  .section--footer .stage{padding:34px 22px 30px;display:flex;flex-direction:column;align-items:center;gap:18px}
  .footer__logo{width:150px;height:auto}
  .section--copy .stage{padding:22px}
  .copyright{font-size:12px;white-space:normal}
  .review__text{letter-spacing:normal}

}