/* ==========================================================================
   Brooklyn Pizza | Components
   Tokens load first (tokens.css). No magic numbers here.
   Anti-flat rules from axis-premium-build.md section 9 apply to every block.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bpz-bg);color:var(--bpz-ink-soft);
  font-family:var(--bpz-font-body);font-size:var(--bpz-fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--bpz-red)}

/* Tracking is tighter than the serif these used to run on. A geometric sans at
   display size reads loose at the spacing a serif needs, so headings are pulled
   in per the Axis standard (-.025em, line-height ~1.06) and the largest sizes
   pulled a little further still. 700 is the heaviest weight shipped. */
h1,h2,h3{font-family:var(--bpz-font-display);color:var(--bpz-ink);
  text-wrap:balance;margin:0;font-weight:var(--bpz-fw-bold)}
h1{font-size:var(--bpz-fs-display);line-height:1.02;letter-spacing:-.035em}
h2{font-size:var(--bpz-fs-h2);line-height:1.06;letter-spacing:-.028em}
h3{font-size:var(--bpz-fs-h3);line-height:1.25;letter-spacing:-.015em}
/* No italic file ships with Plus Jakarta Sans, so an <em> here would be a
   synthesised oblique -- a mechanical slant that looks cheap at display size.
   The emphasis is already carried by colour, so drop the slant. Body-copy
   <em> is left alone: at text size the synthetic italic is fine and expected. */
h1 em,h2 em{font-style:normal}
p{margin:0}

/* ---- Layout ------------------------------------------------------------ */
.bpz-wrap{width:100%;max-width:var(--bpz-max);margin-inline:auto;padding-inline:var(--bpz-gut)}
.bpz-wrap--wide{max-width:var(--bpz-max-wide)}
.bpz-prose{max-width:68ch}
.bpz-prose > * + *{margin-top:1.1em}
.bpz-section{padding-block:var(--bpz-section-y)}

/* Section rhythm. Never five identical white bands. */
.bpz-section--soft{background:var(--bpz-bg-soft)}
.bpz-section--warm{background:var(--bpz-grad-warm)}
.bpz-section--dark{background:var(--bpz-grad-panel);color:var(--bpz-on-dark-soft);
  box-shadow:var(--bpz-sh-inset-dark)}
.bpz-section--dark h2,.bpz-section--dark h3{color:var(--bpz-on-dark)}

/* ---- Eyebrow: mono + uppercase + wide tracking ------------------------- */
.bpz-eyebrow{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--bpz-font-mono);font-size:var(--bpz-fs-eyebrow);
  text-transform:uppercase;letter-spacing:.18em;font-weight:var(--bpz-fw-bold);
  color:var(--bpz-red)}
.bpz-section--dark .bpz-eyebrow{color:var(--bpz-yellow)}
.bpz-eyebrow--chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30);
  color:var(--bpz-on-dark);padding:.42rem .85rem;border-radius:var(--bpz-r-pill)}

.bpz-dot{width:8px;height:8px;border-radius:50%;background:var(--bpz-yellow);flex:none;
  animation:bpz-pulse 2.4s var(--bpz-ease) infinite}
@keyframes bpz-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,223,0,.55)}
  70%{box-shadow:0 0 0 10px rgba(255,223,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,223,0,0)}}

/* ---- Skip link --------------------------------------------------------- */
.bpz-skip{position:absolute;left:-9999px}
.bpz-skip:focus{left:1rem;top:1rem;z-index:var(--z-skip-link);background:var(--bpz-red);
  color:#fff;padding:.75rem 1rem;border-radius:var(--bpz-r-sm)}

/* ---- Header ------------------------------------------------------------ */
.bpz-header{position:relative;z-index:var(--z-sticky-nav);background:var(--bpz-grad-panel);
  color:var(--bpz-on-dark);box-shadow:var(--bpz-sh-inset-dark)}
.bpz-header__inner{display:flex;align-items:center;gap:var(--bpz-gut);
  min-height:4.5rem;padding-block:.75rem}
.bpz-header a{color:inherit;text-decoration:none}
.bpz-brand{display:inline-flex;align-items:center;gap:.7rem}
/* Fixed box so the header cannot reflow while the mark loads. */
.bpz-brand__mark{flex:0 0 auto;width:3.25rem;height:3.25rem;display:block}
.bpz-header__brand,.bpz-brand__text{font-family:var(--bpz-font-display);font-size:1.25rem;
  font-weight:var(--bpz-fw-bold);line-height:1.1;letter-spacing:-.01em}
.bpz-brand__text span{display:block;font-family:var(--bpz-font-mono);
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bpz-yellow);margin-top:.15rem}
/* The 26em wordmark-clip that used to live here is REMOVED. It was written
   when the header was a single row and the badge plus wordmark plus phone
   button genuinely competed. The header now wraps below 48em and the brand
   gets its own row, where badge (52px) + wordmark (~110px) fits inside 280px
   at the narrowest supported width. Clipping it there hid the business name
   for no reason. */
