/*
 * mobile-project-details.css
 * Mobile-only overrides for project/project-detail.html (max-width: 768px)
 * Target design: Projects-Content-mobile.html (390px viewport)
 *
 * These rules are purely additive — they only apply inside media queries
 * and do NOT affect desktop styles.
 * HTML markup and class names are left unchanged.
 */


/* ============================================================
   0. SHARED UTILITIES (from design <style> + JS)
   ============================================================ */
@media (max-width: 768px) {
  .th-scroll-strip::-webkit-scrollbar,
  .th-project-filter-strip::-webkit-scrollbar {
    height: 4px;
  }

  .th-scroll-strip::-webkit-scrollbar-track,
  .th-project-filter-strip::-webkit-scrollbar-track {
    background: transparent;
  }

  .th-scroll-strip::-webkit-scrollbar-thumb,
  .th-project-filter-strip::-webkit-scrollbar-thumb {
    background: #cfccc9;
    border-radius: 2px;
  }

  .th-clamp3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .th-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ============================================================
   1. TOP BAR
   Design: height 44px | bg #231f20 | pad 0 20px | gap 12px
   text 13px / 0.02em | catalogue underline offset 3px
   ============================================================ */
@media (max-width: 768px) {
  .th-topbar {
    height: 44px !important;
    background-color: #231f20 !important;
    padding: 0 !important;
  }

  .th-topbar .position-relative.container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    height: 44px !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  .th-topbar .d-flex.align-items-center.justify-content-center {
    display: contents !important;
  }

  .th-topbar-text {
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #fff !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .th-topbar .contact-sales {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .th-topbar-link {
    font-size: 13px !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
  }

  .th-topbar .fa-envelope {
    display: none !important;
  }
}


/* ============================================================
   2. HEADER / NAVIGATION BAR
   Design: height 60px | pad 0 16px | logo 22px | icons 20px
   hamburger 40x40 / 18px / ml -8px | gap 12px
   border-bottom 1px #e8e8e8
   ============================================================ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .th-menu-wrapper,
  .sticky-wrapper,
  .sticky-wrapper.desktop-menu,
  .menu-area {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .sticky-wrapper.desktop-menu,
  .sticky-wrapper .menu-area {
    background: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }

  .sticky-wrapper.desktop-menu .menu-area {
    padding: 0;
  }

  .sticky-wrapper.desktop-menu .menu-area .row {
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-height: 60px;
    align-items: center !important;
  }

  .header-logo a img {
    height: 22px;
    width: auto;
    display: block;
  }

  .sticky-wrapper .d-none.d-lg-inline-block {
    display: none !important;
  }

  .th-user-dropdown {
    display: none !important;
  }

  .header-button.d-none.d-lg-inline-block {
    display: none !important;
  }

  .sticky-wrapper .d-flex.align-items-end.gap-3 {
    gap: 12px !important;
    margin-bottom: 0 !important;
    align-items: center !important;
  }

  button.th-menu-toggle.d-block.d-lg-none {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #231f20;
    font-size: 18px;
    margin-left: -8px;
    cursor: pointer;
  }

  .fa-regular.fa-magnifying-glass,
  .fa-solid.fa-magnifying-glass,
  .th-header-search .fa-regular.fa-magnifying-glass,
  #th-header-global-search i,
  #th-header-global-search .fa-regular.fa-magnifying-glass {
    font-size: 20px !important;
  }

  .fa-solid.fa-user,
  .fa-regular.fa-bookmark {
    font-size: 20px !important;
  }

  .th-header-search {
    width: 20px;
    height: 20px;
    display: flex !important;
    align-items: center !important;
  }

  #pinboard-button img,
  a[aria-controls="offcanvasRight"] img,
  img[src*="pinboard-icon"] {
    width: 20px !important;
    height: 20px !important;
  }

  .sticky-wrapper .col-4.d-flex {
    flex: none !important;
  }

  .sticky-wrapper .col-4:first-child {
    justify-content: flex-start !important;
  }

  .sticky-wrapper .col-4:nth-child(2) {
    justify-content: center !important;
  }

  .sticky-wrapper .col-4:last-child {
    justify-content: flex-end !important;
  }
}


/* ============================================================
   HEADER TWEAKS (this design vs listing chrome)
   hamburger 44x44 / ml -10px | icon gap 14px
   border-bottom 1px #ededeb
   ============================================================ */
@media (max-width: 768px) {
  .sticky-wrapper.desktop-menu,
  .sticky-wrapper .menu-area {
    border-bottom: 1px solid #ededeb !important;
  }

  .sticky-wrapper .d-flex.align-items-end.gap-3 {
    gap: 14px !important;
  }

  button.th-menu-toggle.d-block.d-lg-none {
    width: 44px !important;
    height: 44px !important;
    margin-left: -10px !important;
  }
}


/* ============================================================
   3. HERO (#hero.hero-project)
   Design: min-height 460px | cover/center
   overlay linear-gradient(180deg, rgba(35,31,32,0.55) 0%,
     rgba(35,31,32,0.10) 42%, rgba(35,31,32,0.80) 100%)
   breadcrumb pad 16px 20px | 11px / 0.04em
   pin 32px circle | 1px rgba(255,255,255,0.65)
   title 26/1.18/700 | pad 0 20px 32px
   ============================================================ */
@media (max-width: 768px) {
  #hero.hero-project.th-hero-wrapper,
  #hero.hero-project.th-hero,
  .th-hero-wrapper.hero-project,
  .th-hero.hero-project {
    position: relative !important;
    min-height: 460px !important;
    height: auto !important;
    padding: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-size: cover !important;
    background-position: center center !important;
    overflow: hidden !important;
  }

  #hero.hero-project.th-hero-wrapper::after,
  .th-hero-wrapper.hero-project::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(35, 31, 32, 0.55) 0%,
      rgba(35, 31, 32, 0.10) 42%,
      rgba(35, 31, 32, 0.80) 100%
    );
    pointer-events: none;
    z-index: 0;
  }

  #hero.hero-project .gr-bg4:before,
  #hero.hero-project.gr-bg4:before,
  #hero.hero-project .th-hero-container.gr-bg4:before {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  #hero.hero-project .container.th-container.th-hero-section,
  #hero.hero-project .th-hero-section.th-container {
    position: relative !important;
    z-index: 1 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 460px !important;
  }

  #hero.hero-project .container.th-container.th-hero-section > .row {
    margin: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 100% !important;
    width: 100% !important;
  }

  #hero.hero-project .col-xl-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: none !important;
  }

  #hero.hero-project .th-breadcrumb {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #hero.hero-project .th-breadcrumb .breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    background: transparent !important;
  }

  #hero.hero-project .th-breadcrumb .breadcrumb-item,
  #hero.hero-project .th-breadcrumb .breadcrumb-item a,
  #hero.hero-project .th-breadcrumb .breadcrumb-item span,
  #hero.hero-project .th-breadcrumb .breadcrumb-item.active,
  #hero.hero-project .th-breadcrumb .breadcrumb-item.active .font-white {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    color: #ffffff !important;
    padding: 0 !important;
  }

  #hero.hero-project .th-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    opacity: 0.6 !important;
    color: #ffffff !important;
    padding: 0 6px !important;
    float: none !important;
  }

  #hero.hero-project .th-breadcrumb .breadcrumb-item.active span[data-v-heroproject-project-title],
  #hero.hero-project .th-breadcrumb [data-v-heroproject-project-title] {
    opacity: 0.75 !important;
    color: #ffffff !important;
    font-weight: 400 !important;
  }

  #hero.hero-project .th-component-edit-link,
  #hero.hero-project [data-v-project-edit-link],
  #hero.hero-project [data-v-heroproject-component-link] {
    display: none !important;
  }

  #hero.hero-project .th-admin-links {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }

  #hero.hero-project .th-admin-links > .position-absolute {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    inset: auto !important;
  }

  #hero.hero-project .th-add-to-pinboard,
  #hero.hero-project .th-add-to-pinboard.top-right-30,
  #hero.hero-project .th-pinboard-tooltip {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    inset: auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  #hero.hero-project .th-add-to-pinboard::before,
  #hero.hero-project .th-add-to-pinboard::after {
    display: none !important;
  }

  #hero.hero-project .th-add-to-pinboard i {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  #hero.hero-project .th-hero-container,
  #hero.hero-project .th-hero-container.gr-bg4 {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #hero.hero-project .way-points-container {
    display: none !important;
  }

  #hero.hero-project .th-hero-style,
  #hero.hero-project .th-hero-style-mt-200,
  #hero.hero-project .th-hero-main-title {
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 20px 32px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #hero.hero-project .th-hero-title,
  #hero.hero-project h1.th-hero-title,
  #hero.hero-project .th-hero-title.th-title-mb-25 {
    font-size: 26px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #hero.hero-project .th-hero-subtitle,
  #hero.hero-project .th-hero-wrapp {
    display: none !important;
  }
}


/* ============================================================
   4. UNDER HERO (#project-detail-under-hero)
   Design: bg #f6f5f3 | pad 24px 20px
   2-col grid | gap 20px 16px
   labels 11/700 / 0.1em uppercase #231f20 mb 6
   values 12/1.65 #33322f
   LOCATION column hidden (design only has Designer / Photographer)
   ============================================================ */
@media (max-width: 768px) {
  #project-detail-under-hero,
  #project-detail-under-hero.bg-gray,
  #project-detail-under-hero.th-project-under-hero-py {
    background: #f6f5f3 !important;
    background-color: #f6f5f3 !important;
    padding: 24px 20px !important;
    margin: 0 !important;
  }

  #project-detail-under-hero .th-component-edit-link {
    display: none !important;
  }

  #project-detail-under-hero .container.th-container,
  #project-detail-under-hero .container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #project-detail-under-hero .row.under-hero-list,
  #project-detail-under-hero .under-hero-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 20px 16px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  #project-detail-under-hero .under-hero-list.cols-2 {
    grid-template-columns: 1fr 1fr !important;
  }
  #project-detail-under-hero .under-hero-list.cols-1 {
    grid-template-columns: 1fr !important;
  }

  #project-detail-under-hero .under-hero-item,
  #project-detail-under-hero .col-md-4.under-hero-item,
  #project-detail-under-hero .th-under-hero-item-px {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    display: block !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  

  #project-detail-under-hero .under-hero-item.text-center,
  #project-detail-under-hero .under-hero-item.text-first {
    text-align: left !important;
  }

  #project-detail-under-hero .th-under-hero-title,
  #project-detail-under-hero h5.th-under-hero-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #231f20 !important;
    margin: 0 0 6px !important;
    line-height: 1.3 !important;
  }

  #project-detail-under-hero .th-under-hero-subtitle,
  #project-detail-under-hero h6.th-under-hero-subtitle {
    font-size: 12px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #33322f !important;
    margin: 0 !important;
  }
}


