/**
 * Catering page styles.
 * Scoped to catering-specific sections. Uses existing site CSS custom properties:
 *   --theme-color (#C9AB81 gold), --primary-color (#344a4c teal),
 *   --secondary-color (#715B3E brown), --higer-secondary-color (#efefef)
 *   --primary-font (Josefin Sans), --secondary-font (Oswald), --higer-secondary-font (Tangerine)
 */

/* ---------- Hide global sections on catering pages ---------- */
/* The "Sign up to Stay in Touch" newsletter block in _foot.php runs on every
   page. We don't want it on catering (would interrupt the inquiry CTA flow).
   This file is only loaded on catering-related pages via _head.php, so the
   rule is automatically scoped. */
.news___letter { display: none !important; }

/* The site's footer is designed with 307px top padding to make room for the
   newsletter block to visually overlap it. With the newsletter hidden, that
   307px becomes a giant empty gap between the CTA and the footer content.
   Zero it out on catering pages so the CTA/form flows directly into the footer. */
footer.main-footer.two { padding-top: 50px !important; }

/* ---------- Heading color overrides ----------
   Site global uses color: var(--white-color) on all headings.
   Force dark in on-light sections, keep white where intentional.
   Use body.catering-scope + section class to outweigh .center__title / .title__section selectors. */

section.catering__intro .main____title h1,
section.catering__menu .main____title h1,
section.catering__service .main____title h1,
section.catering__inquire .main____title h1,
section.catering__thanks .main____title h1 {
  color: var(--primary-color) !important;
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
}
section.catering__intro .main____title h1 span,
section.catering__menu .main____title h1 span,
section.catering__service .main____title h1 span,
section.catering__inquire .main____title h1 span,
section.catering__thanks .main____title h1 span {
  color: var(--theme-color) !important;
  font-weight: 500;
}
/* also style h2 in menu category section heads since they use different markup */
section.catering__menu .catering__menu__section__heading {
  color: var(--primary-color);
}

/* ---------- Intro section (full-screen hero) ---------- */

.catering__intro {
  /* Photo bg set via inline style from the template using the page's first
     image. Fallback solid teal so the section always renders dark. */
  background-color: var(--primary-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 110px 20px 0;
  position: relative;
  /* Intentionally no overflow:hidden — it would break the sticky trust cards
     below. The gradient overlays are absolute with inset:0 so they don't
     escape the section anyway. */
}
/* Full-screen variant — hero is EXACTLY calc(viewport - real header height).
   JS in catering.php measures the actual header and sets --site-header-h.
   Flex column ensures content fills the top (flex: 1) and glance sits naturally
   at the bottom (flex: 0). No sticky, no overlap, no estimated padding.
   120px is a conservative fallback used only before the JS runs. */
:root { --site-header-h: 120px; }
section.catering__intro--full,
section.food__section.one.catering__intro--full {
  height: calc(100vh - var(--site-header-h));
  height: calc(100svh - var(--site-header-h));
  min-height: 600px; /* sanity floor so very short viewports still render sensibly */
  padding: 0;
  display: flex;
  flex-direction: column;
}
.catering__intro--full .content___one {
  flex: 1 1 auto;
  min-height: 0; /* allow shrinking in flex context if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  width: 100%;
  overflow: hidden; /* never let content overflow into glance territory */
}
@media (max-width: 767px) {
  .catering__intro--full .content___one { padding: 24px 16px; }
  /* Hide the second long paragraph on mobile to keep the hero tight */
  .catering__intro--full .normal__text p:nth-child(2) { display: none; }
}
.catering__intro::before {
  /* Same 135° diagonal teal → near-black overlay as the final CTA section,
     for a richer, more cohesive hero. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(52, 74, 76, 0.88) 0%, rgba(11, 19, 21, 0.92) 100%);
  pointer-events: none;
}
.catering__intro::after {
  /* Subtle warm gold glow in the top-right for depth */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(201, 171, 129, 0.14), transparent 60%);
  pointer-events: none;
}
.catering__intro .content___one { position: relative; z-index: 1; }
.catering__intro .content___one,
.catering__intro .row {
  position: relative;
  z-index: 1;
}
/* Force single-column, centered content at ~50% width.
   Block layout (not flex) to avoid Bootstrap row/col margin asymmetry.
   High-specificity selectors to override site defaults on .food__text__content
   and Bootstrap's .col-lg-6 padding which were causing the 8px center offset. */
.catering__intro .content___one { width: 100%; }
/* Zero out Bootstrap's default row/col gutters that create horizontal overflow
   (site's bootstrap.css has .row margin: 0 -15px which extends past the
   container and causes a horizontal scrollbar on mobile). */
section.catering__intro .content___one .row,
.catering__glance .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0;
}
.catering__glance .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
section.catering__intro .content___one .row {
  display: block;
}
section.catering__intro .content___one .col-lg-6,
section.catering__intro .content___one .col-md-12,
section.catering__intro .content___one .col-sm-12 {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  flex: unset;
}
/* The intro has two cols in the site's food__section pattern (image + text).
   On the catering page we only want the text col centered as a single-col
   hero. Completely hide the image col so it doesn't take layout space. */
section.catering__intro .food__right__img,
section.catering__intro .col-lg-6:first-child {
  display: none;
}
/* Override the site's .food__section .content___one .food__text__content
   padding (50px 30px) which was shrinking and offsetting content in the hero.
   Margin reset is critical: responsive.css:584 sets `margin: 0 10px` on
   .food__text__content. Combined with `width: 100%` here, that pushed the
   content 10px past its container on the right side only — visually reading
   as "extra padding on the left" on iOS Safari (no scrollbar to mask it).
   Zero the margin so the content stays perfectly centered in its column. */
section.food__section.catering__intro .content___one .food__text__content {
  padding: 0 16px;
  margin: 0;
  text-align: center;
  width: 100%;
}
/* Center the decorative flourish under the heading. Need explicit
   top + margin-top because the base .main____title:after rule sets
   position:absolute without offsets, which defaults to top:0 and
   makes the flourish overlap the headline text. */
.catering__intro .main____title:after {
  left: 50%;
  top: 100%;
  margin-top: 8px;
  transform: translateX(-50%);
}
.catering__intro .sub____title {
  color: var(--theme-color);
  display: inline-block;
  width: 100%;
}
/* Override the global h1 override: dark was right for on-light menu section,
   but this hero is DARK so we want light text. Font size uses clamp so it
   scales smoothly without breakpoint-specific rules. */
section.catering__intro .main____title h1 {
  color: #fff !important;
  font-weight: 300;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.08;
}
section.catering__intro .main____title { margin-bottom: clamp(18px, 3vw, 40px); }
section.catering__intro .sub____title { font-size: clamp(26px, 3vw, 36px); }
section.catering__intro .normal__text p { font-size: clamp(14px, 1.4vw, 17px); margin-bottom: 12px; }
section.catering__intro .main____title h1 span {
  color: var(--theme-color) !important;
  font-weight: 500;
}
.catering__intro .normal__text p {
  color: rgba(255,255,255,0.88);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.catering__intro .catering__btn__box {
  justify-content: center;
}
/* Invert theme-btn-two on dark hero — transparent bg, gold border+text, readable */
.catering__intro .catering__btn__box .theme-btn-two {
  color: var(--theme-color);
  border-color: var(--theme-color);
  background: transparent;
}
.catering__intro .catering__btn__box .theme-btn-two:hover {
  color: var(--primary-color);
  background: var(--theme-color);
  border-color: var(--theme-color);
}

@media (max-width: 767px) {
  .catering__intro { padding: 60px 16px 70px; }
  .catering__intro .col-lg-6 { padding: 0; }
}
.catering__btn__box {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
  align-items: center;
}

/* ---------- Hero action group (twin-primary + scroll hint) ----------
   Two equal-weight primary CTAs side-by-side (Order Online, Request a Quote)
   with a subtle tertiary "Or browse the menu" text link below. Deliberate
   hierarchy: conversion actions get visual weight, navigation doesn't compete. */

.catering__hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
  margin-bottom: 14px;
}
.catering__hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  min-width: 220px;
  justify-content: center;
  box-shadow: 0 8px 30px -14px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.catering__hero__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.55);
}
.catering__hero__btn i {
  font-size: 18px;
  line-height: 1;
  color: var(--primary-color);
  transition: transform 0.25s ease;
}
/* Site has a global `span { color: var(--theme-color) }` rule that would
   make button text gold-on-gold (invisible). Force white for hero buttons. */