.bpz-header__cta{margin-left:auto;display:flex;align-items:center;gap:.6rem}
/* Under 48em the two CTAs plus the wordmark cannot share one row without
   crushing the phone number, so the header wraps and the buttons take their own
   full-width row. Costs about 50px of header height on mobile and buys both
   commission-free ordering channels permanently above the fold, which is the
   whole conversion model. Phone takes the space; WhatsApp reduces to its mark. */
@media (max-width:47.99em){
  .bpz-header__inner{flex-wrap:wrap;row-gap:.75rem}
  .bpz-header__cta{margin-left:0;width:100%;gap:.5rem}
  .bpz-header__cta .bpz-btn--phone{flex:1 1 auto}
  /* Label drops; the bars carry it. Keeps the brand row from crowding. */
  .bpz-navtoggle__text{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .bpz-navtoggle{padding:.5rem .7rem}
}
/* Below the nav breakpoint the toggle takes the auto margin, so the CTAs sit
   beside it instead of both fighting for the same free space. */
@media (max-width:74.99em){
  .bpz-header__cta{margin-left:.6rem}
}
/* Hide the nav ELEMENT below its own breakpoint, not just the list. Left in
   the flow it is an empty flex child still claiming a 40px gap, which is 40px
   the header could give the wordmark instead. */
@media (max-width:74.99em){
  .bpz-nav{display:none}
}
.bpz-nav__list{display:none;gap:1.5rem;list-style:none;margin:0;padding:0}
.bpz-nav__list a,.bpz-nav__btn{font-family:var(--bpz-font-body);
  font-size:.9375rem;font-weight:var(--bpz-fw-med);
  color:var(--bpz-on-dark-soft);padding-block:.5rem}
.bpz-nav__list a:hover,.bpz-nav__btn:hover{color:var(--bpz-on-dark)}
.bpz-nav__list [aria-current="page"]{color:var(--bpz-on-dark)}

/* Nav unhides at 75em (1200px). MEASURED on the live header with the real font,
   six items (Home, Menu, Specials, Delivery, About, Contact):
     brand 200.3 + nav 440.3 + CTAs 386.7 + two 40px gaps = 1107.4 of content
   .bpz-wrap caps its content box at 1200px, so above the cap the row carries
   ~93px spare and the squeeze only begins as the viewport falls to 1197.
   Verified by resizing with the nav forced visible: clean at 1200 and 1198,
   wordmark shedding at 1196.
   Shortening the button from "Delivery Area" to "Delivery" is what bought this.
   It took the button from 108.6px to 73.6px and the nav from 475.4 to 440.3, a
   saving of 35.1px, and that moved the floor from 1232 to 1197. Two whole steps
   of breakpoint, 80em to 75em, for one word.
   That word matters more than it looks: at 80em the nav only appeared above
   1280px, and a 1440x900 laptop at 125% scaling reports 1152px. 75em is the
   lowest conventional value that clears 1197. */
@media (min-width:75em){.bpz-nav__list{display:flex}}

/* ---- Delivery disclosure ----------------------------------------------- */
.bpz-nav__item--panel{position:relative}
.bpz-nav__btn{display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:0;cursor:pointer;line-height:inherit;
  /* padding-inline:0 is load-bearing. GeneratePress styles bare <button> with
     8px 20px, which pushed this item 40px wider than the links beside it and
     put 20px of dead space either side of the label. Caught by measuring the
     rendered gaps, not by looking at it. */
  padding-inline:0}
.bpz-nav__chev{transition:transform .18s ease;flex:0 0 auto}
.bpz-nav__btn[aria-expanded="true"] .bpz-nav__chev{transform:rotate(180deg)}
.bpz-nav__btn[aria-expanded="true"]{color:var(--bpz-on-dark)}
.bpz-nav__panel{position:absolute;top:calc(100% + .5rem);left:-.75rem;
  min-width:15.5rem;margin:0;padding:.5rem;list-style:none;
  background:var(--bpz-grad-panel);border:1px solid var(--bpz-on-dark-line);
  border-radius:var(--bpz-r-md);box-shadow:var(--bpz-sh-lg);
  z-index:var(--z-raised)}
.bpz-nav__panel[hidden]{display:none}
.bpz-nav__panel a{display:block;padding:.55rem .75rem;border-radius:var(--bpz-r-sm);
  white-space:nowrap}
.bpz-nav__panel a:hover,.bpz-nav__panel a:focus-visible{
  color:var(--bpz-on-dark);background:rgba(255,255,255,.08)}

/* ---- Hamburger --------------------------------------------------------- */
/* There was no mobile nav at all before this: below the breakpoint the nav was
   display:none and nothing took its place, so a phone visitor could only move
   between pages through in-body links. */
.bpz-navtoggle{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;
  min-height:2.75rem;padding:.5rem .85rem;background:none;cursor:pointer;
  border:1px solid var(--bpz-on-dark-line);border-radius:var(--bpz-r-sm);
  color:var(--bpz-on-dark-soft);font-family:var(--bpz-font-body);
  font-size:.9375rem;font-weight:var(--bpz-fw-med)}
.bpz-navtoggle:hover{color:var(--bpz-on-dark)}
.bpz-navtoggle__bars{position:relative;display:block;width:1.05rem;height:2px;
  background:currentColor;border-radius:2px}
.bpz-navtoggle__bars::before,.bpz-navtoggle__bars::after{content:"";position:absolute;
  left:0;width:100%;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s ease,opacity .18s ease}
.bpz-navtoggle__bars::before{top:-6px}
.bpz-navtoggle__bars::after{top:6px}
.bpz-navtoggle[aria-expanded="true"] .bpz-navtoggle__bars{background:transparent}
.bpz-navtoggle[aria-expanded="true"] .bpz-navtoggle__bars::before{transform:translateY(6px) rotate(45deg)}
.bpz-navtoggle[aria-expanded="true"] .bpz-navtoggle__bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (min-width:75em){.bpz-navtoggle{display:none}}

.bpz-mobilenav{border-top:1px solid var(--bpz-on-dark-line)}
.bpz-mobilenav[hidden]{display:none}
.bpz-mobilenav__inner{padding-block:1rem 1.25rem}
.bpz-mobilenav__list{list-style:none;margin:0;padding:0}
.bpz-mobilenav__list a{display:block;padding:.7rem 0;font-size:1.0625rem;
  font-weight:var(--bpz-fw-med);color:var(--bpz-on-dark-soft)}
.bpz-mobilenav__list a:hover,.bpz-mobilenav__list a:focus-visible,
.bpz-mobilenav__list [aria-current="page"]{color:var(--bpz-on-dark)}
.bpz-mobilenav__list li+li{border-top:1px solid rgba(255,255,255,.08)}
.bpz-mobilenav__label{margin:1.1rem 0 .1rem;font-family:var(--bpz-font-mono);
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bpz-yellow)}
.bpz-mobilenav__list--sub a{font-size:.9375rem;padding:.6rem 0}
@media (min-width:75em){.bpz-mobilenav{display:none}}

