/* Cook's Barbershop — Grantsville, Utah
   Values follow the approved Claude Design export (reference/Cooks Barbershop.dc.html).
   Container-query units in that export are rendered here as viewport units. */

/* ---------- Fonts (self-hosted, no third-party font requests) ---------- */
@font-face {
  font-family: 'Zilla Slab';
  src: url('fonts/zilla-slab-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zilla Slab';
  src: url('fonts/zilla-slab-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --charcoal: #4D4842;
  --ink: #24211E;
  --ink-soft: #2E2A26;
  --ink-card: #2A2622;
  --teal: #00697B;
  --teal-dark: #00596A;
  --cream: #F8EDCD;
  --cream-page: #FBF7EA;
  --cream-soft: #E6DCBE;
  --field: #D8CDB1;
  --brick: #C4492B;
  --teal-line: #1C5D65;
  --tan: #B08968;
  --tan-light: #D9BC9A;
  --body-text: #E9DEC0;
  --muted: #DCD0B2;
  --error: #F4B3A6;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 12px;
  --head-h: 96px;
}

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

html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--cream);
  font-family: Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--cream); }
a:hover { color: #FFFFFF; }

img { max-width: 100%; }

:focus { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--ink);
}

/* On the cream and cream-soft bands a cream ring would vanish, so flip it to ink. */
.sec-cream a:focus-visible,
.sec-cream button:focus-visible,
.bio-panel a:focus-visible,
.bio-panel button:focus-visible {
  outline-color: var(--ink);
  box-shadow: 0 0 0 2px var(--cream);
}

.sr-only {
  position: absolute;
  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;
}