/* ============================================================
   5. THE SPACE / PROJECT BRIEF (#project-brief)
   Design: pad 48px 20px 44px
   28×1 rule + “The Space” 11px / 0.14em uppercase
   quote 17/1.45/600 #231f20
   ============================================================ */
@media (max-width: 768px) {
  #project-brief,
  #project-brief.th-project-brief-section-py,
  #project-brief.th-mb-8 {
    padding: 48px 20px 44px !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  #project-brief .th-component-edit-link {
    display: none !important;
  }

  #project-brief .container.th-container,
  #project-brief .th-project-customer-container,
  #project-brief .container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #project-brief .row {
    margin: 0 !important;
  }

  #project-brief .th-section-header-wrapper {
    display: block !important;
  }

  #project-brief .th-section-title,
  #project-brief h2.th-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
  }

  #project-brief .th-section-title::before {
    content: "";
    width: 28px;
    height: 1px;
    background: #231f20;
    flex-shrink: 0;
  }

  #project-brief .th-section-title::after {
    content: "The Space";
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #231f20;
    line-height: 1;
    font-weight: 400;
  }

  #project-brief .th-section-subtitle,
  #project-brief .th-section-subtitle.th-title-mb-25,
  #project-brief .th-section-subtitle p {
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-wrap: pretty;
  }
}


/* ============================================================
   6. GALLERY (#photo-gallery)
   Design: bg #f6f5f3 | pad 40px 0 48px | mt 40px
   title 20/1.25/600 | counter 12/600
   main 260px cover radius 10px
   thumbs 68×52 radius 6px gap 8px | inactive opacity 0.45
   ============================================================ */
@media (max-width: 768px) {
  #photo-gallery,
  #photo-gallery.bg-gray,
  #photo-gallery.th-section-py {
    background: #f6f5f3 !important;
    background-color: #f6f5f3 !important;
    padding: 40px 0 48px !important;
    margin-top: 40px !important;
    margin-bottom: 0 !important;
  }

  #photo-gallery .th-component-edit-link {
    display: none !important;
  }

  #photo-gallery .container.th-container,
  #photo-gallery .container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #photo-gallery .th-section-header,
  #photo-gallery .th-section-header.th-section-header-pb-50 {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 20px 18px !important;
    margin: 0 !important;
  }

  #photo-gallery .th-section-header-wrapper {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #photo-gallery .th-section-title,
  #photo-gallery h2.th-section-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #photo-gallery .th-section-subtitle {
    display: none !important;
  }

  #photo-gallery .th-section-header-wrapper::after {
    content: attr(data-th-gallery-counter);
    font-size: 12px;
    font-weight: 600;
    color: #231f20;
    white-space: nowrap;
    line-height: 1.25;
    margin-left: auto;
    flex-shrink: 0;
  }

  #photo-gallery .section-body {
    padding: 0 !important;
  }

  #photo-gallery .section-body > .row {
    display: flex !important;
    flex-direction: column-reverse !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  #photo-gallery .section-body .col-md-2,
  #photo-gallery .section-body .col-md-10,
  #photo-gallery .section-body .col-sm-12,
  #photo-gallery .th-main-des-three-px {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }

  #photo-gallery #gallery-tabs-content,
  #photo-gallery .th-gallery-img-container,
  #photo-gallery .tab-content {
    display: block !important;
    padding: 0 20px !important;
  }

  #photo-gallery .th-gallery-img,
  #photo-gallery .tab-pane.th-gallery-img {
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #e8e8e8 !important;
  }

  #photo-gallery .th-gallery-img img,
  #photo-gallery .th-gallery-img-container img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }

  #photo-gallery .th-gallery-thumb-container,
  #photo-gallery .nav.flex-column.th-gallery-thumb-container,
  #photo-gallery #gallery-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    padding: 14px 20px 8px !important;
    margin: 0 !important;
    cursor: grab !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  /* Hide native scrollbar — custom bar stays visible while scrolling */
  #photo-gallery .th-gallery-thumb-container::-webkit-scrollbar,
  #photo-gallery .nav.flex-column.th-gallery-thumb-container::-webkit-scrollbar,
  #photo-gallery #gallery-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  #photo-gallery .th-mobile-gallery-scrollbar {
    display: block !important;
    position: relative !important;
    height: 4px !important;
    margin: 0 20px !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  #photo-gallery .th-mobile-gallery-scrollbar-drag {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 4px !important;
    min-width: 32px !important;
    background: #cfccc9 !important;
    border-radius: 2px !important;
    cursor: grab !important;
    will-change: transform;
    touch-action: none;
  }

  #photo-gallery .th-mobile-gallery-scrollbar-drag.is-dragging {
    cursor: grabbing !important;
  }

  #photo-gallery .th-gallery-thumb,
  #photo-gallery button.th-gallery-thumb {
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    outline-offset: 2px !important;
  }

  #photo-gallery .th-gallery-thumb.active {
    border: none !important;
  }

  #photo-gallery .th-gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    user-select: none !important;
    opacity: 0.45;
  }

  #photo-gallery .th-gallery-thumb.active img {
    opacity: 1;
  }
}


/* ============================================================
   7. PENETRATING COPY + IMAGES (#lorem-penetrating)
   Design: pad 56px 0 0
   body 12/1.65 #33322f
   first image full-bleed 300px cover
   then pad 36px 20px
   2-col gap 12px | left 180px mt 28 radius 10 | right 220px
   last para pad 40px 20px 0 | border-top #e1dedb | pt 28px
   ============================================================ */