/* ---- Buttons ----------------------------------------------------------- */
.bpz-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3.5rem;padding:.9rem 1.6rem;border-radius:var(--bpz-r-sm);
  font-family:var(--bpz-font-body);font-size:1rem;font-weight:var(--bpz-fw-bold);
  text-decoration:none;white-space:nowrap;border:0;cursor:pointer;
  transition:transform .2s var(--bpz-ease),box-shadow .2s var(--bpz-ease),background .2s}
.bpz-btn--phone{background:var(--bpz-grad-action);color:#fff;box-shadow:var(--bpz-sh-action)}
.bpz-btn--phone:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(206,0,0,.4)}
.bpz-btn--order{background:var(--bpz-grad-action);color:#fff;box-shadow:var(--bpz-sh-action)}
.bpz-btn--order:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(206,0,0,.4)}
.bpz-btn--slice{background:var(--bpz-ink);color:#fff;box-shadow:var(--bpz-sh-md)}
.bpz-btn--slice:hover{transform:translateY(-2px)}
.bpz-btn--compact{min-height:2.75rem;padding:.5rem 1rem;font-size:.9375rem}
.bpz-btn:focus-visible{outline:3px solid var(--bpz-yellow);outline-offset:3px}

/* ---- Map -----------------------------------------------------------------
   aspect-ratio reserves the box before the iframe loads, so a lazy embed
   cannot shift anything below it. CLS stays at zero.
   ------------------------------------------------------------------------ */
.bpz-map{position:relative;aspect-ratio:16 / 9;margin-top:1.75rem;
  border:1px solid var(--bpz-line);border-radius:var(--bpz-r-lg);overflow:hidden;
  box-shadow:var(--bpz-sh-md);background:var(--bpz-bg-warm)}
.bpz-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Facade. Fills the reserved box until the visitor asks for the real map. */
.bpz-map__load{position:absolute;inset:0;width:100%;height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  border:0;cursor:pointer;background:var(--bpz-grad-warm);
  font-family:var(--bpz-font-body);color:var(--bpz-ink)}
.bpz-map__load:hover{background:var(--bpz-bg-warm)}
.bpz-map__load:focus-visible{outline:3px solid var(--bpz-yellow);outline-offset:-4px}
.bpz-map__pin{font-size:1.5rem;color:var(--bpz-red);line-height:1}
.bpz-map__addr{font-family:var(--bpz-font-display);font-size:1.0625rem;
  font-weight:var(--bpz-fw-bold);letter-spacing:-.015em;text-align:center;
  padding-inline:1rem}
.bpz-map__cue{font-family:var(--bpz-font-mono);font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bpz-red);
  font-weight:var(--bpz-fw-bold)}
@media (min-width:56em){.bpz-map{aspect-ratio:21 / 9}}

/* ---- Offer line ---------------------------------------------------------
   Sits under a call button to state the phone-order discount. Yellow is the
   BRAND/TRUST tone so it carries the code while red stays on the button:
   one tone, one job. Used in the footer and on the menu header.
   ------------------------------------------------------------------------ */
.bpz-footer__h--sub{margin-top:1.5rem;display:block}
/* Hero variant sits on the dark hero, so it inherits the on-dark colours the
   footer variant already uses. Same treatment for the code either way. */
.bpz-offer-line--hero{margin-top:1rem}
/* color:inherit, same reasoning as .bpz-hours. Every current use is on a dark
   surface so nothing changes today, but the hardcoded on-dark token was the
   identical latent trap: drop this on a light section and it went invisible. */
.bpz-offer-line{margin-top:.85rem;font-size:.9375rem;color:inherit}
/* inherit alone cannot match on both surfaces: .bpz-footer sets the 0.78 soft
   while .bpz-hero sets opaque white, so the hero line came out brighter than
   it was and brighter than the hero's own sub text. This restores the previous
   value on the hero only. The component still inherits everywhere else, so it
   stays usable on a light surface, which was the point of the change. */
.bpz-hero .bpz-offer-line{color:var(--bpz-on-dark-soft)}
.bpz-offer-line strong{color:var(--bpz-yellow);font-family:var(--bpz-font-mono);
  font-size:.875rem;letter-spacing:.08em;font-weight:var(--bpz-fw-bold)}

/* Footer order column: two direct channels, stacked, never side by side at
   equal weight. Phone is primary and stays first. */
.bpz-footer__col--order .bpz-btn,
.bpz-footer__col--order .bpz-wa{display:flex;width:100%;margin-top:.6rem}

/* Slice: tertiary, and it looks it. No fill, no border, no icon. It charges
   commission and the owner wants calls, so it is findable without competing
   with the two buttons above it. #B8ADA4 on the #17120F footer is 8.57:1. */

.bpz-slice-link:focus-visible{outline:3px solid var(--bpz-yellow);outline-offset:3px}

/* ---- Persistent mobile CTA bar -----------------------------------------
   axis-build-standard.md section 7, required on every lead-gen build. The
   header scrolls away; this does not.
   Mobile only: above 48em the header already shows both channels permanently.
   padding-bottom on body reserves the space so the bar never covers the last
   element on the page, and env(safe-area-inset-bottom) keeps it clear of the
   iPhone home indicator.
   ------------------------------------------------------------------------ */
.bpz-stickycta{display:none}
@media (max-width:47.99em){
  body{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom,0px))}
  .bpz-stickycta{display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;
    z-index:var(--z-sticky-cta);padding:.6rem .75rem;
    padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
    background:var(--bpz-grad-panel);box-shadow:0 -2px 10px rgba(23,18,15,.18),0 -12px 30px rgba(23,18,15,.14)}
  .bpz-stickycta__call,.bpz-stickycta__wa{display:inline-flex;align-items:center;
    justify-content:center;gap:.5rem;min-height:3.25rem;border-radius:var(--bpz-r-sm);
    font-family:var(--bpz-font-body);font-size:1rem;font-weight:var(--bpz-fw-bold);
    text-decoration:none;color:#fff}
  .bpz-stickycta__call{flex:1 1 auto;background:var(--bpz-grad-action);
    box-shadow:var(--bpz-sh-action)}
  .bpz-stickycta__wa{flex:0 0 auto;width:3.25rem;background:var(--bpz-grad-wa);
    border-radius:var(--bpz-r-pill);box-shadow:var(--bpz-sh-wa)}
  .bpz-stickycta__wa .bpz-wa__mark{width:1.5rem;height:1.5rem}
  .bpz-stickycta a:focus-visible{outline:3px solid var(--bpz-yellow);outline-offset:3px}
}
@media print{.bpz-stickycta{display:none}}