.catering__hero__btn span {
  color: #fff;
}
.catering__hero__btn:hover i {
  transform: scale(1.08);
}

/* Tertiary scroll hint — subtle text link with animated underline */
.catering__hero__scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 10px 16px;
  margin-top: 6px;
  position: relative;
  transition: color 0.25s ease;
}
.catering__hero__scroll-hint::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 1px;
  background: var(--theme-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.catering__hero__scroll-hint:hover {
  color: var(--theme-color) !important;
}
.catering__hero__scroll-hint:hover::after {
  transform: scaleX(1);
}
.catering__hero__scroll-hint i {
  font-size: 12px;
  color: var(--theme-color);
  transition: transform 0.3s ease;
}
.catering__hero__scroll-hint:hover i {
  transform: translateY(3px);
}

@media (max-width: 500px) {
  .catering__hero__btn {
    min-width: 0;
    width: 100%;
    padding: 16px 24px;
  }
  .catering__hero__actions { flex-direction: column; gap: 10px; }
}
/* Normalize both buttons to the same visual height.
   Site default: .theme-btn-one is padding 17px 47px (no border);
   .theme-btn-two is padding 11px 34px + 1px border. That gives btn-two a
   shorter box with text that appears to sit high. Force matching padding
   (minus 1px vertical to compensate for the border) so they line up. */
.catering__btn__box .theme-btn-one,
.catering__btn__box .theme-btn-two {
  line-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.catering__btn__box .theme-btn-two {
  padding: 16px 34px;
  color: var(--primary-color);
  border-color: var(--secondary-color);
}
.catering__btn__box .theme-btn-two:hover {
  color: #fff;
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* ---------- At-a-glance strip ---------- */

.catering__glance {
  background: var(--primary-color);
  color: #fff;
  border-top: 3px solid var(--theme-color);
  border-bottom: 3px solid var(--theme-color);
  position: relative;
  z-index: 2;
}
/* Docked variant — sits as a flex-0 child at the bottom of the hero section.
   Because the hero is exactly viewport-height (minus real header, measured
   by JS), the glance is always at the viewport's bottom edge. No sticky,
   no overlap, no magic padding. */
.catering__glance--docked {
  background: rgba(11, 19, 21, 0.78);
  border-top: 1px solid rgba(201, 171, 129, 0.35);
  border-bottom: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex: 0 0 auto;
}
.catering__glance .glance__item {
  padding: 28px 30px;
  text-align: center;
  border-right: 1px solid rgba(201, 171, 129, 0.25);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.catering__glance .row > div:last-child .glance__item { border-right: none; }
.glance__label {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--theme-color);
}
.glance__value {
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
}
@media (max-width: 991px) {
  /* 2-per-row layout on mobile/tablet — keeps trust cards compact enough to
     fit in the viewport alongside the hero content. */
  .catering__glance .glance__item {
    min-height: 80px;
    padding: 16px 14px;
  }
  .glance__label { font-size: 10px; letter-spacing: 0.18em; }
  .glance__value { font-size: 15px; }
  /* Divider borders: right border between pairs, bottom border between rows.
     Strip the default right border from even cells (right column of the 2x2)
     since :last-child only catches the bottom-right cell. */
  .catering__glance .row > .col-6:nth-child(odd) .glance__item {
    border-right: 1px solid rgba(201, 171, 129, 0.2);
  }
  .catering__glance .row > .col-6:nth-child(even) .glance__item {
    border-right: none;
  }
  .catering__glance .row > .col-6:nth-child(-n+2) .glance__item {
    border-bottom: 1px solid rgba(201, 171, 129, 0.2);
  }
}
@media (max-width: 767px) {
  .catering__glance .glance__item {
    min-height: 72px;
    padding: 12px 10px;
    gap: 4px;
  }
  .glance__value { font-size: 14px; }
}

/* ---------- PDF download feature ---------- */

.catering__pdf {
  /* Top of the menu zone gradient — starts at white, eases into a soft cream
     by the bottom. Flows into the menu section below for one continuous zone.
     Lighter than before because the old mix read as "too creamy" overall. */
  background: linear-gradient(180deg, #ffffff 0%, #faf2de 100%);
  padding: 60px 20px 40px;
}
.catering__pdf__card {
  max-width: 920px;
  margin: 0 auto;
  background: linear-gradient(180deg, #ffffff 0%, #fbf6e7 100%);
  border: 1px solid #eee3cd;
  border-left: 6px solid var(--theme-color);
  padding: 36px 44px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  box-shadow: 0 20px 40px -24px rgba(52, 74, 76, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  text-decoration: none !important;  /* it's now an <a> */
  color: inherit !important;
}
.catering__pdf__card::after {
  /* tiny gold flourish in the top-right corner */
  content: '';
  position: absolute;
  top: 18px; right: 18px;
  width: 28px; height: 6px;
  background: url(/site/templates/images/icons/title-icon.png) center / contain no-repeat;
  opacity: 0.6;
}
.catering__pdf__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 60px -20px rgba(52, 74, 76, 0.4);
  background: linear-gradient(180deg, #ffffff 0%, #f6ecd0 100%);
}
/* On card hover, change the button's bg directly rather than animating the
   site's :before/:after slide-in halves — at mid-transition they render a
   thin 1px line across the button which looks broken. Cleaner to just
   cross-fade bg + text color. */
.catering__pdf__card .theme-btn-one::before,
.catering__pdf__card .theme-btn-one::after {
  display: none !important;
}
.catering__pdf__card .theme-btn-one {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.catering__pdf__card:hover .theme-btn-one {
  background-color: #0B1315 !important;
  color: var(--theme-color) !important;
}
/* Also nudge the icon subtly on hover for tactile feedback */
.catering__pdf__card:hover .catering__pdf__icon {
  transform: scale(1.04);
}
.catering__pdf__icon {
  transition: transform 0.3s ease;
}
.catering__pdf__icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
  position: relative;
}
.catering__pdf__icon::before {
  /* gold outer ring */
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  opacity: 0.5;
}
.catering__pdf__content {
  min-width: 0;
}
.catering__pdf__script {
  font-family: var(--higer-secondary-font), 'Tangerine', cursive;
  font-size: 38px;
  font-weight: 700;
  line-height: 0.85;
  color: var(--theme-color);
  margin-bottom: 2px;
}
.catering__pdf__heading {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin: 0 0 8px 0;
}
.catering__pdf__meta {
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary-color);
  margin: 0;
}
.catering__pdf__meta .catering__pdf__dot {
  margin: 0 8px;
  color: var(--theme-color);
}
.catering__pdf__cta {
  flex-shrink: 0;
}
.catering__pdf__cta .theme-btn-one {
  white-space: nowrap;
}
.catering__pdf__cta .theme-btn-one i {
  font-size: 14px;
  margin-left: 6px;
}

@media (max-width: 767px) {
  .catering__pdf { padding: 40px 16px 0; }
  .catering__pdf__card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px 24px 32px;
    gap: 18px;
    border-left: none;
    border-top: 4px solid var(--theme-color);
  }
  .catering__pdf__icon { margin: 0 auto; }
  .catering__pdf__script { font-size: 32px; }
  .catering__pdf__heading { font-size: 22px; }
  .catering__pdf__cta .theme-btn-one { width: 100%; }
}

/* ---------- Menu section ---------- */

.catering__menu {
  /* Continues from the PDF section's soft-cream bottom, warms through the
     middle, then fades back to white at the bottom. This "white → cream → white"
     shape keeps the zone feeling subtle and premium rather than cream-heavy. */
  background: linear-gradient(180deg, #faf2de 0%, #f6ebd0 50%, #ffffff 100%);
  /* .see__pad only adds padding-top. Without padding-bottom here, the last
     .catering__menu__section margin collapses through and the body's #040707
     background shows through as a dark band before the next section. */
  padding-bottom: 90px;
  /* Fix anchor scroll on #menu — without this, the sticky header covers the
     section's eyebrow/title when you click the "View Menu" button. Bumped
     higher so the "Our Catering Menu" eyebrow sits fully in view. */
  scroll-margin-top: 180px;
}
#menu { scroll-margin-top: 180px; }

/* Constrain menu content width on wide screens — keeps prices close to item names */
.catering__menu .auto-container > .catering__menu__section,
.catering__menu .center__title {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Two-column menu layout on very wide screens (XXL only).
   Uses CSS multi-column so groups pack tightly within each column without
   forced height matching (which is grid's default row behavior).
   Each category card stays intact via break-inside: avoid.
   The section head spans both columns via column-span: all. */
@media (min-width: 1400px) {
  .catering__menu .auto-container > .catering__menu__section {
    max-width: 1200px;
    column-count: 2;
    column-gap: 24px;
  }
  .catering__menu__section > .catering__menu__section__head {
    -webkit-column-span: all;
            column-span: all;
    margin-bottom: 20px;
  }
  .catering__menu__section > .catering__menu__group {
    /* Don't let a category card split across columns */
    -webkit-column-break-inside: avoid;
            break-inside: avoid;
    /* Multi-column doesn't use grid gap, so give each card its own spacing */
    margin-bottom: 24px;
    /* Without this, the first card in each column gets a top margin that
       creates an unwanted offset */
    -webkit-margin-top: 0;
                margin-top: 0;
  }
}
.catering__menu__section {
  margin-bottom: 70px;
}
.catering__menu__section__head {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}
.catering__menu__section__script {
  font-family: var(--higer-secondary-font), 'Tangerine', cursive;
  font-size: 54px;
  font-weight: 700;
  line-height: 0.9;
  /* Brand's secondary brown — passes WCAG AA on every stop of the warm
     cream gradient (4.7:1 to 5.5:1). Thin script strokes need real contrast
     to be legible; gold was failing. */
  color: var(--secondary-color);
  margin-bottom: 4px;
}
/* Also darken the top "Our Catering Menu" eyebrow + the h1 span accent for
   the same reason — gold was marginal on cream, failing on the deeper stops. */
.catering__menu .sub____title {
  color: var(--secondary-color);
}
section.catering__menu .main____title h1 span {
  color: var(--secondary-color) !important;
}
.catering__menu__section__heading {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin: 0 0 8px 0;
}
.catering__menu__section__head::after {
  content: '';
  display: block;
  width: 70px;
  height: 15px;
  margin: 14px auto 0;
  background: url(/site/templates/images/icons/title-icon.png) center / contain no-repeat;
}

.catering__menu__group {
  background: #fff;
  border: 1px solid #eee3cd;
  padding: 36px 40px;
  margin-bottom: 24px;
  box-shadow: 0 3px 0 rgba(113, 91, 62, 0.05);
}
.catering__menu__group__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--primary-color);
  flex-wrap: wrap;
}
.catering__menu__group__head h3 {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin: 0;
}
.catering__menu__sizes {
  display: flex;
  gap: 36px;
  flex-shrink: 0;
}
.catering__menu__sizes span {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--secondary-color);
  min-width: 110px;
  text-align: right;
}
/* Single size/note label: don't force a min-width or left-align — let it
   shrink to content and stay flush right against the group head edge. */
.catering__menu__sizes span:only-child {
  min-width: 0;
  text-align: right;
}

.catering__menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.catering__menu__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  padding: 14px 0;
  align-items: baseline;
  border-bottom: 1px dotted #e0d0b2;
}
.catering__menu__item:last-child { border-bottom: none; padding-bottom: 4px; }

.catering__menu__item__name {
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--primary-color);
  line-height: 1.3;
}
.catering__menu__item__desc {
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 14px;
  color: #8a7963;
  font-style: italic;
  margin-top: 3px;
  line-height: 1.4;
  max-width: 52ch;
}
.catering__menu__item__prices {
  display: flex;
  gap: 36px;
  flex-shrink: 0;
}
.catering__menu__item__price {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--secondary-color);
  letter-spacing: 0.04em;
  min-width: 110px;
  text-align: right;
}
.catering__menu__item__prices .catering__menu__item__price:only-child { min-width: 0; }

@media (max-width: 767px) {
  .catering__menu__group { padding: 24px 20px; }
  .catering__menu__group__head h3 { font-size: 20px; }
  .catering__menu__sizes { width: 100%; justify-content: flex-start; gap: 24px; }
  .catering__menu__sizes span { min-width: 0; text-align: left; }
  .catering__menu__item { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .catering__menu__item__prices { gap: 24px; }
  .catering__menu__item__price { min-width: 0; text-align: left; }
}

/* ---------- Service details + add-ons ---------- */

.catering__service {
  /* Soft cream — steps up lighter from the menu's warm taupe above, creating
     visible section rhythm. The dark-teal add-ons card sitting inside this
     section now gets real contrast. */
  background: #fdfbf7;
  /* Same see__pad gap issue as .catering__menu */
  padding-bottom: 90px;
  /* The site's .auto-container has no horizontal padding; it relies on the
     outer .boxed_wrapper's padding which can get tight at certain widths.
     Force explicit side padding so the service list and add-ons card don't
     hit the viewport edges. */
  padding-left: 20px;
  padding-right: 20px;
}
.catering__service .row {
  /* Ensure a visible gutter between the two columns — some versions of the
     site's bootstrap.css reset the default gutter, making cols touch. */
  --bs-gutter-x: 40px;
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}
.catering__service .row > [class*="col-"] {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}
@media (min-width: 1200px) {
  .catering__service { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 991px) {
  .catering__service .row > [class*="col-"] + [class*="col-"] {
    margin-top: 32px;
  }
}
.catering__service__list {
  list-style: none;
  margin: 20px 0 0 0;
  padding: 0;
}
.catering__service__list li {
  padding: 16px 0 16px 34px;
  position: relative;
  border-bottom: 1px solid #f0e8d7;
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #3a3a3a;
}
.catering__service__list li:last-child { border-bottom: none; }
.catering__service__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  width: 18px;
  height: 2px;
  background: var(--theme-color);
}
.catering__service__list li strong {
  color: var(--primary-color);
  font-weight: 600;
}

.catering__addons {
  background: var(--primary-color);
  color: #fff;
  padding: 40px 44px;
  position: relative;
  border-top: 3px solid var(--theme-color);
}
.catering__addons__heading {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-color);
  margin: 0 0 22px 0;
}
.catering__addons__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 20px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  align-items: baseline;
}
.catering__addons__item:first-of-type { border-top: none; }
.catering__addons__item__name {
  grid-row: 1;
  grid-column: 1;
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.catering__addons__item__price {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 17px;
  color: var(--theme-color);
  letter-spacing: 0.04em;
  justify-self: end;
  white-space: nowrap;
}
.catering__addons__item__desc {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-top: 3px;
  font-style: italic;
}
/* Keep price on the right even at narrow widths — matches user preference.
   The grid's 1fr+auto handles narrow containers naturally. */

@media (max-width: 991px) {
  .catering__addons { margin-top: 40px; padding: 30px 28px; }
}

/* ---------- Two Ways to Order (primary conversion section) ----------
   Dual-card decision point. Each card is fully clickable (wrapping <a>),
   presents a distinct user intent, and uses the same visual treatment as
   the PDF download card for consistency. */

.catering__paths {
  background: #fff;
  padding: 80px 20px;
}
.catering__paths__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 54px;
}
.catering__paths__intro .sub____title {
  display: block;
  margin-bottom: 4px;
  color: var(--secondary-color);
}
.catering__paths__intro h2 {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin: 0;
  text-wrap: balance;
}
.catering__paths__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
.catering__paths__card {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #fbf6e7 100%);
  border: 1px solid #eee3cd;
  border-top: 4px solid var(--theme-color);
  padding: 48px 40px 44px;
  box-shadow: 0 12px 40px -24px rgba(52, 74, 76, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  text-decoration: none !important;
  color: inherit !important;
  position: relative;
  overflow: hidden;
}
.catering__paths__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(52, 74, 76, 0.35);
  border-top-color: var(--primary-color);
  background: linear-gradient(180deg, #ffffff 0%, #f6ecd0 100%);
}
/* Matching gold flourish in the top-right corner to echo the PDF card */
.catering__paths__card::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 6px;
  background: url(/site/templates/images/icons/title-icon.png) center / contain no-repeat;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.catering__paths__card:hover::after {
  opacity: 0.9;
}
.catering__paths__card__icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin: 0 auto 22px;
  transition: transform 0.3s ease, background 0.3s ease;
  position: relative;
}
.catering__paths__card__icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.catering__paths__card:hover .catering__paths__card__icon {
  transform: scale(1.06);
}
.catering__paths__card:hover .catering__paths__card__icon::before {
  opacity: 1;
}
.catering__paths__card__label {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--secondary-color);
  margin-bottom: 10px;
  font-weight: 500;
}
.catering__paths__card__title {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--primary-color) !important;
  margin: 0 0 18px 0;
  line-height: 1.1;
}
.catering__paths__card__desc {
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin: 0 0 30px 0;
  flex-grow: 1;
  max-width: 320px;
  align-self: center;
}
.catering__paths__card__cta {
  align-self: center;
  margin-top: auto;
}
/* Make sure the card's hover triggers the button's bg cross-fade cleanly
   (same pattern as PDF card — no sliding half-animation line) */
