/* ==========================================================================
   BARTOLO MOBILE OVERRIDE — Single Source of Truth
   ==========================================================================
   Loaded LAST to override all other stylesheets and inline styles.
   All rules scoped to max-width: 767px.
   ========================================================================== */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------
     0. GLOBAL RESETS
     ------------------------------------------------------------------ */
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
  }

  img,
  video,
  svg,
  iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ------------------------------------------------------------------
     1. TYPOGRAPHY — readable, not shouty
     ------------------------------------------------------------------ */
  h1 {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
  }

  h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }

  h4 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  p,
  li {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }

  /* ------------------------------------------------------------------
     2. HEADER — compact 56px bar, centered logo
     ------------------------------------------------------------------ */
  .site-header {
    padding: 0 !important;
  }

  .header-inner {
    height: 56px !important;
    min-height: unset !important;
    padding: 0 14px !important;
  }

  .header-logo-img,
  .header-logo .custom-logo {
    height: 34px !important;
    max-height: 34px !important;
    width: auto !important;
  }

  .hamburger {
    width: 44px !important;
    height: 44px !important;
    padding: 8px !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Hide header CTA button on mobile — drawer has it */
  .header-cta {
    display: none !important;
  }

  /* Skip-to-content: offscreen */
  .skip-to-content {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
  }

  /* ------------------------------------------------------------------
     3. HERO SECTIONS — all pages
     ------------------------------------------------------------------ */

  /* Homepage hero slideshow */
  .hero-slideshow {
    height: 50vh !important;
    min-height: 300px !important;
    max-height: 420px !important;
  }

  .hero-slide-content {
    padding: 16px !important;
    padding-top: 48px !important;
  }

  .hero-quote p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    padding: 0 8px !important;
  }

  /* Hero heading bar below slideshow */
  .hero-heading-bar {
    padding: 16px 0 20px !important;
  }

  .hero-title {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
    padding: 0 16px !important;
  }

  /* Hero CTA buttons — compact pills, NOT full-width blocks */
  .hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 16px !important;
    width: 100% !important;
    align-items: center !important;
  }

  .hero-cta-btn {
    width: auto !important;
    min-width: 200px !important;
    max-width: 280px !important;
    padding: 11px 28px !important;
    font-size: 0.8125rem !important;
    min-height: 42px !important;
    text-align: center !important;
    justify-content: center !important;
    display: inline-flex !important;
  }

  /* Inner page heroes (events, catering, blog, careers, contact) */
  .inner-hero,
  .page-hero,
  .blog-hero,
  .careers-hero,
  .contact-hero,
  .events-hero,
  .catering-hero,
  [class*="-hero-section"] {
    min-height: 200px !important;
    max-height: 50vh !important;
    padding: 48px 16px 32px !important;
  }

  .inner-hero h1,
  .page-hero h1,
  .blog-hero h1,
  .careers-hero h1,
  .contact-hero h1,
  .events-hero h1,
  .catering-hero h1,
  [class*="-hero-section"] h1 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  .inner-hero p,
  .page-hero p,
  .blog-hero p,
  .careers-hero p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }

  /* Hero buttons on inner pages — compact pills */
  .hero-btn-gold,
  .hero-btn-outline,
  [class*="hero-btn"] {
    width: auto !important;
    min-width: 180px !important;
    max-width: 260px !important;
    padding: 10px 24px !important;
    font-size: 0.8125rem !important;
    min-height: 40px !important;
    display: inline-flex !important;
    justify-content: center !important;
  }

  /* ------------------------------------------------------------------
     4. BUTTONS — pill style, not full-width blocks
     ------------------------------------------------------------------ */
  .btn-primary,
  .btn-secondary,
  .btn-gold {
    width: auto !important;
    min-width: 180px !important;
    max-width: 300px !important;
    min-height: 44px !important;
    padding: 11px 28px !important;
    font-size: 0.8125rem !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Drawer CTA stays full-width in the mobile drawer */
  .drawer-cta .btn-primary,
  .drawer-cta .btn-gold,
  .mobile-drawer .btn-primary,
  .mobile-drawer .btn-gold {
    width: 100% !important;
    max-width: none !important;
  }

  /* Button groups: center items */
  .btn-group,
  .button-group,
  .cta-group,
  .hero-ctas,
  .reserve-ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Form submit buttons — these CAN be full-width */
  .btn-submit-inquiry,
  .btn-enquire,
  form .btn-primary,
  form .btn-gold,
  form [type="submit"],
  .contact-form .btn-primary,
  .inquiry-form .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ------------------------------------------------------------------
     5. SECTION PADDING — consistent and compact
     ------------------------------------------------------------------ */
  section,
  [class*="-section"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .section-padding {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .page-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ------------------------------------------------------------------
     6. GRIDS — single column on mobile
     ------------------------------------------------------------------ */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Keep 2-col for small card grids (categories, specials) */
  .category-grid,
  .specials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Instagram grid: 3 columns */
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }

  /* ------------------------------------------------------------------
     7. PROOF STRIP / STATS
     ------------------------------------------------------------------ */
  .proof-strip {
    padding: 20px 8px !important;
  }

  .proof-strip-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 8px !important;
  }

  .proof-strip-item {
    flex: 0 0 auto !important;
    min-width: 70px !important;
    padding: 0 8px !important;
    text-align: center !important;
  }

  .proof-strip-number {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
  }

  .proof-strip-label {
    font-size: 0.625rem !important;
    white-space: nowrap !important;
  }

  .proof-strip-divider {
    display: none !important;
  }

  /* Careers hero stats row */
  .careers-hero .stat,
  .hero-stats .stat,
  [class*="hero-stat"] {
    padding: 0 6px !important;
  }

  .careers-hero .stat-number,
  .hero-stats .stat-number,
  [class*="stat-number"] {
    font-size: 1.1rem !important;
  }

  .careers-hero .stat-label,
  .hero-stats .stat-label,
  [class*="stat-label"] {
    font-size: 0.6rem !important;
  }

  /* ------------------------------------------------------------------
     8. FOOTER — centered, stacked
     ------------------------------------------------------------------ */
  .footer-inner {
    padding: 32px 16px 24px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center !important;
  }

  .footer-social {
    justify-content: center !important;
  }

  .footer-social a {
    width: 44px !important;
    height: 44px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
  }

  .footer-legal {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .footer-heading {
    text-align: center !important;
  }

  .footer-logo-img {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ------------------------------------------------------------------
     9. REVIEWS — horizontal carousel
     ------------------------------------------------------------------ */
  .reviews-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
  }

  .reviews-grid::-webkit-scrollbar {
    display: none !important;
  }

  .review-card {
    flex: 0 0 82vw !important;
    max-width: 310px !important;
    scroll-snap-align: start !important;
  }

  /* ------------------------------------------------------------------
     10. EVENTS PAGE
     ------------------------------------------------------------------ */
  .events-hero h1 {
    font-size: 1.4rem !important;
  }

  /* Horizontal scroll track for moments — leave as carousel */
  .moments-track {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }

  .moments-track > * {
    scroll-snap-align: start !important;
  }

  /* Event cards stack single column */
  .events-grid,
  .event-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ------------------------------------------------------------------
     11. CATERING PAGE
     ------------------------------------------------------------------ */
  .catering-hero h1,
  [class*="catering"] h1 {
    font-size: 1.4rem !important;
  }

  /* Service cards single column */
  .services-grid,
  .catering-services {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Inquiry form buttons full-width within their container */
  .inquiry-form .btn-primary,
  .inquiry-form .btn-gold,
  .btn-submit-inquiry {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }

  /* Service enquire button — compact pill, not full-width */
  .btn-enquire,
  .services-enquire-wrap .btn-enquire {
    width: auto !important;
    min-width: 180px !important;
    max-width: 260px !important;
    padding: 10px 24px !important;
    font-size: 0.8125rem !important;
    display: inline-flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .services-enquire-wrap {
    text-align: center !important;
  }

  /* ------------------------------------------------------------------
     12. MENU PAGE
     ------------------------------------------------------------------ */
  /* Category filter pills: horizontal scroll */
  .menu-categories,
  .menu-filters,
  [class*="menu-cat"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    gap: 8px !important;
  }

  .menu-categories::-webkit-scrollbar,
  .menu-filters::-webkit-scrollbar {
    display: none !important;
  }

  /* Menu items table/list: readable */
  .menu-item-row,
  .menu-list-item {
    padding: 10px 0 !important;
  }

  .menu-item-name {
    font-size: 0.9375rem !important;
  }

  .menu-item-price {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
  }

  /* ------------------------------------------------------------------
     13. VISIT US PAGE
     ------------------------------------------------------------------ */
  .vu-hero-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  .vu-hero-subtitle {
    font-size: 0.875rem !important;
  }
  .location-card,
  .location-block {
    padding: 20px 16px !important;
  }

  .location-card h3,
  .location-block h3 {
    font-size: 1.1rem !important;
  }

  /* Map container: full width, shorter */
  .map-container,
  .location-map,
  [class*="map-wrap"] {
    height: 250px !important;
    min-height: 200px !important;
  }

  .map-container iframe,
  .location-map iframe {
    height: 250px !important;
  }

  /* ------------------------------------------------------------------
     14. CONTACT PAGE
     ------------------------------------------------------------------ */
  .contact-hero h1 {
    font-size: 1.4rem !important;
  }

  .contact-info-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .contact-form {
    padding: 20px 16px !important;
  }

  .contact-form textarea {
    min-height: 120px !important;
  }

  /* ------------------------------------------------------------------
     15. BLOG PAGE
     ------------------------------------------------------------------ */
  .blog-hero h1 {
    font-size: 1.4rem !important;
  }

  .blog-grid,
  .posts-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .blog-card,
  .post-card {
    max-width: 100% !important;
  }

  .blog-card-img,
  .post-card-img {
    aspect-ratio: 16/9 !important;
  }

  /* ------------------------------------------------------------------
     16. CAREERS PAGE
     ------------------------------------------------------------------ */
  .careers-hero h1 {
    font-size: 1.4rem !important;
  }

  .careers-hero .hero-subtitle,
  .careers-hero p {
    font-size: 0.875rem !important;
  }

  /* Benefits / why-join grid */
  .benefits-grid,
  .why-join-grid,
  [class*="benefits"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Positions list */
  .positions-grid,
  .positions-list,
  .open-positions {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .position-card {
    padding: 16px !important;
  }

  /* ------------------------------------------------------------------
     17. NEWSLETTER / STAY IN THE LOOP
     ------------------------------------------------------------------ */
  .newsletter-section,
  [class*="newsletter"] {
    padding: 32px 16px !important;
  }

  .newsletter-form {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .newsletter-form input[type="email"] {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }

  .newsletter-form button,
  .newsletter-form [type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
  }

  /* ------------------------------------------------------------------
     18. FORMS — comfortable touch targets
     ------------------------------------------------------------------ */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* prevents iOS zoom */
    min-height: 48px !important;
    padding: 10px 14px !important;
    width: 100% !important;
  }

  /* ------------------------------------------------------------------
     19. WHATSAPP FAB
     ------------------------------------------------------------------ */
  .whatsapp-fab {
    bottom: 16px !important;
    right: 16px !important;
    width: 50px !important;
    height: 50px !important;
    z-index: 9999 !important;
  }

  .whatsapp-fab svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* ------------------------------------------------------------------
     20. UTILITY: prevent any element from causing overflow
     ------------------------------------------------------------------ */
  .page-container,
  main,
  article {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Tables: horizontal scroll wrapper */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* Iframes: constrain */
  iframe {
    max-width: 100% !important;
  }

  /* ------------------------------------------------------------------
     21. TOUCH TARGETS — minimum 44x44
     ------------------------------------------------------------------ */
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
  }

  /* Exception: inline text links */
  p a,
  li a,
  .footer-legal a,
  .footer-nav-list a {
    min-height: unset !important;
  }

  /* ------------------------------------------------------------------
     22. ABOUT SECTION
     ------------------------------------------------------------------ */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .about-photo {
    aspect-ratio: 16/10 !important;
  }

  .about-text-col p {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }

  /* ------------------------------------------------------------------
     23. RESERVE / CTA SECTIONS
     ------------------------------------------------------------------ */
  .reserve-section {
    padding: 40px 16px !important;
  }

  .reserve-title {
    font-size: 1.25rem !important;
  }

  .reserve-text {
    font-size: 0.9375rem !important;
  }

  .reserve-ctas {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .reserve-ctas .btn-primary,
  .reserve-ctas .btn-secondary,
  .reserve-ctas .btn-gold {
    width: auto !important;
    min-width: 200px !important;
  }

  /* ------------------------------------------------------------------
     24. CATEGORY CARDS (Homepage)
     ------------------------------------------------------------------ */
  .category-card-title {
    font-size: 0.75rem !important;
    padding: 8px !important;
    letter-spacing: 0.03em !important;
  }

  .category-card-img-wrap {
    aspect-ratio: 1/1.15 !important;
  }

  /* ------------------------------------------------------------------
     25. SPECIALS / SEASONAL
     ------------------------------------------------------------------ */
  .specials-item-overlay {
    opacity: 1 !important;
  }

  .specials-item-name {
    font-size: 0.8125rem !important;
  }

  /* ------------------------------------------------------------------
     26. MOBILE DRAWER refinements
     ------------------------------------------------------------------ */
  .mobile-drawer {
    width: 88vw !important;
    max-width: 360px !important;
    padding: 24px 20px !important;
  }

  .drawer-nav-item a {
    font-size: 1.125rem !important;
    padding: 12px 0 !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  .drawer-close {
    width: 44px !important;
    height: 44px !important;
  }

  /* ------------------------------------------------------------------
     27. IMAGE SIZING FIXES — Global
     ------------------------------------------------------------------ */

  /* Global: all content images must be contained */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Exception: images used as full-cover backgrounds (position:absolute) */
  img[style*="position:absolute"],
  img[style*="position: absolute"],
  .hero-slide-img,
  .events-hero__img,
  .catering-hero-bg,
  .vu-hero-bg,
  .about-slide,
  .jazz-gallery img,
  .ce-card__bg,
  .svc-card-photo {
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ------------------------------------------------------------------
     27a. HOMEPAGE — Hero slideshow images
     ------------------------------------------------------------------ */
  .hero-slideshow {
    height: 50vh !important;
    min-height: 280px !important;
    max-height: 400px !important;
  }

  .hero-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ------------------------------------------------------------------
     27b. HOMEPAGE — Category cards (Explore Our Menu grid)
     ------------------------------------------------------------------ */
  .category-card-img-wrap {
    aspect-ratio: 1 / 1.15 !important;
    overflow: hidden !important;
  }

  .category-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ------------------------------------------------------------------
     27c. HOMEPAGE — Seasonal specials carousel
     ------------------------------------------------------------------ */
  .specials-card {
    flex: 0 0 72vw !important;
    min-width: 240px !important;
    max-width: 300px !important;
  }

  .specials-card-img-wrap {
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
  }

  .specials-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ------------------------------------------------------------------
     27d. HOMEPAGE — About section slideshow
     ------------------------------------------------------------------ */
  .about-slideshow {
    aspect-ratio: 4/3 !important;
    max-height: 300px !important;
    border-radius: 14px !important;
  }

  .about-slide {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .about-photo {
    aspect-ratio: 4/3 !important;
    max-height: 300px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  .about-bica-icon {
    width: 60px !important;
    bottom: -16px !important;
    right: -12px !important;
  }

  /* ------------------------------------------------------------------
     27e. HOMEPAGE — Instagram grid
     ------------------------------------------------------------------ */
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
  }

  .instagram-item {
    aspect-ratio: 1 !important;
    overflow: hidden !important;
  }

  .instagram-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ------------------------------------------------------------------
     27f. MENU PAGE — hero and item thumbnails
     ------------------------------------------------------------------ */
  .menu-hero,
  [class*="menu-hero"] {
    max-height: 50vh !important;
  }

  .menu-hero img,
  [class*="menu-hero"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Menu item thumbnails */
  .menu-item-img,
  .menu-list-item img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }

  /* ------------------------------------------------------------------
     27g. EVENTS PAGE — Hero image
     ------------------------------------------------------------------ */
  .events-hero {
    height: 45vh !important;
    min-height: 260px !important;
    max-height: 380px !important;
  }

  .events-hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 35% !important;
  }

  /* ------------------------------------------------------------------
     27h. EVENTS PAGE — Jazz gallery slideshow
     ------------------------------------------------------------------ */
  .jazz-gallery {
    aspect-ratio: 4/3 !important;
    max-height: 280px !important;
    width: 100% !important;
    border-radius: 12px !important;
  }

  .jazz-gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* ------------------------------------------------------------------
     27i. EVENTS PAGE — Event cards (upcoming events)
     ------------------------------------------------------------------ */
  .event-card {
    flex-direction: column !important;
  }

  .event-card__photo {
    width: 100% !important;
    height: 180px !important;
    min-height: unset !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    order: -1 !important;
  }

  /* ------------------------------------------------------------------
     27j. EVENTS PAGE — Calendar of Experiences cards
     ------------------------------------------------------------------ */
  .ce-card {
    min-height: 160px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .ce-card__bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ------------------------------------------------------------------
     27k. EVENTS PAGE — Moments track (infinite scroll)
     ------------------------------------------------------------------ */
  .moments-track__img {
    width: 200px !important;
    height: 260px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  /* ------------------------------------------------------------------
     27l. CATERING PAGE — Hero background
     ------------------------------------------------------------------ */
  .catering-hero {
    min-height: 320px !important;
    max-height: 50vh !important;
  }

  .catering-hero-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 40% !important;
  }

  /* ------------------------------------------------------------------
     27m. CATERING PAGE — Service cards (svc-card)
     ------------------------------------------------------------------ */
  .services-card-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .svc-card {
    min-height: 280px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .svc-card-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ------------------------------------------------------------------
     27n. CATERING PAGE — Subscribe / newsletter images
     ------------------------------------------------------------------ */
  .subscribe-img-col {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  .subscribe-img-col img {
    width: 100% !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ------------------------------------------------------------------
     27o. VISIT US PAGE — Hero background
     ------------------------------------------------------------------ */
  .vu-hero {
    min-height: 40vh !important;
    max-height: 350px !important;
  }

  .vu-hero-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ------------------------------------------------------------------
     27p. VISIT US PAGE — Location card images
     ------------------------------------------------------------------ */
  .vu-card-img {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 16/9 !important;
    max-height: 200px !important;
  }

  .vu-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* ------------------------------------------------------------------
     27q. BLOG PAGE — Featured/hero image
     ------------------------------------------------------------------ */
  .blog-hero,
  [class*="blog-hero"] {
    max-height: 50vh !important;
  }

  .blog-hero img,
  [class*="blog-hero"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ------------------------------------------------------------------
     27r. BLOG PAGE — Post card images
     ------------------------------------------------------------------ */
  .blog-card-img,
  .post-card-img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  .blog-card img,
  .post-card img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Blog subscribe section images */
  .subscribe-layout {
    grid-template-columns: 1fr !important;
  }

  /* ------------------------------------------------------------------
     27s. CAREERS PAGE — Hero background
     ------------------------------------------------------------------ */
  .careers-hero {
    max-height: 50vh !important;
  }

  .careers-hero img[style*="object-fit"] {
    object-position: center center !important;
  }

  /* ------------------------------------------------------------------
     27t. CAREERS PAGE — Job card banners (21/9 aspect ratio override)
     Inline style has aspect-ratio:21/9 which crops too aggressively
     on mobile. CSS !important overrides inline styles.
     ------------------------------------------------------------------ */
  .job-card-banner[style],
  .job-card-banner,
  div.job-card-banner,
  .job-card-item > div:first-child {
    aspect-ratio: 16/9 !important;
    max-height: 180px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .job-card-banner img,
  .job-card-banner img[style],
  .job-card-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* ------------------------------------------------------------------
     27u. CONTACT PAGE — Icon images (SVG icons)
     ------------------------------------------------------------------ */
  .contact-hero img,
  .contact-info-grid img {
    max-width: 26px !important;
    height: auto !important;
  }

  /* ------------------------------------------------------------------
     27v. GLOBAL — Prevent press logos / decorative images from
          breaking on mobile
     ------------------------------------------------------------------ */
  .press-logos img,
  [class*="press"] img,
  [class*="logo-strip"] img {
    max-height: 24px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Decorative watermark images — keep them small */
  img[aria-hidden="true"] {
    max-width: 80px !important;
    opacity: 0.1 !important;
  }

  /* ------------------------------------------------------------------
     27w. SAFETY NET — no image should ever overflow its container
     ------------------------------------------------------------------ */
  .page-container img,
  section img,
  article img,
  main img {
    max-width: 100% !important;
  }

}

/* ========== 28. FOOTER MOBILE — match inline-styled footer.php ========== */
  .site-footer > div > div {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }
  .site-footer > div:last-of-type > div {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
  }
  
/* ========== 29. HEADER MOBILE — compact ========== */
  .site-header { padding: 6px 0 !important; }
  .header-inner { padding: 0 12px !important; min-height: auto !important; }
  .header-logo-img, .custom-logo { max-width: 90px !important; }
  .skip-to-content { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }