/* Red Dog On Main — PH Bristol–inspired redesign
   Brand: navy / sage / bone — not PH berry/ochre */

/* Outfit, self-hosted (ticket #7): latin subset, variable woff2 (one file covers the 400/500/600/700 used here),
   same file + unicode-range Google Fonts served; SIL OFL 1.1, see ../assets/fonts/OFL.txt */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #0B1F3A;
  --navy-deep: #071528;
  --sage: #54a276;
  --sage-dark: #3d7a58;
  --sky: #8bd6f6;
  --teal: #54a29d;
  --bone: #F7F5F2;
  --white: #ffffff;
  --charcoal: #3b3734;
  --brown: #9c5b25;
  --text: #3b3734;
  --text-muted: #6b6560;
  --border: rgba(11, 31, 58, 0.12);
  --header-h: 5.5rem;
  --font: "Outfit", "DM Sans", system-ui, -apple-system, sans-serif;
  --track: 0.14em;
  --track-wide: 0.22em;
  --max: 72rem;
  --narrow: 36rem;
  --radius: 0; /* sharp rectangles — PH pattern */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--sage-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--navy);
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--track);
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--navy);
}

h1 { font-size: clamp(1.85rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 2.8vw, 1.85rem); }
h3 { font-size: 1.05rem; letter-spacing: var(--track-wide); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 1000;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-size: 0.8rem;
}

.skip-link:focus {
  top: 1rem;
}

.container {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}

.narrow {
  width: min(100%, var(--narrow));
  margin-inline: auto;
  text-align: center;
}

/* ——— Header: centered logo, split nav ——— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(11, 31, 58, 0.04);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-h);
  gap: 1rem;
  padding: 0.65rem 0;
}

/* Mobile: keep logo truly centered with toggle on the right */
@media (max-width: 959px) {
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
  }

  .brand-center {
    grid-column: 2;
    grid-row: 1;
  }

  .nav-toggle {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

.nav-left,
.nav-right {
  display: none;
  align-items: center;
  gap: 1.35rem;
}

.nav-left {
  justify-content: flex-end;
}

.nav-right {
  justify-content: flex-start;
}

.nav-right > nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

.nav-link {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  white-space: nowrap;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--sage-dark);
  border-bottom-color: var(--sage);
}

.brand-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  width: auto;
  height: 3.5rem;
  max-width: none;
  object-fit: contain;
}

.nav-actions {
  display: none;
  align-items: center;
  gap: 0.55rem;
  margin-left: 0.35rem;
}

.header-social {
  display: none;
  margin-left: 0.5rem;
  color: var(--navy);
  line-height: 0;
}

.header-social:hover {
  color: var(--sage-dark);
}

.header-social svg {
  width: 1rem;
  height: 1rem;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--navy);
  background: transparent;
  cursor: pointer;
  justify-self: end;
  grid-column: 3;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: var(--navy);
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

.site-nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0 1.25rem;
  border-top: 1px solid var(--border);
}

.site-nav-mobile.is-open {
  display: flex;
}

.site-nav-mobile > a {
  font-size: 0.8rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.site-nav-mobile .nav-actions-mobile {
  display: flex;
  gap: 0.65rem;
  padding-top: 1rem;
  flex-wrap: wrap;
}

@media (min-width: 960px) {
  .nav-left,
  .nav-right,
  .nav-actions,
  .header-social {
    display: flex;
  }

  .nav-toggle,
  .site-nav-mobile {
    display: none !important;
  }

  .brand-logo {
    height: 4.75rem;
  }

  .header-inner {
    min-height: 6.75rem;
  }
}

/* ——— Buttons: sharp rectangles ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.55rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.btn-sm {
  padding: 0.55rem 1rem;
  font-size: 0.68rem;
}

.btn-lg {
  padding: 1rem 1.85rem;
  font-size: 0.78rem;
}

.btn-primary {
  background: var(--sage);
  color: var(--navy);
  border-color: var(--sage);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: var(--white);
}

.btn-secondary,
.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.btn-secondary:hover,
.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn-outline-light:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.btn-outline-sage {
  background: transparent;
  color: var(--sage-dark);
  border-color: var(--sage);
}

.btn-outline-sage:hover {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: var(--white);
}

/* On navy, sage text reads faint next to the solid buttons: white text, sage border (Bug Fixer, Oct 7) */
.section-navy .btn-outline-sage {
  color: var(--white);
}

.btn-on-dark {
  background: var(--sage);
  color: var(--navy);
  border-color: var(--sage);
}

.btn-on-dark:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.btn-row.center {
  justify-content: center;
}

/* ——— Hero: photo-led ——— */
.hero {
  position: relative;
  min-height: min(78vh, 42rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--navy-deep) center / cover no-repeat;
  color: var(--white);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 31, 58, 0.55) 0%,
    rgba(11, 31, 58, 0.15) 45%,
    rgba(11, 31, 58, 0.2) 100%
  );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, 40rem);
  text-align: center;
  padding: 3.5rem 0 4rem;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 0.35rem;
}