/* ---- WhatsApp CTA ------------------------------------------------------
   Rebuild of the supplied 330x110 pill. Same form -- fully-rounded green
   capsule, white mark left, two-line white label -- in CSS + inline SVG, so it
   stays crisp at any density, carries real selectable text, and needs no
   request. The reference green is deepened to clear WCAG AA (see the note on
   --bpz-green in tokens.css); white sits at 4.67:1 or better on every stop.
   Identical on the dark hero and the light prose pages, so no per-section
   override is needed the way the old ghost variant required.
   ------------------------------------------------------------------------ */
.bpz-wa{background:var(--bpz-grad-wa);color:#fff;box-shadow:var(--bpz-sh-wa);
  border-radius:var(--bpz-r-pill);gap:.85rem;padding:1rem 1.75rem 1rem 1.25rem;
  min-height:3.75rem;
  /* The CTA rows are flex-wrap containers and the phone button next to it is
     nowrap, so a shrinkable WhatsApp button loses the fight and collapses to
     its longest word. Refuse to shrink; the row wraps this onto its own line
     instead. max-width keeps that safe on narrow screens. */
  flex:0 0 auto;max-width:100%;
  /* .bpz-btn sets nowrap; the label is deliberately two lines here. */
  white-space:normal;text-align:left;line-height:1.25}
.bpz-wa:hover{background:var(--bpz-grad-wa-hover);transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(41,79,38,.28),0 20px 40px rgba(41,79,38,.24)}
.bpz-wa__mark{flex:0 0 auto;width:2.125rem;height:2.125rem}
/* Sized so normal greedy wrapping breaks it "Click to Order via / WhatsApp",
   the way the supplied reference does. No text-wrap:balance -- balancing
   re-breaks it to "Click to Order / via WhatsApp".
   display:block matters: max-width is ignored on a non-replaced inline
   element, so as a plain span the label stayed on one line and the pill came
   out 5.3:1 instead of the reference's 3:1. */
.bpz-wa__label{display:block;font-weight:var(--bpz-fw-med);font-size:1.0625rem;
  max-width:10.5em;letter-spacing:.005em}
/* Stacked below 38em (the site's 1-up breakpoint). The phone CTA next to it
   fills the row at its natural nowrap width, so a content-width pill under it
   left a ragged edge. Match the width; .bpz-btn already centres the content.
   Excludes the header variant, which is sized by the header's own rules. */
@media (max-width:37.99em){
  .bpz-wa:not(.bpz-wa--compact){width:100%;justify-content:center}
  .bpz-wa:not(.bpz-wa--compact) .bpz-wa__label{text-align:center}
}

/* Header variant. Nav scale: one line, smaller mark, shorter label. */
.bpz-wa--compact{min-height:2.75rem;padding:.5rem 1rem .5rem .75rem;gap:.5rem}
.bpz-wa--compact .bpz-wa__mark{width:1.375rem;height:1.375rem}
.bpz-wa--compact .bpz-wa__label{max-width:none;font-size:.9375rem;
  font-weight:var(--bpz-fw-bold);white-space:nowrap}
/* Mark only once the header wraps, so the phone number keeps the row.
   The label is clipped rather than display:none, and aria-label repeats it, so
   the button keeps an accessible name either way. */
@media (max-width:47.99em){
  .bpz-wa--compact{flex:0 0 auto;width:2.75rem;padding:0;justify-content:center;
    border-radius:var(--bpz-r-pill)}
  .bpz-wa--compact .bpz-wa__label{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---- HERO: full-bleed, gradient + photo + scrim ------------------------ */
.bpz-hero{position:relative;display:flex;align-items:center;overflow:hidden;
  background:var(--bpz-grad-hero);color:var(--bpz-on-dark);
  padding-block:clamp(3.5rem,9vh,6rem);min-height:clamp(30rem,74vh,44rem)}
.bpz-hero--compact{min-height:clamp(16rem,38vh,24rem)}
/* Photo sits behind the gradient, dimmed by the scrim so text always reads. */
.bpz-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bpz-hero__scrim{position:absolute;inset:0;background:var(--bpz-hero-scrim);z-index:1}
.bpz-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:var(--bpz-hero-glow)}
.bpz-hero__inner{position:relative;z-index:3;max-width:52rem}
.bpz-hero h1{color:var(--bpz-on-dark);margin:1.1rem 0 0}
/* Colour only. The italic that used to sit here was written for the serif;
   Plus Jakarta Sans ships no italic, so it rendered as a synthetic oblique.
   This rule outranks the generic h1 em reset above, so it has to drop the
   slant itself rather than rely on it. */
.bpz-hero h1 em{color:var(--bpz-yellow)}
.bpz-hero__sub{font-size:var(--bpz-fs-lede);color:rgba(255,255,255,.88);
  margin:1.25rem 0 0;max-width:42rem}
.bpz-hero__ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.bpz-hero__pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem;
  list-style:none;padding:0}