.skip {
  position: absolute;
  left: 8px;
  top: -200px;
  z-index: 200;
  padding: 14px 20px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  background: var(--cream);
  color: var(--ink);
  font-weight: 700;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top .15s;
}
.skip:focus-visible {
  top: 0;
  color: var(--ink);
  outline-color: var(--ink);
  box-shadow: 0 0 0 2px var(--cream);
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Barber-pole stripe ---------- */
@keyframes pole-scroll {
  from { background-position: 0 0; }
  to { background-position: 48px 0; }
}

.pole {
  display: block;
  box-sizing: content-box;
  height: 6px;
  line-height: 0;
  font-size: 0;
  width: calc(100% + 120px);
  margin: 0 0 0 -60px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: repeating-linear-gradient(45deg,
    var(--brick) 0 8.485px,
    var(--cream) 8.485px 16.97px,
    var(--teal) 16.97px 25.456px,
    var(--cream) 25.456px 33.941px);
  background-size: 48px 6px;
  background-repeat: repeat-x;
  background-position: 0 0;
  animation: pole-scroll 1.5s linear infinite;
}

.pole-foot { height: 10px; background-size: 48px 10px; }

html[data-pole-paused] .pole { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .pole { animation: none; }
  .skip { transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 56px;
  padding: 0 30px;
  border-radius: var(--radius);
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn-sm { min-height: 52px; padding: 0 24px; font-size: 17px; }

.btn-teal {
  background: var(--teal);
  color: var(--cream);
  outline: 1.5px dashed rgba(248, 237, 205, .55);
  outline-offset: -6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}
.btn-teal:hover { background: var(--teal-dark); color: var(--cream); }

.btn-dark {
  background: var(--ink);
  color: var(--cream);
  border: 1.5px solid var(--tan);
  outline: 1px dashed rgba(176, 137, 104, .7);
  outline-offset: -7px;
}
.btn-dark:hover { background: var(--ink-soft); color: var(--cream); }

.btn-cream {
  background: var(--cream);
  color: var(--ink);
  outline: 1.5px dashed rgba(36, 33, 30, .35);
  outline-offset: -6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.btn-cream:hover { background: #FFF7E0; color: var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid var(--cream);
  outline: 1px dashed rgba(248, 237, 205, .55);
  outline-offset: -7px;
}
.btn-ghost:hover { background: rgba(0, 0, 0, .15); color: var(--cream); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 50px;
  padding: 0 22px;
  color: var(--cream);
  border: 1.5px solid var(--tan);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  outline: 1px dashed rgba(176, 137, 104, .7);
  outline-offset: -7px;
}
.btn-outline:hover { background: var(--ink-soft); color: var(--cream); }

.textlink {
  font-weight: 700;
  text-underline-offset: 5px;
  white-space: nowrap;
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}

.hdr-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hdr-left {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  min-width: 0;
  flex: 0 1 auto;
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  border: 0;
  border-radius: 10px;
}
.logo-link img {
  display: block;
  width: 82px;
  height: 82px;
  flex: none;
  object-fit: contain;
}

.hdr-status {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 12px;
  flex: 0 1 auto;
  padding-left: clamp(12px, 2vw, 22px);
  border-left: 1px dashed rgba(176, 137, 104, .55);
  min-width: 0;
}

.hdr-day {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tan-light);
  line-height: 1.2;
  white-space: nowrap;
}

.hdr-pill {
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.25;
  white-space: nowrap;
  padding: 9px 13px;
  border-radius: var(--radius);
  background: var(--teal);
  box-shadow: inset 0 0 0 1px rgba(248, 237, 205, .4), 0 4px 12px rgba(0, 105, 123, .5);
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.main-nav a {
  display: block;
  padding: 10px 16px;
  min-height: 44px;
  line-height: 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cream);
  box-shadow: inset 0 -2px 0 transparent;
  transition: background .15s;
}
.main-nav a:hover { background: rgba(176, 137, 104, .22); color: var(--cream); }
.main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--cream); }
.nav-book { margin-left: 14px; min-height: 48px; padding: 0 24px; font-size: 16px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }

.menu-btn {
  display: none;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: transparent;
  border: 1.5px solid var(--tan);
  outline: 1px dashed rgba(176, 137, 104, .6);
  outline-offset: -6px;
  color: var(--cream);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform .18s, opacity .18s;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .menu-btn span { transition: none; }
  .main-nav a { transition: none; }
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--head-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: var(--ink);
  padding: 16px 20px 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* The page itself is locked (script.js fixes <body> in place) whenever
     this is open, but contain stops this panel's own overscroll from
     bubbling to whatever's behind it as a second line of defense. */
  overscroll-behavior: contain;
  flex-direction: column;
}
.mobile-menu.open { display: flex; }

.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 8px 4px;
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 600;
  font-size: 32px;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px dashed rgba(176, 137, 104, .45);
}
.mobile-menu-meta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 17px;
}
.mobile-menu-meta .state { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.mobile-menu-meta .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tan); flex: none; }
.mobile-menu-meta .dot.is-open { background: #8FD19E; }
.mobile-menu-meta .addr { color: var(--muted); }

@media (max-width: 899px) {
  .main-nav { display: none; }
  .menu-btn { display: flex; }
  /* min-width:0 (the base rule) let this shrink below what the logo +
     status block actually need, which is what let the status box get
     squeezed into the gap meant for the hamburger. fit-content stops
     that; if there truly isn't room, the row overflows visibly instead
     of silently overlapping, and the pill/font shrink below handles it. */
  .hdr-left { flex: 1 1 0; gap: 12px; min-width: fit-content; }
  .hdr-status {
    flex: 1;
    /* min-width:0 let this flex item shrink narrower than the pill's own
       text, so the centered pill overflowed the box equally on both
       sides -- into the divider on the left and toward the hamburger on
       the right. fit-content keeps the box at least as wide as its
       content (the pill, the wider of the two rows) so nothing bleeds
       past its own edges and the 12px gaps above/below actually hold. */
    min-width: fit-content;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 12px;
    text-align: center;
  }
  .hdr-day { font-size: 12px; letter-spacing: .14em; }
  .hdr-pill { font-size: 13px; padding: 6px 10px; }
  .pole-foot { height: 6px; background-size: 48px 6px; }
}

@media (max-width: 1199px) and (min-width: 900px) { .hdr-pill { font-size: 15px; } }
@media (max-width: 1099px) and (min-width: 900px) {
  .hdr-pill { font-size: 14px; }
  .hdr-status { flex-direction: column; align-items: flex-start; gap: 6px; }
  .main-nav { gap: 4px; }
  .main-nav a { padding: 10px 12px; font-size: 15px; }
  .nav-book { margin-left: 10px; padding: 0 20px; }
  .logo-link img { width: 72px; height: 72px; }
}
@media (max-width: 719px) and (min-width: 600px) { .logo-link img { width: 72px; height: 72px; } }
@media (max-width: 599px) {
  /* padding-left is the gap between the header's dashed divider (the
     .hdr-status border-left) and the Today/pill block it introduces: kept
     at 12px minimum at every phone width, per spec. */
  .hdr-status { flex-direction: column; align-items: center; gap: 4px; padding-left: 12px; }
  .hdr-day { font-size: 11px; }
  .hdr-pill { font-size: 11.5px; padding: 5px 9px; }
}
@media (max-width: 419px) { .logo-link img { width: 64px; height: 64px; } }
/* 360-419px: the 64px logo plus the full-length pill ("Closed · opens
   tomorrow 11am" at the 599px bracket's size) need more width than these
   phones have, pushing the hamburger button past the right edge. Shrink
   the pill's padding and font a step further here, same text, before any
   text gets shortened. */
@media (max-width: 419px) and (min-width: 360px) {
  .hdr-pill { font-size: 10.2px; padding: 4px 6px; }
}
@media (max-width: 359px) {
  .logo-link img { width: 52px; height: 52px; }
  /* hdr-inner's gap is the floor between hdr-left (logo + status block)
     and the hamburger button; kept at 12px minimum, same floor as the
     divider-to-block padding below, so neither side pinches at 320-359px. */
  .hdr-inner { gap: 12px; }
  .hdr-left { gap: 6px; }
  .hdr-status { padding-left: 12px; }
  .hdr-day { font-size: 10px; }
  .hdr-pill { font-size: 11px; padding: 4px 7px; }
  .menu-btn { width: 44px; height: 44px; }
}

/* ---------- Shared section furniture ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.3;
}
.eyebrow svg { flex: none; }
.sec-cream .eyebrow { color: var(--ink); font-weight: 700; }
.eyebrow-tan { color: var(--tan-light); }

h1, h2, h3 { font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; }

.h-page { margin: 0; font-size: clamp(44px, 5.6vw, 72px); line-height: 1.05; }
.h-sec { margin: 0; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.1; }
.h-legal { margin: 0; font-size: clamp(42px, 5.4vw, 64px); line-height: 1.05; }

.lede { margin: 0; color: var(--body-text); }

.sec { padding: clamp(48px, 6vw, 84px) 0; }
.sec-top { padding: clamp(42px, 5.25vw, 72px) 0 clamp(48px, 6vw, 84px); }
.sec-ink { background: var(--ink); }
.sec-cream { background: var(--cream); color: var(--ink); }
.sec-cream-soft { background: var(--cream-soft); color: var(--ink); }
.sec-cream h2, .sec-cream-soft h2, .sec-cream h3, .sec-cream-soft h3 { color: var(--ink); }
.sec-cream a:not(.btn), .sec-cream-soft a:not(.btn) { color: var(--ink); }
.sec-cream a:not(.btn):hover, .sec-cream-soft a:not(.btn):hover { color: var(--teal); }

.stack { display: flex; flex-direction: column; }
.gap-12 { gap: 12px; }
.gap-18 { gap: 18px; }
.gap-36 { gap: 36px; }
.gap-48 { gap: 48px; }

/* ---------- Home hero ---------- */
.hero { padding: clamp(34px, 5vw, 67px) 0 clamp(40px, 5vw, 67px); }
.hero .wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hero h1 {
  margin: 0;
  font-size: clamp(48px, 7.1vw, 92px);
  line-height: .96;
  letter-spacing: -.015em;
}
.hero-sub {
  margin: -12px 0 0;
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--tan-light);
}
.hero-intro { margin: 0; max-width: 520px; color: var(--body-text); font-size: clamp(18px, 1.6vw, 20px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-img {
  display: block;
  width: 100%;
  height: auto;
  justify-self: center;
  object-fit: cover;
  object-position: center top;
  border-radius: 14px;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  border: 5px solid var(--cream);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .25);
}
@media (max-width: 964px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-img { max-width: 560px; max-height: none; object-position: 62% 55%; }
}

/* ---------- Stat band ---------- */
.stats {
  background: var(--teal);
  box-shadow: inset 0 1px 0 rgba(248, 237, 205, .25), inset 0 -1px 0 rgba(248, 237, 205, .25);
}
.stats .wrap {
  min-height: 130px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  padding-top: 22px;
  padding-bottom: 22px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 clamp(6px, 2vw, 24px);
  text-align: center;
  min-width: 0;
}
.stat + .stat { border-left: 1px dashed rgba(248, 237, 205, .55); }
.stat-n {
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 700;
  font-size: clamp(32px, 3.9vw, 56px);
  line-height: 1;
  color: var(--cream);
}
.stat-l {
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cream);
  text-wrap: balance;
}