.catering__paths__card .theme-btn-one::before,
.catering__paths__card .theme-btn-one::after {
  display: none !important;
}
.catering__paths__card .theme-btn-one {
  transition: background-color 0.3s ease, color 0.3s ease;
  padding: 18px 40px;
}
.catering__paths__card .theme-btn-one i {
  margin-left: 16px !important; /* overrides ms-3 (1rem) for a more generous gap */
  font-size: 14px;
}
.catering__paths__card:hover .theme-btn-one {
  background-color: #0B1315 !important;
  color: var(--theme-color) !important;
}

@media (max-width: 767px) {
  .catering__paths { padding: 50px 16px; }
  .catering__paths__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 440px;
  }
  .catering__paths__card { padding: 36px 26px 32px; }
  .catering__paths__intro { margin-bottom: 32px; }
  .catering__paths__intro h2 { font-size: 30px; }
  .catering__paths__card__title { font-size: 26px; }
}

/* ---------- Final CTA ---------- */

.catering__cta {
  padding: 0;
  margin-top: 0;
}
.catering__cta__bg {
  background-color: var(--primary-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding: 90px 20px;
}
.catering__cta__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(52,74,76,0.88) 0%, rgba(11,19,21,0.82) 100%);
}
.catering__cta__content {
  position: relative;
  z-index: 1;
  color: #fff;
  max-width: 780px;
  margin: 0 auto;
}
.catering__cta__content .sub____title {
  display: block;
  margin-bottom: 8px;
}
.catering__cta__heading {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 54px;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 6px 0 20px 0;
  line-height: 1.05;
}
.catering__cta__heading span { color: var(--theme-color); font-weight: 500; }
.catering__cta__lead {
  font-size: 18px;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 30px;
  opacity: 0.92;
}
.catering__cta .catering__btn__box { justify-content: center; }
.catering__cta .theme-btn-two {
  color: #fff;
  border-color: var(--theme-color);
}