@media (max-width: 768px) {
  #lorem-penetrating,
  #lorem-penetrating.th-mb-8 {
    padding: 56px 0 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  #lorem-penetrating .th-component-edit-link {
    display: none !important;
  }

  #lorem-penetrating .container.th-container,
  #lorem-penetrating .container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #lorem-penetrating > .container > .row,
  #lorem-penetrating .row {
    margin: 0 !important;
    display: block !important;
  }

  #lorem-penetrating .col-md-12,
  #lorem-penetrating .th-upper-text {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 20px !important;
  }

  #lorem-penetrating .th-upper-text,
  #lorem-penetrating .th-upper-text.th-pb-60 {
    padding: 0 20px !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  #lorem-penetrating .th-upper-text,
  #lorem-penetrating .th-upper-text span,
  #lorem-penetrating [data-v-projectdetailpenetrating-project-main_description_one] {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    text-wrap: pretty;
  }

  #lorem-penetrating .th-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
  }

  #lorem-penetrating .th-grid .item-1,
  #lorem-penetrating .th-grid .item-2,
  #lorem-penetrating .th-grid .item-3 {
    grid-area: auto !important;
    height: auto !important;
    width: 100% !important;
  }

  #lorem-penetrating .item-1 {
    margin-top: 36px !important;
    padding: 0 !important;
  }

  #lorem-penetrating .th-grid .first-img,
  #lorem-penetrating .item-1 .first-img {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 300px !important;
    object-fit: cover !important;
    display: block !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
  }

  #lorem-penetrating .th-grid .item-2 {
    padding-right: 0 !important;
    margin-top: 16px !important;
  }

  #lorem-penetrating .item-2 .th-main-des,
  #lorem-penetrating .item-2 .th-lorem-text {
    padding: 0 !important;
  }

  #lorem-penetrating .item-2 .th-pt-40,
  #lorem-penetrating .item-2 [data-v-projectdetailpenetrating-project-main_description_two],
  #lorem-penetrating .item-2 span {
    padding-top: 0 !important;
    padding-right: 0 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    text-wrap: pretty;
  }

  #lorem-penetrating .item-2 h2,
  #lorem-penetrating .item-2 .h2 {
    display: none !important;
  }

  #lorem-penetrating .th-penetrating-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 36px 20px 0 !important;
  }

  #lorem-penetrating .th-penetrating-pair-left {
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-top: 28px !important;
  }

  #lorem-penetrating .th-penetrating-pair-left img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
  }

  #lorem-penetrating .th-penetrating-pair .item-3 {
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  #lorem-penetrating .th-grid .second-img,
  #lorem-penetrating .item-3 .second-img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-radius: 10px !important;
  }

  #lorem-penetrating .th-grid > .item-3 {
    padding: 36px 20px 0 !important;
  }

  #lorem-penetrating .th-main-des-three,
  #lorem-penetrating .row.th-main-des-three {
    display: block !important;
    padding: 40px 20px 0 !important;
    margin: 0 !important;
  }

  #lorem-penetrating .th-main-des-three.th-pt-25 {
    padding-top: 40px !important;
  }

  #lorem-penetrating .th-main-des-three .col-md-12 {
    padding: 28px 0 0 !important;
    border-top: 1px solid #e1dedb !important;
  }

  #lorem-penetrating .th-main-des-three span,
  #lorem-penetrating [data-v-projectdetailpenetrating-project-main_description_three] {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    text-wrap: pretty;
  }
}


/* ============================================================
   8. FEATURED PRODUCTS (#th-product-slider)
   Design: bg #f6f5f3 | pad 48px 0 | mt 48px
   title 20/600 mb 8 | subtitle 12/1.65
   View All Products 12/600 underline offset 3px
   cards 136px equal height | gap 12px | border 1px #e8e8e8 radius 10px
   image pad 12px | 1/1 contain
   pin 26px top/right 8px
   title 15/600 | tags stacked 10px pad 3px 6px border #e0e0e0
   bottom scrollbar 4px #cfccc9
   ============================================================ */
