/* ═════════════════════════════════════════════════════════════════════════
   MOBILE & TABLET RESPONSIVE OVERRIDES (theme/mobile.css)
   
   PURE CSS ARCHITECTURE:
   - components.js DOM is 100% UNTOUCHED (0 JS changes).
   - PC / Desktop view (>= 769px) is 100% UNTOUCHED and pristine.
   - Mobile styling is injected strictly inside (max-width: 768px).
/* Desktop fallback: hide mobile-only drawer sections on PC */
.menu-section__title,
.menu-section--socials,
.menu-section--connect,
.menu-section--cities,
.home-cards-dots {
  display: none;
}

@media only screen and (max-width: 768px) {
  /* ──────── COMPACT MOBILE HEADER & NAV ──────── */
  .site-nav {
    position: relative !important;
    padding-bottom: 0 !important;
    background-color: #fef5db !important;
  }

  .site-nav .social-priority {
    padding: 6px 0 !important;
  }

  .site-nav .site-nav__wrapper {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
  }

  .site-nav .site-nav__wrapper .logo {
    width: 210px !important;
    max-width: 72% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
  }

  .site-nav .site-nav__wrapper .logo img {
    width: 210px !important;
    height: 105px !important;
    max-height: 105px !important;
    margin-top: -40px !important;
    margin-bottom: -35px !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .site-nav .burger {
    margin-top: 0 !important;
    padding: 0.5rem !important;
    cursor: pointer;
  }

  /* ──────── SLIDING SIDE-DRAWER FROM LEFT (82% WIDTH, WARM CREAM BG) ──────── */
  .site-nav .menu-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 82vw !important;
    max-width: 340px !important;
    height: 100dvh !important;
    background-color: #fef5db !important;
    padding: 2.2rem 1.8rem 2.8rem 1.8rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 8px 0 25px rgba(0, 0, 0, 0.25) !important;
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s ease !important;
  }

  .site-nav .menu-content.active {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Soft Dim Backdrop on Right Side of Drawer */
  .site-nav .menu-content.active::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 82vw !important;
    width: 18vw !important;
    height: 100dvh !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(2px) !important;
  }

  /* Drawer Header (Logo Left + Close X Right) */
  .site-nav .menu-content__wrapper {
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 2.2rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding-bottom: 1.2rem !important;
  }

  .site-nav .menu-content__wrapper a {
    display: flex !important;
    align-items: center !important;
  }

  .site-nav .menu-content__wrapper .logo__white {
    display: block !important;
    width: 185px !important;
    height: 90px !important;
    margin-top: -30px !important;
    margin-bottom: -25px !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: none !important;
  }

  .site-nav .menu-content__wrapper .close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
  }

  .site-nav .menu-content__wrapper .close svg path {
    stroke: #131415 !important;
  }

  .site-nav .menu-content-full {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .site-nav .menu {
    padding-top: 0 !important;
    margin: 0 !important;
  }

  .menu-section,
  .menu-section--pages,
  .menu-section--socials,
  .menu-section--connect,
  .menu-section--cities {
    display: block !important;
    margin-bottom: 1.8rem !important;
  }

  .menu-section:last-child,
  .menu-section--cities {
    margin-bottom: 0 !important;
  }

  .menu-section__title {
    display: block !important;
    font-family: var(--title-font, sans-serif) !important;
    font-size: 1.45rem !important;
    line-height: 1.8rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(19, 20, 21, 0.65) !important;
    margin-bottom: 0.9rem !important;
    font-weight: 700 !important;
  }

  .site-nav .menu ul.menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.1rem !important;
  }

  .site-nav .menu ul.menu-list li {
    margin-bottom: 0 !important;
    display: block !important;
  }

  .site-nav .menu ul.menu-list li a {
    font-size: 1.8rem !important;
    line-height: 2.4rem !important;
    font-family: var(--title-font, sans-serif) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #131415 !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.8rem 1.2rem !important;
    border-radius: 0.8rem !important;
    text-decoration: none !important;
    transition: background 0.25s ease, color 0.25s ease !important;
  }

  /* Bullet Dot prefix before each menu link (•) */
  .site-nav .menu ul.menu-list li a::before {
    content: "•" !important;
    font-size: 1.6rem !important;
    line-height: 1 !important;
    color: #ef4343 !important;
    opacity: 0.9 !important;
  }

  /* Active Page Highlight Pill (Taller height & comfortable padding) */
  .site-nav .menu ul.menu-list li.current_page_item a {
    color: #fef5db !important;
    background-color: #131415 !important;
    padding: 0.95rem 1.4rem !important;
    border-radius: 0.8rem !important;
    height: auto !important;
    left: 0 !important;
  }

  .site-nav .menu ul.menu-list li.current_page_item a::before {
    color: #fef5db !important;
  }

  /* ──────── CITIES BOTTOM CONTAINER ──────── */
  .menu-section--cities {
    display: block !important;
    margin-top: auto !important;
    padding-top: 1.5rem !important;
  }

  .menu-cities-container {
    background-color: rgba(19, 20, 21, 0.05) !important;
    border: 1px solid rgba(19, 20, 21, 0.12) !important;
    border-radius: 0.8rem !important;
    padding: 0.9rem 1.1rem !important;
    text-align: center !important;
  }

  .menu-connect__cities {
    font-family: var(--title-font, sans-serif) !important;
    font-size: 1.25rem !important;
    line-height: 1.8rem !important;
    color: rgba(19, 20, 21, 0.8) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }

  /* ──────── ELIMINATE MASSIVE TOP GAP BEFORE CONTENT ──────── */
  .work-section,
  #wrapper > section:first-of-type,
  #wrapper > section.work-section {
    padding-top: 2rem !important;
    padding-bottom: 3.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .work-section__heading {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
  }

  /* ──────── PHILOSOPHY SECTION MOBILE REORDERING & MARGINS ──────── */
  .philosophy-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.8rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .philosophy-text-col {
    display: contents !important;
  }

  .philosophy-row .work-section__heading {
    order: 1 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  .philosophy-img-col {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .philosophy-img-col .work-img {
    border-radius: 1.8rem !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .philosophy-img-col .work-img img {
    max-height: 260px !important;
    object-fit: cover !important;
    display: block !important;
    width: 100% !important;
  }

  .philosophy-subtext {
    order: 3 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  .philosophy-subtext .work-section__subheading {
    font-family: var(--body-font, "DM Serif Display", serif) !important;
    font-size: 1.55rem !important;
    line-height: 2.35rem !important;
    color: #131415 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 1.2rem !important;
    letter-spacing: 0.01em !important;
    text-align: left !important;
  }


  /* Hide mobile-only headings on desktop safety */
  .footer-heading--mobile {
    display: block !important;
  }

  /* ──────── FOOTER CONTAINER & SPACING ──────── */
  .site-footer {
    padding-top: 3.5rem !important;
    padding-bottom: 3rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Hide empty theme legacy row on mobile to eliminate top gap */
  .site-footer__content {
    display: none !important;
  }

  /* Inject Section Headings via CSS Pseudo-elements on Mobile Only */
  .site-footer__main-menu::before {
    content: "PAGES";
    display: block;
    color: #fef5db;
    opacity: 0.8;
    font-size: 1.4rem;
    line-height: 1.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    font-family: var(--title-font, sans-serif);
    font-weight: 700;
  }

  .site-footer__social-menu::before {
    content: "SOCIALS";
    display: block;
    color: #fef5db;
    opacity: 0.8;
    font-size: 1.4rem;
    line-height: 1.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    font-family: var(--title-font, sans-serif);
    font-weight: 700;
  }

  /* 2-Column Mobile Grid Layout for Menus */
  .site-footer__menuwrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 2rem;
    row-gap: 2rem;
    align-items: start !important;
  }

  .site-footer__main-menu {
    grid-column: 1 / 2;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .site-footer__social-menu {
    display: block !important;
    grid-column: 2 / 3;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .site-footer__locations {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-top: 0.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .site-footer__main-menu ul li,
  .site-footer__social-menu ul li {
    margin-bottom: 1.2rem;
  }

  .site-footer__main-menu ul li a,
  .site-footer__social-menu ul li a {
    font-size: 1.5rem;
    line-height: 2.1rem;
    padding: 0.2rem 0;
    display: inline-block;
  }

  .site-footer__locations iframe {
    width: 100% !important;
    height: 220px !important;
    border-radius: 8px;
  }

  /* Phone & Email Contact Block Mobile Formatting */
  .site-footer__copy .col-36-36:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.4rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin-top: 2rem !important;
    border-top: 1px solid rgba(254, 245, 219, 0.15);
  }

  .site-footer__copy .phone {
    margin: 0 !important;
  }

  .site-footer__copy p a {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .site-footer__copy .col-36-36:first-child > div:last-child a {
    font-size: clamp(1.15rem, 3.6vw, 1.45rem) !important;
    word-break: break-all !important;
  }

  /* Copyright & Single-Row Policy Links Wrapper */
  .site-footer__copy__wrapper {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 1.6rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid rgba(254, 245, 219, 0.15);
  }

  .site-footer__copy__wrapper .main-menu ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding-left: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    overflow-x: auto;
  }

  .site-footer__copy__wrapper .main-menu ul li {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .site-footer__copy__wrapper .main-menu ul li a {
    font-size: 1.1rem !important;
    line-height: 1.4rem !important;
    color: #fef5db !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .site-footer__copy__wrapper .main-menu ul li:first-child::after,
  .site-footer__copy__wrapper .main-menu ul li:not(:last-child)::after {
    content: '|' !important;
    position: static !important;
    transform: none !important;
    margin-left: 0.6rem !important;
    margin-right: 0.4rem !important;
    color: rgba(254, 245, 219, 0.4) !important;
    font-size: 1.1rem !important;
    height: auto !important;
    width: auto !important;
    background: none !important;
  }

  .site-footer__copy p {
    font-size: 1.2rem;
    line-height: 1.8rem;
    margin-top: 0;
    color: rgba(254, 245, 219, 0.7);
  }

  /* ──────── FOUNDER RAKESH CHHOKAR SECTION (MOBILE) ──────── */
  .founder-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0.5rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 0.5rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .founder-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .founder-section [class*="col-36-"],
  .founder-section [class*="offset-left-36-"],
  .founder-img-col,
  .founder-text-col {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .founder-img-col {
    margin: 0 0 2rem 0 !important;
  }

  .founder-img-card {
    width: calc(100% - 4rem) !important;
    margin-left: 2rem !important;
    margin-right: 2rem !important;
    border-radius: 2rem !important;
    overflow: hidden !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
  }

  .founder-img-card img {
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
  }

  .founder-text-col {
    text-align: left !important;
  }

  .founder-text-col p.work-section__subheading {
    font-family: var(--body-font, "DM Serif Display", serif) !important;
    font-size: 1.55rem !important;
    line-height: 2.35rem !important;
    color: #131415 !important;
    margin-bottom: 1.6rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
  }

  .founder-text-col p.work-section__subheading:last-child {
    margin-bottom: 0 !important;
  }

  /* ──────── CLOSING CTA SECTION (COMPACT MOBILE SPACING) ──────── */
  .cta-section,
  .work-section:has(.work-cta) {
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
  }

  .work-cta {
    padding: 2rem 1.5rem !important;
    text-align: center !important;
  }

  .work-cta__heading {
    font-size: clamp(2.4rem, 7.5vw, 3.4rem) !important;
    line-height: 1.15em !important;
    margin-bottom: 1.5rem !important;
  }

  .work-cta__button {
    padding: 1.1rem 2.4rem !important;
    font-size: 1.35rem !important;
  }

  /* ──────── HIDE DEFAULT SCROLLBAR ON MOBILE ──────── */
  .home-cards::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* ──────── THREE PILLAR CARDS (HORIZONTAL SWIPE SLIDER ON MOBILE) ──────── */
  .home-cards-row {
    margin-top: 2rem !important;
    padding-left: 2rem !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .home-cards-row [class*="col-36-"],
  .home-cards-row [class*="offset-left-36-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .home-cards {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 2rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.8rem !important;
    width: 100% !important;
  }

  .home-cards .card-item {
    flex: 0 0 82vw !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
    background: transparent !important;
    border: 1.5px solid rgba(19, 20, 21, 0.22) !important;
    border-radius: 1.8rem !important;
    padding: 2.2rem 1.8rem !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }

  .home-cards .card-item h2 {
    font-family: var(--title-font, sans-serif) !important;
    font-size: 2.1rem !important;
    line-height: 2.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #131415 !important;
    margin-bottom: 1.4rem !important;
    position: relative !important;
    padding-bottom: 1.2rem !important;
  }

  .home-cards .card-item h2::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 2px !important;
  }

  .home-cards .card-item:nth-child(1) h2::after {
    background-color: #ef4343 !important;
  }
  .home-cards .card-item:nth-child(2) h2::after {
    background-color: #a3b8a3 !important;
  }
  .home-cards .card-item:nth-child(3) h2::after {
    background-color: #f7acb3 !important;
  }

  .home-cards .card-item ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 1.2rem 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
  }

  .home-cards .card-item ul li {
    font-family: var(--body-font, "DM Serif Display", serif) !important;
    font-size: 1.45rem !important;
    line-height: 2.1rem !important;
    color: #131415 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    margin-bottom: 0 !important;
  }

  .home-cards .card-item ul li::before {
    content: "•" !important;
    font-size: 1.6rem !important;
    line-height: 1 !important;
    color: #ef4343 !important;
    opacity: 0.9 !important;
  }

  /* ──────── SWIPE INDICATOR DOTS (MOBILE ONLY) ──────── */
  .home-cards-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.6rem !important;
    margin-top: 1.2rem !important;
    padding-right: 2rem !important;
  }

  .home-cards-dots .dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: rgba(19, 20, 21, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .home-cards-dots .dot.active {
    width: 24px !important;
    border-radius: 12px !important;
    background-color: #ef4343 !important;
  }

  /* ──────── SERVICES PAGE MOBILE INTERACTIVE CAROUSEL DECK ──────── */
  .services-hero {
    padding: 3.5rem 2rem 1.8rem !important;
    text-align: center !important;
  }

  .services-hero__title {
    font-size: clamp(2.8rem, 8.5vw, 4.2rem) !important;
    line-height: 1.1em !important;
    margin-bottom: 1.2rem !important;
    letter-spacing: -0.01em !important;
  }

  .services-hero__subtitle {
    font-size: 1.45rem !important;
    line-height: 2.15rem !important;
    color: #333333 !important;
    font-family: var(--body-font, "DM Serif Display", serif) !important;
    margin-bottom: 0 !important;
  }

  .mobile-services {
    display: block !important;
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Category Filter Pill Bar */
  .mobile-services-tabs {
    display: flex !important;
    gap: 0.75rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 0 1.5rem 1.2rem 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-services-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .srv-tab-btn {
    padding: 0.65rem 1.35rem !important;
    border-radius: 9999px !important;
    border: 1.5px solid rgba(19, 20, 21, 0.18) !important;
    background: transparent !important;
    color: #131415 !important;
    font-family: var(--title-font, sans-serif) !important;
    font-size: 1.2rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .srv-tab-btn.active {
    background: #131415 !important;
    color: #fef5db !important;
    border-color: #131415 !important;
  }

  /* Carousel Deck */
  .mobile-services-carousel {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.4rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 0.4rem 1.5rem 0.8rem 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-services-carousel::-webkit-scrollbar {
    display: none !important;
  }

  /* Service Card Item */
  .mobile-service-card {
    flex: 0 0 85vw !important;
    max-width: 330px !important;
    scroll-snap-align: center !important;
    background: transparent !important;
    border: 1.5px solid rgba(19, 20, 21, 0.22) !important;
    border-radius: 1.8rem !important;
    padding: 1.6rem !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .card-img-wrapper {
    position: relative !important;
    width: 100% !important;
    border-radius: 1.4rem !important;
    overflow: hidden !important;
    aspect-ratio: 16/10 !important;
    margin-bottom: 1.4rem !important;
  }

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

  .card-badge {
    position: absolute !important;
    top: 0.8rem !important;
    left: 0.8rem !important;
    background: rgba(19, 20, 21, 0.78) !important;
    backdrop-filter: blur(4px) !important;
    color: #fef5db !important;
    font-family: var(--title-font, sans-serif) !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.35rem 0.9rem !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
  }

  .mobile-service-card .slide-title {
    font-size: 1.85rem !important;
    line-height: 2.3rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #131415 !important;
    margin-bottom: 0.8rem !important;
  }

  .mobile-service-card .slide-desc {
    font-size: 1.4rem !important;
    line-height: 2.1rem !important;
    color: rgba(19, 20, 21, 0.85) !important;
    margin-bottom: 1.2rem !important;
    font-family: var(--body-font, "DM Serif Display", serif) !important;
  }

  .mobile-service-card .slide-highlight {
    padding: 1.3rem 1.2rem 1.3rem 1.6rem !important;
    border-radius: 1.2rem !important;
    background: rgba(19, 20, 21, 0.03) !important;
    border: 1px solid rgba(19, 20, 21, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: auto !important;
  }

  .mobile-service-card .slide-highlight__label {
    font-size: 1.3rem !important;
    line-height: 1.6rem !important;
    margin-bottom: 0.4rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #131415 !important;
  }

  .mobile-service-card .slide-highlight__text {
    font-size: 1.32rem !important;
    line-height: 1.9rem !important;
    color: #131415 !important;
    font-family: var(--body-font, "DM Serif Display", serif) !important;
  }

  /* Progress Dots Bar */
  .mobile-services-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.6rem !important;
    margin-top: 1.2rem !important;
    width: 100% !important;
  }

  .mobile-services-dots .dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: rgba(19, 20, 21, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-services-dots .dot.active {
    width: 24px !important;
    border-radius: 12px !important;
    background-color: #ef4343 !important;
  }

  /* Services CTA Mobile Overrides */
  .services-cta {
    padding: 3rem 2rem 3.5rem !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .services-cta__heading {
    font-size: clamp(2.4rem, 7.5vw, 3.4rem) !important;
    line-height: 1.12em !important;
    margin-bottom: 1.5rem !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .services-cta__text {
    font-size: 1.5rem !important;
    line-height: 2.2rem !important;
    margin-bottom: 2rem !important;
    opacity: 1 !important;
    transform: none !important;
    font-family: var(--body-font, "DM Serif Display", serif) !important;
  }

  .services-cta__button {
    padding: 1.1rem 2.4rem !important;
    font-size: 1.35rem !important;
    letter-spacing: 0.05em !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ──────── CONTACT PAGE MOBILE RESPONSIVE OPTIMIZATIONS ──────── */
  .contact-form,
  .main-form.contact-form {
    padding-top: 3rem !important;
    padding-bottom: 4rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .contact-form .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .contact-form [class*="col-36-"],
  .contact-form [class*="offset-left-36-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .contact-form h2 {
    margin-top: 0 !important;
    margin-bottom: 1.4rem !important;
    font-size: clamp(2.6rem, 7.5vw, 3.6rem) !important;
    line-height: 1.1em !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    color: #131415 !important;
  }

  .contact-form p {
    font-size: 1.5rem !important;
    line-height: 2.25rem !important;
    margin-bottom: 1.5rem !important;
    color: #131415 !important;
    box-sizing: border-box !important;
  }

  /* Sleek Minimalist Underline Form Fields */
  .contact-form form,
  .contact-form .wpcf7-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 1rem !important;
  }

  .contact-form label,
  .contact-form .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .contact-form input[type="text"],
  .contact-form input[type="tel"],
  .contact-form select,
  .contact-form .wpcf7-text,
  .contact-form .wpcf7-tel,
  .contact-form .wpcf7-select {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1.55rem !important;
    line-height: 2.2rem !important;
    padding: 0.8rem 0 1.2rem 0 !important;
    border: none !important;
    border-bottom: 1.5px solid rgba(19, 20, 21, 0.7) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #131415 !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .contact-form select,
  .contact-form .wpcf7-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNiA5TDEyIDE1TDE4IDkiIHN0cm9rZT0iIzEzMTQxNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.2rem center !important;
    background-size: 1.5rem !important;
    padding-right: 2rem !important;
    cursor: pointer !important;
  }

  /* Submit Container & Icon Alignment */
  .contact-form__submit-container {
    margin-top: 1.8rem !important;
    width: 100% !important;
  }

  .contact-form__submit {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: relative !important;
    cursor: pointer !important;
    padding-top: 0.5rem !important;
  }

  .contact-form input[type="submit"],
  .contact-form .wpcf7-submit {
    width: auto !important;
    background: transparent !important;
    border: none !important;
    font-size: 1.7rem !important;
    line-height: 2.2rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #131415 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
  }

  .contact-form__submit::after {
    content: '' !important;
    display: block !important;
    width: 4.6rem !important;
    height: 4.6rem !important;
    border-radius: 50% !important;
    background-color: #131415 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fef5db' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 2rem !important;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  /* ──────── WORK PAGE MOBILE RESPONSIVE OPTIMIZATIONS ──────── */
  .work-hero {
    height: 42vh !important;
    min-height: 270px !important;
    margin: 1rem auto 1.8rem auto !important;
    width: calc(100% - 2rem) !important;
    border-radius: 1.4rem !important;
  }

  .work-hero__content {
    padding-bottom: 1.8rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .work-hero__subtitle {
    display: none !important;
  }

  .work-hero__location {
    font-family: var(--title-font, sans-serif) !important;
    font-size: 1.35rem !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 0.8rem !important;
  }

  .work-hero__title {
    font-family: var(--title-font, sans-serif) !important;
    font-size: clamp(2.6rem, 8vw, 3.8rem) !important;
    line-height: 1.1em !important;
    margin-bottom: 1rem !important;
  }

  .work-hero__subtitle {
    font-family: var(--title-font, sans-serif) !important;
    font-size: 1.45rem !important;
    line-height: 2.15rem !important;
    max-width: 100% !important;
  }

  /* Two-column layout grid stacking */
  .work-section {
    padding: 3rem 0 !important;
  }

  .work-section .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .work-section [class*="col-36-"]:not(.philosophy-text-col):not(.philosophy-img-col),
  .work-section [class*="offset-left-36-"]:not(.philosophy-text-col):not(.philosophy-img-col) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
  }

  .work-section__heading {
    font-family: var(--title-font, sans-serif) !important;
    font-size: clamp(2.6rem, 7.5vw, 3.6rem) !important;
    line-height: 1.12em !important;
    margin-bottom: 1.4rem !important;
  }

  .work-section__subheading {
    font-family: var(--body-font, "DM Serif Display", serif) !important;
    font-size: 1.6rem !important;
    line-height: 2.25rem !important;
    color: #131415 !important;
    margin-bottom: 1.2rem !important;
    font-weight: 400 !important;
  }

  .work-section__text {
    font-family: var(--body-font, "DM Serif Display", serif) !important;
    font-size: 1.5rem !important;
    line-height: 2.25rem !important;
    color: rgba(19, 20, 21, 0.9) !important;
    margin-bottom: 2rem !important;
    font-weight: 400 !important;
  }

  /* Mobile Only: Align Mail, Website, and View Our Menu in 1 single row */
  .cafe-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1.2rem !important;
    flex-wrap: wrap !important;
    padding-top: 2rem !important;
    margin-top: 2rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  .cafe-actions .work-stats {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    gap: 1.2rem !important;
  }

  .cafe-actions .cafe-menu-btn-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }

  .cafe-actions .cafe-menu-btn-wrap .work-cta__button {
    margin: 0 !important;
    font-size: 1.15rem !important;
    padding: 0.9rem 1.6rem !important;
    white-space: nowrap !important;
  }

  /* Testimonials & Rating Badge */
  .google-rating-badge {
    font-family: var(--title-font, sans-serif) !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    margin-bottom: 25px !important;
    font-size: 1.25rem !important;
    max-width: 90vw !important;
    box-sizing: border-box !important;
  }

  .testimonials-marquee {
    margin-left: -1.5rem !important;
    width: calc(100% + 3rem) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .testimonials-marquee::-webkit-scrollbar {
    display: none !important;
  }

  .testimonials-track {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    gap: 1.2rem !important;
  }

  .testimonial-card {
    font-family: var(--title-font, sans-serif) !important;
    width: 82vw !important;
    max-width: 310px !important;
    min-height: auto !important;
    padding: 2.2rem 1.8rem !important;
    border-radius: 1.4rem !important;
    box-sizing: border-box !important;
  }

  .testimonial-text {
    font-family: var(--title-font, sans-serif) !important;
    font-size: 1.45rem !important;
    line-height: 2.15rem !important;
    margin-bottom: 2rem !important;
  }

  /* Stats numbers row below testimonials */
  .work-section div[style*="gap: 4rem"] {
    gap: 1.5rem !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
  }

  .work-section div[style*="gap: 4rem"] h3 {
    font-family: var(--title-font, sans-serif) !important;
    font-size: 3.2rem !important;
    margin-bottom: 0.2rem !important;
  }

  .work-section div[style*="gap: 4rem"] p {
    font-family: var(--title-font, sans-serif) !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.08em !important;
  }

  /* ──────── MOBILE FULL-WIDTH & SLIGHTLY TALLER PLAYER DECK ──────── */
  .video-sequence-container {
    height: auto !important;
    min-height: auto !important;
    margin: 2.5rem 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    background: transparent !important;
  }

  .video-sequence-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    width: 100vw !important;
    aspect-ratio: 16 / 10.5 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #131415 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
  }

  .video-sequence-canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    display: block !important;
    touch-action: pan-y !important;
  }

  /* Interactive Player Deck Controls (Positioned Below Full-Width Image Frame) */
  .video-controls-deck {
    display: flex !important;
    align-items: center !important;
    gap: 0.9rem !important;
    margin: 1.2rem auto 0 auto !important;
    width: calc(100vw - 2.4rem) !important;
    max-width: 380px !important;
    background: #131415 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 1.2rem !important;
    padding: 0.75rem 1.1rem !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  }

  .video-ctrl-btn {
    background: #fef5db !important;
    color: #131415 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
  }

  .video-seekbar {
    flex: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 5px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    outline: none !important;
    cursor: pointer !important;
  }

  .video-seekbar::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: #ef4343 !important;
    cursor: pointer !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  }

  .video-progress-pill {
    font-family: var(--title-font, sans-serif) !important;
    font-size: 1.1rem !important;
    color: #fef5db !important;
    letter-spacing: 0.05em !important;
    flex-shrink: 0 !important;
    font-weight: 600 !important;
    min-width: 32px !important;
    text-align: right !important;
  }

  /* ──────── MOVE PHILOSOPHY SUBTEXT A BIT TO THE RIGHT & CENTER HEADING ON MOBILE ──────── */
  .work-section .philosophy-row .work-section__heading {
    text-align: center !important;
  }

  .work-section .philosophy-row .philosophy-subtext {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}