.hero-tagline {
  font-size: 0.85rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: #E8F6F6;
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(11, 31, 58, 0.55);
}

.hero-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 28rem;
  margin-inline: auto;
}

.hero-minimal .hero-inner {
  padding: 2rem 0 3rem;
}

.hero-minimal h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0;
}

/* ——— Home hero: storefront photo (Ossen, Oct 7) ———
   Tight hi-res crop, nearly square (2000x1942 / 900x874). The hanging Red Dog sign sits at
   6-26% across / 50-65% down (Open plate to 73%); the mural's RED DOG lettering at 35-40% across.
   Phones get the 900px file, 768px+ gets the 2000px file: the same breakpoint as the
   <link rel="preload" media> pair in index.html, so each width downloads one hero image.
   Under 768px (portrait): zoom to 155% of the hero height, bottom-anchored, 8% from the left,
   so the sign rises above the headline into the clear top of the hero and the sign plus the
   RED DOG lettering both stay in frame (a centered or 15% crop cuts the sign's left ribbon).
   max(..., 97.1vw) is the cover height for the photo's 2000:1942 ratio, so it never leaves a gap.
   Sideways phones under 768px and everything from 768px show the full width (cover), placed
   so the sign and the Open plate stay in frame. */
.hero.hero-storefront {
  background-image: url('https://static.wixstatic.com/media/5bb078_b89fcfbf71bc4534b58ebb670560dca6~mv2.jpg/v1/fill/w_900,h_874,al_c,q_85,enc_auto/5bb078_b89fcfbf71bc4534b58ebb670560dca6~mv2.jpg');
  background-size: cover; /* fallback for browsers without max() in background-size */
  background-size: auto max(155%, 97.1vw);
  background-position: 8% 100%;
}

@media (max-width: 767px) and (orientation: landscape) {
  .hero.hero-storefront {
    background-size: cover;
    background-position: 10% 70%;
  }
}

@media (min-width: 768px) {
  .hero.hero-storefront {
    background-image: url('https://static.wixstatic.com/media/5bb078_d53aeeafb1024127b79aa772bc7f58ad~mv2.jpg/v1/fill/w_2000,h_1942,al_c,q_85,enc_auto/5bb078_d53aeeafb1024127b79aa772bc7f58ad~mv2.jpg');
    background-size: cover;
    /* Desktop: hold the photo's top edge at 46.1vw (about 47.5% down the photo, just above the
       hanging sign) so the sign and the Open plate stay whole and as much of the mural's RED DOG
       lettering as the hero height allows shows below the headline. max(..., 100%) bottom-anchors
       when the hero is taller than the remaining photo (768-1024px). 50% 60% is the fallback for
       browsers without max() in background-position. */
    background-position: 50% 60%;
    background-position: 50% max(-46.1vw, 100%);
  }
}

/* Same navy overlay, mid stop deepened: bright mural sky sits behind the copy */
.hero.hero-storefront::after {
  background: linear-gradient(
    to top,
    rgba(11, 31, 58, 0.72) 0%,
    rgba(11, 31, 58, 0.45) 45%,
    rgba(11, 31, 58, 0.2) 100%
  );
}

.hero.hero-storefront .hero-lead,
.hero.hero-storefront h1 {
  text-shadow: 0 1px 3px rgba(11, 31, 58, 0.6);
}

/* ——— Sections ——— */
.section {
  padding: 5.5rem 0;
}

.section-tall {
  padding: 6.5rem 0;
}

.section-bone {
  background: var(--bone);
}

.section-navy {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.9);
}

.section-navy h2,
.section-navy h3 {
  color: var(--sage);
}

.section-navy a:not(.btn) {
  color: var(--sky);
}

.section-sage {
  background: #e8f2ec;
  color: var(--charcoal);
}

.section-sage h2 {
  color: var(--navy);
}

.section-sage.section-center a:not(.btn) {
  color: var(--navy);
}

.section-white {
  background: var(--white);
}

.section-intro {
  max-width: var(--narrow);
  margin: 0 auto 0.5rem;
  text-align: center;
  color: var(--text-muted);
}