/* Contact strip — primary closing for the page after the Two Paths decision.
   Phone + email as prominent touch targets with icon/label/value stack. */
.catering__cta__contact {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.catering__cta__contact__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  text-decoration: none !important;
  padding: 8px 16px;
  transition: transform 0.25s ease, color 0.25s ease;
  min-width: 220px;
}
.catering__cta__contact__item i {
  font-size: 26px;
  color: var(--theme-color);
  margin-bottom: 4px;
  transition: transform 0.25s ease;
}
.catering__cta__contact__item:hover {
  transform: translateY(-2px);
}
.catering__cta__contact__item:hover i {
  transform: scale(1.1);
}
.catering__cta__contact__label {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--theme-color);
}
.catering__cta__contact__value {
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
}
.catering__cta__contact__divider {
  width: 1px;
  height: 60px;
  background: rgba(201, 171, 129, 0.3);
  display: block;
}

@media (max-width: 767px) {
  .catering__cta__heading { font-size: 36px; }
  .catering__cta__bg { padding: 60px 16px; }
  .catering__cta__contact { gap: 28px; margin-top: 28px; }
  .catering__cta__contact__divider { display: none; }
  .catering__cta__contact__item { min-width: 0; width: 100%; }
  .catering__cta__contact__value { font-size: 16px; }
}

/* ---------- Thank-you page ---------- */

.catering__thanks {
  /* Same symmetric gradient as the inquire page so the two pages feel
     like one continuous flow. */
  background: linear-gradient(180deg, #ffffff 0%, #f8edd3 50%, #ffffff 100%);
  padding: 70px 20px 100px;
}

/* hero block */
.catering__thanks__hero {
  max-width: 760px;
  margin: 0 auto 80px;
  text-align: center;
}

/* animated check mark — gold disc with a slow ring pulse */
.catering__thanks__check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: 22px;
}
.catering__thanks__check__inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  font-size: 38px;
  box-shadow: 0 18px 36px -16px rgba(201, 171, 129, 0.55);
}
.catering__thanks__check__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--theme-color);
  opacity: 0.4;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .catering__thanks__check__inner {
    animation: catering-check-pop 0.55s cubic-bezier(0.18, 0.79, 0.32, 1.4) 0.05s both;
  }
  .catering__thanks__check__ring {
    animation: catering-check-ring 1.8s ease-out infinite;
  }
}
@keyframes catering-check-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes catering-check-ring {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.55); opacity: 0; }
}