.bpz-hero__pills li{font-size:.8125rem;color:var(--bpz-on-dark-soft);
  border:1px solid var(--bpz-on-dark-line);border-radius:var(--bpz-r-pill);
  padding:.35rem .8rem}

/* ---- Trust bar: floats over the hero ----------------------------------- */
.bpz-trustbar-wrap{position:relative;z-index:4;margin-top:-3rem}
.bpz-trustbar{display:grid;grid-template-columns:1fr;gap:.25rem;list-style:none;
  margin:0;padding:.5rem;background:var(--bpz-bg);border:1px solid var(--bpz-line);
  border-top:3px solid var(--bpz-yellow);border-radius:var(--bpz-r-md);
  box-shadow:var(--bpz-sh-lg)}
.bpz-trustbar__item{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem}
.bpz-trustbar__fig{font-family:var(--bpz-font-display);font-size:1.5rem;
  font-weight:var(--bpz-fw-bold);color:var(--bpz-ink);line-height:1;flex:none}
.bpz-trustbar__txt{font-size:.9375rem;color:var(--bpz-ink-soft);line-height:1.3}
.bpz-trustbar__txt strong{display:block;color:var(--bpz-ink);font-weight:var(--bpz-fw-bold)}
@media (min-width:48em){.bpz-trustbar{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64em){.bpz-trustbar{grid-template-columns:repeat(4,1fr)}}

/* ---- Stat band (signature moment, on dark) ----------------------------- */
.bpz-stats{display:grid;grid-template-columns:1fr;gap:0;list-style:none;margin:2.5rem 0 0;padding:0}
.bpz-stats__item{padding:1.5rem .5rem;border-top:1px solid var(--bpz-on-dark-line)}
.bpz-stats__fig{font-family:var(--bpz-font-display);font-size:clamp(2.5rem,5vw,3.75rem);
  font-weight:var(--bpz-fw-bold);line-height:1;color:var(--bpz-on-dark);letter-spacing:-.02em}
.bpz-stats__unit{color:var(--bpz-yellow);font-size:.5em;margin-left:.15em}
.bpz-stats__lbl{margin-top:.5rem;font-size:.9375rem;color:var(--bpz-on-dark-soft)}
@media (min-width:40em){.bpz-stats{grid-template-columns:repeat(2,1fr);gap:0 2rem}}
@media (min-width:64em){.bpz-stats{grid-template-columns:repeat(4,1fr)}
  .bpz-stats__item{border-top:0;border-left:1px solid var(--bpz-on-dark-line);padding:.5rem 1.5rem}
  .bpz-stats__item:first-child{border-left:0;padding-left:0}}

/* ---- Cards ------------------------------------------------------------- */
.bpz-cards{display:grid;gap:1.5rem;grid-template-columns:1fr;margin:2.5rem 0 0;
  list-style:none;padding:0}
@media (min-width:38em){.bpz-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64em){.bpz-cards--4{grid-template-columns:repeat(4,1fr)}}
.bpz-card{position:relative;background:var(--bpz-grad-card);border:1px solid var(--bpz-line-soft);
  border-radius:var(--bpz-r-lg);overflow:hidden;box-shadow:var(--bpz-sh-md);
  transition:transform .3s var(--bpz-ease),box-shadow .3s var(--bpz-ease)}
.bpz-card:hover{transform:translateY(-8px);box-shadow:var(--bpz-sh-card-hover)}
.bpz-card a{display:block;text-decoration:none;color:inherit}
.bpz-card__media{position:relative;display:block;overflow:hidden}
.bpz-card__idx{position:absolute;top:.75rem;left:.75rem;z-index:2;
  font-family:var(--bpz-font-mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;background:rgba(20,10,6,.72);color:var(--bpz-yellow);
  padding:.3rem .6rem;border-radius:var(--bpz-r-sm)}
.bpz-card__body{display:block;padding:1.25rem 1.35rem 1.5rem}
.bpz-card__title{display:block;font-family:var(--bpz-font-display);font-size:var(--bpz-fs-h3);
  color:var(--bpz-ink);margin:0 0 .35rem}
.bpz-card__desc{display:block;font-size:.9375rem;color:var(--bpz-ink-faint);line-height:1.5}
.bpz-card__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  color:var(--bpz-red);font-weight:var(--bpz-fw-bold);font-size:.9375rem}
.bpz-card__link::after{content:"\2192";transition:transform .2s var(--bpz-ease)}
.bpz-card:hover .bpz-card__link::after{transform:translateX(4px)}

/* ---- Coupon ------------------------------------------------------------ */
.bpz-coupon{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  background:var(--bpz-yellow);color:var(--bpz-ink);
  padding:.85rem 1.25rem;border-radius:var(--bpz-r-md);
  box-shadow:var(--bpz-sh-md);font-size:1rem}
.bpz-coupon__offer{font-family:var(--bpz-font-display);font-size:1.25rem;font-weight:var(--bpz-fw-bold)}
.bpz-coupon__code{font-family:var(--bpz-font-mono);font-size:1rem;letter-spacing:.1em;
  background:var(--bpz-ink);color:var(--bpz-yellow);padding:.25rem .6rem;
  border-radius:var(--bpz-r-sm);font-weight:var(--bpz-fw-bold)}

/* ---- Images + placeholders --------------------------------------------- */
.bpz-img{width:100%;height:auto;object-fit:cover;border-radius:var(--bpz-r-md)}
.bpz-card .bpz-img,.bpz-card .bpz-ph{border-radius:0}
.bpz-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;text-align:center;padding:1.5rem;
  background:repeating-linear-gradient(45deg,#F7F0E8,#F7F0E8 12px,#FDF8F8 12px,#FDF8F8 24px);
  border:2px dashed var(--bpz-red);border-radius:var(--bpz-r-md);color:var(--bpz-ink-soft)}
.bpz-ph__id{font-family:var(--bpz-font-mono);font-size:.8125rem;font-weight:var(--bpz-fw-bold);
  letter-spacing:.16em;color:var(--bpz-red)}
.bpz-ph__note{font-size:.875rem;max-width:34ch;line-height:1.4}
.bpz-ph__meta{font-size:.6875rem;color:var(--bpz-ink-faint)}
.bpz-ph__meta code{background:var(--bpz-ink);color:var(--bpz-yellow);padding:1px 5px;border-radius:3px}

/* ---- Food strip (Order page) ------------------------------------------- */
.bpz-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15rem,1fr);
  gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.25rem .25rem 1.5rem;margin:2rem 0;scrollbar-width:thin}