.section-center {
  text-align: center;
}

.section-center .section-intro,
.section-center p {
  margin-left: auto;
  margin-right: auto;
}

.eyebrow {
  font-size: 0.7rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.section-navy .eyebrow {
  color: var(--sage);
}

.page-hero {
  padding: 4rem 0 3rem;
  text-align: center;
  background: var(--bone);
}

.page-hero .lead {
  max-width: 34rem;
  margin: 0 auto;
  color: var(--text-muted);
}

/* Menus page: faded food background */
.menus-page {
  position: relative;
  background: var(--bone);
}

.menus-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://static.wixstatic.com/media/5bb078_faf7ddd6c39a4d3388a625755edd2405~mv2.jpg/v1/fill/w_1050,h_1400,al_c,q_80,enc_auto/5bb078_faf7ddd6c39a4d3388a625755edd2405~mv2.jpg") center / cover no-repeat;
  opacity: 0.12;
  filter: grayscale(40%);
  pointer-events: none;
}

.menus-page > * {
  position: relative;
  z-index: 1;
}

.menus-hero {
  padding: 4.5rem 0 2.5rem;
  text-align: center;
}

.menus-hero h1 {
  margin-bottom: 1.25rem;
}

.menu-cards {
  display: grid;
  gap: 1.5rem;
  max-width: 40rem;
  margin: 0 auto;
  padding-bottom: 4rem;
}

.menu-card {
  background: var(--white);
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid rgba(11, 31, 58, 0.06);
  box-shadow: 0 8px 28px rgba(11, 31, 58, 0.06);
  text-align: center;
  position: relative;
}

.menu-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 3px;
  background: var(--sage);
}

.menu-card h3 {
  color: var(--sage);
  margin-bottom: 0.65rem;
}

.menu-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.menu-card.flagged h3::after {
  content: " · Midweek";
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--teal);
}

.menu-note {
  max-width: 36rem;
  margin: 0 auto 2.5rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Media / layout helpers */
.media-split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 800px) {
  .media-split {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}

.photo-card {
  margin: 0;
  overflow: hidden;
}

.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.visit-photo {
  margin: 0 0 2rem;
}

.visit-photo img {
  width: 100%;
  max-height: 28rem;
  object-fit: cover;
  object-position: center;
}

.feature-row {
  display: grid;
  gap: 2rem;
}

@media (min-width: 800px) {
  .feature-row {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.hours-module {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 1.75rem 1.5rem;
}

.section-navy .hours-module {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.section-navy .hours-module h2 {
  color: var(--sage);
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.section-navy .hours-list li {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.hours-list li:last-child {
  border-bottom: 0;
}

.hours-list .is-closed {
  color: var(--text-muted);
}

.section-navy .hours-list .is-closed {
  color: rgba(255, 255, 255, 0.45);
}

.hours-day {
  font-weight: 500;
  letter-spacing: 0.04em;
}

.info-panel {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 1.75rem 1.5rem;
}

.info-panel h2,
.info-panel h3 {
  margin-bottom: 0.75rem;
}

.info-list li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.info-list li:last-child {
  border-bottom: 0;
}

.info-list strong {
  display: block;
  font-size: 0.7rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: 0.2rem;
}

.parking-note {
  font-style: italic;
  color: var(--text-muted);
}

.map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 26rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bone);
}

.map-facade {
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-facade-inner {
  text-align: center;
  padding: 1rem;
}

.map-facade-note {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.prose {
  max-width: 38rem;
}

.prose p {
  font-size: 1.05rem;
}

.contact-stack {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 880px) {
  .contact-stack {
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: start;
  }
}

.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 2rem 1.5rem;
}

.form-note {
  font-size: 0.85rem;
  color: var(--charcoal);
  margin-bottom: 1.25rem !important;
}

.form-grid {
  display: grid;
  gap: 1rem;
}

.form-grid-2 {
  grid-template-columns: 1fr;
}

@media (min-width: 520px) {
  .form-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--navy);
}

.form-field .req {
  color: var(--sage);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bone);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}

.form-field textarea {
  min-height: 8rem;
  resize: vertical;
}

/* ——— Footer ——— */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.85);
  padding: 4.5rem 0 2rem;
}

.footer-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 2.75rem;
}

.footer-logo img {
  width: auto;
  height: 6rem;
  max-width: 100%;
  object-fit: contain;
}

.footer-grid {
  display: grid;
  gap: 2.25rem;
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    column-gap: 4rem;
    row-gap: 2rem;
  }
}