@media (max-width: 768px) {
  #th-product-slider,
  #th-product-slider.th-section,
  #th-product-slider.th-section-py,
  #th-product-slider.th-mb-80 {
    background: #f6f5f3 !important;
    background-color: #f6f5f3 !important;
    padding: 48px 0 !important;
    margin: 48px 0 0 !important;
    overflow: hidden !important;
  }

  #th-product-slider .th-component-edit-link {
    display: none !important;
  }

  #th-product-slider .container.th-container,
  #th-product-slider .container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #th-product-slider .row {
    margin: 0 !important;
    display: block !important;
  }

  #th-product-slider .th-section-header,
  #th-product-slider .th-section-header.d-flex {
    display: block !important;
    padding: 0 20px 28px !important;
    margin: 0 !important;
  }

  #th-product-slider .th-section-header-wrapper.left,
  #th-product-slider .th-section-header .left,
  #th-product-slider .th-section-header .flex-1 {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #th-product-slider .th-section-title,
  #th-product-slider h2.th-section-title,
  #th-product-slider .th-section-title.th-section-title-mb {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 0 8px !important;
  }

  #th-product-slider .th-section-subtitle,
  #th-product-slider .font-size-16,
  #th-product-slider .th-section-subtitle-mb,
  #th-product-slider [data-v-featuredproductslider-component-section_subtitle] {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #th-product-slider .th-section-header .right {
    display: block !important;
    margin-top: 16px !important;
    padding: 0 !important;
  }

  #th-product-slider .th-section-header-link {
    display: inline-block !important;
  }

  #th-product-slider .th-view-all-btn,
  #th-product-slider .th-section-header-link span.th-view-all-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  #th-product-slider .th-section-header-link-btn {
    display: none !important;
  }

  #th-product-slider .th-section-body,
  #th-product-slider .th-section-body .row,
  #th-product-slider .th-section-body .col-md-12 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #th-product-slider .swiper.th-featured-products-slider,
  #th-product-slider .th-featured-products-slider {
    --swiper-scrollbar-sides-offset: 20px;
    --swiper-scrollbar-size: 4px;
    --swiper-scrollbar-bottom: 6px;
    --swiper-scrollbar-bg-color: transparent;
    --swiper-scrollbar-drag-bg-color: #cfccc9;
    position: relative !important;
    padding: 0 0 22px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #th-product-slider .th-featured-products-slider.th-pb-60 {
    padding-bottom: 14px !important;
  }

  #th-product-slider .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    cursor: grab;
    padding-left: 20px !important;
    box-sizing: border-box !important;
  }

  #th-product-slider .swiper-slide,
  #th-product-slider .th-featured-products-slider .swiper-slide {
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
    flex: 0 0 136px !important;
    margin-right: 12px !important;
    height: auto !important;
    align-self: stretch !important;
    display: flex !important;
    box-sizing: border-box !important;
  }

  #th-product-slider .th-item-product,
  #th-product-slider .swiper-slide .th-item-product {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    background: #ffffff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    margin-left: 0 !important;
  }

  #th-product-slider .th-item-product .th-img-container,
  #th-product-slider .th-item-product .th-product-image,
  #th-product-slider .th-featured-products-slider .th-item-product .th-img-container {
    position: relative !important;
    flex: 0 0 auto !important;
    padding: 12px !important;
    background: #ffffff !important;
    border: none !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
  }

  #th-product-slider .th-item-product .th-img-container > a {
    display: block !important;
    width: 100% !important;
  }

  #th-product-slider .th-item-product .th-img-container img,
  #th-product-slider .th-item-product .th-img-container > a > img,
  #th-product-slider .th-featured-products-slider .th-item-product .th-img-container img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    display: block !important;
    user-select: none !important;
  }

  #th-product-slider .th-item-product .th-add-to-pinboard,
  #th-product-slider .th-item-product .th-add-to-pinboard.position-absolute,
  #th-product-slider .th-item-product .th-add-to-pinboard.top-right-30,
  #th-product-slider .th-item-product .th-pinboard-tooltip {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    color: #231f20 !important;
    line-height: 1 !important;
    z-index: 5 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #th-product-slider .th-item-product .th-add-to-pinboard::before,
  #th-product-slider .th-item-product .th-add-to-pinboard::after {
    content: none !important;
    display: none !important;
  }

  #th-product-slider .th-item-product .th-add-to-pinboard i {
    font-size: 13px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  #th-product-slider .th-item-product .th-item-footer {
    flex: 1 1 auto !important;
    padding: 0 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    background: #ffffff !important;
    min-height: 0 !important;
  }

  #th-product-slider .th-item-product .th-item-footer > a {
    display: block !important;
    text-decoration: none !important;
    flex: 0 0 auto !important;
  }

  #th-product-slider .th-item-product .th-title,
  #th-product-slider .th-item-product h3.th-title,
  #th-product-slider .th-item-product .th-title.th-mt-20,
  #th-product-slider .th-item-product .th-title.th-title-mb-15,
  #th-product-slider .th-item-product .font-22 {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #231f20 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #th-product-slider .th-item-product .th-tag-name,
  #th-product-slider .th-item-product .th-item-footer .th-tag-name {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    align-self: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  #th-product-slider .th-item-product .th-tag,
  #th-product-slider .th-item-product .th-tag.th-tag-p,
  #th-product-slider .th-item-product .th-item-footer .th-tag-name .th-tag {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: #33322f !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 2px !important;
    padding: 3px 6px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    white-space: break-spaces !important;
  }

  /* Bottom scrollbar (design: 4px thumb #cfccc9) */
  #th-product-slider .swiper-scrollbar,
  #th-product-slider .swiper-horizontal > .swiper-scrollbar,
  #th-product-slider .swiper-scrollbar.swiper-scrollbar-horizontal {
    display: block !important;
    position: absolute !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    top: auto !important;
    width: auto !important;
    height: 4px !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #th-product-slider .swiper-scrollbar-drag {
    background: #cfccc9 !important;
    border-radius: 2px !important;
    height: 4px !important;
    cursor: grab !important;
    top: 0 !important;
  }
}


/* ============================================================
   9. MORE PROJECTS (#th-featured-projects-slider)
   Design: pad 48px 0
   cards width 240px gap 16px
   image 170px cover radius 10px
   pin 28px top/right 10px
   title 15/600 mt 14 | desc 12/1.55 mt 6
   View Project 12/600 underline mt 10
   ============================================================ */