.catering__thanks__script {
  font-family: var(--higer-secondary-font), 'Tangerine', cursive;
  font-size: 56px;
  font-weight: 700;
  color: var(--theme-color);
  line-height: 1;
  margin-bottom: 4px;
}
.catering__thanks__heading {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 56px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin: 0 0 18px 0;
  line-height: 1.05;
}
.catering__thanks__heading span {
  color: var(--theme-color);
  font-weight: 500;
}
.catering__thanks__lead {
  font-size: 19px;
  line-height: 1.65;
  color: #444;
  max-width: 580px;
  margin: 0 auto;
}

/* timeline section */
.catering__thanks__timeline {
  max-width: 880px;
  margin: 0 auto 90px;
}
.catering__thanks__timeline__head {
  text-align: center;
  margin-bottom: 50px;
}
.catering__thanks__timeline__head .sub____title { display: block; margin-bottom: 6px; }
.catering__thanks__timeline__head h2 {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 38px;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin: 0;
  line-height: 1.15;
}
.catering__thanks__timeline__head h2 span {
  color: var(--theme-color);
  font-weight: 500;
}

.catering__thanks__steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  position: relative;
  counter-reset: step;
  /* Constrain just the step list (not the timeline header above) so body text
     wraps at a comfortable line length on wide desktops. */
  max-width: 600px;
}
/* connector line down the side, behind the step numbers */
.catering__thanks__steps::before {
  content: '';
  position: absolute;
  left: 36px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--theme-color) 0%, rgba(201, 171, 129, 0.2) 100%);
}
.catering__thanks__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 22px 28px 22px 0;
  margin-bottom: 18px;
}
.catering__thanks__step:last-child { margin-bottom: 0; }
.catering__thanks__step__num {
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--theme-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--primary-color);
  position: relative;
  z-index: 2;
  box-shadow: 0 14px 30px -18px rgba(52, 74, 76, 0.25);
}
.catering__thanks__step__body {
  flex: 1;
  padding-top: 12px;
}
.catering__thanks__step__body h3 {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin: 0 0 8px 0;
  line-height: 1.25;
}
.catering__thanks__step__body p {
  font-size: 16px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* while you wait — engagement cards */
.catering__thanks__while {
  max-width: 1100px;
  margin: 0 auto 90px;
}
.catering__thanks__while__head {
  text-align: center;
  margin-bottom: 40px;
}
.catering__thanks__while__head .sub____title { display: block; margin-bottom: 6px; }
.catering__thanks__while__head h2 {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin: 0;
  line-height: 1.15;
}
.catering__thanks__while__head h2 span {
  color: var(--theme-color);
  font-weight: 500;
}
.catering__thanks__while__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.catering__thanks__while__card {
  display: flex;
  flex-direction: column;
  padding: 38px 36px 36px;
  background: #fff;
  border: 1px solid #eee3cd;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.catering__thanks__while__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--theme-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.catering__thanks__while__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -28px rgba(52, 74, 76, 0.35);
  border-color: var(--theme-color);
}
.catering__thanks__while__card:hover::before { transform: scaleX(1); }
.catering__thanks__while__card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fbf6e7;
  color: var(--theme-color);
  font-size: 24px;
  margin-bottom: 22px;
  transition: background 0.3s ease, color 0.3s ease;
}
.catering__thanks__while__card:hover .catering__thanks__while__card__icon {
  background: var(--theme-color);
  color: #fff;
}
.catering__thanks__while__card h3 {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin: 0 0 12px 0;
  line-height: 1.2;
}
.catering__thanks__while__card p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 26px 0;
  flex-grow: 1;
}
.catering__thanks__while__card__cta {
  align-self: flex-start;
}
/* Icons in CTA buttons need explicit breathing room - the Bootstrap ms-3
   utility on its own reads tight next to long arrow icons, and we want a
   consistent gap regardless of which Bootstrap version is loaded. */
.catering__thanks__while__card__cta > i {
  margin-left: 14px;
  font-size: 0.95em;
}
.catering__thanks__actions a > i {
  margin-right: 12px;
  font-size: 0.95em;
}