.footer-heading {
  font-size: 0.7rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 600;
  margin: 0 0 0.65rem;
}

.footer-block p,
.footer-block li {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
}

.footer-block a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.footer-block a:hover {
  color: var(--sky);
}

.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 18rem;
  margin-inline: auto;
  padding: 0.2rem 0;
  font-size: 0.88rem;
}

@media (min-width: 720px) {
  .footer-hours li {
    margin-inline: 0;
  }
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
}

.social-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-size: 0.7rem;
}

.social-links a:hover {
  color: var(--sky);
}

.social-links span {
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ——— Mobile sticky CTA ——— */
.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.65rem 0.35rem;
  color: var(--white);
  text-decoration: none;
  font-size: 0.62rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-weight: 600;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-cta a:last-child {
  border-right: 0;
}

.mobile-cta a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sky);
}

.cta-icon {
  font-size: 0.95rem;
  line-height: 1;
  font-style: normal;
}

body {
  padding-bottom: 4rem;
}

/* Sideways phones: the sticky bar covered the hero buttons. On short landscape screens the hero
   copy is taller than the hero's min-height, so the hero grows to fit it: a slim top padding plus
   6rem of bottom padding (Tester's measurement) puts Order / Reserve / Menus above the bar.
   Both are needed (Bug Fixer, Oct 7) */
@media (max-width: 959px) and (max-height: 500px) and (orientation: landscape) {
  .hero-inner {
    padding-top: 1.25rem;
    padding-bottom: 6rem;
  }

  .hero-tagline {
    margin-bottom: 0.5rem;
  }

  .hero-lead {
    max-width: 36rem;
  }
}

/* Very short (iPhone SE sideways with Safari's toolbar): drop the lead line and shrink the
   headline a little; the buttons stay full size for tapping */
@media (max-width: 959px) and (max-height: 340px) and (orientation: landscape) {
  .hero-inner {
    padding-top: 0.5rem;
  }

  .hero-lead {
    display: none;
  }

  .hero h1 {
    font-size: 1.35rem;
  }
}

/* Narrow phones: tighten the hero tagline so it stays on one line at 320px */
@media (max-width: 359px) {
  .hero-tagline {
    letter-spacing: 0.12em;
  }
}

@media (min-width: 960px) {
  .mobile-cta {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* ——— Polish batch (Bug Fixer, Oct 7) ——— */

/* Menus: readable note over the faded background */
.menu-note {
  padding: 0.85rem 1.1rem;
  color: var(--charcoal);
  background: rgba(247, 245, 242, 0.94);
  border: 1px solid var(--border);
}

/* About: full 16:9 frame (alley + patio) */
.photo-card--wide img {
  aspect-ratio: 16 / 9;
  object-position: center top;
}

/* Mobile menu CTAs: real button padding, even widths */
.site-nav-mobile .nav-actions-mobile .btn {
  flex: 1 1 8rem;
  padding: 0.8rem 1.5rem;
}

/* About: alley-dog portrait (Ossen pick, Oct 7) — full 3:4 frame, never crop */
.photo-card--portrait {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}

.photo-card--portrait img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center top;
  margin: 0 auto;
}

@media (max-width: 799px) {
  .photo-card--portrait {
    max-width: none;
  }
}

/* Menus: PDF menu previews (Ossen spec, Oct 7) — no photo behind the menu */
.menus-page {
  background: var(--white);
}

.menus-page::before {
  content: none;
}

.menus-hero {
  padding: 4rem 0 2.5rem;
}

.btn-order-xl {
  padding: 1.15rem 2.6rem;
  font-size: 0.9rem;
}

.menu-pdf-panel {
  background: var(--bone);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0 2.75rem;
}

.menu-pdf-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
}

.menu-pages {
  display: grid;
  gap: 1.5rem;
  max-width: 62rem;
  margin: 0 auto;
}

@media (min-width: 700px) {
  .menu-pages {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.menu-page-link {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(11, 31, 58, 0.08);
  transition: box-shadow 0.15s, transform 0.15s;
}

.menu-page-link:hover {
  box-shadow: 0 12px 34px rgba(11, 31, 58, 0.16);
  transform: translateY(-2px);
}

.menu-page-link:focus-visible {
  outline: 3px solid var(--sage-dark);
  outline-offset: 3px;
}

.menu-page-link img {
  display: block;
  width: 100%;
  height: auto;
}

.menu-pdf-panel .btn-row {
  margin-top: 2rem;
}

.menu-pdf-panel .menu-note {
  margin: 1.5rem auto 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-muted);
}

.menus-order-bottom {
  padding: 2.75rem 0 4rem;
  text-align: center;
}

@media (max-width: 479px) {
  .menu-pdf-panel .btn-row .btn {
    white-space: normal;
    text-align: center;
  }
}

/* Footer: Google Reviews in "Find us on" (Ossen, Oct 7) — links only, no ratings */
.footer-block .footer-google,
.footer-block .footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: bottom;
}