/* ---------- Home price list ---------- */
.home-services { padding: clamp(42px, 5.25vw, 72px) 0 clamp(48px, 6vw, 84px); }
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.price-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
  border-top: 1.5px solid var(--ink);
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(36, 33, 30, .22);
}
.price-name {
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
}
.price-note { font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 500; color: var(--charcoal); }
.price-dots { flex: 1; min-width: 16px; border-bottom: 2px dotted rgba(36, 33, 30, .35); transform: translateY(-6px); }
.price-amt { font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; font-size: 28px; color: var(--teal); }

/* ---------- Split rows (story / about hero) ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.story-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.split-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ---------- Hours + map ---------- */
.hours-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
@media (max-width: 899px) { .hours-grid { grid-template-columns: minmax(0, 1fr); } }

.hours-card {
  background: var(--cream-page);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(36, 33, 30, .14);
  box-shadow: 0 12px 30px rgba(36, 33, 30, .12);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hours-notes { display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: var(--charcoal); }

table.hours { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 18px; }
table.hours th, table.hours td { padding: 12px 14px; border-bottom: 1px solid rgba(36, 33, 30, .12); }
table.hours th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
}
table.hours td { text-align: right; white-space: nowrap; font-weight: 500; color: var(--ink); }
table.hours tr.is-closed th, table.hours tr.is-closed td { color: #5A524A; }
table.hours tr.is-today th { border-radius: 8px 0 0 8px; }
table.hours tr.is-today td { border-radius: 0 8px 8px 0; }
table.hours tr.is-today th, table.hours tr.is-today td {
  background: var(--teal);
  color: var(--cream);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(248, 237, 205, .4), inset 0 -1px 0 rgba(248, 237, 205, .4);
}
table.hours tr.is-today th { box-shadow: inset 1px 1px 0 rgba(248, 237, 205, .4), inset 0 -1px 0 rgba(248, 237, 205, .4); }
table.hours tr.is-today td { box-shadow: inset -1px 1px 0 rgba(248, 237, 205, .4), inset 0 -1px 0 rgba(248, 237, 205, .4); }
.today-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cream);
}