.bpz-strip:focus-visible{outline:3px solid var(--bpz-yellow);outline-offset:4px}
.bpz-strip__item{scroll-snap-align:start;margin:0;background:var(--bpz-grad-card);
  border:1px solid var(--bpz-line-soft);border-radius:var(--bpz-r-lg);overflow:hidden;
  box-shadow:var(--bpz-sh-md);transition:transform .3s var(--bpz-ease),box-shadow .3s var(--bpz-ease)}
.bpz-strip__item:hover{transform:translateY(-6px);box-shadow:var(--bpz-sh-card-hover)}
.bpz-strip__item .bpz-img,.bpz-strip__item .bpz-ph{border-radius:0}
.bpz-strip__item figcaption{padding:.9rem 1rem 1.1rem;font-family:var(--bpz-font-display);
  font-size:1.0625rem;color:var(--bpz-ink)}

/* ---- NAP + hours ------------------------------------------------------- */
.bpz-nap__name{font-family:var(--bpz-font-display);font-size:1.125rem;color:inherit}
.bpz-nap__addr,.bpz-nap__tel,.bpz-nap__text{margin-top:.35rem;font-size:.9375rem}
.bpz-hours{margin:0;font-size:.9375rem}
.bpz-hours__row{display:flex;justify-content:space-between;gap:1rem;
  padding:.4rem 0;border-bottom:1px solid var(--bpz-on-dark-line);
  /* Component was dark-only: the rule and the times were both on-dark tokens,
     so on a light surface they painted white on white. currentColor makes it
     work on either. The footer is unchanged, its parent colour is the same
     token these used to hardcode. */
  border-bottom-color:color-mix(in srgb, currentColor 20%, transparent)}
.bpz-hours__row:last-child{border-bottom:0}
.bpz-hours dt{font-weight:var(--bpz-fw-med)}
.bpz-hours dd{margin:0;color:inherit}

/* ---- Footer ------------------------------------------------------------ */
.bpz-footer{background:var(--bpz-grad-panel);color:var(--bpz-on-dark-soft);
  padding-block:clamp(3rem,5vw,4.5rem) 2rem;box-shadow:var(--bpz-sh-inset-dark)}
.bpz-footer a{color:var(--bpz-on-dark)}
/* Tertiary Slice link. Typed as a.bpz-slice-link (0,1,1) and placed AFTER
   .bpz-footer a, which has the same specificity: on a tie the later rule wins,
   so this holds inside the footer and on the delivery-area pages alike. A bare
   class lost to .bpz-footer a and the link painted white, reading as a third
   equal-weight action, which is what the tertiary treatment exists to avoid. */