.footer-google-icon,
.footer-social-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.footer-block .footer-review-link {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 720px) {
  .footer-block .footer-review-link {
    margin-left: 1.4rem;
  }
}

.footer-block .footer-review-link:hover {
  color: var(--sky);
}

/* ——— Contact form (contact.html "Get in touch"; Web Builder, Oct 7). Form-only block — appended, no other rules changed ——— */
.cf-reserve {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--text);
}

.cf {
  display: grid;
  gap: 1.15rem;
  width: 100%;
  max-width: 34rem;
  margin-top: 1rem;
}

.cf-required-note {
  margin: 0 !important;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cf-field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.cf-field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

.cf-req {
  color: var(--navy);
  margin-left: 0.1rem;
}

.cf-field input,
.cf-field select,
.cf-field textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.85rem;
  font-family: inherit;
  font-size: 1rem; /* 16px: no iOS zoom on focus */
  line-height: 1.4;
  color: var(--text);
  background-color: var(--white);
  border: 1px solid #7d8798;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.cf-field select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B1F3A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

.cf-field textarea {
  min-height: 9rem;
  resize: vertical;
}

/* keep a focused field clear of the sticky header / mobile action bar */
.cf-field input,
.cf-field select,
.cf-field textarea {
  scroll-margin-top: 7rem;
  scroll-margin-bottom: 5rem;
}

.cf-field input:focus,
.cf-field input:focus-within,
.cf-field select:focus,
.cf-field textarea:focus {
  outline: 3px solid var(--sage-dark);
  outline-offset: 1px;
  border-color: var(--sage-dark);
}

.cf-field [aria-invalid="true"] {
  border-color: #a33a30;
  border-width: 2px;
}

.cf-error {
  margin: 0 !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: #a33a30;
}

.cf-error:empty {
  display: none;
}

.cf-submit {
  justify-self: start;
  min-height: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.cf-submit:focus-visible {
  outline: 3px solid var(--sage-dark);
  outline-offset: 3px;
}

.cf-submit[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* Keep the faded Send from darkening on hover before the script enables it (Bug Fixer, Oct 7) */
.cf-submit[disabled]:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--navy);
}

/* Fallback under Send, in case the form script never loads (Bug Fixer, Oct 7) */
.cf-fallback {
  margin: -0.5rem 0 0 !important;
  font-size: 0.875rem;
  color: var(--charcoal);
}

.cf-status {
  margin: 0 !important;
  color: var(--charcoal);
  font-weight: 500;
}

.cf-status:empty {
  display: none;
}

.cf-thanks {
  margin-top: 1rem;
  padding: 1.25rem 1.25rem;
  background: var(--bone);
  border-left: 4px solid var(--sage);
  color: var(--charcoal);
  font-size: 1.05rem;
}

.cf-thanks:focus {
  outline: 3px solid var(--sage-dark);
  outline-offset: 2px;
}

/* Honeypot: off-screen, skipped by keyboard and screen readers */
.cf-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 519px) {
  .cf-submit {
    justify-self: stretch;
    width: 100%;
  }
}

/* ——— Event inquiry (events.html #event-inquiry; Web Builder, Oct 7). Reuses the .cf form styles above ——— */
#event-inquiry {
  scroll-margin-top: 7rem; /* clear the 89px sticky header on the events.html#event-inquiry jump */
}

.event-inquiry-card {
  max-width: 40rem;
  margin: 0 auto;
}

/* ——— Footer address = directions link (all pages). Same color as the address text; underline on hover/focus only ——— */
.footer-block a.addr-link,
.footer-block a.addr-link:hover {
  color: inherit;
  text-decoration: none;
}

.footer-block a.addr-link:hover,
.footer-block a.addr-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ——— Event inquiry: date + additional information (Ticket #4) ——— */
.cf-hint,
.cf-count {
  margin: 0 !important;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cf-count[hidden] {
  display: none;
}

/* iOS Safari: keep an empty date field full height and its value left-aligned like the other fields */
.cf-field input[type="date"] {
  min-height: 3rem;
  text-align: left;
}

.cf-field input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}