/* Prawnzilla leads the page; the existing HCM palette and motion stay in place. */
.desktop-nav { gap: 24px; }
.hero-eyebrow { max-width: 470px; font-size: .875rem; letter-spacing: 1.25px; }
.hero-description { max-width: 390px; }
.hero-description strong { display: block; color: var(--cream); font-size: 1.125rem; margin-bottom: 8px; }
.hero-line > span { overflow-wrap: anywhere; }
.hero-invitation { max-width: 360px; margin-top: 18px; font-size: .875rem; color: #d1d2c9; }
.hero-origin { font-size: .875rem; }
.hero-stamp strong { font-size: 25px; }
.hero-stamp span { font-size: .75rem; letter-spacing: .7px; }
.signature { display: grid; grid-template-columns: 1.08fr 1fr; align-items: start; gap: clamp(28px, 5vw, 76px); padding-bottom: 80px; }
.signature-visual { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 565px; height: 100%; background: #1b1d19; border-radius: 8px; overflow: hidden; color: var(--cream); }
.signature-label { position: absolute; top: 25px; left: 25px; border: 1px solid #77796a; border-radius: 30px; padding: 7px 14px; font-size: .875rem; letter-spacing: .75px; }
.signature-visual > img { width: 100%; height: auto; object-fit: contain; padding-block: 80px; }
.signature-image-caption { position: absolute; inset: auto 25px 26px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; border-top: 1px solid #55594b; padding-top: 18px; }
.signature-image-caption > span:first-child { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1.2; color: var(--orange); }
.signature-image-caption > span:last-child { font-size: .875rem; color: #d1d2c9; }
.signature-copy { min-width: 0; padding-block: 6px; }
.signature-copy > .eyebrow { color: var(--orange-dark); font-size: .875rem; margin-bottom: 17px; }
.signature-copy h2 { font-size: clamp(2.75rem, 4.6vw, 4.1rem); }
.signature-description { margin-top: 24px; max-width: 490px; font-size: 1rem; line-height: 1.8; color: var(--muted); }
.signature-layers { margin-top: 28px; border-top: 1px solid var(--line); }
.signature-layers details { border-bottom: 1px solid var(--line); }
.signature-layers summary { display: flex; align-items: center; gap: 14px; padding: 17px 0; min-height: 58px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1rem; line-height: 1.5; }
.signature-layers summary::-webkit-details-marker { display: none; }
.signature-layers summary:hover { color: var(--orange-dark); }
.signature-layers summary:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 4px; border-radius: 2px; }
.layer-number { color: var(--orange-dark); font-size: .875rem; font-weight: 500; }
.detail-plus { position: relative; flex-shrink: 0; margin-left: auto; width: 18px; height: 18px; }
.detail-plus::before, .detail-plus::after { content: ''; position: absolute; background: currentColor; inset: 8px 2px auto; height: 1.5px; }
.detail-plus::after { transform: rotate(90deg); }
details[open] .detail-plus::after { transform: rotate(0); }
.signature-layers details p { padding: 0 22px 19px 31px; font-size: 1rem; line-height: 1.75; color: var(--muted); }
.signature-copy > .text-link { margin-top: 26px; min-height: 44px; }
.menu { border-top: 1px solid var(--line); }
.menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.menu-grid .food-card:last-child { display: block; grid-column: auto; }
.menu-grid .food-card .food-image { aspect-ratio: 1.48; }
.menu-grid .food-card .food-info { padding-top: 22px; }
.menu-grid .food-info p { max-width: 480px; min-height: 84px; }

@media (min-width: 781px) and (max-width: 1000px) {
  .desktop-nav { gap: 16px; }
  .nav-wrap { gap: 18px; padding-inline: 22px; }
  .nav-cta { padding-inline: 16px; gap: 12px; }
  .brand-name { font-size: 1.5rem; }
  .signature { gap: 28px; }
  .signature-label { left: 20px; top: 20px; }
  .signature-image-caption { left: 20px; right: 20px; }
}
@media (max-width: 780px) {
  .hero-eyebrow { max-width: 520px; }
  .hero-invitation { margin-top: 16px; }
  .signature { grid-template-columns: 1fr; gap: 32px; padding-bottom: 52px; }
  .signature-visual { min-height: 0; height: auto; aspect-ratio: 1.3; }
  .signature-visual > img { padding-block: 28px; }
  .signature-copy { max-width: 600px; }
  .signature-copy h2 { font-size: clamp(2.75rem, 7vw, 3.7rem); }
  .signature-description { max-width: none; }
  .menu-grid { gap: 28px 20px; }
  .menu-grid .food-card .food-image { aspect-ratio: 1.25; }
}
@media (max-width: 520px) {
  .hero-eyebrow { letter-spacing: .65px; font-size: .875rem; }
  .hero-invitation { max-width: 290px; }
  .hero-stamp strong { font-size: 23px; }
  .signature { gap: 28px; }
  .signature-visual { aspect-ratio: .97; }
  .signature-label { top: 18px; left: 18px; padding: 6px 12px; }
  .signature-image-caption { bottom: 19px; left: 18px; right: 18px; padding-top: 13px; }
  .signature-image-caption > span:first-child { font-size: 1.8rem; }
  .signature-image-caption > span:last-child { font-size: .875rem; }
  .signature-copy > .eyebrow { letter-spacing: 1px; }
  .signature-description { margin-top: 20px; }
  .signature-layers { margin-top: 24px; }
  .menu-grid { grid-template-columns: 1fr; gap: 36px; }
  .menu-grid .food-card .food-image { aspect-ratio: 1.36; }
  .menu-grid .food-info p { min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-invitation { animation: soft-in .95s var(--ease-out) .65s backwards; }
  .detail-plus::after { transition: transform .2s ease; }
}

/* Make the delivery format clear, with the café experience centred on the customer. */
.hero-delivery-tagline { margin-top: 20px; color: var(--orange); font-family: var(--display); font-weight: 600; font-size: 2rem; line-height: 1.2; }
.hero .button { margin-top: 19px; }
.hero-service { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; font-size: .875rem; line-height: 1.5; }
.hero-service > span { border: 1px solid #8a8c7c; border-radius: 30px; padding: 5px 12px; color: var(--cream); }
.hero-service > a { display: inline-flex; align-items: center; gap: 8px; color: #d1d2c9; min-height: 40px; text-underline-offset: 4px; }
.hero-service > a:hover { text-decoration: underline; color: var(--cream); }
.hero-service > a:focus-visible { outline-color: var(--orange); }
.delivery { gap: 64px; align-items: center; }
.delivery-copy { flex: 1 1 55%; min-width: 0; }
.delivery .eyebrow { font-size: .875rem; letter-spacing: 1.35px; }
.delivery h2 { font-size: clamp(3.25rem, 5.8vw, 5.2rem); overflow-wrap: anywhere; }
.delivery-intro { margin-top: 24px; font-size: 1rem; line-height: 1.8; max-width: 520px; }
.delivery-moments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.delivery-moments > span { border: 1px solid #6e351d; border-radius: 30px; padding: 6px 12px; font-size: .875rem; }
.delivery .location-info { flex: 1 1 40%; min-width: 0; max-width: 460px; padding-left: 42px; }
.delivery-mode { display: inline-block; border: 1px solid var(--ink); border-radius: 30px; padding: 6px 12px; margin-bottom: 20px; font-size: .875rem; font-weight: 600; }
.delivery .location-info h3 { font-size: 1.375rem; }
.delivery .delivery-clarity { border-top: 1px solid #995128; margin-top: 22px; padding-top: 18px; font-size: 1rem; line-height: 1.7; }
.footer-top > .footer-delivery-tagline { font-size: 1.125rem; }
@media (max-width: 950px) {
  .delivery { gap: 32px; }
  .delivery .location-info { padding-left: 28px; }
}
@media (max-width: 780px) {
  .delivery { display: block; }
  .delivery .location-info { max-width: 600px; border-left: 0; border-top: 1px solid #995128; margin-top: 34px; padding: 30px 0 0; }
  .delivery-intro br { display: none; }
  .delivery h2 { font-size: clamp(3.25rem, 8vw, 4.3rem); }
}
@media (max-width: 520px) {
  .hero-delivery-tagline { font-size: 1.875rem; }
  .hero-service { gap: 6px 12px; margin-top: 17px; }
  .hero-invitation { margin-top: 15px; }
  .delivery-moments { gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-delivery-tagline { animation: soft-in .95s var(--ease-out) .53s backwards; }
  .hero-service { animation: soft-in .95s var(--ease-out) .63s backwards; }
}