/* contact card */
.catering__thanks__contact {
  margin: 0 auto 60px;
  max-width: 980px;
}
.catering__thanks__contact__inner {
  background: var(--primary-color);
  padding: 60px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.catering__thanks__contact__inner::before,
.catering__thanks__contact__inner::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(201, 171, 129, 0.08);
  pointer-events: none;
}
.catering__thanks__contact__inner::before { top: -100px; left: -80px; }
.catering__thanks__contact__inner::after { bottom: -100px; right: -80px; }
.catering__thanks__contact__inner .sub____title { display: block; margin-bottom: 6px; position: relative; z-index: 1; }
.catering__thanks__contact__inner .sub____title span { color: var(--theme-color) !important; }
.catering__thanks__contact__heading {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 36px 0;
  position: relative;
  z-index: 1;
  line-height: 1.15;
}
.catering__thanks__contact__heading span {
  color: var(--theme-color);
  font-weight: 500;
}
.catering__thanks__contact__grid {
  display: inline-flex;
  align-items: center;
  gap: 50px;
  position: relative;
  z-index: 1;
}
.catering__thanks__contact__item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  color: #fff !important;
  min-width: 220px;
  padding: 16px 12px;
  transition: transform 0.25s ease;
}
.catering__thanks__contact__item:hover { transform: translateY(-3px); }
.catering__thanks__contact__item i {
  font-size: 28px;
  color: var(--theme-color);
  margin-bottom: 6px;
}
.catering__thanks__contact__label {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.catering__thanks__contact__value {
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 19px;
  letter-spacing: 0.04em;
  color: #fff;
}
.catering__thanks__contact__divider {
  width: 1px;
  height: 70px;
  background: rgba(201, 171, 129, 0.4);
}

/* return actions */
.catering__thanks__actions {
  text-align: center;
  margin-top: 0;
  padding: 10px 0 0 0;
}
/* Both action buttons sit side-by-side. The site's stock btn-one has padding
   17px 47px and no border; btn-two has padding 11px 34px + 1px border, so
   without normalization they render at clearly different sizes. Force matching
   dimensions by setting a shared min-width and padding on both, then offset
   btn-two's padding by 1px to account for its border so the rendered box
   stays the same height. */
.catering__thanks__actions a {
  min-width: 200px;
  padding: 17px 28px !important;
  font-size: 16px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* The site's global .theme-btn-two is white text on transparent bg with brown
   border - designed for dark hero sections. On the white-gradient thank-you bg
   it would render invisible. Override with teal text + brown border, invert
   on hover. The 1px padding offset compensates for the 1px border so total
   rendered height matches btn-one. */
.catering__thanks__actions .theme-btn-two {
  padding: 16px 28px !important;
  color: var(--primary-color);
  background: transparent;
  border: 1px solid var(--secondary-color);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.catering__thanks__actions .theme-btn-two:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* responsive */
@media (max-width: 991px) {
  .catering__thanks__heading { font-size: 44px; }
  .catering__thanks__script { font-size: 48px; }
  .catering__thanks__timeline__head h2,
  .catering__thanks__while__head h2 { font-size: 30px; }
  .catering__thanks__contact__heading { font-size: 28px; }
}
@media (max-width: 767px) {
  .catering__thanks { padding: 50px 16px 70px; }
  .catering__thanks__hero { margin-bottom: 60px; }
  .catering__thanks__heading { font-size: 36px; }
  .catering__thanks__script { font-size: 42px; }
  .catering__thanks__lead { font-size: 17px; }

  .catering__thanks__steps::before { left: 26px; }
  .catering__thanks__step {
    gap: 18px;
    padding: 16px 0;
  }
  .catering__thanks__step__num {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    font-size: 17px;
  }
  .catering__thanks__step__body { padding-top: 6px; }
  .catering__thanks__step__body h3 { font-size: 19px; }

  .catering__thanks__while__grid { grid-template-columns: 1fr; gap: 20px; }
  .catering__thanks__while__card { padding: 30px 26px 28px; }

  .catering__thanks__contact__inner { padding: 44px 22px; }
  .catering__thanks__contact__heading { font-size: 24px; margin-bottom: 28px; }
  .catering__thanks__contact__grid { flex-direction: column; gap: 8px; }
  .catering__thanks__contact__divider { display: none; }
  .catering__thanks__contact__item { min-width: 0; width: 100%; }

  /* Buttons stack vertically on phones so each one is comfortable to tap. */
  .catering__thanks__actions a {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 8px auto;
  }
  .catering__thanks__actions a + a { margin-left: auto; }
}

/* ---------- Inquire page (mockup form, disabled) ---------- */

.catering__inquire {
  /* Symmetric white → soft cream → white gradient. Subtle warm tint in the
     middle where the form card sits, fading back to white at top and bottom
     so it blends cleanly into the page above and the footer below. */
  background: linear-gradient(180deg, #ffffff 0%, #f8edd3 50%, #ffffff 100%);
  padding: 50px 20px 100px;
}

.catering__inquire__notice {
  max-width: 820px;
  margin: 0 auto 40px;
  padding: 16px 22px;
  background: #fff8ec;
  border: 1px solid var(--theme-color);
  border-left: 4px solid var(--theme-color);
  color: var(--primary-color);
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
.catering__inquire__notice strong { color: var(--secondary-color); }

.catering__inquire__intro {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.catering__inquire__intro .sub____title { display: block; margin-bottom: 6px; }
/* Anchor the absolute ':after' flourish to .main____title itself instead of
   the viewport. Without position:relative here, the pseudo bubbles up to the
   nearest positioned ancestor (often the viewport), causing the flourish to
   render hanging off to the left of where it should be. */
.catering__intro .main____title,
.catering__inquire__intro .main____title,
.catering__thanks .main____title,
.catering__menu .main____title,
.catering__service .main____title {
  position: relative;
}
.catering__inquire__intro .main____title:after,
.catering__thanks .main____title:after {
  left: 50%;
  transform: translate(-50%);
}
.catering__inquire__intro p {
  color: #555;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
.catering__form input::placeholder,
.catering__form textarea::placeholder {
  color: #9a9a9a;
  opacity: 1;
}

/* Online Ordering "escape hatch" — for users who landed on the inquiry page
   but just want a quick order. Left-bordered card, lightning bolt icon, inline
   CTA on the right. Hover lifts and brightens. */
.catering__inquire__alt {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 820px;
  margin: 0 auto 30px;
  padding: 20px 28px;
  background: #fff;
  border: 1px solid #eee3cd;
  border-left: 4px solid var(--theme-color);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-color 0.25s ease, background 0.25s ease;
}
.catering__inquire__alt:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(52, 74, 76, 0.3);
  border-left-color: var(--primary-color);
  background: linear-gradient(180deg, #ffffff 0%, #fbf6e7 100%);
}
.catering__inquire__alt__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--theme-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.catering__inquire__alt__text {
  flex: 1;
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}
.catering__inquire__alt__text strong {
  display: block;
  color: var(--primary-color);
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 2px;
}
.catering__inquire__alt__cta {
  flex-shrink: 0;
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border: 1px solid var(--primary-color);
  transition: background 0.25s ease, color 0.25s ease;
}
.catering__inquire__alt:hover .catering__inquire__alt__cta {
  background: var(--primary-color);
  color: var(--theme-color);
}

@media (max-width: 767px) {
  .catering__inquire__alt {
    flex-direction: column;
    text-align: center;
    gap: 14px;
    padding: 22px 20px;
    margin: 0 16px 24px;
  }
  .catering__inquire__alt__cta { width: 100%; justify-content: center; }
}

.catering__inquire__body {
  max-width: 820px;
  margin: 0 auto;
}

.catering__form {
  /* White card pops on the warm gradient behind */
  background: #fff;
  padding: 40px 44px;
  border: 1px solid #eee3cd;
  box-shadow: 0 20px 50px -28px rgba(113, 91, 62, 0.25);
}

/* Breathing room between form fields at ALL widths (previously mobile-only).
   Bootstrap's g-3 gutter of 16px isn't enough when labels sit above inputs. */
.catering__form .row > [class*="col-"] {
  margin-bottom: 22px;
}
.catering__form .row > [class*="col-"]:last-child {
  margin-bottom: 0;
}
.catering__form fieldset { border: 0; padding: 0; margin: 0; }
.catering__form label {
  display: block;
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 6px;
}
.catering__form input[type="text"],
.catering__form input[type="email"],
.catering__form input[type="tel"],
.catering__form input[type="number"],
.catering__form input[type="date"],
.catering__form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d9ccb5;
  background: #fff;
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 15px;
  color: var(--primary-color);
  line-height: 1.4;
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.catering__form input:focus,
.catering__form textarea:focus {
  outline: none;
  border-color: var(--theme-color);
}
.catering__form__radios {
  display: flex;
  gap: 22px;
  padding-top: 8px;
}
.catering__form__radios label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #3a3a3a;
  margin: 0;
}

/* Disabled submit styling — gold button still visible, but muted */
.catering__form button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* When the full fieldset is disabled, dim the fields but keep them readable */
.catering__form fieldset[disabled] input,
.catering__form fieldset[disabled] textarea {
  background: #fbf7ef;
  color: #6b6b6b;
}

@media (max-width: 767px) {
  .catering__inquire { padding: 30px 0 60px; }
  .catering__form { padding: 24px 20px; }
  .catering__inquire__notice { margin-left: 16px; margin-right: 16px; padding: 14px 16px; font-size: 14px; }
  /* Radios pushed down slightly to match the field-above-field rhythm */
  .catering__form__radios { padding-top: 4px; }
}


/* ============================================================
   Bootstrap 5 leakage guard
   FormBuilder v57's render() emits its own bootstrap5/bootstrap.min.css
   inline via $form->styles. That CSS resets a bunch of base properties
   (body bg/color/font, link text-decoration, heading colors, etc.) that
   clobber the site's dark theme. Without these overrides, on catering
   pages where FormBuilder is embedded:
     - body bg → white (header looks invisible — header is transparent)
     - body color → #212529 (page-title h1 invisible against dark bg)
     - body font → system-ui (loses Josefin Sans)
     - <a> in nav/footer/etc → underlined (looks broken)
     - <h1>..<h6> → reset to dark
     - dropdown indicator icon font → may be reset

   Restore the site's defaults. catering.css only loads on catering
   pages, so none of these rules affect any other page.
   ============================================================ */
body {
  background: #040707 !important;
  color: #efefef !important;
  font-family: 'Josefin Sans', sans-serif !important;
  line-height: 26px !important;
}

/* Restore site link styling (no underline) on chrome/structural links.
   Scope to areas OUTSIDE the FormBuilder embed so form internals keep
   their own Bootstrap link styling if/where it matters. */
.main-header a,
.main-header a:hover,
.main-header a:focus,
.mobile-menu a,
.mobile-menu a:hover,
.main-footer a,
.main-footer a:hover,
.main-footer a:focus,
.page-title a,
.catering__inquire__alt,
.catering__inquire__alt:hover {
  text-decoration: none !important;
}

/* Page-title heading - restore site default (white) over any Bootstrap reset */
.page-title h1,
.page-title .title h1 {
  color: #fff !important;
}

/* Font Awesome icon font defense. Bootstrap doesn't directly touch FA but
   the cascade chaos with system-ui can affect inheritance into <i> tags. */
.main-header [class^="fa-"],
.main-header [class*=" fa-"],
.main-header .fa, .main-header .fas, .main-header .far, .main-header .fal, .main-header .fab,
.mobile-menu [class^="fa-"], .mobile-menu [class*=" fa-"],
.main-footer [class^="fa-"], .main-footer [class*=" fa-"],
.dropdown-btn [class^="fa-"], .dropdown-btn [class*=" fa-"] {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
}


/* ============================================================
   FormBuilder embed styling (catering_inquiry form, v57+ output)

   FormBuilder produces:
   .FormBuilder                  (form wrapper, DIV not FORM in v57)
   .Inputfields                  (DIV containing fields)
   .Inputfield                   (DIV per field, inline-block at 50% width when columnWidth=50)
   .InputfieldColumnWidth        (added when columnWidth < 100)
   .InputfieldColumnWidthFirst   (marks the FIRST item in each row)
   .InputfieldStateRequired
   .InputfieldStateShowIf        (fields with conditional display - hide by default)
   .Inputfield_<name>            (e.g. .Inputfield_website for honeypot)
   .Inputfield<Type>             (e.g. InputfieldText, InputfieldSelect, InputfieldRadios)
   .InputfieldRadiosStacked      (UL containing the radio LIs)
   .InputfieldSubmit             (the submit row)

   Plus Bootstrap framework adds: form-control, form-select, btn-primary, etc.

   All rules scoped under .catering__inquire__body so they don't leak.
   ============================================================ */

/* Card wrapper */
.catering__inquire__body .FormBuilder {
  background: #fff;
  padding: 40px 44px;
  border: 1px solid #eee3cd;
  box-shadow: 0 20px 50px -28px rgba(113, 91, 62, 0.25);
}

.catering__inquire__body .Inputfields {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0; /* removes inline-block whitespace gap; child re-establishes its own font-size */
}

.catering__inquire__body .Inputfield {
  margin: 0 0 22px 0;
  padding: 0;
  font-size: 15px;
  vertical-align: top;
}

/* ---------- Honeypot ----------
   Off-screen so bots see it but humans don't. Uses the per-field-name class. */
.catering__inquire__body .Inputfield_website {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Column-width gutters ----------
   FormBuilder sets inline style="width: 50%" plus marks first-of-row with
   .InputfieldColumnWidthFirst. Items WITHOUT 'First' are second-of-row.
   Use that signal directly rather than a + sibling chain (which mis-targets
   subsequent rows). Box-sizing border-box so the inline 50% width includes
   our gutter padding. */
.catering__inquire__body .InputfieldColumnWidth {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 0;
}
.catering__inquire__body .InputfieldColumnWidthFirst {
  padding-left: 0;
  padding-right: 12px;
}

/* ---------- Labels ----------
   Oswald uppercase teal, matching the rest of the catering page. */
.catering__inquire__body .Inputfield > .InputfieldHeader,
.catering__inquire__body .Inputfield > label.InputfieldHeader,
.catering__inquire__body .Inputfield > label {
  display: block;
  font-family: var(--secondary-font), 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 6px;
}

/* Required asterisk - gold */
.catering__inquire__body .InputfieldStateRequired > .InputfieldHeader::after,
.catering__inquire__body .InputfieldStateRequired > label::after {
  content: ' *';
  color: var(--theme-color);
  font-weight: 700;
}

/* ---------- Inputs / textareas / selects ----------
   Includes overrides for Bootstrap's .form-control and .form-select.
   Reset Bootstrap defaults that would otherwise leak. */
.catering__inquire__body .Inputfield input[type="text"],
.catering__inquire__body .Inputfield input[type="email"],
.catering__inquire__body .Inputfield input[type="tel"],
.catering__inquire__body .Inputfield input[type="number"],
.catering__inquire__body .Inputfield input[type="date"],
.catering__inquire__body .Inputfield input[type="time"],
.catering__inquire__body .Inputfield input[type="datetime-local"],
.catering__inquire__body .Inputfield textarea,
.catering__inquire__body .Inputfield select,
.catering__inquire__body .Inputfield .form-control,
.catering__inquire__body .Inputfield .form-select,
.catering__inquire__body .Inputfield .custom-select {
  width: 100% !important;
  height: auto !important;
  min-height: 48px;
  padding: 12px 14px !important;
  border: 1px solid #d9ccb5 !important;
  background-color: #fbf7ef !important;  /* cream tint matching the mockup */
  font-family: var(--primary-font), 'Josefin Sans', sans-serif !important;
  font-size: 15px !important;
  color: var(--primary-color) !important;
  line-height: 1.4 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* Cream placeholder (slightly muted) */
.catering__inquire__body .Inputfield input::placeholder,
.catering__inquire__body .Inputfield textarea::placeholder {
  color: #9a8d76;
  opacity: 1;
}

.catering__inquire__body .Inputfield textarea,
.catering__inquire__body .Inputfield textarea.form-control {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}
/* Larger min-height for the 4-row Special Requests textarea so it matches the mockup */
.catering__inquire__body .Inputfield textarea[rows="4"],
.catering__inquire__body .Inputfield_special_requests textarea {
  min-height: 180px;
}

.catering__inquire__body .Inputfield input:focus,
.catering__inquire__body .Inputfield textarea:focus,
.catering__inquire__body .Inputfield select:focus,
.catering__inquire__body .Inputfield .form-control:focus,
.catering__inquire__body .Inputfield .form-select:focus {
  outline: none !important;
  border-color: var(--theme-color) !important;
  box-shadow: none !important;
}

/* Custom dropdown caret (since we strip the native one) */
.catering__inquire__body .Inputfield select,
.catering__inquire__body .Inputfield .form-select,
.catering__inquire__body .Inputfield .custom-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23344a4c' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
  padding-right: 40px !important;
  cursor: pointer;
}

/* ============================================================
   Nice Select override
   The site has nice-select.css + JS that auto-replaces native <select>
   elements with a custom <div class="nice-select"> UI. The native select
   is hidden via display:none. We need to style the .nice-select wrapper
   to match the rest of the form's inputs.
   ============================================================ */
.catering__inquire__body .Inputfield .nice-select {
  display: block !important;
  width: 100% !important;
  height: 48px;
  line-height: 24px;
  padding: 11px 40px 11px 14px !important;
  border: 1px solid #d9ccb5 !important;
  background-color: #fbf7ef !important;  /* cream tint matching the mockup */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23344a4c' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
  font-family: var(--primary-font), 'Josefin Sans', sans-serif !important;
  font-size: 15px !important;
  color: var(--primary-color) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  position: relative;
}
.catering__inquire__body .Inputfield .nice-select.open,
.catering__inquire__body .Inputfield .nice-select:focus {
  border-color: var(--theme-color) !important;
  outline: none !important;
}
/* Hide the default Nice Select arrow (we use background-image instead) */
.catering__inquire__body .Inputfield .nice-select::after {
  display: none !important;
}
/* The current selected text */
.catering__inquire__body .Inputfield .nice-select .current {
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 15px;
  color: var(--primary-color);
}
/* Dropdown panel */
.catering__inquire__body .Inputfield .nice-select .list {
  width: 100%;
  margin: 4px 0 0;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #d9ccb5;
  border-radius: 0;
  box-shadow: 0 12px 32px -16px rgba(113, 91, 62, 0.35);
  max-height: 280px;
  overflow-y: auto;
  /* Lift the open dropdown above sibling form fields. Without this the
     native time input that sits below event_type renders THROUGH the
     dropdown options because Nice Select's default z-index doesn't
     account for native HTML5 date/time inputs (which paint on a higher
     stacking context in Chrome). */
  z-index: 100;
}
/* The wrapper itself needs a stacking context when open so the absolutely
   positioned .list sits above neighbours regardless of source order. */
.catering__inquire__body .Inputfield .nice-select.open {
  z-index: 100;
  position: relative;
}
/* Each option in the dropdown */
.catering__inquire__body .Inputfield .nice-select .option {
  padding: 10px 14px;
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 15px;
  color: var(--primary-color);
  line-height: 1.4;
  min-height: 0;
  cursor: pointer;
}
.catering__inquire__body .Inputfield .nice-select .option:hover,
.catering__inquire__body .Inputfield .nice-select .option.focus,
.catering__inquire__body .Inputfield .nice-select .option.selected.focus {
  background: #fdfaf2;
  color: var(--primary-color);
}
.catering__inquire__body .Inputfield .nice-select .option.selected {
  font-weight: 500;
  color: var(--primary-color);
}

/* ---------- Description / notes ---------- */
.catering__inquire__body .Inputfield .description,
.catering__inquire__body .Inputfield .notes,
.catering__inquire__body .Inputfield .form-text {
  font-size: 13px;
  color: #6b6b6b;
  margin-top: 6px;
  font-style: italic;
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
}

/* ---------- Radios ----------
   FormBuilder renders <ul class="InputfieldRadiosStacked"><li class="form-check">.
   Override the stacked default to inline so they read as "Delivery / Pickup". */
.catering__inquire__body .InputfieldRadios .InputfieldContent {
  padding-top: 4px;
}
.catering__inquire__body .InputfieldRadiosStacked,
.catering__inquire__body .InputfieldRadios .InputfieldContent ul {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.catering__inquire__body .InputfieldRadiosStacked > li,
.catering__inquire__body .InputfieldRadios .form-check {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.catering__inquire__body .InputfieldRadios .InputfieldContent label,
.catering__inquire__body .InputfieldRadios .form-check-label,
.catering__inquire__body .InputfieldRadios li label {
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #3a3a3a;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.catering__inquire__body .InputfieldRadios input[type="radio"],
.catering__inquire__body .InputfieldRadios .form-check-input {
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  position: static !important;
  accent-color: var(--theme-color);
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid #b8a78a;
  border-radius: 50%;
  background-color: #fff;
  background-image: none !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.catering__inquire__body .InputfieldRadios input[type="radio"]:hover,
.catering__inquire__body .InputfieldRadios .form-check-input:hover {
  border-color: var(--theme-color);
}
.catering__inquire__body .InputfieldRadios input[type="radio"]:checked,
.catering__inquire__body .InputfieldRadios .form-check-input:checked {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  box-shadow: inset 0 0 0 3px #fff !important;
}
.catering__inquire__body .InputfieldRadios input[type="radio"]:focus-visible,
.catering__inquire__body .InputfieldRadios .form-check-input:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 2px;
}

/* ---------- Conditional field visibility ----------
   Default-hide showIf fields. FormBuilder JS will reveal them when the
   condition is met (e.g. service_type=Delivery). If JS doesn't fire, the
   field stays hidden - which is safer than always-visible irrelevant fields.

   When FormBuilder reveals the field (sets display:block via JS), animate
   the entrance with a slide+fade. CSS can't transition display itself, so
   we run an animation only on the reveal - the hide is instant which is
   fine because the user has just clicked away from Delivery. */
.catering__inquire__body .InputfieldStateShowIf {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .catering__inquire__body .InputfieldStateShowIf:not([style*="display: none"]):not([style*="display:none"]) {
    animation: cateringSlideDown 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    transform-origin: top;
  }
  @keyframes cateringSlideDown {
    from {
      opacity: 0;
      transform: translateY(-8px) scaleY(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scaleY(1);
    }
  }
}

/* ---------- Submit button ----------
   Gold theme-btn-one styling, centered horizontally. Override Bootstrap's
   btn / btn-primary as well as the bare button. */
.catering__inquire__body .InputfieldSubmit {
  margin-top: 14px;
  text-align: center;
  width: 100% !important;
  padding: 0 !important;
  display: block;
}
.catering__inquire__body .InputfieldSubmit > .InputfieldContent {
  display: block;
  text-align: center;
}
.catering__inquire__body .InputfieldSubmit button,
.catering__inquire__body .InputfieldSubmit .btn,
.catering__inquire__body .InputfieldSubmit .btn-primary,
.catering__inquire__body button[type="submit"] {
  display: inline-block;
  background: var(--theme-color) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--secondary-font), 'Oswald', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background 0.2s ease;
  box-shadow: none !important;
  width: auto !important;
}
.catering__inquire__body .InputfieldSubmit button:hover,
.catering__inquire__body .InputfieldSubmit .btn:hover,
.catering__inquire__body .InputfieldSubmit .btn-primary:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* ---------- Validation errors ---------- */
.catering__inquire__body .Inputfield .ui-state-error,
.catering__inquire__body .Inputfield .InputfieldError,
.catering__inquire__body .Inputfield .input-error,
.catering__inquire__body .Inputfield .invalid-feedback,
.catering__inquire__body .NoticeError {
  color: #c0392b;
  font-size: 13px;
  margin-top: 4px;
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  display: block;
}
.catering__inquire__body .Inputfield.InputfieldStateError input,
.catering__inquire__body .Inputfield.InputfieldStateError textarea,
.catering__inquire__body .Inputfield.InputfieldStateError select {
  border-color: #c0392b !important;
}

/* ---------- Success message ---------- */
.catering__inquire__body .FormBuilderSuccess,
.catering__inquire__body .FormBuilderMessage {
  background: #f5efe2;
  border: 1px solid var(--theme-color);
  padding: 16px 20px;
  font-family: var(--primary-font), 'Josefin Sans', sans-serif;
  color: var(--primary-color);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .catering__inquire__body .FormBuilder {
    padding: 32px 28px;
  }
}
@media (max-width: 767px) {
  .catering__inquire__body .FormBuilder {
    padding: 24px 20px;
  }
  /* Stack column-width fields full-width on mobile.
     IMPORTANT: exclude .InputfieldStateHidden so FormBuilder's JS-managed
     showIf hide (display:none on inline style) keeps working - otherwise
     conditional fields force-render visible at this breakpoint. */
  .catering__inquire__body .InputfieldColumnWidth:not(.InputfieldStateHidden),
  .catering__inquire__body .InputfieldColumnWidthFirst:not(.InputfieldStateHidden) {
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .catering__inquire__body .InputfieldRadiosStacked,
  .catering__inquire__body .InputfieldRadios .InputfieldContent ul {
    gap: 16px 22px;
  }
}