/* Dark hours table (contact page card) */
.hours-dark table.hours th { color: var(--cream); }
.hours-dark table.hours td { color: var(--cream); }
.hours-dark table.hours th, .hours-dark table.hours td { border-bottom: 1px solid rgba(176, 137, 104, .18); }
.hours-dark table.hours tr.is-closed th, .hours-dark table.hours tr.is-closed td { color: var(--muted); }
.hours-dark table.hours tr.is-today th, .hours-dark table.hours tr.is-today td { color: var(--cream); }

.map-col { display: flex; flex-direction: column; gap: 18px; }
.map-frame {
  width: 100%;
  flex: 1;
  min-height: 340px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(36, 33, 30, .15);
  background: #D8CDAE;
  display: block;
}
.map-load {
  width: 100%;
  flex: 1;
  min-height: 340px;
  border: 1.5px dashed rgba(36, 33, 30, .45);
  border-radius: var(--radius);
  background: #D8CDAE;
  color: var(--ink);
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}
.map-load:hover { background: #CFC3A3; }
.map-load .sub { font-weight: 500; font-size: 15px; max-width: 34ch; line-height: 1.5; }
.map-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.map-addr { font-weight: 600; color: var(--ink); }

.map-dark .map-load,
.map-dark .map-frame { min-height: 240px; flex: none; height: 240px; background: #3C3833; }
.map-dark .map-load { border-color: rgba(176, 137, 104, .6); color: var(--cream); }
.map-dark .map-load:hover { background: #474239; }

/* ---------- CTA band ---------- */
.cta { background: var(--teal); padding: clamp(42px, 5.25vw, 66px) 0; }
.cta .wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.cta-rule { display: flex; align-items: center; gap: 16px; width: min(320px, 100%); }
.cta-rule span { flex: 1; height: 1.5px; background: rgba(248, 237, 205, .6); }
.cta h2 { margin: 0; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.1; color: var(--cream); }
.cta p { margin: 0; color: var(--cream); max-width: 520px; }
.cta .btn-row { justify-content: center; align-self: stretch; }

/* ---------- Services page ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 28px;
}
.svc-card {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  outline: 1px dashed rgba(176, 137, 104, .5);
  outline-offset: -6px;
  display: flex;
  flex-direction: column;
}
.svc-card img {
  display: block;
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  background: #2F2B27;
}
.svc-body { padding: 22px 14px 14px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.svc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.svc-card h2 { margin: 0; font-size: 26px; line-height: 1.15; }
.svc-note { font-size: 16px; color: var(--muted); }
.svc-price { font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; font-size: 34px; line-height: 1; color: var(--tan-light); }
.svc-desc { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body-text); }
.svc-card .btn { margin-top: auto; }

.svc-joke {
  background: rgba(36, 33, 30, .55);
  border: 2px dashed var(--tan);
  outline: 0;
  padding: 12px 12px 30px;
}
.svc-joke .svc-body { padding: 0 18px; gap: 18px; }
.svc-joke .star { margin-top: 18px; }
.svc-joke h2 { font-size: 30px; }
.tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px dashed var(--tan-light);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tan-light);
}
.svc-foot-note { font-size: 15px; font-style: italic; color: var(--muted); }

.pay-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  padding: 22px 28px;
  border-radius: var(--radius);
  background: var(--ink);
  border: 1.5px solid rgba(176, 137, 104, .55);
  text-align: center;
  font-weight: 600;
}

/* ---------- About: team ---------- */
.team-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; align-items: stretch; }

.team-card {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 22px 14px 20px;
  background: var(--ink-card);
  border-radius: var(--radius);
  border: 1.5px solid rgba(176, 137, 104, .45);
  outline: 1px dashed rgba(176, 137, 104, .3);
  outline-offset: -7px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  order: var(--o);
}
.team-card.is-open { border-color: var(--cream); }
@supports not (grid-template-rows: subgrid) {
  .team-card { display: flex; flex-direction: column; }
  .team-card .bio-btn { margin-top: auto; }
}
.team-card img {
  display: block;
  width: min(150px, 100%);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 3px solid var(--tan);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  background: #2F2B27;
}
.team-name { font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; font-size: 24px; line-height: 1.2; align-self: start; }
.team-role { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--tan-light); align-self: start; }
.team-nick { font-size: 15px; font-style: italic; color: var(--body-text); align-self: start; }
.bio-btn {
  align-self: start;
  background: none;
  border: 0;
  padding: 6px 4px;
  min-height: 44px;
  line-height: 1.3;
  font: 600 16px Montserrat, sans-serif;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  border-radius: 6px;
}
.bio-btn:hover { color: #FFFFFF; }

.bio-panel {
  display: none;
  grid-column: 1 / -1;
  order: var(--po);
  position: relative;
  margin-top: 22px;
  margin-bottom: 0;
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
  outline: 1.5px dashed rgba(36, 33, 30, .35);
  outline-offset: -8px;
}
.bio-panel.open { display: block; }
.bio-panel::before {
  content: "";
  position: absolute;
  top: -10px;
  left: var(--notch, 50%);
  width: 20px;
  height: 20px;
  background: var(--cream);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px 0 0 0;
}
.bio-head { display: flex; flex-direction: column; gap: 2px; }
.bio-head h3 { margin: 0; font-size: 28px; line-height: 1.15; color: var(--ink); outline: none; }
.bio-head .role { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.bio-close {
  min-height: 44px;
  min-width: 44px;
  padding: 0 28px;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  border-radius: 10px;
  font: 700 16px Montserrat, sans-serif;
  cursor: pointer;
  outline: 1px dashed rgba(248, 237, 205, .45);
  outline-offset: -5px;
}
.bio-close:hover { background: #3A3530; }
.bio-foot {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed rgba(36, 33, 30, .35);
  display: flex;
  justify-content: center;
}
.bio-body {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed rgba(36, 33, 30, .35);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: start;
}
.bio-text { max-width: 70ch; display: flex; flex-direction: column; gap: 16px; }
.bio-text p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink); }
.bio-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 3px solid var(--tan);
  box-shadow: 0 14px 34px rgba(36, 33, 30, .3);
}
@media (max-width: 899px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .team-card { grid-row: auto; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
  /* Overrides each child's own align-self (start, for the desktop
     subgrid's vertical alignment) so the portrait, name, role, nick and
     button all center instead of pinning to the card's left edge. */
  .team-card > * { align-self: center; }
  /* Without an explicit width, the <picture> wrapper around the portrait
     (a block box once flex blockifies it) doesn't shrink-wrap to the
     150px img inside it -- it reports the full card width instead, so
     centering *it* just centers an invisible oversized box and the img
     stays pinned left. Giving picture the same width as the img fixes it. */
  .team-card picture { width: min(150px, 100%); }
  .team-card .bio-btn { margin-top: auto; }
  .bio-panel { margin-top: 0; margin-bottom: 20px; }
  .bio-panel::before { left: 50%; }
}
@media (min-width: 900px) { .bio-panel { order: 99; } }
@media (max-width: 767px) {
  .bio-body { grid-template-columns: minmax(0, 1fr); }
  .bio-portrait { max-width: 260px; }
}

/* ---------- About: timeline ---------- */
.timeline-rule { height: 6px; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--tan) 0 5px, #8C6D52 5px 10px); }
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; }
.timeline-card {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
  outline: 1px dashed rgba(176, 137, 104, .5);
  outline-offset: -8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.timeline-card h3 { margin: 0; font-size: 44px; line-height: 1.1; color: var(--tan-light); }
.timeline-card p { margin: 0; color: var(--body-text); }

.about-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;
  justify-self: center;
  object-fit: cover;
  object-position: 50% 80%;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 32px;
  align-items: start;
}
.panel {
  background: var(--ink);
  border-radius: var(--radius);
  padding: clamp(24px, 3.5vw, 44px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  outline: 1px dashed rgba(176, 137, 104, .5);
  outline-offset: -10px;
}
.panel-sm { padding: clamp(22px, 3vw, 32px); }

form.contact { display: flex; flex-direction: column; gap: 22px; }
form.contact h2 { margin: 0; font-size: 32px; line-height: 1.1; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 22px; }
label.field { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 16px; }
label.field .opt { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  background: var(--ink-soft);
  color: var(--cream);
  border: 1.5px solid rgba(176, 137, 104, .55);
  border-radius: var(--radius);
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 500;
}
.field textarea { min-height: 150px; padding: 14px 16px; resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-err { color: var(--error); font-weight: 600; font-size: 15px; }
.form-err {
  padding: 14px 18px;
  border-radius: var(--radius);
  background: rgba(244, 179, 166, .12);
  border: 1.5px solid var(--error);
  color: var(--cream);
  font-size: 16px;
  font-weight: 600;
}
.form-note { font-size: 14px; line-height: 1.5; color: var(--muted); }
/* Spam honeypot. display:none keeps it out of the layout entirely while the
   field is still submitted, which is how Web3Forms expects `botcheck`. */
.hp { display: none; }

.book-card {
  background: var(--ink);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
  border: 1.5px solid rgba(176, 137, 104, .55);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.book-card h2 { margin: 0; font-size: 28px; line-height: 1.15; }
.book-card .sub { font-size: 16px; color: var(--muted); }

.call-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--cream);
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  outline: 1.5px dashed rgba(248, 237, 205, .5);
  outline-offset: -8px;
}
.call-card:hover { background: var(--teal-dark); color: var(--cream); }
.call-card .lbl { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.call-card .num { font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; font-size: clamp(30px, 3vw, 38px); line-height: 1.15; }

.card-lbl { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--tan-light); }
.addr-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
address { font-style: normal; font-weight: 600; }

/* ---------- Legal pages ---------- */
.legal .wrap { max-width: 780px; }
.legal-head { display: flex; flex-direction: column; gap: 16px; }
.legal-updated { font-size: 16px; color: var(--muted); }
.short-version {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 26px 28px;
  border: 1.5px solid rgba(176, 137, 104, .55);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.short-version .card-lbl { font-weight: 700; }
.short-version p { margin: 0; color: var(--cream); font-size: 18px; }
.legal-body { display: flex; flex-direction: column; gap: 40px; }
.legal-block { display: flex; flex-direction: column; gap: 14px; }
.legal-block h2 { margin: 0; font-size: clamp(26px, 3vw, 32px); line-height: 1.15; }
.legal-block p { margin: 0; color: var(--body-text); }
.legal-block ul { margin: 0; padding-left: 22px; color: var(--body-text); display: flex; flex-direction: column; gap: 8px; }
.legal-table-wrap { border-radius: var(--radius); border: 1px solid rgba(176, 137, 104, .45); overflow: hidden; }
table.legal-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
table.legal-table th[scope="col"] {
  text-align: left;
  padding: 12px 14px;
  background: var(--ink);
  font-weight: 700;
  color: var(--cream);
  border-bottom: 1px solid rgba(176, 137, 104, .45);
}
table.legal-table th[scope="row"] {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  font-weight: 600;
  color: var(--cream);
  width: 34%;
}
table.legal-table td { vertical-align: top; padding: 12px 14px; color: var(--body-text); }
table.legal-table tbody tr + tr th, table.legal-table tbody tr + tr td { border-top: 1px solid rgba(176, 137, 104, .25); }
@media (max-width: 599px) {
  table.legal-table, table.legal-table tbody, table.legal-table tr, table.legal-table th, table.legal-table td { display: block; width: auto; }
  table.legal-table thead { display: none; }
  table.legal-table th[scope="row"] { width: auto; padding-bottom: 4px; }
  table.legal-table tbody tr { border-top: 1px solid rgba(176, 137, 104, .25); }
  table.legal-table tbody tr + tr th, table.legal-table tbody tr + tr td { border-top: 0; }
}

/* ---------- 404 + thanks ---------- */
.centered .wrap { max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.big-404 { font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; font-size: clamp(96px, 16vw, 180px); line-height: .9; color: var(--tan-light); }
.centered h1 { margin: 0; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.1; }
.centered p { margin: 0; color: var(--body-text); max-width: 560px; }
.centered .btn-row { justify-content: center; margin-top: 8px; }
.tick {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal);
  outline: 1.5px dashed rgba(248, 237, 205, .55);
  outline-offset: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Footer ---------- */
.site-footer {
  overflow: hidden;
  background-color: #2A2521;
  background-image:
    repeating-linear-gradient(178deg, rgba(176, 137, 104, .06) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(181deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 29px),
    repeating-linear-gradient(179deg, rgba(176, 137, 104, .05) 0 3px, transparent 3px 47px);
}
.foot-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(36px, 4.5vw, 54px) var(--gutter) 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 36px 32px;
  align-items: start;
}
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.foot-brand img { display: block; width: 132px; height: 132px; flex: none; object-fit: contain; }
.foot-brand p { margin: 0; font-size: 16px; color: var(--body-text); }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 16px; min-width: 0; }
.foot-lbl { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--tan-light); }
.foot-col nav { display: flex; flex-direction: column; gap: 8px; }
.foot-col a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; text-underline-offset: 4px; align-self: flex-start; }
.foot-phone { font-weight: 700; font-size: 18px; }
.foot-hours { display: flex; flex-direction: column; gap: 4px; }
table.foot-hours-table { width: 100%; max-width: 236px; border-collapse: separate; border-spacing: 0 2px; font-size: 16px; }
table.foot-hours-table th {
  text-align: left;
  font-weight: 500;
  padding: 3px 8px;
  color: var(--cream);
}
table.foot-hours-table td { text-align: right; white-space: nowrap; font-weight: 500; padding: 3px 8px; color: var(--cream); }
table.foot-hours-table tr.is-closed th, table.foot-hours-table tr.is-closed td { color: var(--muted); }
table.foot-hours-table tr.is-today th, table.foot-hours-table tr.is-today td {
  background: var(--teal);
  color: var(--cream);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(248, 237, 205, .4);
}
table.foot-hours-table tr.is-today th { border-radius: 6px 0 0 6px; }
table.foot-hours-table tr.is-today td { border-radius: 0 6px 6px 0; }
.lunch-line {
  display: block;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(176, 137, 104, .35);
  max-width: 236px;
  line-height: 1.5;
  color: var(--muted);
}
.foot-bottom {
  padding-top: 22px;
  border-top: 1px dashed rgba(176, 137, 104, .4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 28px;
  font-size: 15px;
  color: var(--muted);
}
.foot-bottom .meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-bottom .links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.foot-bottom a { color: var(--body-text); font-weight: 600; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.pole-toggle {
  background: none;
  border: 0;
  padding: 4px 2px;
  min-height: 44px;
  font: 600 15px Montserrat, sans-serif;
  color: var(--body-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  border-radius: 4px;
}
.pole-toggle:hover { color: #FFFFFF; }
.credit { font-weight: 500; }

@media (max-width: 899px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
  .foot-brand img { width: 96px; height: 96px; }
  .foot-visit { order: 1; }
  .foot-explore { order: 2; }
  .foot-hours-col { order: 3; grid-column: 1 / -1; }
  table.foot-hours-table, .lunch-line { max-width: 320px; }
}

/* ---------- Mobile sticky bar ---------- */
.mobile-bar { display: none; }
.mobile-bar-spacer { display: none; }
@media (max-width: 899px) {
  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: var(--ink);
    border-top: 1px solid rgba(176, 137, 104, .5);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .35);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .mobile-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    color: var(--cream);
  }
  .mobile-bar .call { border: 1.5px solid var(--tan); outline: 1px dashed rgba(176, 137, 104, .7); outline-offset: -7px; }
  .mobile-bar .book { background: var(--teal); outline: 1.5px dashed rgba(248, 237, 205, .55); outline-offset: -6px; }
  .mobile-bar-spacer { display: block; height: 84px; }
}

/* ---------- No-JS fallbacks ---------- */
/* script.js drops .no-js from <html> on load. Without it there is no dead
   hamburger and no dead "Load map" button: the nav list sits open under the
   header, and the map box offers a plain link out to Google Maps. */
.no-js .menu-btn { display: none; }
.no-js .map-load { display: none; }
.no-js .map-noscript { display: flex; }
.map-noscript {
  display: none;
  flex: 1;
  min-height: 340px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  border: 1.5px dashed rgba(36, 33, 30, .45);
  border-radius: var(--radius);
  background: #D8CDAE;
}
.map-dark .map-noscript { min-height: 240px; flex: none; height: 240px; background: #3C3833; border-color: rgba(176, 137, 104, .6); }

/* Phone widths only: the click-to-load map placeholder was 340px tall
   (240px on Contact) and mostly empty space above the fold. Shrinks to
   220px on both Home and Contact; the loaded iframe and the no-JS
   fallback link share the same rule, so nothing resizes when the map
   actually loads. Desktop (900px+) keeps its existing height, where the
   map stretches to match the taller hours card beside it. */
@media (max-width: 899px) {
  .map-frame, .map-load, .map-noscript { min-height: 220px; }
  .map-dark .map-load,
  .map-dark .map-frame,
  .map-dark .map-noscript { min-height: 220px; height: 220px; }
}

@media (max-width: 899px) {
  .no-js .mobile-menu {
    display: flex;
    position: static;
    top: auto;
    bottom: auto;
    padding: 8px 20px 20px;
    overflow: visible;
  }
}