:root {
  color: #171919;
  background: #f7f7f4;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  align-items: center;
  background: #171919;
  display: flex;
  justify-content: space-between;
  min-height: 84px;
  padding: 0 5vw;
}

.site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.brand { color: #ffffff; font-size: 1.125rem; font-weight: 800; grid-column: 1; justify-self: start; letter-spacing: 0; text-decoration: none; width: max-content; }
/* position: relative exists only so the nav can out-rank the translated brand in hit
   testing; it also means any `top` on .site-nav now takes effect, so the dropdown
   offsets stay inside the max-width: 800px block. */
.site-nav { align-items: center; display: flex; gap: clamp(1rem, 2vw, 2rem); grid-column: 2; justify-self: center; position: relative; z-index: 1; }
.site-nav a { color: #ffffff; font-size: 1rem; font-weight: 750; text-decoration: none; }
.site-nav a:not(.header-action):hover { color: #e7a08b; }
.header-action { color: #ffffff; font-size: 1rem; font-weight: 850; text-decoration: none; }
.menu-toggle { align-items: center; background: transparent; border: 0; cursor: pointer; display: none; flex-direction: column; gap: 4px; padding: 0.5rem; }.menu-toggle span { background: #ffffff; display: block; height: 2px; width: 22px; }
.service-summary > div, .story-section > div, .pricing-section > div, .menu-preview > div, .gallery-section > div, .faq-section > div, .request-intro { min-width: 0; }

.hero {
  align-items: end;
  background-image: url("/hero/hero-poster.jpg");
  background-position: center bottom;
  background-size: cover;
  display: flex;
  min-height: 610px;
  padding: calc(8vw + 1rem) 5vw 8vw;
  position: relative;
}

.hero-media { inset: 0; overflow: hidden; position: absolute; }
.hero-video { height: 100%; inset: 0; object-fit: cover; opacity: 0; position: absolute; transition: opacity 400ms ease; width: 100%; }
.hero-video.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-media { display: none; } }.hero-overlay{ background: linear-gradient(180deg, rgb(10 15 15 / 28%) 0%, rgb(10 15 15 / 62%) 55%, rgb(10 15 15 / 74%) 100%); inset: 0; position: absolute; }
.hero-content { max-width: 700px; position: relative; width: 100%; }
.eyebrow { color: #bd593f; font-size: 0.75rem; font-weight: 800; letter-spacing: 0; margin: 0 0 1rem; text-transform: uppercase; }.hero h1{ color: #ffffff; font-size: clamp(3rem, 7vw, 6.3rem); line-height: 1.08; margin: 0; }
.hero-copy { color: #f5f6f4; font-size: 1.125rem; max-width: 560px; margin: 1.5rem 0 2rem; }

.primary-action, .submit-button {
  background: #bd593f;
  border: 1px solid #bd593f;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.1rem;
  text-decoration: none;
}
.primary-action:hover, .submit-button:hover { background: #9c432e; border-color: #9c432e; }

.service-summary, .request-section { padding: 88px 5vw; }
.service-summary { background: #fffdf8; min-width: 0; text-align: center; }h2, h3{ line-height: 1.2; margin: 0; }
.service-summary h2, .request-intro h2 { font-size: clamp(2rem, 4vw, 3rem); }
.how-it-works-heading { margin: 0 auto; max-width: 760px; }.how-it-works-heading .eyebrow { align-items: center; display: flex; gap: 0.7rem; justify-content: center; }.how-it-works-heading .eyebrow::before, .how-it-works-heading .eyebrow::after { background: #e4572e; content: ""; height: 1px; width: 32px; }.how-it-works-heading > p:not(.eyebrow) { color: #596461; margin: 1rem auto 0; max-width: 610px; }
.how-it-works-steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 3rem auto 0; max-width: 1120px; padding: 0; text-align: center; }.how-it-works-steps li { background: #ffffff; border: 1px solid #eddcc4; display: flex; flex-direction: column; min-height: 280px; padding: 2.1rem 1.5rem 1.6rem; }.step-number{ align-items: center; align-self: center; background: #c2410c; border-radius: 50%; box-shadow: 0 8px 18px rgb(217 72 47 / 22%); color: #ffffff; display: inline-flex; font-size: 1rem; font-weight: 850; height: 48px; justify-content: center; width: 48px; }.how-it-works-steps h3 { font-size: 1.25rem; margin: 1.5rem 0 0.8rem; }.how-it-works-steps p { color: #596461; margin: 0; }
.how-it-works-prep { align-items: baseline; border-top: 1px solid #e4572e; display: flex; gap: 1rem; margin: 2rem auto 0; max-width: 1120px; padding-top: 1rem; text-align: left; }.how-it-works-prep strong { color: #b53624; font-size: 0.875rem; text-transform: uppercase; }.how-it-works-prep span { color: #596461; }
.menu-pricing-section { background: #fff8ed; padding: 88px 5vw; }.menu-pricing-heading { margin: 0 auto; max-width: 720px; text-align: center; }.menu-pricing-heading .price-note { margin-top: 1rem; }.menu-pricing-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 3rem auto 0; max-width: 1180px; }.menu-pricing-card { background: #ffffff; border: 1px solid #edcfaa; border-top: 5px solid #d9482f; min-width: 0; padding: 1.6rem; }.menu-pricing-card h3 { align-items: center; color: #1a1512; display: flex; flex-wrap: wrap; font-size: 1.75rem; gap: 0.6rem; margin: 0.8rem 0 1.4rem; }.menu-card-icon { color: #d9482f; display: inline-flex; flex: 0 0 auto; }.menu-card-icon svg { display: block; height: 1.6rem; width: 1.6rem; }.menu-price-list { border-top: 1px solid #eedbc2; margin: 0; }.menu-card-body { border-top: 1px solid #eedbc2; padding-top: 1.2rem; }.menu-price-list div { display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.45rem 0; }.menu-price-list dt, .menu-price-list dd { margin: 0; }.menu-price-list dt { color: #596461; }.menu-price-list dd { font-weight: 850; white-space: nowrap; }.menu-included, .menu-subgroup { border-top: 1px solid #eedbc2; margin-top: 1.5rem; padding-top: 1.2rem; }.menu-included h4, .menu-subgroup h4 { color: #b53624; font-size: 0.8125rem; letter-spacing: 0.04em; margin: 0 0 0.6rem; }.menu-pricing-card p { color: #596461; line-height: 1.55; margin: 0; }.menu-included p + p, .menu-subgroup + .menu-subgroup { margin-top: 0.85rem; }.menu-pricing-card .menu-lead { color: #b53624; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; margin: 0 0 0.6rem; }
.story-section, .pricing-section, .area-section { padding: 88px 5vw; }
.story-section { background: #f7f7f4; display: grid; gap: 4rem; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.section-heading h2 { font-size: clamp(2rem, 4vw, 3rem); }.section-heading > p:not(.eyebrow):not(.price-note) { color: #4a5552; margin: 1.2rem 0 0; max-width: 520px; }
.bring-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }.bring-grid article { background: #ffffff; border-top: 4px solid #bd593f; padding: 1.5rem; }.number { color: #bd593f; font-weight: 800; }.bring-grid h3 { font-size: 1.25rem; margin: 1.5rem 0 0.65rem; }.bring-grid p { color: #4a5552; margin: 0; }
.pricing-section { background: #ffffff; display: grid; gap: 3rem; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }.price-note { color: #596461; font-size: 1rem; font-weight: 400; margin: 1.2rem 0 0; }.price-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }.price-grid article { background: #e6eeeb; border-left: 4px solid #24756b; display: grid; gap: 0.35rem; min-height: 150px; padding: 1.25rem; }.price { font-size: clamp(2rem, 4vw, 3rem); font-weight: 850; line-height: 1; }.price-label { color: #4a5552; font-size: 0.875rem; }
.area-section { align-items: center; background: #fffdf8; color: #1a1512; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }.area-photo { margin: 0; }.area-photo img { aspect-ratio: 4 / 3; border-radius: 8px; display: block; object-fit: cover; width: 100%; }.area-section h2 { font-size: clamp(2rem, 4vw, 3rem); text-wrap: balance; }.area-copy-heading { min-width: 0; }.area-copy > p:not(.eyebrow) { color: #596461; max-width: 720px; }.small-note { font-size: 0.875rem; }
/* The card row is capped so the three cards stay narrow and take a second or
   third tag row, which reads better than three wide, short cards across the
   full 1152px. The closing note follows the same measure. */
.area-regions { display: grid; gap: 1rem; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; max-width: 1000px; }
/* With the landmark photo hidden the section is a single column and the copy
   becomes the centred heading block the other content bands use - the same
   margin: 0 auto / max-width: 720px / text-align: center pair as Gallery and
   FAQ, so Service Area stops being the one informational band that reads left. */
.area-section--text-only { align-items: start; grid-template-columns: minmax(0, 1fr); }
.area-section--text-only .area-copy { margin: 0 auto; max-width: 720px; text-align: center; }
.area-section--text-only .area-copy > p:not(.eyebrow) { margin: 1.2rem 0 0; }
/* The note closes the section, so it spans the same width as the card row and
   sits on the cream the site uses for secondary panels. */
.area-note { background: #fff8ed; border: 1px solid #f0dfc4; border-radius: 8px; color: #4a5552; font-size: 0.9375rem; grid-column: 1 / -1; margin: 0 auto; max-width: 1000px; padding: 0.85rem 1.1rem; }
/* Links inside the note and inside an area page's fallback panel follow the same
   treatment the rest of the site gives links in body copy, rather than falling
   back to the browser's default blue. */
.area-note a, .booking-placeholder a { color: #8f2f1f; font-weight: 700; }
.area-note a:hover, .area-note a:focus-visible, .booking-placeholder a:hover, .booking-placeholder a:focus-visible { color: #16100b; }
.region-card { background: #ffffff; border: 1px solid #eddcc4; border-radius: 8px; display: flex; flex-direction: column; padding: 1.75rem; transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out; }
.region-card h3 { align-items: center; border-bottom: 1px solid #eedbc2; color: #1a1512; display: flex; font-size: 1.125rem; gap: 0.55rem; margin: 0; padding-bottom: 0.75rem; }
.region-card-icon { color: #d9482f; display: inline-flex; flex: 0 0 auto; transition: transform 220ms ease-out; }
.region-card-icon svg { display: block; height: 1.15rem; width: 1.15rem; }
/* Match the site's other card hover treatment: a small lift and shadow keep the
   interaction visible without changing layout. Pointer-only hover avoids a
   sticky state on touch screens, while focus-within gives keyboard visitors the
   same cue when either card link receives focus. */
@media (hover: hover) and (pointer: fine) {
  .region-card:hover {
    border-color: #e4572e;
    box-shadow: 0 18px 36px rgb(26 21 18 / 14%);
    transform: translateY(-5px);
  }
  .region-card:hover .region-card-icon { transform: translateY(-2px) scale(1.04); }
}
.region-card:focus-within {
  border-color: #d9482f;
  box-shadow: 0 12px 28px rgb(26 21 18 / 12%);
  transform: translateY(-3px);
}
.region-card:focus-within .region-card-icon { transform: translateY(-2px) scale(1.04); }
/* City names are the card's data, so they read as one wrapped block instead of a
   twelve-line column that leaves the shorter counties half empty. */
.region-card ul { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 1rem 0 1.25rem; padding: 0; }
.region-card li { background: #fff8ed; border: 1px solid #f0dfc4; border-radius: 999px; color: #4a5552; font-size: 0.8125rem; line-height: 1.4; padding: 0.25rem 0.5rem; }
/* Each county card ends with its own booking link. margin-top: auto parks it on
   the card floor, so the three buttons share a line and the slack in the shorter
   counties sits above its button instead of hanging off the bottom empty. */
.region-card-more { align-self: center; color: #b53624; display: inline-block; font-size: 0.8125rem; font-weight: 800; margin-top: auto; padding: 0.45rem 0.25rem 0.1rem; text-decoration-color: transparent; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 180ms ease, text-decoration-color 180ms ease; }
.region-card-more:hover, .region-card-more:focus-visible { color: #8f2f1f; text-decoration-color: currentColor; }
.region-card-action { align-items: center; background: #ffffff; border: 1px solid #d9482f; border-radius: 8px; color: #b53624; display: flex; font-size: 0.9375rem; font-weight: 800; justify-content: center; margin-top: 0.8rem; min-height: 46px; padding: 0.6rem 1rem; text-decoration: none; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.region-card-action:hover, .region-card-action:focus-visible { background: #b53624; border-color: #b53624; color: #ffffff; }
/* Below 1000px three cards leave each one 230-300px wide, which is narrower than
   the longest city tag, so the tags would stack one per line down a tall card.
   The cards go full width instead and the tags stay in a wrapped block. */
@media (max-width: 1000px) { .area-regions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .region-card { transition: box-shadow 0ms, border-color 0ms; }
  .region-card:hover,
  .region-card:focus-within,
  .region-card:hover .region-card-icon,
  .region-card:focus-within .region-card-icon { transform: none; }
}
.menu-preview { padding: 88px 5vw; background: #ffffff; display: grid; gap: 3rem; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }.menu-groups { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }.menu-groups article { border: 1px solid #cbd5d1; min-height: 135px; padding: 1.25rem; }.menu-groups h3 { color: #24756b; font-size: 1rem; margin: 0 0 0.7rem; }.menu-groups p { color: #4a5552; margin: 0; }
.gallery-section, .faq-section, .contact-section { padding: 88px 5vw; }.gallery-section { background: #fff8ed; display: block; }.gallery-heading { margin: 0 auto; max-width: 720px; text-align: center; }.gallery-section .gallery-heading > p:not(.eyebrow):not(.price-note) { margin: 1.2rem auto 0; }.gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 3rem auto 0; max-width: 1180px; }.gallery-grid figure { margin: 0; }.gallery-grid img { aspect-ratio: 1 / 1; background: #f3dfbd; border-radius: 8px; display: block; object-fit: cover; width: 100%; }.gallery-grid.is-enhanced img { opacity: 0; transition: opacity 0.35s ease; }.gallery-grid.is-enhanced img.is-loaded { opacity: 1; }.faq-section { background: #ffffff; display: block; }.faq-heading { margin: 0 auto; max-width: 720px; text-align: center; }.faq-list { display: grid; gap: 0.75rem; margin: 3rem auto 0; max-width: 820px; }.faq-list details { background: #fffdf8; border: 1px solid #eddcc4; border-radius: 8px; overflow: hidden; }.faq-list details:hover { border-color: #e4572e; }.faq-list details[open] { border-color: #d9482f; }.faq-list summary { align-items: center; color: #1a1512; cursor: pointer; display: flex; font-weight: 800; gap: 1rem; justify-content: space-between; list-style: none; padding: 1.05rem 1.25rem; text-align: left; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { border-bottom: 2px solid #b53624; border-right: 2px solid #b53624; content: ""; flex: 0 0 auto; height: 8px; margin-right: 0.15rem; transform: rotate(45deg); transition: transform 200ms ease; width: 8px; }.faq-list details[open] summary { color: #b53624; }.faq-list details[open] summary::after { transform: rotate(-135deg); }.faq-list details p { color: #4a5552; margin: 0; max-width: 640px; padding: 0 1.25rem 1.15rem; text-align: left; }.contact-section { align-items: end; background: #fff8ed; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) auto; }.contact-section h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 700px; }.contact-section > div:first-child > p:not(.eyebrow) { color: #596461; margin: 1.2rem 0 0; max-width: 560px; }.contact-action { align-items: end; display: flex; flex-direction: column; gap: 1.4rem; }.contact-action p { display: grid; gap: 0.2rem; margin: 0; text-align: right; }.contact-action span { color: #596461; }

.request-section { background: #e6eeeb; display: grid; gap: 4rem; grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr); }
body.request-page main > * { display: none; } body.request-page main > .request-section { display: grid; min-height: calc(100vh - 110px); padding-top: 56px; }
.request-intro > p:not(.eyebrow) { color: #46514e; margin: 1.25rem 0 2rem; max-width: 420px; }
.service-details { border-top: 1px solid #aab9b3; margin: 0; }
.service-details div { border-bottom: 1px solid #aab9b3; display: flex; justify-content: space-between; padding: 0.85rem 0; }
.service-details dt { font-weight: 800; }.service-details dd { margin: 0; text-align: right; }

.form-surface { background: #ffffff; border: 1px solid #cbd5d1; padding: clamp(1.25rem, 3vw, 2.5rem); }
.form-header { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.2rem; }
.form-header h3 { font-size: 1.5rem; }.form-header p, .field-hint { color: #596461; font-size: 0.875rem; margin: 0; }
.form-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-span-full { grid-column: 1 / -1; }
.guest-info-card, .terms-card { background: #f8fafb; border: 1px solid #e1e7eb; border-radius: 8px; margin-top: 1rem; padding: 1rem; }.guest-info-card h3, .terms-card h3 { color: #17212b; font-size: 1rem; margin: 0 0 0.9rem; }.card-heading-row { align-items: center; display: flex; justify-content: space-between; margin-bottom: 0.9rem; }.card-heading-row h3 { margin-bottom: 0; }.secondary-card-action { background: #ffffff; border: 1px solid #d6dde2; border-radius: 999px; color: #4d5a63; cursor: pointer; font-size: 0.75rem; padding: 0.35rem 0.65rem; }.guest-count-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }.guest-counter label { color: #3d4a53; font-size: 0.8125rem; font-weight: 700; }.counter-control { align-items: center; display: grid; gap: 0.45rem; grid-template-columns: 34px minmax(0, 1fr) 34px; margin-top: 0.4rem; }.counter-control button{ background: #c2410c; border: 0; border-radius: 4px; color: #ffffff; cursor: pointer; font-size: 1.25rem; height: 38px; line-height: 1; }.counter-control button:first-child { background: #f5b5ad; }.counter-control input { min-height: 38px; text-align: center; }.occasion-options { display: flex; flex-wrap: wrap; gap: 0.45rem; }.occasion-options button { background: #ffffff; border: 1px solid #d6dde2; border-radius: 999px; color: #4d5a63; cursor: pointer; font-size: 0.75rem; padding: 0.42rem 0.65rem; }.occasion-options button.is-selected, .occasion-options button:focus-visible{ background: #c2410c; border-color: #c2410c; color: #ffffff; outline: 0; }.occasion-custom { margin-top: 0.65rem; min-height: 40px; }.terms-card ul { border-bottom: 1px solid #e1e7eb; color: #27343d; font-size: 0.875rem; list-style: none; margin: 0 0 0.8rem; padding: 0 0 0.8rem; }.terms-card li { padding: 0.2rem 0; }.terms-card li::before { color: #e4572e; content: "•"; font-weight: 900; margin-right: 0.45rem; }.terms-check { align-items: flex-start; color: #596461; display: flex; font-size: 0.75rem; font-weight: 500; gap: 0.45rem; }.terms-check input { accent-color: #d9482f; min-height: auto; width: auto; }.terms-check a { color: #8f2f1f; }
label, legend { color: #27302e; display: grid; font-size: 0.875rem; font-weight: 750; gap: 0.45rem; }
.form-group-title { color: #bd593f; font-size: 0.75rem; font-weight: 850; letter-spacing: 0.04em; margin: 0; text-transform: uppercase; }
label > .form-group-title { margin-bottom: 0.1rem; }
.guest-info-card label { display: block; }.field-label { display: block; }.guest-info-card label > input:not([type="checkbox"]), .guest-info-card label > textarea { display: block; margin-top: 0.4rem; }.guest-info-card .terms-check { align-items: flex-start; display: flex; }
input, textarea { background: #ffffff; border: 1px solid #aab9b3; border-radius: 0; color: #171919; min-height: 46px; padding: 0.65rem 0.75rem; width: 100%; }
textarea { min-height: 92px; resize: vertical; }
input:focus, textarea:focus { border-color: #24756b; outline: 3px solid rgb(36 117 107 / 18%); }
fieldset { border: 0; margin: 1.6rem 0; padding: 0; }.field-hint { font-weight: 400; margin: 0.35rem 0 0.85rem; }
.choice-grid { display: grid; gap: 0.65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { align-items: center; background: #f4f6f5; border: 1px solid #d6dfdb; display: flex; font-weight: 650; gap: 0.55rem; min-height: 42px; padding: 0.45rem 0.6rem; }
.choice input { accent-color: #24756b; min-height: auto; width: auto; }.contact-heading { border-top: 1px solid #d8dedb; margin-top: 1.5rem; padding-top: 1.5rem; }
.field-error { color: #a62d24; font-size: 0.8125rem; font-weight: 650; min-height: 1.15rem; }.total-error { margin: 0.6rem 0 0; }
.policy-note { color: #4a5552; font-size: 0.875rem; margin: 1.5rem 0 1rem; }.submit-button { width: 100%; }.submission-status { color: #4a5552; font-size: 0.875rem; min-height: 1.4rem; }
.success-panel { padding: 1.5rem 0; }.success-panel h3 { font-size: 2rem; }.success-panel p:not(.eyebrow) { color: #4a5552; max-width: 550px; }.secondary-action { background: transparent; border: 1px solid #24756b; color: #1a5e56; cursor: pointer; font-weight: 800; padding: 0.7rem 1rem; }
.request-page .success-panel { max-width: 960px; margin: 0 auto; padding: 0 2rem 2rem; }.request-page .success-panel .booking-progress { margin: 0 -2rem 2rem; }.schedule-again-link { color: #647c9e; display: inline-block; font-size: 1rem; margin: 0 0 1.5rem; text-decoration: none; text-transform: uppercase; }.schedule-again-link:hover { color: #8f2f1f; text-decoration: underline; }.success-card { background: #ffffff; border: 1px solid #dce4ea; border-radius: 8px; box-shadow: 0 4px 10px rgb(34 49 63 / 10%); padding: 2rem; text-align: center; }.success-check { align-items: center; background: #e8f0e9; border-radius: 50%; color: #4d9253; display: flex; font-size: 2rem; height: 64px; justify-content: center; margin: 0 auto 1.1rem; width: 64px; }.success-card .eyebrow { margin-bottom: 0.7rem; }.success-card h3 { font-size: 1.5rem; }.success-card > p:not(.eyebrow) { color: #647c9e; margin: 0.6rem auto 1.2rem; max-width: 560px; }.success-details { background: #eef4f8; border-radius: 8px; margin: 1rem 0 0; padding: 0.85rem 1rem; text-align: left; }.success-details div { align-items: baseline; display: grid; gap: 1rem; grid-template-columns: 80px minmax(0, 1fr); padding: 0.45rem 0; }.success-details div + div { border-top: 1px solid #dce4ea; }.success-details dt { color: #647c9e; }.success-details dd { color: #17212b; font-weight: 800; margin: 0; text-align: right; }.success-actions { display: flex; gap: 0.8rem; margin-top: 1.4rem; }.success-actions .secondary-action{ border-color: #b0361d; color: #b0361d; }.success-actions .secondary-action:last-child { border-color: #dce4ea; color: #25323b; }

footer { background: #171919; color: #ffffff; display: flex; font-size: 0.875rem; justify-content: space-between; padding: 1.5rem 5vw; }

/* Fire-forward palette for the Hibachi Heat brand. Deployment marker: hero-fire-v2. */
:root { background: #fff8ed; color: #1a1512; }
body { background: #fff8ed; }
.site-header, footer { background: #1a1512; }
.brand { align-items: center; display: inline-flex; gap: 0.55rem; }
.brand-mark { border-radius: 50%; height: 60px; object-fit: cover; width: 60px; }.header-action{ background: #c2410c; border: 1px solid #c2410c; padding: 0.55rem 0.9rem; }
.header-action:hover { background: #bd321f; color: #ffffff; }
.eyebrow, .number, .form-group-title{ color: #b0361d; }.primary-action, .submit-button{ background: #c2410c; border-color: #c2410c; }
.primary-action:hover, .submit-button:hover { background: #bd321f; border-color: #bd321f; }
.menu-groups h3 { color: #b53624; }
.bring-grid article { border-top-color: #e4572e; }
.pricing-section, .menu-preview, .faq-section { background: #fffdf8; }
.price-grid article { background: #fff0d4; border-left-color: #b53624; }
.story-section { background: #fff8ed; }
.request-section { background: #f4e1c5; }
input:focus, textarea:focus { border-color: #b53624; outline-color: rgb(181 54 36 / 20%); }
.choice input { accent-color: #b53624; }
.secondary-action { border-color: #b53624; color: #8f2f1f; }
.gallery-more { align-items: center; border-radius: 4px; cursor: pointer; display: flex; gap: 0.5rem; justify-content: center; margin: 2.25rem auto 0; min-height: 44px; padding: 0.7rem 1.6rem; }.gallery-more[hidden] { display: none; }.gallery-more.is-loading { cursor: progress; }.gallery-more-spinner { animation: gallery-spin 0.7s linear infinite; border: 2px solid currentColor; border-radius: 50%; border-top-color: transparent; display: none; height: 1em; width: 1em; }.gallery-more.is-loading .gallery-more-spinner { display: block; }
.gallery-more:hover, .gallery-more:focus-visible { background: #ffffff; border-color: #e4572e; color: #e4572e; outline: 0; }
@keyframes gallery-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .gallery-grid.is-enhanced img { transition: none; } }
.faq-list details a { color: #8f2f1f; font-weight: 700; }
.calendar-month-button svg { display: block; height: 1.25rem; margin: 0 auto; width: 1.25rem; }
.booking-next-button svg { flex: 0 0 auto; height: 1rem; width: 1rem; }
.schedule-again-link svg { height: 0.875rem; margin-right: 0.4rem; vertical-align: -0.125rem; width: 0.875rem; }
/* The dedicated booking page has the whole viewport to itself, so its card is
   wider than the same card sitting in the homepage's two-column request band. */
body.request-page .form-surface { max-width: 960px; width: min(100%, 960px); }
.faq-list summary:focus-visible { outline: 2px solid rgb(217 72 47 / 25%); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }
.time-slots button:disabled { background: #f0e7de; border-color: #e4d5c4; color: #b8ab9d; cursor: not-allowed; opacity: 0.72; }
body:not(.request-page) .site-header { background: rgb(26 21 18 / 86%); left: 0; position: absolute; right: 0; top: 0; z-index: 10; }
body.request-page .site-header { background: #1a1512; position: relative; }
body:not(.request-page) .request-section { display: none; }
body.request-page { overflow-x: hidden; } body.request-page main > .request-section { background: #fff8ed; display: block; min-width: 0; padding: 2.5rem 1.25rem 4rem; width: 100%; }.request-page .request-intro { display: none; }.request-page .form-surface { border: 0; border-radius: 12px; box-shadow: 0 20px 45px rgb(47 27 14 / 16%); margin: 0 auto; max-width: 760px; min-width: 0; padding: 0; width: min(100%, 760px); }.booking-page-heading { padding: 2.5rem 2rem 1.5rem; text-align: center; }.booking-page-heading h2 { font-size: clamp(2rem, 5vw, 3rem); overflow-wrap: break-word; }.booking-page-heading > p:not(.eyebrow) { color: #596461; margin: 0.9rem auto 0; max-width: 480px; }.booking-step { min-width: 0; padding: 0 2rem 2rem; }.booking-progress{ align-items: center; background: #c2410c; color: #ffffff; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin: 0 -2rem 2rem; min-height: 58px; padding: 0.7rem 1rem; }.booking-progress span { align-items: center; display: inline-flex; font-size: 0.8125rem; font-weight: 700; gap: 0.4rem; opacity: 0.72; }.booking-progress b { align-items: center; background: #ffffff; border-radius: 50%; display: inline-flex; font-size: 0.75rem; height: 22px; justify-content: center; width: 22px; color: #8f2f1f; }.booking-progress .is-current { color: #ffffff; opacity: 1; }.booking-progress .is-current b{ background: #ffffff; color: #b0361d; }.booking-panel { background: #fffdf8; border: 1px solid #f0dfc8; border-radius: 8px; min-width: 0; padding: 1.25rem; }.booking-panel h3 { font-size: 1.25rem; margin: 0.35rem 0 0.5rem; }.booking-note { color: #596461; font-size: 0.875rem; margin: 0 0 1.35rem; }.calendar-shell, .time-picker { background: #ffffff; border: 1px solid #f0dfc8; border-radius: 8px; min-width: 0; padding: 1rem; }.calendar-header { align-items: center; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; margin-bottom: 0.8rem; text-align: center; }.calendar-month-button { background: transparent; border: 0; color: #8f2f1f; cursor: pointer; font-size: 1.25rem; min-height:  44px; }.calendar-month-button:disabled { color: #c9bdb0; cursor: not-allowed; }.calendar-weekdays, .calendar-days { display: grid; gap: 0.35rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }.calendar-weekdays { color: #8f2f1f; font-size: 0.75rem; margin-bottom: 0.4rem; text-align: center; }.calendar-days button { background: #fff8ed; border: 1px solid transparent; color: #1a1512; cursor: pointer; font-size: 0.875rem; min-height:  44px; }.calendar-days button:hover:not(:disabled), .calendar-days button:focus-visible, .time-slots button:hover, .time-slots button:focus-visible { border-color: #d9482f; outline: 0; }.calendar-days button:disabled { background: #f5eee5; color: #b8ab9d; cursor: not-allowed; }.calendar-days button.is-selected, .time-slots button.is-selected{ background: #c2410c; border-color: #c2410c; color: #ffffff; }.time-picker { margin-top: 1rem; }.time-picker h4 { color: #1a1512; font-size: 0.875rem; margin: 0; }.time-picker > p { color: #596461; font-size: 0.875rem; margin: 0.35rem 0 0.85rem; }.time-slots { display: grid; gap: 0.55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }.time-slots button { background: #fffdf8; border: 1px solid #edcfaa; color: #1a1512; cursor: pointer; font-size: 0.8125rem; font-weight: 700; min-height: 44px; }.booking-next-button{ align-items: center; background: #c2410c; border: 1px solid #d9482f; color: #ffffff; cursor: pointer; display: flex; font-weight: 800; gap: 0.65rem; justify-content: center; margin: 1.25rem 0 0 auto; min-height: 48px; padding: 0.75rem 1rem; }.booking-next-button:disabled { background: #d9c6b4; border-color: #d9c6b4; color: #6b5a48; cursor: not-allowed; }.booking-selection-summary { align-items: center; background: #fff0d4; border-left: 4px solid #d9482f; border-radius: 8px; display: grid; gap: 0.2rem 1rem; grid-template-columns: minmax(0, 1fr) auto; margin: 0 0 1.5rem; padding: 0.85rem 1rem; }.booking-selection-summary span { color: #8f2f1f; font-size: 0.75rem; font-weight: 850; text-transform: uppercase; }.booking-selection-summary strong { grid-row: 2; }.booking-selection-summary button { background: transparent; border: 0; color: #8f2f1f; cursor: pointer; font-weight: 800; grid-column: 2; grid-row: 1 / span 2; text-decoration: underline; }.request-page .success-panel { padding: 0 2rem 2rem; }.request-page .success-panel .booking-progress { margin-bottom: 2rem; }

@media (max-width: 800px) {
  .hero { min-height: 540px; padding: 8rem 1.25rem 4rem; }.hero-copy { max-width: 330px; }.service-summary, .story-section, .pricing-section, .area-section, .request-section, .menu-preview, .gallery-section, .faq-section, .contact-section, .menu-pricing-section { grid-template-columns: 1fr; padding: 64px 1.25rem; }.how-it-works-steps { gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }.how-it-works-steps li { min-height: 0; padding: 1.75rem 1.25rem; }.how-it-works-prep { align-items: flex-start; flex-direction: column; gap: 0.45rem; }.menu-pricing-grid { grid-template-columns: 1fr; margin-top: 2rem; }.menu-pricing-card { padding: 1.4rem; }.service-summary h2, .story-section h2, .pricing-section h2, .area-section h2, .menu-preview h2, .gallery-section h2, .faq-section h2, .contact-section h2 { max-width: 100%; overflow-wrap: break-word; }.bring-grid, .price-grid, .menu-groups { grid-template-columns: 1fr; }.gallery-grid { gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }.choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.site-header { padding: 0 1.25rem; position: absolute; top: 0; }.menu-toggle { display: flex; margin-left: auto; position: absolute; right: 1.25rem; top: 27px; z-index: 6; }.site-nav { align-items: stretch; background: #1a1512; display: none; flex-direction: column; gap: 0; left: 0; padding: 0.5rem 1.25rem 1rem; position: absolute; right: 0; top: 84px; z-index: 5; }.site-nav.is-open { display: flex; }.site-nav a { display: block; padding: 0.7rem 0; }.contact-action { align-items: flex-start; }.contact-action p { text-align: left; }
}

@media (max-width: 540px) {
  .request-page .success-panel { padding: 0 1.25rem 1.25rem; }
  .request-page .success-panel .booking-progress { margin-inline: -1.25rem; }
  .request-page .success-card { padding: 1.35rem 1rem; }
  .success-actions { flex-wrap: wrap; }
  .success-actions .secondary-action { flex: 1 1 120px; }
}

@media (max-width: 540px) {
  .form-grid { grid-template-columns: 1fr; }.form-span-full { grid-column: auto; }.choice-grid { grid-template-columns: 1fr; }.form-header { align-items: flex-start; flex-direction: column; gap: 0.35rem; } footer { align-items: flex-start; flex-direction: column; gap: 0.4rem; }.request-page main > .request-section { padding: 2rem 1rem 3rem; }.booking-page-heading { padding: 2rem 1.25rem 1.25rem; }.booking-page-heading h2 { font-size: 2rem; }.booking-step { padding: 0 1.25rem 1.25rem; }.booking-progress { gap: 0.45rem; margin: 0 -1.25rem 1.25rem; padding-inline: 0.5rem; }.booking-progress span { font-size: 0.75rem; gap: 0.25rem; }.booking-progress b { height: 20px; width: 20px; }.booking-panel { padding: 1rem; }.calendar-shell, .time-picker { padding: 0.75rem; }.calendar-weekdays { font-size: 0.75rem; }.calendar-days { gap: 0.25rem; }.calendar-days button { min-height:  44px; }.time-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }.booking-selection-summary { font-size: 0.86rem; }.request-page .success-panel { padding: 0 1.25rem 1.25rem; }
}

/* Acceptance sizing: keep the full mark visible while the header stays fixed. */
.site-header { min-height: 132px; position: fixed; top: 0; }
.brand-mark { height: 120px; width: 120px; }
.brand { margin-left: -12px; }
.brand { transform: translateX(150px); }
.hero { padding: calc(8vw + 1rem) 5vw 8vw; }
body.request-page .site-header { position: fixed; top: 0; }
body.request-page .site-header { left: 0; right: 0; width: 100%; }
body.request-page .brand { margin-left: -12px; transform: translateX(150px); }
body.request-page .site-header { z-index: 20; }
body.request-page .booking-progress { position: relative; z-index: 1; }
body.request-page .success-panel { position: relative; z-index: 0; scroll-margin-top: 184px; }
body.request-page.is-editing-order::before { background: rgb(18 13 10 / 68%); content: ""; inset: 0; position: fixed; z-index: 50; }
body.request-page.is-editing-order #party-request-form { background: #fffdf8; border: 1px solid #e7d7c2; box-shadow: 0 24px 70px rgb(18 13 10 / 30%); inset: 1rem; margin: auto; max-height: calc(100vh - 2rem); max-width: 760px; overflow: auto; position: fixed; width: min(calc(100% - 2rem), 760px); z-index: 60; }
.order-edit-modal-header { align-items: flex-start; background: #fffdf8; border-bottom: 1px solid #eadbc8; display: flex; gap: 1rem; justify-content: space-between; padding: 1.25rem 2rem 1rem; position: sticky; top: 0; z-index: 3; }
.order-edit-modal-header h3 { font-size: 1.5rem; margin: 0.2rem 0 0; }
.order-edit-modal-close { background: transparent; border: 1px solid #cbb8a2; color: #5c3025; cursor: pointer; font-size: 1rem; line-height: 1; min-height: 38px; min-width: 38px; }.order-edit-modal-close:hover, .order-edit-modal-close:focus-visible{ border-color: #b0361d; color: #b0361d; outline: 2px solid rgb(217 72 47 / 25%); outline-offset: 2px; }
body.request-page.is-editing-order .booking-page-heading { display: none; }
body.request-page.is-editing-order .form-header { display: none; }
body.request-page.is-rescheduling-order .booking-panel > .form-group-title,
body.request-page.is-rescheduling-order #date-time-title,
body.request-page.is-rescheduling-order .booking-note { display: none; }
body.request-page.is-editing-order .booking-step .booking-progress { display: none; }
body.request-page.is-editing-order .booking-selection-summary { display: none; }
/* A request opened from an email link is not stepping through the booking flow.
   The class comes from an inline head script so nothing flashes before app.js runs. */
html.is-viewing-request .success-panel .booking-progress { display: none; }
html.is-viewing-request body:not(.is-editing-order) #party-request-form { display: none; }
.order-edit-modal-close { border: 0; }
body.request-page.is-editing-order .booking-step { padding-top: 0.25rem; }
body.request-page.is-editing-order .booking-progress { margin-top: 0; }
@media (max-width: 640px) { .order-edit-modal-header { padding-inline: 1.25rem; } body.request-page.is-editing-order #party-request-form { inset: 0.5rem; max-height: calc(100vh - 1rem); width: calc(100% - 1rem); } }
.cancel-modal { align-items: center; background: rgb(18 13 10 / 68%); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 70; }
.cancel-modal[hidden], .order-edit-modal-header[hidden] { display: none; }
.calendar-month-label { justify-self: center; min-height: 44px; width: max-content; }
.calendar-month-picker { background: #ffffff; border-color: #f0dfc8; }
.calendar-month-picker { background: #fffdf8; border-color: #f0dfc8; }
.calendar-month-grid button { background: transparent; }.calendar-month-grid button.is-selected{ background: #c2410c; }.calendar-month-label{ background: #fff8ed; border: 0; border-radius: 8px; color: #b0361d; cursor: pointer; font-weight: 800; min-height: 40px; padding: 0.45rem 0.7rem; }.calendar-month-label:hover, .calendar-month-label:focus-visible { outline: 2px solid rgb(217 72 47 / 25%); outline-offset: 2px; }.calendar-month-picker { background: #f8fafb; border: 1px solid #dce4ea; border-radius: 8px; margin: 0 0 0.8rem; padding: 0.7rem; }.calendar-year-header { align-items: center; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; margin-bottom: 0.45rem; text-align: center; }.calendar-month-grid { display: grid; gap: 0.4rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }.calendar-month-grid button { background: #ffffff; border: 1px solid transparent; border-radius: 6px; color: #1a1512; cursor: pointer; min-height: 34px; }.calendar-month-grid button:hover:not(:disabled), .calendar-month-grid button:focus-visible { border-color: #d9482f; outline: 0; }.calendar-month-grid button.is-selected{ background: #c2410c; color: #ffffff; }.calendar-month-grid button:disabled { color: #c6ced3; cursor: not-allowed; }
.cancel-dialog { background: #ffffff; border: 1px solid #dce4ea; border-radius: 8px; box-shadow: 0 24px 70px rgb(18 13 10 / 30%); max-width: 448px; padding: 1.25rem 1.5rem 1.1rem; position: relative; width: 100%; }
.cancel-dialog h3 { color: #101820; font-size: 1.25rem; margin: 0 2rem 0.5rem; text-align: center; }.cancel-dialog > p { color: #647c9e; line-height: 1.4; margin: 0 auto 0.8rem; max-width: 330px; text-align: center; }.cancel-modal-close { background: transparent; border: 0; color: #647c9e; cursor: pointer; font-size: 1.125rem; padding: 0.2rem; position: absolute; right: 1.2rem; top: 1.1rem; }.cancel-reasons { border: 0; display: grid; gap: 0.38rem; margin: 0 0 0.85rem; padding: 0; }.cancel-reasons label { align-items: center; color: #17212b; cursor: pointer; display: flex; font-size: 0.96rem; gap: 0.55rem; }.cancel-reasons input { appearance: none; background: #ffffff; border: 1px solid #9ca8b1; border-radius: 50%; box-sizing: border-box; flex: 0 0 16px; height: 16px; margin: 0; min-height: 16px; padding: 0; width: 16px; }.cancel-reasons input:checked { background: radial-gradient(circle, #f04444 0 4px, #ffffff 4.5px); border-color: #f04444; }.cancel-reasons input:focus-visible { outline: 2px solid rgb(62 93 125 / 35%); outline-offset: 2px; }.cancel-modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }.cancel-back, .cancel-confirm { border: 0; border-radius: 8px; cursor: pointer; font-weight: 700; min-width: 90px; padding: 0.65rem 1rem; }.cancel-back{ background: #c0392b; color: #ffffff; }.cancel-confirm { background: #f19a9a; color: #ffffff; }.cancel-confirm:not(:disabled){ background: #c0392b; }.cancel-confirm:disabled { cursor: not-allowed; }.cancel-modal-status { color: #c52e2e !important; font-size: 0.875rem; min-height: 1.2rem; }.cancel-modal-close:hover, .cancel-modal-close:focus-visible{ color: #b0361d; outline: 2px solid rgb(217 72 47 / 25%); }.cancel-back:focus-visible, .cancel-confirm:focus-visible { outline: 2px solid #d9482f; outline-offset: 2px; }
.success-check.is-cancelled { background: #fbe9e9; color: #ef4b4b; font-size: 2.5rem; }
.cancelled-followup { background: #ffffff; border: 1px solid #dce4ea; border-radius: 8px; box-shadow: 0 4px 10px rgb(34 49 63 / 10%); margin-top: 1.4rem; padding: 1.4rem 1.5rem; text-align: center; }.cancelled-followup h3 { color: #101820; font-size: 1.25rem; margin: 0 0 0.65rem; }.cancelled-followup p { color: #647c9e; margin: 0 auto 1rem; }.cancelled-followup-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }.cancelled-followup-actions .primary-action, .cancelled-followup-actions .secondary-action { min-height: 42px; padding: 0.65rem 0.9rem; text-decoration: none; }.cancelled-followup-actions .primary-action { border: 0; }
body.request-page .booking-progress .is-complete { color: #ffffff; opacity: 1; }.booking-progress .is-complete b{ background: #ffffff; color: #b0361d; }
.counter-control .guest-count-trigger::after { top: 50%; transform: translateY(-50%); }
.counter-control .guest-count-trigger::after { border-bottom: 1.5px solid #8f2f1f; border-right: 1.5px solid #8f2f1f; content: ""; height: 7px; position: absolute; right: 0.7rem; top: 50%; transform: translateY(-65%) rotate(45deg); width: 7px; }
.secondary-card-action:hover, .secondary-card-action:focus-visible { background: #ffffff; border-color: #e4572e; color: #e4572e; outline: 0; }
.occasion-options button:hover, .occasion-options button:focus-visible { background: #ffffff; border-color: #e4572e; color: #e4572e; outline: 0; }
.guest-count-select { min-width: 0; position: relative; }.counter-control .guest-count-trigger { align-items: center; background: #ffffff; border: 1px solid #aab9b3; color: #171919; cursor: pointer; display: flex; font-size: 1rem; justify-content: center; min-height: 38px; padding: 0 2rem; position: relative; width: 100%; }.counter-control .guest-count-trigger:hover, .counter-control .guest-count-trigger:focus-visible { background: #ffffff; border-color: #d9482f; outline: 2px solid rgb(217 72 47 / 18%); outline-offset: 1px; }.guest-count-menu { background: #ffffff; border: 1px solid #dce4ea; box-shadow: 0 8px 22px rgb(47 27 14 / 18%); display: grid; gap: 0.2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); left: 0; max-height: 220px; overflow-y: auto; padding: 0.45rem; position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 5; }.guest-count-menu[hidden] { display: none; }.counter-control .guest-count-menu button { background: #ffffff; border: 1px solid transparent; color: #1a1512; cursor: pointer; min-height: 30px; padding: 0.25rem; }.counter-control .guest-count-menu button:hover, .counter-control .guest-count-menu button:focus-visible { background: #f1f3f5; border-color: #dce4ea; color: #1a1512; outline: 0; }.counter-control .guest-count-menu button.is-selected{ background: #ffffff; border-color: #b0361d; color: #b0361d; font-weight: 800; }.counter-control button[data-delta="-1"]:not(:disabled), .counter-control button[data-delta="1"]:not(:disabled) { background: #e4572e; cursor: pointer; }.counter-control button:disabled { background: #e8d8cd; color: #a88c80; cursor: not-allowed; }
/* Keep the cancelled state focused and give cancellation choices comfortable spacing. */
/* Mobile: stack the guest counters so the count value and its +/- buttons keep usable width. */
@media (max-width: 640px) {
  .guest-count-grid { grid-template-columns: 1fr; }
}

.success-actions[hidden] { display: none; }
.success-details dd { overflow-wrap: anywhere; }
.cancel-reasons { gap: 0.58rem; margin-bottom: 0.95rem; }
body.request-page main { padding-top: 148px; }
body:not(.request-page) .site-header { background: #24201e; position: fixed; }
body:not(.request-page) .site-header { left: 0; right: 0; width: 100%; }

@media (max-width: 800px) {
  .site-header { min-height: 96px; }
  .brand-mark { height: 88px; width: 88px; }
  .brand { margin-left: -6px; }
  .brand { transform: translateX(150px); }
  .site-nav { top: 96px; }
  .hero { padding: 9rem 1.25rem 4rem; }
  body.request-page main { padding-top: 108px; }
}

/* Interactive controls: softened corners, larger touch targets. */
/* Policy pages: readable single column, same type and palette as the site. */
.legal-page { background: #fff8ed; }
.legal-main { margin: 0 auto; max-width: 760px; padding: 4rem 1.5rem 5rem; }
.legal-main h1 { color: #1a1512; font-size: clamp(2rem, 5vw, 3rem); margin: 0.4rem 0 0.6rem; }
.legal-main h2 { color: #1a1512; font-size: 1.25rem; margin: 2.4rem 0 0.6rem; }
.legal-main h3 { color: #1a1512; font-size: 1.05rem; margin: 1.6rem 0 0.2rem; }
.legal-main p, .legal-main li { color: #4a5552; line-height: 1.6; }
.legal-main ul { margin: 0.4rem 0 0; padding-left: 1.25rem; }
.legal-main li { margin: 0.3rem 0; }
.legal-main a { color: #b0361d; font-weight: 700; }
.legal-updated { color: #5f6b66 !important; font-size: 0.875rem; margin: 0 0 2rem; }
/* The site footer is dark; the policy pages reuse the element with a light surface. */
.footer-legal a { color: #ffffff; font-weight: 700; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: #e7a08b; }
footer { align-items: baseline; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.footer-legal { color: #cec7bd; flex-basis: 100%; margin: 0; }
/* Card hover: a small lift, a deeper shadow, and a warmer accent. Only transform,
   shadow, and border colour change, so nothing reflows. Touch devices never see it,
   and reduced-motion users keep the colour cue without the movement. */
.how-it-works-steps li,
.menu-pricing-card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}
.step-number,
.menu-card-icon { transition: transform 200ms ease-out; }
.how-it-works-steps li:hover,
.menu-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgb(26 21 18 / 14%);
}
.how-it-works-steps li:hover { border-color: #e4572e; }
.menu-pricing-card:hover { border-top-color: #c2410c; }
.how-it-works-steps li:hover .step-number { transform: scale(1.06); }
.menu-pricing-card:hover .menu-card-icon { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .how-it-works-steps li:hover,
  .menu-pricing-card:hover { transform: none; }
  .how-it-works-steps li:hover .step-number,
  .menu-pricing-card:hover .menu-card-icon { transform: none; }
}
/* Only the phone and email links; the Book Now button keeps its own styling. */
.contact-action p a { color: #8f2f1f; font-weight: 700; text-decoration: underline; }
.contact-action p a:hover, .contact-action p a:focus-visible { color: #16100b; }
/* Anchor targets: land just under the shrunken fixed header (76px desktop / 64px mobile). */
main > section[id] { scroll-margin-top: 80px; }
@media (max-width: 800px) { main > section[id] { scroll-margin-top: 68px; } }
/* Header overlay: translucent black over the hero, solid black and shorter once scrolled. */
body:not(.request-page) .site-header {
  background: rgb(10 15 15 / 32%);
  transition: background-color 260ms ease, min-height 260ms ease;
}
body:not(.request-page) .brand-mark { transition: height 260ms ease, width 260ms ease; }
body:not(.request-page).is-scrolled .site-header { background: #000000; }
/* The request page keeps its opaque header but shrinks on scroll like the homepage. */
body.request-page .site-header { transition: min-height 260ms ease; }
body.request-page .brand-mark { transition: height 260ms ease, width 260ms ease; }
body.is-scrolled .site-header { min-height: 76px; }
body.is-scrolled .brand-mark { height: 68px; width: 68px; }
body:not(.request-page).is-scrolled .menu-toggle { top: 50%; transform: translateY(-50%); }
@media (max-width: 800px) {
  body.is-scrolled .site-header { min-height: 64px; }
  body.is-scrolled .brand-mark { height: 56px; width: 56px; }
  body.is-scrolled .site-nav { top: 64px; }
}
.occasion-options button.is-selected:hover, .occasion-options button.is-selected:focus-visible { background: #c2410c; border-color: #c2410c; color: #ffffff; }
/* Policy pages reuse the site header. They have no hero to float over, so it
   stays solid black from the top and shrinks on scroll like the other pages. */
body.legal-page .site-header { background: #1a1512; }
/* The /book trial page embeds a scheduling calendar in the same shell. It has no
   hero, so it takes the legal pages' solid header and top offset. */
body.booking-page { background: #fff8ed; }
body.booking-page .site-header { background: #1a1512; }
/* The county pages share this shell with the area chooser. The extra width gives
   the scheduling iframe enough room to keep its time slots in three columns
   instead of dropping to two at narrower desktop widths. */
body.booking-page main.booking-main { margin: 0 auto; max-width: 1120px; padding: 200px 1.5rem 5rem; }
/* The chooser: three area cards on the same panel treatment the homepage's
   Service Area band uses, so the visitor meets one card language in both places.
   The cards are the only thing on this page - the calendar lives one level down,
   on the area's own booking page. */
.booking-chooser { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2.5rem auto 0; max-width: 1000px; }
/* On the chooser the city tags are the fastest way through the page: a visitor
   knows their city, not which county it sits in, so each one is a link to its
   area's page. They are the same tags as the homepage's, given the affordance a
   link needs - which the homepage's non-interactive tags deliberately do not
   have. */
.booking-chooser .region-card li a { color: inherit; display: block; text-decoration: none; }
.booking-chooser .region-card li a:hover, .booking-chooser .region-card li a:focus-visible { color: #b53624; text-decoration: underline; }
/* Same reason as the homepage's Service Area band: below 1000px three cards are
   narrower than the longest city tag, so the tags stack one per line down a very
   tall card. Full-width cards keep the tags in a wrapped block instead. */
@media (max-width: 1000px) { .booking-chooser { grid-template-columns: 1fr; } }
.region-cities, .region-calendar { margin-top: 3rem; }
.region-cities {
  --region-pill-height: 1.91015625rem;
  background: #ffffff;
  border: 1px solid #ebdcc7;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgb(26 21 18 / 5%);
  padding: 1.75rem 2rem;
  width: 100%;
}
.region-faq { margin: 3rem auto 0; max-width: 760px; width: 100%; }
.region-cities h2, .region-calendar h2, .region-faq h2 { color: #1a1512; font-size: 1.5rem; }
.region-cities-note, .region-calendar > p { color: #596461; margin: 0.9rem 0 0; }
.region-cities ul { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.region-cities li { background: #fdf3e8; border: 1px solid #f0dcc5; border-radius: 999px; color: #4a5552; font-size: 0.875rem; line-height: 1.4; padding: 0.28rem 0.55rem; white-space: nowrap; }
.region-cities-note { font-size: 0.9375rem; }
@media (max-width: 800px) {
  .region-cities { --region-pill-height: 1.701171875rem; padding: 0.75rem; }
  .region-cities ul { gap: 0.2rem; }
  .region-cities li { font-size: 0.8125rem; padding: 0.22rem 0.42rem; }
}
@media (max-width: 400px) {
  .region-cities .booking-page-note { gap: 0.2rem; }
  .region-cities .booking-page-note a { font-size: 0.75rem; padding-left: 0.45rem; padding-right: 0.45rem; }
}
.region-faq dl { margin: 1rem 0 0; }
.region-faq dt { color: #1a1512; font-weight: 800; margin-top: 1.1rem; }
.region-faq dd { color: #596461; margin: 0.35rem 0 0; }
.booking-heading { margin: 0 auto; max-width: 720px; text-align: center; }
.booking-heading h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.booking-heading > p:not(.eyebrow) { color: #596461; margin: 1.1rem auto 0; max-width: 620px; }
.booking-embed { background: #ffffff; border: 1px solid #eddcc4; border-radius: 12px; margin-top: 2.5rem; overflow: hidden; padding: 0; }
.booking-embed iframe { border: 0; display: block; min-height: 760px; width: 100%; }
.booking-embed iframe[hidden], .booking-placeholder[hidden] { display: none; }
.booking-placeholder { background: #fffdf8; border: 1px dashed #e0c9a6; border-radius: 8px; margin: 1.25rem; padding: 2rem 1.5rem; text-align: center; }
.booking-placeholder h2, .booking-placeholder h3 { font-size: 1.25rem; margin: 0 0 0.6rem; }
.booking-placeholder p { color: #596461; margin: 0 auto; max-width: 560px; }
.booking-placeholder code { background: #fff0d4; border-radius: 4px; padding: 0.1rem 0.35rem; }
.booking-page-note { align-items: center; color: #596461; display: flex; flex-wrap: wrap; font-size: 0.875rem; gap: 0.3rem; justify-content: center; margin: 2rem auto 0; max-width: 760px; text-align: center; }
.region-cities .booking-page-note { margin-top: 1.25rem; max-width: none; padding-top: 0.35rem; row-gap: 0.5rem; }
.region-cities .booking-page-note a { background: #fdf3e8; border-color: #f0dcc5; }
.booking-page-note-label { flex: 1 0 100%; }
@media (min-width: 801px) {
  .booking-page-note-label { flex-basis: auto; }
  .region-cities .booking-page-note-label { text-align: right; }
}
.booking-page-note a { align-items: center; background: #ffffff; border: 1px solid #e5d2b4; border-radius: 999px; color: #8f2f1f; display: inline-flex; font-size: 0.8125rem; font-weight: 800; gap: 0.25rem; justify-content: center; min-height: 44px; padding: 0.45rem 0.55rem; text-decoration: none; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.booking-page-note a::after { content: "→"; }
.booking-page-note a:last-child::after { content: ""; }
.booking-page-note a:hover, .booking-page-note a:focus-visible { background: #b53624; border-color: #b53624; color: #ffffff; }
.region-cities .booking-page-note a { min-height: var(--region-pill-height); padding-bottom: 0; padding-top: 0; }
/* Calendar and questions share the page surface. The city list stays an inset
   white card so its heading, city chips, ZIP note, and area links remain one
   readable group without adding divider lines between page sections. */
body.region-page main.booking-main { margin: 0; max-width: none; padding: 200px 0 0; }
body.region-page .booking-heading { margin: 0 auto; max-width: 720px; padding: 0 1.5rem; }
body.region-page .region-cities,
body.region-page .region-calendar,
body.region-page .region-faq {
  --region-section-inline: max(1.5rem, calc((100vw - 1072px) / 2));
  background: #fff8ed;
  border: 0;
  margin: 0;
  max-width: none;
  padding: 3rem var(--region-section-inline);
  width: 100%;
}
body.region-page .region-cities {
  background: #ffffff;
  border: 1px solid #ebdcc7;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgb(26 21 18 / 5%);
  margin: 3rem auto 0;
  max-width: 1072px;
  padding: 1.75rem 2rem;
  width: calc(100% - 3rem);
}
body.region-page .region-calendar .booking-embed { margin-top: 0; }
body.region-page .region-faq { padding-bottom: 5rem; }
body.region-page .region-faq > * { margin-left: auto; margin-right: auto; max-width: 760px; }
@media (max-width: 800px) {
  body.region-page .region-cities { padding: 0.75rem; }
}
body.legal-page .brand-mark { transition: height 260ms ease, width 260ms ease; }
body.legal-page main.legal-main { padding-top: 200px; }
@media (max-width: 800px) {
  body.legal-page main.legal-main { padding-top: 140px; }
  body.booking-page main.booking-main { padding-top: 140px; }
}
.how-it-works-steps li, .menu-pricing-card { border-radius: 8px; }
.contact-section .eyebrow { color: #8a2a12; }
.header-action, .primary-action, .submit-button, .booking-next-button, .calendar-days button, .time-slots button, .counter-control button, input, select, textarea, .guest-count-trigger, .guest-count-menu { border-radius: 4px; }
.hero-video-toggle {
  align-items: center;
  background: rgb(10 15 15 / 55%);
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 4px;
  bottom: 1.25rem;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 1.25rem;
  width: 44px;
  z-index: 2;
}
.hero-video-toggle:hover, .hero-video-toggle:focus-visible { background: rgb(10 15 15 / 78%); outline: 2px solid rgb(255 255 255 / 65%); outline-offset: 2px; }
.hero-video-toggle .hero-icon-play { display: none; }
.hero-video-toggle.is-paused .hero-icon-pause { display: none; }
.hero-video-toggle.is-paused .hero-icon-play { display: block; }
@media (prefers-reduced-motion: reduce) { .hero-video-toggle { display: none; } }
@media (max-width: 800px) {
  .menu-toggle { align-items: center; height: 44px; justify-content: center; min-width: 44px; width: 44px; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; }.site-nav .header-action { justify-content: center; text-align: center; }
}
.site-nav a { padding-block: 0.625rem; }