.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

.pp-hdr {
  z-index: 900;
  background-color: #0a0a0a;
  border-bottom: 1px solid #241f1d;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.pp-hdr-in {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 14px 24px;
  display: flex;
}

.pp-hdr-logo {
  width: auto;
  height: 52px;
}

.pp-spacer {
  flex: 1;
}

.pp-nav {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  align-items: center;
  display: none;
}

.pp-nav-link {
  color: #efe9dc;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.pp-btn {
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  background-color: #d92026;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding-left: 22px;
  padding-right: 22px;
  font-family: Barlow Condensed;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.pp-btn.pp-btn-lg.inline-button-0 {
  cursor: pointer;
  width: 100%;
}

.pp-btn._w-button {
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-transform: uppercase;
  background-color: #d92026;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding-left: 22px;
  padding-right: 22px;
  font-family: Barlow Condensed;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.pp-hero {
  background-color: #0a0a0a;
  padding: 150px 24px 70px;
}

.pp-shell {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.pp-status {
  grid-column-gap: 22px;
  grid-row-gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 30px;
  display: flex;
}

.pp-mono {
  color: #67635f;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: IBM Plex Mono;
  font-size: 11px;
  font-weight: 500;
}

.pp-mono-lit {
  color: #f4f4f2;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: IBM Plex Mono;
  font-size: 11px;
  font-weight: 500;
}

.pp-h1 {
  color: #f4f4f2;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 26px;
  font-family: Alfa Slab One;
  font-size: 76px;
  line-height: .98;
}

.pp-h1-red {
  color: #d92026;
}

.pp-hero-sub {
  color: #b8b4b0;
  max-width: 44ch;
  margin-bottom: 34px;
  font-family: Barlow;
  font-size: 19px;
  line-height: 1.6;
}

.pp-cta-row {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 64px;
  display: flex;
}

.pp-btn-line {
  color: #f4f4f2;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 2px solid #4a423e;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding-left: 26px;
  padding-right: 26px;
  font-family: Barlow Condensed;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.pp-btn-lg {
  min-height: 52px;
  padding-left: 28px;
  padding-right: 28px;
  font-size: 15px;
}

.pp-board-head {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  border-top: 2px solid #2a2421;
  align-items: baseline;
  padding-top: 14px;
  display: flex;
}

.pp-board-title {
  color: #f4f4f2;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 13px;
  font-weight: 700;
}

.pp-board-dots {
  border-bottom: 1px dotted #3a322e;
  flex: 1;
}

.pp-board {
  border-bottom: 1px solid #241f1d;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  display: grid;
}

.pp-sec {
  background-color: #f4f4f2;
  padding: 80px 24px;
}

.pp-sec-bone {
  background-color: #e8e6e1;
  padding: 80px 24px;
}

.pp-sec-dark {
  background-color: #0a0a0a;
  padding: 80px 24px;
}

.pp-grid2 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  align-items: center;
  display: grid;
}

.pp-eyebrow {
  color: #b81a1f;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: IBM Plex Mono;
  font-size: 11px;
  font-weight: 500;
}

.pp-clockline {
  color: #1c1a19;
  letter-spacing: -.015em;
  font-family: Alfa Slab One;
  font-size: 50px;
  line-height: 1.06;
}

.pp-clock-now {
  color: #d92026;
}

.pp-body {
  color: #67635f;
  max-width: 46ch;
  margin-top: 22px;
  margin-bottom: 28px;
  font-family: Barlow;
  font-size: 17px;
  line-height: 1.6;
}

.pp-list {
  border-top: 2px solid #0a0a0a;
}

.pp-list-item {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  border-bottom: 1px solid #d6d3ce;
  align-items: baseline;
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
}

.pp-list-n {
  color: #d92026;
  letter-spacing: .08em;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pp-list-name {
  color: #1c1a19;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 17px;
  font-weight: 700;
}

.pp-h2 {
  color: #1c1a19;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 44px;
  font-family: Alfa Slab One;
  font-size: 52px;
  line-height: 1.02;
}

.pp-menu-wrap {
  background-color: #0a0a0a;
}

.pp-menu-inner {
  padding: 34px 22px;
}

.pp-tabs {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  display: flex;
}

.pp-tab {
  color: #b5ada2;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #0000;
  border: 1px solid #3a332c;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pp-tab-on {
  color: #fff;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #d92026;
  border: 1px solid #d92026;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pp-menu-note {
  color: #e8595e;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 26px;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pp-mgroup {
  margin-bottom: 32px;
}

.pp-mg-name {
  color: #e8595e;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: Barlow Condensed;
  font-size: 14px;
  font-weight: 700;
}

.pp-mrow {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  border-bottom: 1px solid #2a2420;
  align-items: baseline;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
}

.pp-mnum {
  color: #e8595e;
  letter-spacing: .06em;
  flex: 0 0 30px;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pp-mname {
  color: #f4f4f2;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 18px;
  font-weight: 700;
}

.pp-mdesc {
  color: #948c81;
  margin-top: 4px;
  font-family: Barlow;
  font-size: 14px;
  line-height: 1.5;
}

.pp-dstrip {
  background-color: #0a0a0a;
  border-top: 1px solid #241f1d;
  padding: 60px 24px;
}

.pp-dstrip-h {
  color: #f4f4f2;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 14px;
  font-family: Alfa Slab One;
  font-size: 36px;
  line-height: 1.04;
}

.pp-dstrip-p {
  color: #a5a09c;
  max-width: 44ch;
  margin-bottom: 28px;
  font-family: Barlow;
  font-size: 16px;
}

.pp-dp-row {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  display: grid;
}

.pp-dp-btn {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  background-color: #141414;
  border: 1px solid #2e2825;
  align-items: center;
  padding: 12px 22px 12px 12px;
  text-decoration: none;
  display: flex;
}

.pp-dp-logo {
  width: auto;
  height: 38px;
}

.pp-dp-lbl {
  color: #f4f4f2;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 15px;
  font-weight: 700;
}

.pp-loc-h2 {
  color: #1c1a19;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 38px;
  font-family: Alfa Slab One;
  font-size: 48px;
  line-height: 1.02;
}

.pp-loc-grid {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  display: grid;
}

.pp-lcard {
  background-color: #0a0a0a;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.pp-lcard-img {
  object-fit: cover;
  width: 100%;
  height: 230px;
  display: block;
}

.pp-lcard-body {
  padding: 16px 16px 18px;
}

.pp-lcard-city {
  color: #f4f4f2;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.pp-lcard-hrs {
  color: #8e8985;
  letter-spacing: .08em;
  margin-top: 7px;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
}

.pp-lcard-acts {
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  margin-top: 14px;
  display: flex;
}

.pp-lchip {
  color: #2e2825;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid #2e2825;
  padding: 7px 12px;
  font-family: Barlow Condensed;
  font-size: 11.5px;
  font-weight: 600;
}

.pp-lchip-red {
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  background-color: #d92026;
  border: 1px solid #d92026;
  padding: 7px 12px;
  font-family: Barlow Condensed;
  font-size: 11.5px;
  font-weight: 600;
}

.pp-gen-h2 {
  color: #f4f4f2;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 16px;
  font-family: Barlow Condensed;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.02;
}

.pp-gen-lede {
  color: #a5a09c;
  max-width: 56ch;
  margin-bottom: 44px;
  font-family: Barlow;
  font-size: 18px;
  line-height: 1.6;
}

.pp-gen-grid {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  display: grid;
}

.pp-gcard {
  background-color: #141414;
  border: 1px dashed #3a322e;
  align-items: flex-end;
  min-height: 330px;
  padding: 18px;
  display: flex;
  position: relative;
}

.pp-gcard-who {
  color: #f4f4f2;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.pp-gcard-when {
  color: #e8595e;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 6px;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
}

.pp-tn {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  margin-top: 2px;
  display: grid;
}

.pp-tn-cell {
  background-color: #141414;
  border: 1px dashed #3a322e;
  align-items: flex-end;
  min-height: 360px;
  padding: 26px;
  display: flex;
  position: relative;
}

.pp-tn-lab {
  color: #f4f4f2;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 48px;
  font-weight: 700;
  line-height: .98;
}

.pp-tn-sub {
  color: #e8595e;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 8px;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
}

.pp-now-grid {
  grid-column-gap: 20px;
  grid-row-gap: 11px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  margin-top: 26px;
  display: grid;
}

.pp-now-item {
  grid-column-gap: 9px;
  grid-row-gap: 9px;
  align-items: center;
  display: flex;
}

.pp-now-city {
  color: #cfccc7;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 15px;
  font-weight: 600;
}

.pp-story-lede {
  color: #f4f4f2;
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 24px;
  font-family: Alfa Slab One;
  font-size: 36px;
  line-height: 1.1;
}

.pp-story-p {
  color: #a5a09c;
  max-width: 56ch;
  margin-bottom: 18px;
  font-family: Barlow;
  font-size: 17px;
  line-height: 1.6;
}

.pp-story-strong {
  color: #f4f4f2;
  font-weight: 600;
}

.pp-slot {
  background-color: #141414;
  border: 1px dashed #3a322e;
  align-items: flex-end;
  min-height: 300px;
  padding: 20px;
  display: flex;
}

.pp-slot-tag {
  color: #d9942b;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-family: IBM Plex Mono;
  font-size: 10px;
  line-height: 1.7;
}

.pp-stats {
  border-top: 2px solid #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  display: grid;
}

.pp-stat {
  border-bottom: 1px solid #d6d3ce;
  padding-top: 26px;
  padding-bottom: 26px;
}

.pp-stat-v {
  color: #1c1a19;
  letter-spacing: -.02em;
  font-family: Alfa Slab One;
  font-size: 42px;
  line-height: 1;
}

.pp-stat-l {
  color: #67635f;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 10px;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
}

.pp-cat-h2 {
  color: #1c1a19;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 18px;
  font-family: Alfa Slab One;
  font-size: 44px;
  line-height: 1.02;
}

.pp-cstep {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-bottom: 1px solid #d6d3ce;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
}

.pp-cstep-n {
  color: #b81a1f;
  letter-spacing: .08em;
  flex: 0 0 26px;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pp-cstep-h {
  color: #1c1a19;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-family: Barlow Condensed;
  font-size: 18px;
  font-weight: 700;
}

.pp-cstep-p {
  color: #67635f;
  font-family: Barlow;
  font-size: 14.5px;
  line-height: 1.5;
}

.pp-ftr {
  background-color: #0a0a0a;
  border-top: 1px solid #241f1d;
  padding: 64px 24px 36px;
}

/* Four columns on desktop. The old footer stacked everything in one narrow
   left rail, leaving most of the width empty. */
.pp-ftr-top {
  grid-row-gap: 44px;
  grid-column-gap: 32px;
  padding-bottom: 44px;
  display: grid;
}

.pp-ftr-brand {
  max-width: 40ch;
}

.pp-ftr-logo {
  width: 210px;
  margin-bottom: 20px;
}

.pp-ftr-blurb {
  color: #8b8378;
  margin-bottom: 24px;
  font-family: Barlow;
  font-size: 15px;
  line-height: 1.6;
}

/* Hours live in the brand column as three short lines. They used to be a
   single run-on sentence pinned under the legal row. */
.pp-ftr-hrs {
  grid-row-gap: 6px;
  display: grid;
}

.pp-ftr-hrs span {
  color: #8b8378;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
  line-height: 1.5;
}

.pp-ftr-hrs span strong {
  color: #cfc7ba;
  font-weight: 400;
}

.pp-ftr-h5 {
  color: #a8a29a;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-family: IBM Plex Mono;
  font-size: 10px;
  font-weight: 400;
}

.pp-ftr-links {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
}

/* The eight kitchens split in two so that column does not run twice as tall
   as the ones beside it. */
.pp-ftr-links.is-2 {
  grid-column-gap: 24px;
  grid-template-columns: 1fr 1fr;
}

.pp-ftr-link {
  color: #cfc7ba;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.pp-ftr-btm {
  grid-column-gap: 26px;
  grid-row-gap: 12px;
  border-top: 1px solid #241f1d;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  display: flex;
}

.pp-ftr-cr {
  color: #8b8378;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

@media (min-width: 700px) {
  .pp-ftr-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .pp-ftr-top {
    grid-column-gap: 40px;
    grid-template-columns: 1.7fr 1fr 1.5fr 1fr;
  }
}

.pp-arch-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.pp-arch-scrim {
  background-image: linear-gradient(#0a0a0a00, #0a0a0aeb);
  height: 55%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.pp-arch-cap {
  z-index: 2;
  position: relative;
}

.pp-vals {
  background-color: #0a0a0a;
  border-top: 1px solid #241f1d;
  padding: 44px 24px 56px;
}

.pp-vals-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  display: grid;
}

.pp-val {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: center;
  display: flex;
}

.pp-val-icon {
  object-fit: contain;
  flex: none;
  width: 46px;
  height: 46px;
}

.pp-val-txt {
  color: #f4f4f2;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
}

.pp-dt-wrap {
  margin-top: 34px;
}

.pp-dt-img {
  object-fit: cover;
  width: 100%;
  height: 280px;
  display: block;
}

.pp-dt-img.inline-imgraw-0 {
  margin-top: 12px;
}

.pp-dt-cap {
  color: #67635f;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 12px;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

.pp-lpage {
  background-color: #0a0a0a;
}

.pp-lhero {
  background-color: #0a0a0a;
  padding-top: 140px;
  padding-left: 24px;
  padding-right: 24px;
}

.pp-lhero-eyebrow {
  color: #e8595e;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pp-lh1 {
  color: #f4f4f2;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 22px;
  font-family: Alfa Slab One;
  font-size: 56px;
  line-height: 1;
}

.pp-lbadges {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 34px;
  display: flex;
}

.pp-lbadge {
  color: #cfccc7;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid #2e2825;
  padding: 7px 12px;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

.pp-lhero-img {
  object-fit: cover;
  width: 100%;
  height: 430px;
  display: block;
}

.pp-ldet {
  background-color: #f4f4f2;
  padding: 64px 24px;
}

.pp-ldet-grid {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.pp-ldet-h {
  color: #67635f;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

.pp-ldet-v {
  color: #1c1a19;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.pp-ldet-sub {
  color: #67635f;
  margin-top: 8px;
  font-family: Barlow;
  font-size: 14px;
  line-height: 1.6;
}

.pp-lcta-row {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  display: flex;
}

.pp-lback {
  color: #67635f;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 44px;
  font-family: Barlow Condensed;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.pp-slot-1, .pp-tn-cell-1, .pp-gcard-1 {
  position: relative;
  overflow: hidden;
}

.pp-hdr-in-1 {
  max-width: 1200px;
}

.pp-fixanchor {
  display: none;
}

.pp-food-strip {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 34px;
  display: grid;
}

.pp-food-img {
  object-fit: cover;
  width: 100%;
  height: 220px;
  display: block;
}

.pp-food-wide {
  object-fit: cover;
  width: 100%;
  height: 380px;
  margin-top: 56px;
  display: block;
}

.pp-hero-img {
  object-fit: cover;
  width: 100%;
  height: 340px;
  margin-bottom: 64px;
  display: block;
}

.pp-hero-img.inline-imgraw-0 {
  height: min(48vh, 520px);
}

/* Brand band: the real Pepe's logo sitting over a row of the food.
   The logo PNG is the actual badge — oval, chile, and its own "Finest Mexican
   Food / Since 1962" lettering — so the section no longer rebuilds the
   wordmark out of Alfa Slab One or repeats that line as a separate caption. */
.pp-knock {
  text-align: center;
  background-color: #141210;
  padding: 90px 24px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Photos fill the band edge to edge, one flex track, no gaps. */
.pp-knock-bg {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}

.pp-knock-tile {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Darkened so the badge reads cleanly on top. The photos stay legible as
   food, but drop back into the role of a textured backdrop. The radial pass
   deepens the centre, where the badge sits, without flattening the tiles at
   the edges — a flat scrim strong enough for the middle washes out the rest. */
.pp-knock-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse 60% 75% at 50% 50%, #100e0ceb, #100e0c85);
}

/* The source badge is 425px wide, so it is capped there and never upscaled —
   past that it would soften against the sharp photography behind it. */
.pp-knock-logo {
  position: relative;
  z-index: 1;
  width: min(425px, 78%);
  height: auto;
  margin: 0 auto;
  display: block;
  /* Lifts the badge off the photography behind it. */
  filter: drop-shadow(0 10px 30px #0a0a0acc);
}

@media (width <= 600px) {
  .pp-knock {
    padding: 64px 20px;
  }

  /* Five slivers are unreadable on a phone; the last two drop out so the
     remaining tiles stay wide enough to show what the food actually is. */
  .pp-knock-tile:nth-child(n+4) {
    display: none;
  }

  .pp-knock-logo {
    width: min(425px, 86%);
  }
}

.pp-modal {
  z-index: 1200;
  background-color: #0a0a0ae0;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: none;
  position: fixed;
  inset: 0;
}

.pp-modal-card {
  background-color: #f4f4f2;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  padding: 38px 30px 30px;
  position: relative;
  overflow-y: auto;
}

.pp-modal-x {
  color: #67635f;
  font-family: Barlow;
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  position: absolute;
  top: 8px;
  right: 16px;
}

.pp-modal-h {
  color: #1c1a19;
  margin-top: 0;
  margin-bottom: 8px;
  font-family: Alfa Slab One;
  font-size: 30px;
  line-height: 1.05;
}

.pp-modal-sub {
  color: #67635f;
  margin-bottom: 22px;
  font-family: Barlow;
  font-size: 14.5px;
  line-height: 1.55;
}

.pp-f-label {
  color: #8a8680;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-family: IBM Plex Mono;
  font-size: 10px;
  display: block;
}

.pp-f-input, .pp-f-input._w-input, .pp-f-input._w-input, .pp-f-input._w-input-1 {
  color: #1c1a19;
  background-color: #fff;
  border: 1px solid #c9c4bd;
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 14px;
  font-family: Barlow;
  font-size: 16px;
  display: block;
}

.pp-f-area, .pp-f-area._w-input, .pp-f-area._w-input-1 {
  color: #1c1a19;
  background-color: #fff;
  border: 1px solid #c9c4bd;
  width: 100%;
  min-height: 96px;
  margin-bottom: 20px;
  padding: 12px 14px;
  font-family: Barlow;
  font-size: 16px;
  display: block;
}

._w-input-parent._w-input {
  color: #1c1a19;
  background-color: #fff;
  border: 1px solid #c9c4bd;
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 14px;
  font-family: Barlow;
  font-size: 16px;
  display: block;
}

.pp-contact {
  background-color: #0a0a0a;
  border-top: 1px solid #241f1d;
  padding: 80px 24px;
}

.pp-contact-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.pp-contact-h {
  color: #f4f4f2;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 14px;
  font-family: Alfa Slab One;
  font-size: 40px;
  line-height: 1.04;
}

.pp-contact-p {
  color: #a5a09c;
  max-width: 44ch;
  font-family: Barlow;
  font-size: 16px;
  line-height: 1.6;
}

.pp-contact-note {
  color: #8a8680;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 20px;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
  line-height: 1.8;
}

/* Brand red sits at roughly 2.7:1 on this near-black panel, which is too low
   for 10.5px type, so the link stays bright and spends the red on the
   underline instead. */
.pp-note-link {
  color: #e8e6e1;
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--fast) var(--ease);
}

.pp-note-link:hover {
  text-decoration-thickness: 2px;
}

.pp-note-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

._w-input-1-parent._w-input-1 {
  color: #1c1a19;
  background-color: #fff;
  border: 1px solid #c9c4bd;
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 14px;
  font-family: Barlow;
  font-size: 16px;
  display: block;
}

.pp-faq {
  background-color: #e8e6e1;
  padding: 80px 24px;
}

.pp-faq-in {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.pp-faq-h {
  color: #1c1a19;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 34px;
  font-family: Alfa Slab One;
  font-size: 40px;
  line-height: 1.04;
}

.pp-faq-item {
  border-bottom: 1px solid #c9c4bd;
}

.pp-faq-q {
  color: #1c1a19;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  padding-top: 18px;
  padding-bottom: 18px;
  font-family: Barlow Condensed;
  font-size: 18px;
  font-weight: 700;
}

.pl-wrap {
  background-color: #f2ebdc;
  border: 1px solid #1a15124d;
  margin-top: 34px;
  box-shadow: 0 18px 40px #0a0a0a59;
}

.pl-toggle {
  background-color: #f2ebdc;
  border-bottom: 1px solid #1a15124d;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.pl-tbtn {
  color: #1a1512a6;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #0000;
  border-style: none none solid;
  border-bottom-width: 2.5px;
  border-bottom-color: #0000;
  padding: 13px 10px;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
  font-weight: 700;
}

.pl-grid {
  display: block;
}

.pl-console {
  border-right: 1px solid #1a151224;
}

.pl-search {
  border-bottom: 1px solid #1a151224;
  padding: 18px 20px;
}

.pl-field, .pl-field._w-form {
  align-items: center;
  margin-bottom: 0;
  display: flex;
  position: relative;
}

.pl-q, .pl-q._w-input {
  color: #1a1512;
  background-color: #faf7ef;
  border: 1.5px solid #1a15124d;
  width: 100%;
  padding: 14px;
  font-family: Barlow;
  font-size: 16px;
  display: block;
}

.pl-geo {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: #f2ebdc;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #1a1512;
  border: 1.5px solid #1a1512;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
}

.pl-chips {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  display: flex;
}

.pl-chip {
  color: #1a1512a6;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #0000;
  border: 1px solid #1a15124d;
  border-radius: 999px;
  padding: 8px 12px;
  font-family: IBM Plex Mono;
  font-size: 9.5px;
}

.pl-count {
  color: #1a1512a6;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid #1a151224;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  font-family: IBM Plex Mono;
  font-size: 10px;
  display: flex;
}

.pl-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-mapwrap {
  background-color: #f2ebdc;
  padding: 16px;
}

.placemat {
  background-color: #faf7ef;
  border: 1px solid #1a15124d;
  position: relative;
}

.pl-matbar {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: #1a1512a6;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid #1a15124d;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  font-family: IBM Plex Mono;
  font-size: 10px;
  display: flex;
}

.pl-matfoot {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  color: #1a1512a6;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-top: 1px solid #1a15124d;
  justify-content: space-between;
  padding: 10px 16px;
  font-family: IBM Plex Mono;
  font-size: 10px;
  display: flex;
}

.pl-mapslot {
  display: block;
}

.pl-top {
  background-color: #faf7ef;
  border-bottom: 1px solid #1a15124d;
  padding: 20px;
}

.pl-toprow, .pl-toprow._w-form {
  align-items: stretch;
  width: 100%;
  display: flex;
}

/* One continuous control. The icon, the input and the location action share a
   single pill so the row reads as one search surface, rather than a square box
   parked next to a detached lozenge of a different height and shape. */
.pl-shell {
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px 6px 6px 18px;
  background-color: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-pill);
  display: flex;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* The ring belongs to the whole shell, not the bare input, so focus reads on
   the control the user actually sees. */
.pl-shell:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px #d9202624;
}

.pl-shell-ico {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--text-on-light-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.pl-q-1, .pl-q-1._w-input {
  flex: 1;
  color: var(--text-on-light);
  background-color: #0000;
  border: 0;
  border-radius: 0;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  /* 16px: anything smaller makes iOS Safari zoom the page on focus. */
  font-size: 16px;
}

.pl-q-1::placeholder {
  color: var(--text-on-light-muted);
}

/* The shell draws the focus indicator for the input it wraps, so the input's
   own ring is suppressed to avoid a double outline. !important is required to
   beat the global input:focus-visible ring, and the higher specificity here
   wins the cascade against it. The indicator is not lost, only relocated to
   the larger element the user actually perceives as the control. */
.pl-q-1:focus,
.pl-q-1:focus-visible,
.pl-q-1._w-input:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Keyboard focus gets the full-strength ring; pointer focus stays quiet. */
.pl-shell:has(.pl-q-1:focus-visible) {
  box-shadow: 0 0 0 4px #d9202659;
}

/* Strip the WebKit search decorations; the shell supplies its own icon. */
.pl-q-1::-webkit-search-decoration,
.pl-q-1::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.pl-geo-1 {
  flex: 0 0 auto;
  gap: 8px;
  color: var(--cream);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  background-color: var(--text-on-light);
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  font-family: var(--font-mono);
  font-size: var(--label-sm);
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.pl-geo-ico {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Filter row: the one real toggle on the left, the service facts on the right. */
.pl-filters {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
  display: flex;
}

.pl-chips-1 {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.pl-chip-1 {
  color: var(--text-on-light-muted);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  background-color: #0000;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-pill);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: var(--label-sm);
  text-decoration: none;
  display: inline-flex;
}

/* Reuses the live-status dot language from the location cards below. */
.pl-chip-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background-color: currentColor;
  border-radius: 50%;
  opacity: .45;
  display: block;
}

.pl-chip-1[aria-pressed="true"] .pl-chip-dot {
  opacity: 1;
}

/* Services are identical at all eight kitchens, so they are stated as fact
   instead of posing as filters that could never narrow anything down. */
.pl-svc {
  color: var(--text-on-light-muted);
  letter-spacing: .06em;
  margin: 0 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--label-sm);
}

@media (max-width: 719px) {
  .pl-shell {
    flex-wrap: wrap;
    border-radius: 24px;
    padding: 8px;
  }

  .pl-shell-ico {
    margin-left: 10px;
  }

  .pl-q-1, .pl-q-1._w-input {
    flex: 1 0 60%;
  }

  /* Once the pill wraps, the action becomes a full-width row of its own. */
  .pl-geo-1 {
    flex: 1 0 100%;
  }

  .pl-svc {
    margin-left: 0;
  }
}

.pl-list-1 {
  max-height: 640px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.pl-mapwrap-1 {
  background-color: #f2ebdc;
  min-height: 420px;
  padding: 0;
  position: relative;
}

.pl-gmap {
  border-style: none;
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  z-index: 1;
  background-color: #f2ebdc;
}

.pl-pin {
  background: none;
  border: none;
}

.pl-pin span {
  color: #f2ebdc;
  background-color: #1a1512;
  border: 2px solid #f2ebdc;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  box-shadow: 0 2px 6px #0a0a0a4d;
  transition: transform .15s ease, background-color .15s ease;
}

.pl-pin.on span {
  background-color: #d92026;
  transform: scale(1.2);
}

/* Mini Pepe's logo markers. The badge is sized inline where the marker is
   built; the selected pin grows and gets a red glow. */
.pl-pin.on img {
  transform: scale(1.3);
  filter: drop-shadow(0 0 6px rgba(217, 32, 38, .8)) !important;
}

.pl-gmap .leaflet-popup-content {
  font-family: Barlow Condensed, sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

.pl-gmap .leaflet-popup-content strong {
  font-size: 17px;
  text-transform: uppercase;
}

.pl-gmap .leaflet-popup-content a {
  color: #d92026;
  font-weight: 700;
}

.pl-mapnote {
  z-index: 1000;
  pointer-events: none;
  color: #f2ebdc;
  letter-spacing: .14em;
  text-transform: uppercase;
  background-color: #1a1512d9;
  padding: 7px 12px;
  font-family: IBM Plex Mono;
  font-size: 9.5px;
  position: absolute;
  top: 12px;
  left: 12px;
}

.pp-hungry {
  text-align: center;
  background-color: #d92026;
  padding: 100px 24px;
}

.pp-hungry-h {
  color: #fff;
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 18px;
  font-family: Alfa Slab One;
  font-size: clamp(52px, 9vw, 110px);
  line-height: 1;
}

.pp-hungry-it {
  font-family: Georgia, Times, Times New Roman, serif;
  font-style: italic;
  font-weight: 400;
}

.pp-hungry-p {
  color: #fff;
  max-width: 46ch;
  margin-bottom: 34px;
  margin-left: auto;
  margin-right: auto;
  font-family: Barlow;
  font-size: 17px;
  line-height: 1.6;
}

.pp-hungry-btn {
  color: #b81a1f;
  letter-spacing: .22em;
  text-transform: uppercase;
  background-color: #f4f1ea;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 0 38px;
  font-family: IBM Plex Mono;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.pp-hero-brand {
  width: min(300px, 64vw);
  height: auto;
  margin: 0 auto 44px;
  display: block;
}

.pp-hero-head {
  margin-bottom: 6px;
}

.inline-div-0 {
  color: #fff;
  letter-spacing: -.005em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: clamp(52px, 9.6vw, 148px);
  font-weight: 700;
  line-height: .92;
}

.inline-div-1 {
  color: #fff;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin-top: -.08em;
  font-family: Barlow Condensed;
  font-size: clamp(52px, 9.6vw, 148px);
  font-weight: 700;
  line-height: .92;
}

.pp-tl {
  background-color: #e8e6e1;
  padding: 110px 24px;
}

.pp-tl-in {
  max-width: 1280px;
  margin: 0 auto;
}

.pp-tl-top {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 54px;
  display: flex;
}

.pp-tl-h {
  color: #0a0a0a;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
  font-family: Barlow Condensed;
  font-size: clamp(40px, 6.4vw, 88px);
  font-weight: 700;
  line-height: .95;
}

.pp-tl-note {
  color: #3d3a36;
  max-width: 34ch;
  font-family: Barlow;
  font-size: 16px;
  line-height: 1.6;
}

.pp-tl-rail {
  padding-bottom: 18px;
  display: flex;
  overflow-x: auto;
}

.pp-tl-c {
  border-top: 2px solid #0a0a0a;
  flex: none;
  min-width: 230px;
  margin-right: 2px;
  padding: 22px 28px 10px 2px;
}

.pp-tl-c-red {
  border-top: 2px solid #d92026;
  flex: none;
  min-width: 230px;
  margin-right: 2px;
  padding: 22px 28px 10px 2px;
}

.pp-tl-y {
  color: #0a0a0a;
  margin-bottom: 10px;
  font-family: Barlow Condensed;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
}

.pp-tl-y-red {
  color: #d92026;
  margin-bottom: 10px;
  font-family: Barlow Condensed;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
}

.pp-tl-city {
  color: #0a0a0a;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
  font-weight: 700;
}

.pp-tl-p {
  color: #55504a;
  max-width: 24ch;
  font-family: Barlow;
  font-size: 14px;
  line-height: 1.55;
}

.pp-tl-hint {
  color: #67635f;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 16px;
  font-family: IBM Plex Mono;
  font-size: 9.5px;
}

.inline-span-0-1 {
  color: #d92026;
  font-style: italic;
}

.pp-tick {
  background-color: #0a0a0a;
  border-top: 3px solid #d92026;
  border-bottom: 1px solid #241f1d;
  padding: 18px 0;
  overflow: hidden;
}

.pp-tick-row {
  white-space: nowrap;
  will-change: transform;
  align-items: center;
  display: flex;
}

.pp-tick-city {
  color: #f4f4f2;
  letter-spacing: .28em;
  text-transform: uppercase;
  flex: none;
  padding: 0 34px;
  font-family: IBM Plex Mono;
  font-size: 12px;
  font-weight: 700;
}

.pp-tick-dia {
  color: #e8595e;
  flex: none;
  font-size: 11px;
}

.pp-legal {
  background-color: #0a0a0a;
  min-height: 100vh;
  padding: 110px 24px 90px;
}

.pp-legal-in {
  max-width: 760px;
  margin: 0 auto;
}

.pp-legal-h1 {
  color: #f4f4f2;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 10px;
  font-family: Barlow Condensed;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  line-height: .95;
}

.pp-legal-meta {
  color: #e8595e;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 44px;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pp-legal-h2 {
  color: #f4f4f2;
  text-transform: uppercase;
  margin-top: 44px;
  margin-bottom: 12px;
  font-family: Barlow Condensed;
  font-size: 24px;
  font-weight: 700;
}

.pp-legal-p {
  color: #b8b4af;
  margin-bottom: 16px;
  font-family: Barlow;
  font-size: 16px;
  line-height: 1.75;
}

.pp-legal-ul {
  color: #b8b4af;
  margin-bottom: 16px;
  padding-left: 22px;
  font-family: Barlow;
  font-size: 16px;
  line-height: 1.75;
}

.pp-legal-back {
  color: #f4f4f2;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1.5px solid #3a3531;
  margin-top: 52px;
  padding: 12px 20px;
  font-family: IBM Plex Mono;
  font-size: 11px;
  text-decoration: none;
  display: inline-flex;
}

.pp-legal-hr {
  border-style: solid none none;
  border-top-width: 1px;
  border-top-color: #241f1d;
  margin: 64px 0;
}

.pp-legal2, .pp-lgl {
  background-color: #0a0a0a;
  min-height: 100vh;
  padding: 110px 24px 90px;
}

.pp-lgl-in {
  max-width: 760px;
  margin: 0 auto;
}

.pp-lgl-h1 {
  color: #f4f4f2;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 10px;
  font-family: Barlow Condensed;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  line-height: .95;
}

.pp-lgl-meta {
  color: #e8595e;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 44px;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pp-lgl-h2 {
  color: #f4f4f2;
  text-transform: uppercase;
  margin-top: 44px;
  margin-bottom: 12px;
  font-family: Barlow Condensed;
  font-size: 24px;
  font-weight: 700;
}

.pp-lgl-p {
  color: #b8b4af;
  margin-bottom: 16px;
  font-family: Barlow;
  font-size: 16px;
  line-height: 1.75;
}

.pp-lgl-ul {
  color: #b8b4af;
  margin-bottom: 16px;
  padding-left: 22px;
  font-family: Barlow;
  font-size: 16px;
  line-height: 1.75;
}

.pp-lgl-a {
  color: #f4f4f2;
}

.pp-lgl-back {
  color: #f4f4f2;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1.5px solid #3a3531;
  margin-top: 52px;
  padding: 12px 20px;
  font-family: IBM Plex Mono;
  font-size: 11px;
  text-decoration: none;
  display: inline-flex;
}

.pp-lgl-hr {
  border-style: solid none none;
  border-top-width: 1px;
  border-top-color: #241f1d;
  margin: 64px 0;
}

.pp-axs {
  background-color: #0a0a0a;
  min-height: 100vh;
  padding: 110px 24px 90px;
}

.ppcm {
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: none;
  position: fixed;
  inset: 0;
}

.ppcm-bg {
  background-color: #0a0a0ad1;
  position: absolute;
  inset: 0;
}

.ppcm-box {
  background-color: #f4f1ea;
  width: 100%;
  max-width: 1030px;
  max-height: 92vh;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 40px 90px #0009;
}

.ppcm-top {
  z-index: 3;
  background-color: #0a0a0a;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  display: flex;
  position: sticky;
  top: 0;
}

.ppcm-logo {
  width: auto;
  height: 52px;
  display: block;
}

.ppcm-toplab {
  color: #b8b4af;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

/* A control that dismisses a dialog, not a link to anywhere: as an anchor
   with href="#" a click landing before the handler ran jumped the page to the
   top and left the dialog open, and Space — which a button answers and a
   link does not — did nothing at all. */
.ppcm-x {
  color: #f4f4f2;
  padding: 8px;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.ppcm-head {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  background-color: #fff;
  border-bottom: 1px solid #d6d3ce;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  padding: 30px 34px 26px;
  display: flex;
}

.ppcm-eyebrow {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: #d92026;
  letter-spacing: .2em;
  text-transform: uppercase;
  align-items: center;
  margin-bottom: 10px;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
  display: flex;
}

.ppcm-rule {
  background-color: #d92026;
  width: 26px;
  height: 2px;
  display: inline-block;
}

.ppcm-h {
  color: #0a0a0a;
  text-transform: uppercase;
  margin: 0;
  font-family: Barlow Condensed;
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 700;
  line-height: 1;
}

.ppcm-hem {
  color: #d92026;
  text-transform: none;
  font-family: Georgia, Times, Times New Roman, serif;
  font-style: italic;
  font-weight: 400;
}

.ppcm-sub {
  color: #67635f;
  text-align: right;
  max-width: 300px;
  font-family: Barlow;
  font-size: 13.5px;
  line-height: 1.6;
}

.ppcm-grid {
  grid-row-gap: 0;
  grid-column-gap: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  display: grid;
}

.ppcm-col {
  padding: 26px 34px 30px;
}

.ppcm-sect {
  color: #67635f;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-bottom: 1px solid #d6d3ce;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

.ppcm-lab {
  color: #67635f;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 18px 0 10px;
  font-family: IBM Plex Mono;
  font-size: 10px;
  display: block;
}

.ppcm-chips {
  grid-column-gap: 9px;
  grid-row-gap: 9px;
  flex-wrap: wrap;
  display: flex;
}

.ppcm-chip {
  cursor: pointer;
  position: relative;
}

.ppcm-cin {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.ppcm-cs {
  text-align: center;
  background-color: #fff;
  border: 1.5px solid #c9c4bc;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 86px;
  padding: 11px 14px;
  display: flex;
}

.ppcm-cb {
  color: #0a0a0a;
  text-transform: none;
  font-family: Barlow Condensed;
  font-size: 16px;
  font-weight: 700;
}

.ppcm-ci {
  color: #67635f;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 3px;
  font-family: IBM Plex Mono;
  font-size: 8.5px;
  font-style: normal;
}

.ppcm-cs-on {
  background-color: #0a0a0a;
  border-color: #0a0a0a;
}

.ppcm-cb-on {
  color: #f4f1ea;
}

.ppcm-ci-on {
  color: #b8b4af;
}

.ppcm-two {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.ppcm-in, .ppcm-in._w-input, .ppcm-in._w-input, .ppcm-sel, .ppcm-sel._w-select {
  color: #0a0a0a;
  background-color: #0000;
  border-style: none none solid;
  border-bottom-width: 1.5px;
  border-bottom-color: #a8a29a;
  width: 100%;
  padding: 9px 2px;
  font-family: Barlow;
  font-size: 16px;
}

.ppcm-ta, .ppcm-ta._w-input {
  color: #0a0a0a;
  resize: vertical;
  background-color: #0000;
  border-style: none none solid;
  border-bottom-width: 1.5px;
  border-bottom-color: #a8a29a;
  width: 100%;
  min-height: 84px;
  padding: 9px 2px;
  font-family: Barlow;
  font-size: 16px;
}

.ppcm-hint {
  color: #67635f;
  margin-top: 7px;
  font-family: Barlow;
  font-size: 12px;
}

.ppcm-foot {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #e9e4d8;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px 34px;
  display: flex;
}

.ppcm-notes {
  grid-column-gap: 22px;
  grid-row-gap: 22px;
  flex-wrap: wrap;
  display: flex;
}

.ppcm-note {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: #4a4640;
  letter-spacing: .14em;
  text-transform: uppercase;
  align-items: center;
  font-family: IBM Plex Mono;
  font-size: 9.5px;
  display: flex;
}

.ppcm-dot {
  background-color: #4f7a2e;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  display: inline-block;
}

.ppcm-send, .ppcm-send._w-button {
  color: #fff;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #d92026;
  border-style: none;
  padding: 17px 34px;
  font-family: Barlow Condensed;
  font-size: 15px;
  font-weight: 700;
}

._w-input {
  color: #0a0a0a;
  background-color: #0000;
  border-style: none none solid;
  border-bottom-width: 1.5px;
  border-bottom-color: #a8a29a;
  width: 100%;
  padding: 9px 2px;
  font-family: Barlow;
  font-size: 16px;
}

.pp-faq-a {
  color: #5c5854;
  max-width: 64ch;
  padding-bottom: 22px;
  font-family: Barlow;
  font-size: 15.5px;
  line-height: 1.65;
}

.pm-hero {
  text-align: center;
  background-color: #0a0a0a;
  padding: 130px 24px 70px;
}

.pm-eyebrow {
  color: #e8595e;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pm-h1 {
  color: #f4f4f2;
  margin: 0;
  font-family: Alfa Slab One;
  font-size: clamp(44px, 8vw, 96px);
  line-height: .98;
}

.pm-h1-red {
  color: #d92026;
}

.pm-note {
  color: #8a8680;
  max-width: 52ch;
  margin: 22px auto 0;
  font-family: Barlow;
  font-size: 16px;
  line-height: 1.6;
}

.pm-badges {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
  display: flex;
}

.pm-badge {
  color: #b8b4af;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid #2a2421;
  padding: 9px 14px;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

.pm-body {
  background-color: #f4f1ea;
  padding: 70px 24px 90px;
}

.pm-shell {
  max-width: 1150px;
  margin: 0 auto;
}

.pm-group {
  margin-bottom: 56px;
}

.pm-ghead {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  border-bottom: 2px solid #0a0a0a;
  align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 12px;
  display: flex;
}

.pm-gname {
  color: #0a0a0a;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
}

.pm-gsub {
  color: #67635f;
  text-align: right;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-left: auto;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

.pm-item {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  border-bottom: 1px solid #d6d3ce;
  align-items: baseline;
  padding: 13px 0;
  display: flex;
}

.pm-num {
  color: #b81a1f;
  flex: 0 0 26px;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

.pm-nm {
  color: #0a0a0a;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
}

.pm-cta {
  text-align: center;
  background-color: #d92026;
  padding: 66px 24px;
}

.pm-cta-h {
  color: #fff;
  margin: 0 0 12px;
  font-family: Alfa Slab One;
  font-size: clamp(30px, 4.6vw, 52px);
}

.pm-cta-p {
  color: #fff;
  margin: 0 0 26px;
  font-family: Barlow;
  font-size: 15px;
}

.pm-cta-row {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.pm-btn {
  color: #b81a1f;
  letter-spacing: .06em;
  text-transform: uppercase;
  background-color: #f4f1ea;
  align-items: center;
  min-height: 50px;
  padding: 0 30px;
  font-family: Barlow Condensed;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.pm-btn-line {
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1.5px solid #fff;
  align-items: center;
  min-height: 50px;
  padding: 0 30px;
  font-family: Barlow Condensed;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.pm-fine {
  color: #67635f;
  text-align: center;
  letter-spacing: .14em;
  text-transform: uppercase;
  background-color: #f4f1ea;
  padding: 26px 24px;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

.pm-grid2 {
  grid-column-gap: 56px;
  grid-row-gap: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  display: grid;
}

.pmb {
  text-align: center;
  background-color: #f4f1ea;
  padding: 96px 24px;
}

.pmb-eyebrow {
  color: #b81a1f;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: IBM Plex Mono;
  font-size: 11px;
}

.pmb-h {
  color: #0a0a0a;
  max-width: 16ch;
  margin: 0 auto;
  font-family: Alfa Slab One;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.02;
}

.pmb-p {
  color: #67635f;
  max-width: 48ch;
  margin: 18px auto 30px;
  font-family: Barlow;
  font-size: 16px;
  line-height: 1.6;
}

.pmb-btn {
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  background-color: #d92026;
  align-items: center;
  min-height: 54px;
  padding: 0 36px;
  font-family: Barlow Condensed;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.pmb-sub {
  color: #67635f;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 16px;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

.pp-ftr-legal {
  grid-column-gap: 22px;
  grid-row-gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.pp-ftr-xlink {
  color: #8a8680;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-family: IBM Plex Mono;
  font-size: 10px;
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

.pp-ftr-xlink:hover {
  color: #e8595e;
}

.pm-group-1 {
  margin-bottom: 54px;
}

.pm-ghead-1 {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  border-bottom: 2px solid #0a0a0a;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 12px;
  display: flex;
}

.pm-gsub-1 {
  color: #67635f;
  text-align: right;
  letter-spacing: .14em;
  text-transform: uppercase;
  max-width: 60%;
  margin-left: auto;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
}

.pm-item-1 {
  border-bottom: 1px solid #d6d3ce;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 12px 0;
  display: flex;
}

.pm-num-1 {
  color: #b81a1f;
  flex: 0 0 30px;
  font-family: IBM Plex Mono;
  font-size: 10px;
}

.pm-nm-1 {
  color: #0a0a0a;
  text-transform: uppercase;
  font-family: Barlow Condensed;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.15;
}

.pm-dl {
  border-bottom: 1px dotted #b8b4af;
  flex: 1;
  min-width: 22px;
  margin: 0 10px;
  transform: translateY(-4px);
}

.pm-pr {
  color: #0a0a0a;
  white-space: nowrap;
  font-family: IBM Plex Mono;
  font-size: 13px;
  font-weight: 700;
}

.pm-ds {
  color: #67635f;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-basis: 100%;
  margin-top: 4px;
  padding-left: 30px;
  font-family: IBM Plex Mono;
  font-size: 10.5px;
  line-height: 1.5;
}

.pm-grid2-1 {
  grid-column-gap: 56px;
  grid-row-gap: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  align-items: start;
  display: grid;
}

.pp-hmb {
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1.5px solid #ffffffd9;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  font-family: Barlow Condensed;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.pp-hmb:hover {
  color: #d92026;
  background-color: #fff;
  border-color: #fff;
}

.pp-tl-img {
  filter: grayscale() contrast(1.05);
  object-fit: cover;
  border: 1px solid #d6d3ce;
  width: 100%;
  height: 110px;
  margin-bottom: 14px;
  display: block;
}

/* ==========================================================================
   DESIGN SYSTEM — tokens, unified controls, interaction states
   Appended last so it normalizes the Webflow export without rewriting it.
   ========================================================================== */

:root {
  /* Brand */
  --red: #d92026;
  --red-hover: #ef2d33;
  --red-press: #b81a1f;

  /* Dark surfaces (elevation scale) */
  --ink-900: #0a0a0a;
  --ink-800: #14110f;
  --ink-700: #1c1a19;
  --ink-600: #241f1d;
  --line-dark: #2a2421;
  --line-dark-2: #3a3531;

  /* Light surfaces */
  --cream: #f2ebdc;
  --paper: #f4f4f2;
  --line-light: #d6d3ce;

  /* Text */
  --text-on-dark: #f4f4f2;
  --text-on-dark-muted: #b8b4af;
  --text-on-dark-faint: #8a8680;
  --text-on-light: #1a1512;
  --text-on-light-muted: #67635f;

  /* Type */
  --font-display: "Alfa Slab One", Georgia, serif;
  --font-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-accent: Georgia, "Times New Roman", serif;

  /* Normalized label scale (replaces 9.5/10/10.5/11/11.5 drift) */
  --label-xs: 10px;
  --label-sm: 11px;
  --label-md: 12px;
  --track-label: .16em;

  /* Controls */
  --btn-h-sm: 44px;
  --btn-h-md: 52px;
  --radius-pill: 999px;
  --radius-card: 4px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .18s;

  /* Focus */
  --focus: #ffd166;
}

/* --- Unified button geometry & typography -------------------------------- */
/* Every CTA now shares one font, weight, tracking, radius and height scale. */
.pp-btn,
.pp-btn._w-button,
.pp-btn-line,
.pm-btn,
.pmb-btn,
.pp-hungry-btn,
.pp-hmb,
.pp-dp-btn {
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  display: inline-flex;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* Small: 44px */
.pp-btn,
.pp-btn._w-button {
  min-height: var(--btn-h-sm);
  height: var(--btn-h-sm);
  padding: 0 22px;
  font-size: 14px;
}

/* Large: 52px — one height for every hero / section CTA */
.pp-btn-lg,
.pp-btn.pp-btn-lg,
.pp-btn-line,
.pm-btn,
.pmb-btn,
.pp-hungry-btn,
.pp-hmb {
  min-height: var(--btn-h-md);
  height: var(--btn-h-md);
  padding: 0 28px;
  font-size: 15px;
  letter-spacing: .06em;
}

/* The hungry CTA was mono/12px/.22em — bring it into the system */
.pp-hungry-btn {
  font-family: var(--font-cond);
  font-size: 15px;
  letter-spacing: .06em;
}

/* --- Button interaction states (none existed before) --------------------- */
/* Solid red buttons (red bg / white text) */
.pp-btn:hover,
.pp-btn._w-button:hover,
.pmb-btn:hover {
  background-color: var(--red-hover);
  color: #fff;
  transform: translateY(-1px);
}

.pp-btn:active,
.pp-btn._w-button:active,
.pmb-btn:active {
  background-color: var(--red-press);
  color: #fff;
  transform: translateY(0);
}

/* Inverse buttons (cream bg / red text) — these sit on red sections,
   so they must warm/darken rather than turn red. */
.pm-btn:hover,
.pp-hungry-btn:hover {
  background-color: #fff;
  color: var(--red-press);
  transform: translateY(-1px);
}

.pm-btn:active,
.pp-hungry-btn:active {
  background-color: #e8e0cf;
  color: var(--red-press);
  transform: translateY(0);
}

/* Dark utility button */
.pp-dp-btn:active {
  transform: translateY(0);
}

/* Outline buttons on dark backgrounds.
   .pp-hmb is excluded: it sits on a red fill and inverts to a solid white
   pill on hover, so a translucent wash would leave its red text on red. */
.pp-btn-line:hover {
  border-color: var(--text-on-dark);
  background-color: #ffffff14;
  transform: translateY(-1px);
}

.pp-btn-line:active {
  background-color: #ffffff0a;
  transform: translateY(0);
}

.pp-dp-btn:hover {
  border-color: var(--text-on-dark);
  transform: translateY(-1px);
}

.pp-legal-back:hover {
  border-color: var(--text-on-dark);
  color: #fff;
}

/* --- Visible keyboard focus everywhere (was missing site-wide) ----------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.pl-card:focus-visible,
.pl-tbtn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-card);
}

.pp-btn:focus-visible,
.pp-btn-line:focus-visible,
.pm-btn:focus-visible,
.pmb-btn:focus-visible,
.pp-hungry-btn:focus-visible,
.pp-hmb:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

/* --- Outline button on light/red: match the 52px system ------------------ */
.pm-btn-line {
  min-height: var(--btn-h-md);
  height: var(--btn-h-md);
  padding: 0 28px;
  font-size: 15px;
  border-radius: var(--radius-pill);
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.pm-btn-line:hover {
  background-color: #ffffff1f;
  transform: translateY(-1px);
}

.pm-btn-line:active {
  transform: translateY(0);
}

.pm-btn-line:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* --- Delivery logo buttons (JS-injected, previously unstyled) ------------- */
.pl-dbtn {
  background-color: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-pill);
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  height: 32px;
  padding: 0 14px;
  text-decoration: none;
  display: inline-flex;
  /* Both buttons split their flex row evenly, so Uber Eats and DoorDash
     always render as identical pills whatever their wordmark widths. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 132px;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* The JS wraps these in a plain <div>. Rather than turning that wrapper
   into a flex row (which would also pull its label inline), just align the
   inline-flex buttons to each other. */
.pl-dbtn {
  vertical-align: top;
}

.pl-dbtn img {
  object-fit: contain;
  /* Trimmed horizontal wordmarks: cap the width so the longer DOORDASH
     mark cannot outgrow its pill, and let height follow the aspect. */
  width: auto;
  height: 10px;
  max-width: 100%;
  display: block;
}

.pl-dbtn:hover {
  border-color: var(--text-on-light);
  transform: translateY(-1px);
}

/* The pills stay white in every context: the Uber Eats wordmark is half
   black, so a dark pill swallows it, and brand logos read best on white. */
.pp-sec-dark .pl-dbtn,
.pp-lpage .pl-dbtn {
  background-color: #fff;
  /* Not --line-light here: on a white pill that edge is the only thing
     marking where the button is, so it has to clear 3:1 (WCAG 1.4.11). */
  border-color: #8A8680;
}

.pp-sec-dark .pl-dbtn:hover,
.pp-lpage .pl-dbtn:hover {
  border-color: var(--text-on-light);
  background-color: #fff;
}

.pl-dbtn:active {
  transform: translateY(0);
}

/* --- Geo / filter control: align to the 44px control height -------------- */
.pl-geo,
.pl-geo-1 {
  min-height: var(--btn-h-sm);
  height: var(--btn-h-sm);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--label-sm);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.pl-geo:hover {
  border-color: var(--red);
}

/* Solid fill on hover: the button sits inside a white shell, where a bare
   border change is almost invisible. */
.pl-geo-1:hover {
  background-color: var(--red);
  border-color: var(--red);
}

/* --- Chips: one size, one shape ------------------------------------------ */
/* .pl-chip-1 is deliberately absent: the locator chip carries its own height
   and padding so it can hold a status dot. */
.pl-chip,
.pp-lchip,
.pp-lchip-red {
  font-size: var(--label-sm);
  letter-spacing: .1em;
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  transition: border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.pl-chip-1 {
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.pl-chip:hover,
.pl-chip-1:hover {
  color: var(--text-on-light);
  border-color: var(--text-on-light);
}

/* Badge rows are flex containers — stop children stretching to row height */
.pp-lbadges,
.pp-lcard-acts {
  align-items: center;
}

/* A chip used as a real CTA sits beside a 52px button, so it matches it. */
.pp-lcta-row {
  align-items: center;
}

.pp-lcta-row .pp-lchip {
  min-height: var(--btn-h-md);
  padding: 0 24px;
  font-size: 14px;
}

.pp-lchip,
.pp-lchip-red {
  align-items: center;
  min-height: 34px;
  text-decoration: none;
  display: inline-flex;
}

.pp-lchip:hover {
  border-color: var(--text-on-dark-faint);
  color: var(--text-on-dark);
}

/* --- Location-page CTA: use the large system height ---------------------- */
.pp-lcta-row .pp-btn,
.pp-lcta-row .pp-btn._w-button {
  min-height: var(--btn-h-md);
  height: var(--btn-h-md);
  font-size: 15px;
  padding: 0 28px;
}

/* --- Normalized small-label type scale ----------------------------------- */
/* Collapses the 9.5 / 10 / 10.5 / 11 / 11.5px mono drift onto 3 steps. */
.pl-tbtn,
.pp-tick-city,
.pp-tl-city,
.pl-geo,
.pl-geo-1 {
  font-size: var(--label-sm);
  letter-spacing: var(--track-label);
}

.pp-legal-meta,
.pp-legal-back {
  font-size: var(--label-sm);
  letter-spacing: var(--track-label);
}

/* --- Tab buttons: real states -------------------------------------------- */
.pl-tbtn {
  transition: color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  cursor: pointer;
}

.pl-tbtn:hover {
  color: var(--text-on-dark);
}

/* --- Legal pages: readable measure (was 760px ≈ 95 characters) -----------
   NOTE: the site ships two identical class systems for legal pages —
   terms-of-service uses .pp-legal-*, privacy/accessibility use .pp-lgl-*.
   Both are targeted so all three pages stay in sync.                        */
.pp-legal-in,
.pp-lgl-in {
  max-width: 68ch;
}

.pp-legal-p,
.pp-legal-ul,
.pp-lgl-p,
.pp-lgl-ul {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
}

.pp-legal-h2,
.pp-lgl-h2 {
  margin-top: 44px;
}

.pp-lgl-meta,
.pp-lgl-back {
  font-size: var(--label-sm);
  letter-spacing: var(--track-label);
}

.pp-lgl-back:hover {
  border-color: var(--text-on-dark);
  color: #fff;
}

.pp-lgl-p a,
.pp-lgl-a {
  color: #e8595e;
  text-underline-offset: 3px;
}

.pp-lgl-p a:hover,
.pp-lgl-a:hover {
  color: var(--red-hover);
}

.pp-lgl-h1 {
  text-wrap: balance;
}

/* --- Location cards: consistent hover feedback --------------------------- */
.pl-card {
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.pl-card:hover {
  border-color: var(--line-dark-2);
  transform: translateY(-2px);
}

/* --- Links in body copy --------------------------------------------------- */
.pp-legal-p a {
  color: #e8595e;
  text-underline-offset: 3px;
}

.pp-legal-p a:hover {
  color: var(--red-hover);
}

/* --- Headings: avoid orphans on responsive breaks ------------------------ */
.pp-h1,
.pp-h2,
.pp-legal-h1,
.pm-h1 {
  text-wrap: balance;
}

/* --- Images never overflow their box ------------------------------------- */
img {
  max-width: 100%;
}

/* --- Respect reduced-motion preferences ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .pp-btn:hover,
  .pp-btn-line:hover,
  .pm-btn:hover,
  .pmb-btn:hover,
  .pp-hungry-btn:hover,
  .pp-hmb:hover,
  .pl-card:hover,
  .pp-dp-btn:hover {
    transform: none;
  }
}

/* --- Mobile refinements --------------------------------------------------- */
@media screen and (max-width: 767px) {
  .pp-btn,
  .pp-btn._w-button,
  .pp-btn-line,
  .pm-btn,
  .pmb-btn,
  .pp-hungry-btn,
  .pp-hmb,
  .pm-btn-line {
    width: 100%;
  }

  .pp-cta-row,
  .pm-cta-row,
  .pp-lcta-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .pp-legal-p,
  .pp-legal-ul,
  .pp-lgl-p,
  .pp-lgl-ul {
    font-size: 16px;
  }
}

/* --- Nearest-kitchen dock (js/pepes-nearest.js) --------------------------
   The status slot has two states: ask for location, or show the closest
   kitchen with call and directions. Base .pp-dock-st is declared inline on
   every page as a baseline-aligned flex row, so it is re-aligned here. */
.pp-dock-st[data-near] {
  align-items: center;
  gap: 10px;
}

.pp-dock-geo {
  width: 100%;
  min-height: 44px;
  color: var(--paper);
  cursor: pointer;
  background: #191413;
  border: 1px solid #332c29;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
}

.pp-dock-geo svg {
  width: 15px;
  height: 15px;
  color: var(--red);
  flex: none;
}

.pp-dock-geo.is-busy {
  color: #8a8680;
  cursor: default;
}

.pp-dock-geo.is-busy svg {
  color: #8a8680;
  animation: ppDockPulse 1.1s ease-in-out infinite;
}

@keyframes ppDockPulse {
  50% { opacity: .35 }
}

.pp-dock-near {
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.pp-dock-info {
  flex: 1;
  min-width: 0;
}

.pp-dock-l1 {
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.pp-dock-st[data-near] .pp-dock-city {
  text-decoration: none;
}

/* Distance is the whole point of the state, so it sits beside the city
   rather than being pushed to the far edge like the hours. */
.pp-dock-mi {
  color: #8a8680;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  font-family: IBM Plex Mono, monospace;
  font-size: 9.5px;
}

.pp-dock-st[data-near] .pp-dock-hrs {
  margin-left: 0;
  display: block;
}

.pp-dock-hrs.is-shut {
  color: #8a8680;
}

.pp-dock-acts {
  flex: none;
  gap: 6px;
  display: flex;
}

/* 44px is the minimum comfortable tap target, and the row is already that
   tall, so these cost no extra dock height. */
.pp-dock-ico {
  width: 44px;
  height: 44px;
  color: var(--paper);
  background: #191413;
  border: 1px solid #332c29;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}

.pp-dock-ico svg {
  width: 15px;
  height: 15px;
  display: block;
}



/* --- Surface-aware brand red (WCAG AA) ----------------------------------- */
/* #d92026 is only 3.95:1 on ink and 4.02:1 on bone, so red *text* is tuned
   per surface: #b81a1f on paper/bone/cream, #e8595e on ink. Red *fills* stay
   #d92026 — white on that is already 5.02:1. */
.pp-sec-dark .pp-eyebrow,
.pp-contact .pp-eyebrow {
  color: #e8595e;
}

/* ===========================================================================
   Target Size (Minimum) — WCAG 2.2, 2.5.8
   These links and buttons carried type smaller than 24px and sat in lists or
   rows rather than inside a sentence, so the inline exception does not apply
   and the tap target was under the 24x24 floor. The box is padded out to
   clear it; type size, colour and rhythm are untouched, and the negative
   margins cancel the new padding so nothing shifts on the page.
   =========================================================================== */
.pp-ftr-xlink,
.pp-note-link,
.pp-lgl-a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
/* Kitchen links carry a nested "(coming soon)" note, so this one stays a
   block box rather than a flex row: a flex parent would make the note a
   sibling item and knock it off the city's baseline. */
.pp-ftr-link {
  display: inline-block;
  min-height: 24px;
  padding-top: 3px;
}
.pp-ftr-links li,
.pp-ftr-btm .pp-ftr-xlink {
  display: flex;
  align-items: center;
}
/* Rows of small legal links: pad the hit area sideways too, then pull the row
   back so the first item still lines up with the column above it. */
.pp-ftr-xlink {
  padding: 4px 8px;
}
.pp-ftr-btm {
  margin-left: -8px;
}
.pp-lgl-a {
  padding: 2px 0;
  min-height: 26px;
}
/* Same 2.5.8 floor for the kitchen-card headings, the standalone body links
   that are their own paragraph (so the inline exception does not apply), and
   the map's attribution credit. */
.pp-kit-city a,
.pp-body > a:only-child,
.leaflet-control-attribution a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.leaflet-control-attribution a {
  padding: 0 2px;
}

/* Breadcrumb on the location pages. Mirrors the BreadcrumbList in each page's
   structured data, so what search engines are told and what a visitor sees
   are the same trail. Labelled, and the current page is text rather than a
   link to itself. */
.pp-crumb {
  margin: 0 0 18px;
}
.pp-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pp-crumb li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pp-crumb li + li::before {
  content: '\203A';
  color: #6E6963;
}
.pp-crumb a,
.pp-crumb span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #A19A93;
  text-decoration: none;
}
.pp-crumb a:hover {
  color: #F4F4F2;
  text-decoration: underline;
}
.pp-crumb span {
  color: #E8595E;
}

/* Announced to screen readers only: warns that a link leaves for a new tab
   without adding visual noise for everyone else. */
.pp-newtab {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   Focus Not Obscured (Minimum) — WCAG 2.2, 2.4.11
   The order dock is fixed to the bottom of the viewport on phones, so tabbing
   down the page parked the focused control underneath it: the focus ring was
   there, just invisible. Scroll padding reserves the dock's strip (and the
   home chip's corner) whenever the browser scrolls something into view, so
   focus always comes to rest in clear space.
   =========================================================================== */
@media (max-width: 899px) {
  html {
    scroll-padding-bottom: 148px;
    scroll-padding-top: 76px;
  }
}

/* The catering dialog receives focus when it opens so its name is announced.
   It is a container, not a control, so it should not paint a focus ring. */
.ppcm:focus {
  outline: none;
}

/* ===========================================================================
   Non-text Contrast — WCAG 1.4.11
   These borders are what tell you where the control is: the edge of a filter
   chip, of a delivery button, of a text field. At 1.3–2.5:1 against their own
   background they were decoration rather than boundary. Raised past 3:1 while
   keeping each one a step quieter than its own text.
   =========================================================================== */
/* Element-qualified so these win over the earlier shorthand `border:` on the
   same class, which resets the colour after any longhand set on it. */
.pl-chip,
button.pl-chip-1,
a.pl-chip-1 {
  border-color: #1A1512;
}
.pl-chip,
button.pl-chip-1 {
  color: #1A1512;
}
a.pl-dbtn {
  border-color: #8A8680;
}

/* ===========================================================================
   Date, time and month fields on iOS — layout only
   Safari renders the value inside its own shadow element and centres it, so a
   filled date sat in the middle of its box while every field above and below
   it was left aligned. It also draws inset control chrome that ignores the
   border and padding these fields are given, and refuses to stretch them to
   their container. Corrected here rather than per form: the same fields
   appear in the application, the catering request and the catering page.
   =========================================================================== */
input[type="date"],
input[type="time"],
input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value {
  text-align: left;
  /* Safari sizes this box to its content and then centres it vertically;
     filling the field keeps the text on a text input's baseline. */
  height: 100%;
  margin: 0;
}