@media (max-width: 768px) {
  #th-featured-projects-slider,
  #th-featured-projects-slider.pt-0 {
    padding: 48px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  #th-featured-projects-slider .th-component-edit-link {
    display: none !important;
  }

  #th-featured-projects-slider .container.th-container,
  #th-featured-projects-slider .container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #th-featured-projects-slider .row,
  #th-featured-projects-slider .featured-projects-row {
    margin: 0 !important;
  }

  #th-featured-projects-slider .th-section-header,
  #th-featured-projects-slider .th-section-header.th-section-header-pb-50 {
    display: block !important;
    padding: 0 20px 20px !important;
    margin: 0 !important;
  }

  #th-featured-projects-slider .th-section-header .right {
    display: none !important;
  }

  #th-featured-projects-slider .section-header-link-mobile {
    display: none !important;
  }

  #th-featured-projects-slider .section-header-link-desktop,
  #th-featured-projects-slider h2.th-section-title {
    display: block !important;
  }

  #th-featured-projects-slider .th-section-title,
  #th-featured-projects-slider h2.th-section-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 0 8px !important;
  }

  #th-featured-projects-slider .th-section-subtitle,
  #th-featured-projects-slider .th-section-subtitle-mb {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    margin: 0 !important;
  }

  #th-featured-projects-slider .section-body,
  #th-featured-projects-slider .section-body .row,
  #th-featured-projects-slider .section-body .col-md-12 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #th-featured-projects-slider .swiper.th-featured-projects-slider,
  #th-featured-projects-slider .th-featured-projects-slider {
    --swiper-scrollbar-sides-offset: 20px;
    --swiper-scrollbar-size: 4px;
    --swiper-scrollbar-bottom: 6px;
    --swiper-scrollbar-bg-color: transparent;
    --swiper-scrollbar-drag-bg-color: #cfccc9;
    position: relative !important;
    padding: 0 0 22px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #th-featured-projects-slider .th-featured-projects-slider.th-pb-80 {
    padding-bottom: 16px !important;
  }

  #th-featured-projects-slider .swiper-wrapper {
    padding-left: 20px !important;
    cursor: grab;
    box-sizing: border-box !important;
  }

  #th-featured-projects-slider .swiper-slide {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    flex: 0 0 240px !important;
    margin-right: 16px !important;
    height: auto !important;
  }

  #th-featured-projects-slider .th-item-project {
    width: 240px !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
  }

  #th-featured-projects-slider .th-img-container,
  #th-featured-projects-slider .th-img-container.itemProjectClass {
    position: relative !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #e8e8e8 !important;
    border: none !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 170px !important;
  }

  #th-featured-projects-slider .th-img-container img {
    width: 100% !important;
    height: 170px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 10px !important;
    user-select: none !important;
  }

  #th-featured-projects-slider .th-item-project .th-add-to-pinboard,
  #th-featured-projects-slider .th-add-to-pinboard.top-right-30 {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    color: #231f20 !important;
    line-height: 1 !important;
    z-index: 2 !important;
    box-shadow: none !important;
  }

  #th-featured-projects-slider .th-add-to-pinboard::before,
  #th-featured-projects-slider .th-add-to-pinboard::after {
    display: none !important;
  }

  #th-featured-projects-slider .th-add-to-pinboard i {
    font-size: 14px !important;
    color: #231f20 !important;
  }

  #th-featured-projects-slider .th-item-footer {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #th-featured-projects-slider .th-label,
  #th-featured-projects-slider .th-item-subtitle-my {
    display: none !important;
  }

  #th-featured-projects-slider .th-item-title-bold,
  #th-featured-projects-slider .th-item-footer h3,
  #th-featured-projects-slider .th-item-footer .th-title,
  #th-featured-projects-slider h3.th-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 14px 0 0 !important;
    line-height: 1.3 !important;
  }

  #th-featured-projects-slider .th-item-footer h3 a,
  #th-featured-projects-slider .th-item-title-bold a {
    color: #231f20 !important;
    text-decoration: none !important;
  }

  #th-featured-projects-slider .th-description,
  #th-featured-projects-slider .th-description-my {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #33322f !important;
    margin: 6px 0 0 !important;
  }

  #th-featured-projects-slider .th-link {
    margin-top: 10px !important;
    padding: 0 !important;
  }

  #th-featured-projects-slider .th-link .th-link-text,
  #th-featured-projects-slider a.th-link .th-link-text {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    padding: 0 !important;
  }

  #th-featured-projects-slider .th-link-icon-btn {
    display: none !important;
  }

  /* Bottom scrollbar (same as Featured Products: 4px thumb #cfccc9) */
  #th-featured-projects-slider .swiper-scrollbar,
  #th-featured-projects-slider .swiper-horizontal > .swiper-scrollbar,
  #th-featured-projects-slider .swiper-scrollbar.swiper-scrollbar-horizontal {
    display: block !important;
    position: absolute !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    top: auto !important;
    width: auto !important;
    height: 4px !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #th-featured-projects-slider .swiper-scrollbar-drag {
    background: #cfccc9 !important;
    border-radius: 2px !important;
    height: 4px !important;
    cursor: grab !important;
    top: 0 !important;
  }
}