.bpz-footer__links{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.45rem}
.bpz-footer__links a{font-size:.9375rem;color:var(--bpz-on-dark-soft);text-decoration:none}
.bpz-footer__links a:hover{color:var(--bpz-on-dark);text-decoration:underline}
a.bpz-slice-link{display:inline-block;margin-top:.9rem;font-size:.9375rem;
  color:#B8ADA4;text-decoration:underline;text-underline-offset:3px}
a.bpz-slice-link:hover{color:var(--bpz-on-dark)}
.bpz-footer__inner{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media (min-width:48em){.bpz-footer__inner{grid-template-columns:repeat(3,1fr)}}
.bpz-footer__h{font-family:var(--bpz-font-display);font-size:1.0625rem;
  color:var(--bpz-on-dark);margin:0 0 .9rem}
.bpz-footer__legal{margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid var(--bpz-on-dark-line);font-size:.8125rem;
  color:var(--bpz-on-dark-faint)}
.bpz-footer .bpz-btn{margin-bottom:.6rem}

/* ---- Scroll reveal (one restrained motion) -----------------------------
   TRANSFORM ONLY. Opacity is deliberately not involved.

   The earlier version hid content with opacity:0 and relied on JS to reveal it.
   That makes body copy dependent on a script running AND on the compositor
   actually progressing the transition. During testing neither the observer nor
   the opacity transition fired, which would have shipped an unreadable page.

   Now content is ALWAYS visible and the reveal is a subtle slide. Worst case
   the animation never plays and the page simply looks static. That failure mode
   is acceptable; an invisible page is not. */
@keyframes bpz-rise{from{transform:translateY(22px)}to{transform:none}}
.bpz-js .bpz-reveal.is-in{animation:bpz-rise var(--bpz-dur) var(--bpz-ease) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .bpz-js .bpz-reveal.is-in{animation:none;transform:none}
}

/* ---- FAQ: native details/summary, no JS -------------------------------- */
/* ---- Dish list (About: the Brazilian pies) -----------------------------
   A <dl> rather than cards: these rows are name-plus-definition, and the
   toppings are the point -- someone scanning for catupiry or hearts of palm is
   reading the description, not looking at a picture. Two columns on desktop so
   the long topping strings do not run to one thin ribbon down the page.
   ------------------------------------------------------------------------ */
.bpz-dishes{display:grid;gap:1px;margin:2.25rem 0 2.5rem;background:var(--bpz-line);
  border:1px solid var(--bpz-line);border-radius:var(--bpz-r-lg);overflow:hidden}
@media (min-width:56em){.bpz-dishes{grid-template-columns:repeat(2,1fr)}}
.bpz-dishes__row{background:var(--bpz-grad-card);padding:1.15rem 1.35rem}
.bpz-dishes dt{font-family:var(--bpz-font-display);font-size:1.0625rem;
  font-weight:var(--bpz-fw-bold);letter-spacing:-.015em;color:var(--bpz-ink)}
.bpz-dishes dd{margin:.3rem 0 0;font-size:.9375rem;line-height:1.5;
  color:var(--bpz-ink-faint)}
/* Odd number of dishes leaves a dead cell in the last row, and because the
   grid uses a 1px gap over a line-coloured background that gap reads as an
   empty beige box rather than as nothing. Let a lone last row span both. */
@media (min-width:56em){
  .bpz-dishes__row:last-child:nth-child(odd){grid-column:1 / -1}
}

.bpz-faq{margin-top:2rem;max-width:52rem}
.bpz-faq details{background:var(--bpz-bg);border:1px solid var(--bpz-line);
  border-radius:var(--bpz-r-md);box-shadow:var(--bpz-sh-sm);margin-bottom:.75rem;
  transition:box-shadow .2s var(--bpz-ease)}
.bpz-faq details[open]{box-shadow:var(--bpz-sh-md)}
.bpz-faq summary{cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.25rem;
  position:relative;font-family:var(--bpz-font-display);font-size:1.0625rem;
  color:var(--bpz-ink);min-height:3.5rem;display:flex;align-items:center}
.bpz-faq summary::-webkit-details-marker{display:none}
.bpz-faq summary::after{content:"+";position:absolute;right:1.25rem;
  font-family:var(--bpz-font-body);font-size:1.5rem;line-height:1;color:var(--bpz-red);
  transition:transform .2s var(--bpz-ease)}
.bpz-faq details[open] summary::after{transform:rotate(45deg)}
.bpz-faq summary:focus-visible{outline:3px solid var(--bpz-yellow);outline-offset:2px;
  border-radius:var(--bpz-r-md)}
.bpz-faq details > p{padding:0 1.25rem 1.25rem;margin:0;color:var(--bpz-ink-soft);
  font-size:.9688rem;line-height:1.6}