/* ===========================================================================
   Page compositions: the home hero, page heroes, and per-band layout that the
   generic vocabulary does not cover.
   =========================================================================== */

/* -------------------------------------------------------------- home hero */

body .elementor .hero{
  padding-top:calc(var(--section-y) * .75 + 28px);
  padding-bottom:calc(var(--section-y) * .9);
  overflow:hidden;isolation:isolate;
}
body .elementor .hero > .elementor-container{align-items:center}
/* the words keep to the left, the footage shows on the right */
body .elementor .hero-copy > .elementor-widget-wrap{max-width:min(46rem, 100%)}
body .elementor .hero .title-xl .elementor-heading-title{max-width:11ch}
body .elementor .hero .elementor-widget.pills{margin-top:1.25rem}
/* Home pages saved before 2.0.4 may still carry the pie column: it is gone
   from the design everywhere, so it stays hidden there too. */
body .elementor .hero .hero-art{display:none}

/* Two heroes share these rules. The shipped one is dark (`sec-ink`) over the
   kitchen video; a home page the owner edited before 2.0.2 keeps the cream
   one (`sec-cream`), and it must still look like itself. Everything
   tone-specific below names its tone. */

/* --- cream: the cream ground with a warm saffron glow */
body .elementor .hero:not(.sec-ink){background-image:var(--pat-grain)}
body .elementor .hero:not(.sec-ink)::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-10%;top:-12%;width:min(980px,80vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(245,192,101,.55), rgba(245,192,101,0));
}
body .elementor .hero:not(.sec-ink) .title-xl .elementor-heading-title{color:var(--red)}

/* --- dark: the kitchen at work. Elementor's own background video (Style >
   Background), its poster the section background until the footage plays.
   Elementor sizes the <video> for 16:9 — the file is 16:9 — and object-fit
   covers the band where no script has sized it (fallback templates, preview). */
body .elementor .hero > .elementor-background-video-container{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
body .elementor .hero .elementor-background-video-hosted{
  position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;transform:translate(-50%, -50%);
}
@media (prefers-reduced-motion:reduce){
  body .elementor .hero > .elementor-background-video-container{display:none}
}
/* a warm scrim over the footage: deep under the words, open on the right.
   A pseudo-element on the section, so the Elementor render gets it too; the
   container sits above it at z-index 2. */
body .elementor .hero.sec-ink::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg, rgba(26,12,8,.55), rgba(26,12,8,0) 35%),
    linear-gradient(90deg, rgba(26,12,8,.9) 0%, rgba(26,12,8,.78) 38%, rgba(26,12,8,.42) 70%, rgba(26,12,8,.3) 100%);
}
body .elementor .hero.sec-ink .title-xl .elementor-heading-title{text-shadow:0 2px 28px rgba(0,0,0,.35)}
/* the chips as frosted glass over the footage */
body .elementor .hero.sec-ink .pills .elementor-icon-list-item{
  background:rgba(255,246,227,.1);border-color:rgba(255,246,227,.3);color:var(--white);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
body .elementor .hero.sec-ink .pills .elementor-icon-list-icon i,
body .elementor .hero.sec-ink .pills .elementor-icon-list-icon svg{background:var(--saffron)}

/* ------------------------------------------------------------- page hero */

body .elementor .page-hero{
  padding-top:calc(var(--section-y) * .62 + 24px);
  padding-bottom:calc(var(--section-y) * .62);
  overflow:hidden;
}
body .elementor .page-hero > .elementor-container{align-items:center}
body .elementor .page-hero .title-page .elementor-heading-title{color:var(--white)}
body .elementor .page-hero .lede{color:var(--on-dark)}
body .elementor .page-hero .plate{--plate-max:400px}
body .elementor .page-hero .plate img{border-color:var(--red-deep);box-shadow:0 0 0 2px rgba(255,255,255,.15), 0 30px 60px -26px rgba(40,6,2,.8)}
body .elementor .page-hero .promo-art img{max-width:440px;margin-left:auto}

/* --------------------------------------------------------------- ticker */

body .elementor .sec-ticker{padding:0;background:var(--red-deep);overflow:hidden}

/* ------------------------------------------------------------ spotlight */

body .elementor .sec-spot{overflow:hidden}

/* --------------------------------------------------------- head blocks */

/* A heading band above a grid band of the same tone: it hands over with a
   short gap of its own padding. Never a margin — a margin between sections
   shows the page background through as a stripe. */
body .elementor .sec.head-block{padding-bottom:clamp(2rem, 1.5rem + 1.5vw, 3rem)}

/* ----------------------------------------------------- rewards band */

body .elementor .sec-rewards > .elementor-container{align-items:center}
body .elementor .sec-rewards .promo-art img{transform:rotate(2deg)}

/* --------------------------------------------------------- menu page */

body .elementor .sec-menu-cat{padding-block:var(--section-y-tight)}
body .elementor .sec-menu-cat .title .elementor-heading-title{display:flex;align-items:center;gap:.9rem;max-width:none}
body .elementor .sec-menu-cat .elementor-widget.title{margin-bottom:.6rem}
body .elementor .sec-menu-cat .elementor-widget.lede{margin-bottom:1.5rem}


/* ------------------------------------------------------- responsive */

/* Elementor keeps two columns side by side until 767px; these bands stack
   at the tablet breakpoint instead, in both renders. */
@media (max-width:1024px){
  body .elementor .hero > .elementor-container,
  body .elementor .page-hero > .elementor-container,
  body .elementor .stack-tablet > .elementor-container{flex-wrap:wrap}
  body .elementor .hero > .elementor-container > .elementor-column,
  body .elementor .page-hero > .elementor-container > .elementor-column,
  body .elementor .stack-tablet > .elementor-container > .elementor-column{width:100%}
  /* stacked: the words sit over the whole band, so the scrim evens out */
  body .elementor .hero.sec-ink::before{background:linear-gradient(180deg, rgba(26,12,8,.86) 0%, rgba(26,12,8,.74) 55%, rgba(26,12,8,.6) 100%)}
  body .elementor .page-hero .hero-side{display:none}
  body .elementor .stack-tablet > .elementor-container > .elementor-column + .elementor-column{margin-top:2rem}
  .spot{grid-template-columns:1fr}
  .spot-burst{right:8px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .byo{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  body .elementor .cols-gap > .elementor-container > .elementor-column + .elementor-column,
  body .elementor .cols-gap-lg > .elementor-container > .elementor-column + .elementor-column{margin-top:var(--pbg-gap)}
  body .elementor .hero .title-xl .elementor-heading-title{max-width:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(150px,auto)}
  .tiles > li:first-child{grid-column:span 2;grid-row:span 1;min-height:220px}
  .tile{min-height:150px}
  .tile-name{font-size:1.2rem}
  .tile-go{display:none}
  .byo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mlist{columns:1}
}
@media (max-width:560px){
  body .elementor .elementor-widget.btnw{width:100%;margin-right:0}
  body .elementor .elementor-widget.btnw .elementor-button{width:100%}
  body .elementor .duo .elementor-widget.btnw{width:calc(100% - var(--duo-pad) * 2)}
}
@media (max-width:400px){
  .byo-size{padding:1.25rem .85rem 1.05rem}
  .byo-pie-box{height:96px}
  .byo-pie{width:calc(var(--d, 1) * 92px)}
  .tiles{grid-template-columns:1fr}
  .tiles > li:first-child{grid-column:auto}
}