/* ============================================================
   11. TAKE THE NEXT STEP (NEED HELP)
   ============================================================ */
   @media (max-width: 768px) {
    #need-help-section {
      padding: 0 20px 48px !important;
      background: #ffffff !important;
    }
  
    #need-help-section .th-component-edit-link {
      display: none !important;
    }
  
    #need-help-section .container.th-container {
      padding: 0 !important;
      max-width: 100% !important;
    }
  
    #need-help-section .th-section-header {
      display: block !important;
      padding: 8px 0 0 !important;
    }
  
    #need-help-section .th-section-header-wrapper.text-center {
      text-align: center !important;
    }
  
    #need-help-section .th-section-title {
      font-size: 22px !important;
      line-height: 1.25 !important;
      font-weight: 700 !important;
      color: #231f20 !important;
      margin: 0 0 10px !important;
    }
  
    #need-help-section .th-section-subtitle {
      font-size: 12px !important;
      line-height: 1.65 !important;
      color: #33322f !important;
      margin: 0 0 32px !important;
      text-wrap: pretty;
    }
  
    .th-need-help-container {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
  
    .th-need-help-container,
    .th-need-help-container.grid-5 {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 32px 12px !important;
    }
  
    .th-need-help-container.grid-5 .th-item-help:last-child:nth-child(odd),
    .th-need-help-container .th-item-help:last-child:nth-child(odd) {
      grid-column: 1 / -1 !important;
      max-width: none !important;
      margin: 0 !important;
    }
  
    .th-item-help {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 10px !important;
      padding: 8px 4px !important;
    }
  
    .th-item-help .th-btn-circle-icon {
      width: 56px !important;
      min-width: 56px !important;
      max-width: 56px !important;
      height: 56px !important;
      min-height: 56px !important;
      border-radius: 50% !important;
      background: #f0efed !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-bottom: 0 !important;
      color: #231f20 !important;
      aspect-ratio: 1 !important;
      flex-shrink: 0 !important;
    }
  
    .th-item-help .th-btn-circle-icon i {
      font-size: 20px !important;
    }
  
    .th-item-help h6.th-item-title-bold,
    .th-item-help .th-item-title-bold {
      font-size: 14px !important;
      font-weight: 700 !important;
      margin: 10px 0px 0px !important;
      min-height: auto !important;
      color: #231f20 !important;
      line-height: 1.3 !important;
      
    }
  
    .th-item-help .th-description.th-need-to-help-des-my,
    .th-item-help .th-description {
      font-size: 12px !important;
      line-height: 1.55 !important;
      margin: 0 !important;
      color: #33322f !important;
      max-width: 170px !important;
    }
  
    .th-item-help .th-link {
      display: block !important;
    }
  
    .th-item-help .th-link a,
    .th-item-help .th-link .th-link-text {
      font-size: 12px !important;
      font-weight: 700 !important;
      color: #231f20 !important;
      text-decoration: underline !important;
      text-underline-offset: 4px !important;
    }
  
    .th-item-help .th-link-icon {
      display: none !important;
    }
  }
  



/* ============================================================
   GENERAL TYPOGRAPHY & SPACING
   ============================================================ */
@media (max-width: 768px) {
  body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px !important;
    color: #33322f;
    background: #ffffff;
  }

  .th-container,
  .th-container-md {
    max-width: 100% !important;
  }

  img {
    max-width: 100% !important;
  }

  .th-component-edit-link,
  [data-v-project-edit-link],
  [data-v-heroproject-component-link],
  [data-v-projectunderhero-component-link],
  [data-v-projectdetails-component-link],
  [data-v-projectgallery-component-link],
  [data-v-projectdetailpenetrating-component-link],
  [data-v-featuredproductslider-component-link],
  [data-v-featuredprojectslider-component-link],
  [data-v-needhelp-component-link] {
    display: none !important;
  }

  .sticky-wrapper.desktop-menu .main-menu {
    display: none !important;
  }

  .way-points-container {
    display: none !important;
  }
}


/* ============================================================
   EXTRA SMALL (max-width: 390px)
   Keep hero title at design 26px — do not shrink
   ============================================================ */
@media (max-width: 390px) {
  #hero.hero-project .th-hero-title,
  #hero.hero-project h1.th-hero-title {
    font-size: 26px !important;
  }

  #photo-gallery .th-section-title,
  #th-product-slider .th-section-title,
  #th-featured-projects-slider .th-section-title,
  #need-help-section .th-section-title {
    font-size: 20px !important;
  }
}

/* ============================================================
   12. FOOTER
   Design: bg #eaeaec | pad 32px 0 0 / 0 20px
   News: title 16/600, desc 12 mb12
   form: column gap 10 | input 100% h44 | btn 100% pad 11px 0
   nav: flex wrap, links 12px pad 4px 8px, NO pipe borders
   social: 36px circles gap 16 | copyright left, 11px #6c757d
   ============================================================ */
@media (max-width: 768px) {
  #footer-section-container,
  #footer-section-container.th-footer,
  #footer-section-container.bg-gray {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
    background: #eaeaec !important;
    background-color: #eaeaec !important;
  }

  #footer-section-container .th-component-edit-link {
    display: none !important;
  }

  #footer-section-container .container.th-container,
  #footer-section-container .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  #footer-section-container .row.component-footer {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  #footer-section-container .col-lg-8,
  #footer-section-container .col-lg-4,
  #footer-section-container .col-lg-4.d-flex {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #footer-section-container .border-right-dark,
  #footer-section-container .border-right-md-0 {
    border-right: 0 !important;
  }

  #footer-section-container h4.th-footer-title {
    font-size: 18px !important;
    margin: 0 0 16px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
  }

  /* Top contact email/phone only — NOT office phone rows
     (those also use .text-weight-600.pt-10) */
  #footer-section-container .footer-left-content > .text-weight-600.pt-10 {
    margin-bottom: 24px !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  #footer-section-container .footer-left-content > .text-weight-600.pt-10 .d-flex.align-items-center {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important; /* design: icon + text gap */
    width: auto !important;
  }

  #footer-section-container .footer-left-content .d-flex.align-items-center p,
  #footer-section-container .footer-left-content .d-flex.align-items-center a {
    font-size: 12px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex: 0 1 auto !important;
  }

  /* Kill .pr-5 / .th-pr-5 and the old width:0 hack so email + phone
     share the same tight 8px gap (phone glyph was reading much looser) */
  #footer-section-container .footer-left-content .d-flex.align-items-center > i,
  #footer-section-container .th-showroom-address .d-flex.align-items-center > i {
    padding: 0 !important;
    margin: 0 !important;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
    flex: 0 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #footer-section-container .d-grid.grid-col-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Kill desktop grid that left a 1fr gap and centered phone rows */
  #footer-section-container .th-showroom-address {
    display: block !important;
    padding-top: 0 !important;
    text-align: left !important;
    width: 100% !important;
  }

  #footer-section-container .th-showroom-address p.th-footer-heading {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 4px !important;
    color: #231f20 !important;
    text-align: left !important;
  }

  #footer-section-container .th-showroom-address p.th-address-line {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    min-height: 0 !important;
    text-align: left !important;
  }

  /* Office phone — keep icon + number on one left-aligned row */
  #footer-section-container .th-showroom-address .d-flex.align-items-center,
  #footer-section-container .th-showroom-address .d-flex.align-items-center.text-weight-600 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #footer-section-container .th-showroom-address .d-flex.align-items-center p {
    width: auto !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #footer-section-container .th-showroom-address p.th-opening-hours,
  #footer-section-container .th-showroom-address .footer-phone-link,
  #footer-section-container .th-showroom-address a {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* ---- Krost News / subscription ---- */
  #footer-section-container .col-lg-4 .th-subscription,
  #footer-section-container .th-subscription {
    padding: 24px 0 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(33, 37, 41, 0.18) !important;
    margin: 24px 0 0 !important;
    width: 100% !important;
  }

  #footer-section-container .th-subscription h4.th-footer-title,
  #footer-section-container .th-subscription .th-footer-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 0 4px !important;
  }

  #footer-section-container .th-subscription .description,
  #footer-section-container .th-subscription .th-description {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #33322f !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  /* Kill desktop side-by-side form (541px sets input width:175px) */
  #footer-section-container .th-subscription .th-subscription-form,
  #footer-section-container #subscription-form-container,
  #footer-section-container .th-subscription-form {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 0 0 !important;
    width: 100% !important;
  }

  #footer-section-container .th-subscription-form label,
  #footer-section-container .th-subscription .th-subscription-form label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }

  #footer-section-container .th-subscription-form input,
  #footer-section-container .th-subscription-form input[type="email"],
  #footer-section-container .th-subscription-form input.form-control,
  #footer-section-container .th-subscription .th-subscription-form input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    border-radius: 2px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  #footer-section-container .th-subscription-form .link,
  #footer-section-container .th-subscription .th-subscription-form .link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }

  #footer-section-container .th-subscription-form button,
  #footer-section-container .th-subscription-form button#subscription-form-button,
  #footer-section-container .th-subscription-form button.link-text,
  #footer-section-container #subscription-form-button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 11px 0 !important;
    font-weight: 600 !important;
    background: #212529 !important;
    background-color: #212529 !important;
    color: #eaeaec !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* ---- Nav links: no pipe separators ---- */
  #footer-section-container .th-footer-navigation {
    padding: 12px 0 0 !important;
    margin: 0 !important;
  }

  #footer-section-container .th-footer-navigation ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #footer-section-container .th-footer-navigation ul li,
  #footer-section-container .th-subscription .th-footer-navigation ul li {
    display: block !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    border: none !important;
    border-right: 0 !important;
  }

  #footer-section-container .th-footer-navigation ul li .link,
  #footer-section-container .th-footer-navigation ul li .link.class,
  #footer-section-container .th-footer-navigation ul li .link.border-right-0 {
    display: block !important;
    border: none !important;
    border-right: 0 !important;
    padding: 0 !important;
  }

  #footer-section-container .th-footer-navigation ul li a {
    display: inline-block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #231f20 !important;
    padding: 4px 8px !important;
    text-decoration: none !important;
  }

  /* ---- Follow Us ---- */
  #footer-section-container .th-footer-follow {
    padding: 16px 0 0 !important;
    margin: 0 !important;
  }

  #footer-section-container .th-footer-follow p {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  #footer-section-container .social-media-list,
  #footer-section-container .social-media ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #footer-section-container .social-media-item {
    margin: 0 !important;
    padding: 0 !important;
  }

  #footer-section-container .social-media-item .link a,
  #footer-section-container .social-media-list a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border: 1px solid #212529 !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    color: #212529 !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  /* ---- Copyright bar ---- */
  #footer-section-container .th-footer-copyright,
  .th-footer-copyright {
    margin-top: 24px !important;
    padding: 12px 0 !important;
    border-top: 1px solid rgba(33, 37, 41, 0.12) !important;
  }

  #footer-section-container .th-footer-copyright .container,
  .th-footer-copyright .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #footer-section-container .th-footer-copyright-content,
  .th-footer-copyright-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 4px !important;
  }

  #footer-section-container .th-footer-copyright .text-muted,
  #footer-section-container .th-footer-copyright .copyright-text-right,
  #footer-section-container .th-footer-copyright a,
  .th-footer-copyright .text-muted,
  .th-footer-copyright .copyright-text-right,
  .th-footer-copyright a {
    font-size: 11px !important;
    color: #6c757d !important;
    text-align: left !important;
  }
}