/*
 * mobile-project-list.css
 * Mobile-only overrides for project/project-index.html (max-width: 768px)
 * Target design: Project-Listing-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;
  }
}


/* ============================================================
   3. HERO SECTION (#th-project-hero)
   Design: min-height 460px | cover/center
   overlay linear-gradient(180deg, rgba(35,31,32,0.55) 0%,
     rgba(35,31,32,0.15) 42%, rgba(35,31,32,0.82) 100%)
   breadcrumb pad 14px 20px 0 | 11px / 0.04em / gap 8px
   title 26/1.18/700 | margin 0 0 18px
   content pad 0 20px 32px
   buttons stack gap 10px | pad 11px 20px | 13/600 | radius 2px
   ============================================================ */
@media (max-width: 768px) {
  #th-project-hero.th-hero-wrapper,
  #th-project-hero.th-hero {
    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;
  }

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

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

  #th-project-hero .container.th-container.th-hero-section,
  #th-project-hero .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;
  }

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

  #th-project-hero .col-xl-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 100% !important;
  }

  #th-project-hero .th-breadcrumb {
    padding: 14px 20px 0 !important;
    margin: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
  }

  #th-project-hero .th-breadcrumb .breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !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: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
  }

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

  #th-project-hero .th-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0 8px 0 0 !important;
    float: none !important;
  }

  #th-project-hero .th-breadcrumb .breadcrumb-item.active span,
  #th-project-hero .th-breadcrumb .breadcrumb-item.active {
    color: #ffffff !important;
    font-weight: 600 !important;
  }

  #th-project-hero .th-admin-links {
    display: none !important;
  }

  #th-project-hero .th-hero-container,
  #th-project-hero .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;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

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

  #th-project-hero .th-hero-style,
  #th-project-hero .th-hero-style.th-mt-115 {
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 20px 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  #th-project-hero .th-hero-title,
  #th-project-hero .th-hero-title.th-hero-title-mb,
  #th-project-hero .th-hero-title.Projects_class,
  #th-project-hero .th-hero-container .th-hero-style .th-hero-title {
    font-size: 26px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-align: left !important;
    letter-spacing: normal !important;
  }

  /* Design hero has no subtitle */
  #th-project-hero .th-hero-subtitle,
  #th-project-hero .th-hero-subtitle.th-project-hero-subtitle,
  #th-project-hero .th-hero-subtitle.th-hero-subtitle-my {
    display: none !important;
  }

  #th-project-hero .th-hero-wrapp,
  #th-project-hero .th-hero-wrapp.th-pt-16 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #th-project-hero .th-hero-wrapp .position-relative,
  #th-project-hero .th-hero-wrapp [data-v-projecthero-component-buttons] {
    position: relative !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px;
    display: flex;
    flex-direction: column !important;
  }

  #th-project-hero .th-hero-wrapp a,
  #th-project-hero .th-hero-wrapp a.th-btn,
  #th-project-hero .th-hero-wrapp a.th-btn-outline {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 11px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 2px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #th-project-hero .th-hero-wrapp a.th-btn,
  #th-project-hero .th-hero-wrapp .position-relative:first-child a {
    background: #ffffff !important;
    color: #231f20 !important;
    border: none !important;
  }

  #th-project-hero .th-hero-wrapp a.th-btn-outline,
  #th-project-hero .th-hero-wrapp .position-relative:last-child a {
    background: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
  }

  #th-project-hero .th-hero-wrapp a::before,
  #th-project-hero .th-hero-wrapp a::after,
  #th-project-hero .th-hero-wrapp a.th-btn::before,
  #th-project-hero .th-hero-wrapp a.th-btn::after,
  #th-project-hero .th-hero-wrapp a.th-btn-outline::before,
  #th-project-hero .th-hero-wrapp a.th-btn-outline::after {
    display: none !important;
    content: none !important;
  }

  #th-project-hero .th-hero-wrapp a span {
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ============================================================
   4. FEATURED PROJECTS (#th-feature-project)
   Design: bg #f6f5f3 | pad 48px 0 52px
   header pad 0 20px 30px | 28x1 rule + title 20/1.25/600 #333
   lead: full-bleed img 320px cover + bottom gradient
   overlay designer 11px / 0.1em uppercase | title 20/1.25/700 white
   caption pad 16px 20px 0 | desc 12/1.65 #33322f | view 12/700 underline
   rest: pad 30px 20px 0 | row 118px + 1fr / gap 14px
   row pad 18px 0 | border-top 1px #ddd9d5
   thumb 1/1 cover radius 10px
   designer 11px / 0.08em uppercase #7a7772
   title 15/600/1.3 | desc 12/1.55 clamp 2 | view 12/700 underline
   ============================================================ */
@media (max-width: 768px) {
  #th-feature-project,
  #th-feature-project.bg-gray,
  #th-feature-project.th-section-py {
    background: #f6f5f3 !important;
    background-color: #f6f5f3 !important;
    padding: 48px 0 52px !important;
  }

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

  #th-feature-project .row.categories,
  #th-feature-project .row.categories > .col-12 {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #th-feature-project .col-12.mb-25 {
    margin-bottom: 0 !important;
  }

  #th-feature-project .th-section-header {
    display: block !important;
    padding: 0 0 30px !important;
    margin: 0 !important;
  }

  #th-feature-project .th-section-header-wrapper,
  #th-feature-project .th-section-header-wrapper.text-center {
    text-align: left !important;
    padding: 0 !important;
  }

  #th-feature-project .th-section-title,
  #th-feature-project .th-section-title.th-title-mb-15 {
    font-family: "Open Sans", sans-serif !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #th-feature-project .th-section-title::before {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    background: #231f20;
    margin: 0 0 14px;
  }

  #th-feature-project .th-section-subtitle {
    display: none !important;
  }

  #th-feature-project .section-body,
  #th-feature-project .th-masonry-col-2 {
    padding: 0 !important;
    margin: 0 !important;
  }

  #th-feature-project .th-masonry-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  #th-feature-project .th-masonry-grid-item,
  #th-feature-project .th-masonry-grid-item.grid-col-span-7,
  #th-feature-project .th-masonry-grid-item.grid-col-span-6,
  #th-feature-project .th-masonry-grid-item.mb-20,
  #th-feature-project .th-masonry-grid-item.th-mb-20 {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding-top: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* ---- Lead card (first item) — image bleeds edge-to-edge ---- */
  #th-feature-project .th-masonry-grid-item:first-child,
  #th-feature-project .th-masonry-grid-item.th-featured-lead {
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
  }

  #th-feature-project .th-masonry-grid-item:first-child .th-item-img,
  #th-feature-project .th-featured-lead .th-item-img {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 320px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: auto !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  #th-feature-project .th-masonry-grid-item:first-child .th-item-img a,
  #th-feature-project .th-featured-lead .th-item-img a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  #th-feature-project .th-masonry-grid-item:first-child .th-item-img img,
  #th-feature-project .th-featured-lead .th-item-img img {
    width: 100% !important;
    height: 320px !important;
    object-fit: cover !important;
    display: block !important;
  }

  #th-feature-project .th-masonry-grid-item:first-child .th-item-img::after,
  #th-feature-project .th-featured-lead .th-item-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(35, 31, 32, 0) 42%,
      rgba(35, 31, 32, 0.78) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  #th-feature-project .th-featured-lead-overlay {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 18px !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  #th-feature-project .th-featured-lead-overlay .th-item-designer,
  #th-feature-project .th-featured-lead-overlay .th-story-subtitle,
  #th-feature-project .th-featured-lead .th-item-designer,
  #th-feature-project .th-masonry-grid-item:first-child .th-featured-lead-overlay [data-v-featureprojectsmasonry-project-designer] {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
  }

  #th-feature-project .th-featured-lead-overlay [data-v-featureprojectsmasonry-project-credit_label] {
    display: none !important;
  }

  #th-feature-project .th-featured-lead-overlay .th-story-title,
  #th-feature-project .th-featured-lead-overlay h3,
  #th-feature-project .th-featured-lead-overlay .th-link,
  #th-feature-project .th-featured-lead-overlay .th-link-pr-5,
  #th-feature-project .th-featured-lead-overlay [data-v-featureprojectsmasonry-project-name] {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  #th-feature-project .th-featured-lead-overlay a {
    color: #ffffff !important;
    text-decoration: none !important;
  }

  #th-feature-project .th-masonry-grid-item:first-child .th-product-info-wrapper,
  #th-feature-project .th-featured-lead .th-product-info-wrapper {
    padding: 16px 0px 0 !important;
    margin: 0 !important;
  }

  #th-feature-project .th-masonry-grid-item:first-child .th-item-info,
  #th-feature-project .th-masonry-grid-item:first-child .th-prject-item-info,
  #th-feature-project .th-featured-lead .th-item-info {
    margin: 0 !important;
    padding: 0 !important;
  }

  #th-feature-project .th-masonry-grid-item:first-child [data-v-featureprojectsmasonry-project-preview_text],
  #th-feature-project .th-featured-lead [data-v-featureprojectsmasonry-project-preview_text],
  #th-feature-project .th-featured-lead .th-featured-lead-desc {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #th-feature-project .th-featured-view,
  #th-feature-project .th-featured-lead .th-featured-view {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    display: inline-block !important;
  }

  /* ---- Rest cards — horizontal rows ---- */
  #th-feature-project .th-masonry-grid-item:nth-child(n + 2),
  #th-feature-project .th-masonry-grid-item.th-featured-row {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    padding: 18px 0 !important;
    border-top: 1px solid #ddd9d5 !important;
    margin: 0 !important;
  }

  #th-feature-project .th-masonry-grid-item:nth-child(2) {
    margin-top: 30px !important;
  }

  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-item-img,
  #th-feature-project .th-featured-row .th-item-img {
    width: 118px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-item-img a,
  #th-feature-project .th-featured-row .th-item-img a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-item-img img,
  #th-feature-project .th-featured-row .th-item-img img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 10px !important;
  }

  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-product-info-wrapper,
  #th-feature-project .th-featured-row .th-product-info-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-item-info,
  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-item-info.th-mt-15,
  #th-feature-project .th-featured-row .th-item-info {
    margin: 0 !important;
    padding: 0 !important;
  }

  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-item-designer,
  #th-feature-project .th-featured-row .th-item-designer,
  #th-feature-project .th-featured-row .th-story-subtitle {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #7a7772 !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
  }

  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-title,
  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) h3,
  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-link-text,
  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-link,
  #th-feature-project .th-featured-row .th-title,
  #th-feature-project .th-featured-row h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-transform: none !important;
  }

  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) p,
  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) [data-v-featureprojectsmasonry-project-preview_text],
  #th-feature-project .th-featured-row p {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #33322f !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #th-feature-project .th-masonry-grid-item:nth-child(n + 2) .th-featured-view,
  #th-feature-project .th-featured-row .th-featured-view {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  #th-feature-project .th-link-icon,
  #th-feature-project .th-link-icon-btn {
    display: none !important;
  }
}


/* ============================================================
   5. ALL PROJECTS (#projects-list)
   Design: pad 48px 0 | header 0 20px 20px
   28x1 rule + title 20/1.25/600 #333 mb 26px
   filter strip: flex gap 8px | overflow-x | pad-bottom 12px
   pill: pad 8px 14px | 13/500 | radius 2px | border #e8e8e8
   active: bg/border #231f20 | color #fff
   grid: pad 0 16px | 2 col | gap 22px 12px
   card: border 1px #e8e8e8 | radius 10px | bg #fff
   image 4/3 cover
   pin: 36px circle | top/right 10px | white | border #e0e0e0
     shadow 0 1px 4px rgba(0,0,0,0.08) | 12px
   body: pad 12px 12px 14px | gap 6px
   title 15/600/1.3 | desc 12/1.55 clamp 3
   view 12/600 underline offset 3px | mt auto
   load more: bg #231f20 | 13/600 | pad 11px 28px | radius 2px
   ============================================================ */
@media (max-width: 768px) {
  #projects-list,
  #projects-list.th-section-py {
    padding: 48px 0 !important;
    margin-bottom: 0 !important;
  }

  #projects-list .container.th-container,
  #projects-list .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  #projects-list .container.th-container > .row,
  #projects-list > .container > .row {
    margin: 0 !important;
    display: block !important;
  }

  #projects-list .section-header,
  #projects-list .project-header {
    padding: 0 4px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  #projects-list .section-header .w-100.text-center.mb-5 {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 0 !important;
  }

  #projects-list .section-title {
    font-family: "Open Sans", sans-serif !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    color: #333333 !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #projects-list .section-title::before {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    background: #231f20;
    margin: 0 0 14px;
  }

  /* Filter pills — injected by mobile-project-list.js */
  #projects-list .th-project-filter-strip,
  #projects-list .th-scroll-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 12px !important;
    margin: 0 -16px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  #projects-list .th-project-filter-pill {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    border: 1px solid #e8e8e8 !important;
    background: #ffffff !important;
    color: #33322f !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  #projects-list .th-project-filter-pill.is-active {
    border-color: #231f20 !important;
    background: #231f20 !important;
    color: #ffffff !important;
  }

  #projects-list .section-body {
    padding: 0 !important;
  }

  #projects-list .project-list-row,
  #projects-list .th-projects-list,
  #projects-list .row.project-list-row,
  #projects-list #th-project-app .project-list-row,
  #projects-list .project-list-component .project-list-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 12px !important;
    row-gap: 22px !important;
    column-gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
  }

  #projects-list .th-projects-list.th-pt-100,
  #projects-list .th-projects-list.th-projects-list-mb {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #projects-list #th-project-app,
  #projects-list #th-project-app.row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
  }

  #projects-list .project-item,
  #projects-list .project-list-item,
  #projects-list .col-12.col-sm-6.col-md-4.project-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  #projects-list .project-item.mb-80,
  #projects-list .project-list-gap {
    margin-bottom: 0 !important;
  }

  #projects-list .list-img,
  #projects-list .project-item .list-img {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    display: block !important;
    background: #f6f6f6 !important;
  }

  #projects-list .list-img .img-container,
  #projects-list .project-item .img-container {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  #projects-list .list-img a.hover,
  #projects-list .img-container a {
    display: block !important;
  }

  #projects-list .list-img img,
  #projects-list .img-container img,
  #projects-list .project-item img.w-100 {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    max-width: 100% !important;
    max-height: none !important;
    display: block !important;
  }

  #projects-list .th-add-to-pinboard,
  #projects-list .add-to-pinboard,
  #projects-list .th-add-to-pinboard.top-right-30,
  #projects-list .add-to-pinboard.top-right-30,
  #projects-list .list-img .th-add-to-pinboard {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #231f20 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
    overflow: visible !important;
    text-transform: none !important;
    text-shadow: none !important;
    transition: transform 0.2s, background 0.2s !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #projects-list .th-add-to-pinboard:focus,
  #projects-list .th-add-to-pinboard:focus-visible,
  #projects-list .th-add-to-pinboard:active,
  #projects-list .add-to-pinboard:focus,
  #projects-list .add-to-pinboard:focus-visible,
  #projects-list .add-to-pinboard:active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #231f20 !important;
    outline: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    text-shadow: none !important;
    transform: none !important;
  }

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

  #projects-list .th-add-to-pinboard i,
  #projects-list .add-to-pinboard i,
  #projects-list .th-add-to-pinboard .fa-plus {
    font-size: 12px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  /* Vue-sized loader for TPL + Vue pin buttons */
  #projects-list .th-add-to-pinboard:has(.spinner-border) i,
  #projects-list .th-add-to-pinboard[aria-busy="true"] i {
    display: none !important;
  }

  #projects-list .th-add-to-pinboard .spinner-border,
  #projects-list .th-add-to-pinboard .spinner-border-sm {
    display: inline-block !important;
    width: 1rem !important;
    height: 1rem !important;
    --bs-spinner-width: 1rem !important;
    --bs-spinner-height: 1rem !important;
    --bs-spinner-border-width: 0.2em !important;
    border-width: 0.2em !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 1rem !important;
    vertical-align: middle !important;
  }

  @media (hover: hover) and (pointer: fine) {
    #projects-list .th-add-to-pinboard:hover,
    #projects-list .add-to-pinboard:hover {
      background: #231f20 !important;
      background-color: #231f20 !important;
      color: #ffffff !important;
      transform: rotate(45deg) !important;
      text-shadow: none !important;
    }

    #projects-list .th-add-to-pinboard:hover i,
    #projects-list .add-to-pinboard:hover i {
      color: #ffffff !important;
    }
  }

  #projects-list .card-footer,
  #projects-list .th-card-footer,
  #projects-list .project-item .card-footer {
    padding: 12px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }

  #projects-list .card-footer > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  #projects-list .th-label,
  #projects-list .card-footer .th-label {
    display: none !important;
  }

  #projects-list .card-footer a.hover {
    display: block !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  #projects-list .th-project-title,
  #projects-list .th-title,
  #projects-list .card-footer h3,
  #projects-list .card-footer h6,
  #projects-list .th-title-mb-15,
  #projects-list .th-title-pt-8 {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #231f20 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
  }


  #projects-list [data-v-allprojects-project-preview_text] {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #33322f !important;
    margin: 0 !important;
    padding-top: 6px !important;
    font-weight: 400 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #projects-list [data-v-allprojects-project-preview_text] p {
    display: inline !important;
    min-height: 0 !important;
  }

  #projects-list .card-footer > div:last-child,
  #projects-list .card-footer .d-flex.align-items-center {
    margin-top: auto !important;
    display: block !important;
  }

  #projects-list .th-read-more-btn,
  #projects-list .link.th-read-more-btn {
    display: inline !important;
    align-items: unset !important;
  }

  #projects-list .th-link-text,
  #projects-list .link-text,
  #projects-list .th-read-more-btn .th-link-text,
  #projects-list .th-read-more-btn .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;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: inline !important;
    border: none !important;
  }

  #projects-list .th-link-icon-btn,
  #projects-list .th-read-more-btn .th-link-icon-btn {
    display: none !important;
  }

  #projects-list .row.justify-content-center,
  #projects-list [data-v-load-more-container] {
    display: flex !important;
    justify-content: center !important;
    padding: 28px 4px 0 !important;
    margin: 0 !important;
  }

  #projects-list .th-pt-80 {
    padding-top: 28px !important;
  }

  #projects-list [data-v-load-more-container] .col-auto.th-pt-100 {
    padding-top: 0 !important;
  }

  #projects-list #load_more_button,
  #projects-list .btn.th-btn-gray.load-more,
  #projects-list button.load-more {
    background: #231f20 !important;
    background-color: #231f20 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 2px !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 11px 28px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-width: 0 !important;
  }
}


/* ============================================================
   6. FOOTER
   Design: bg #eaeaec | pad 28px 0 0 / 0 20px
   Contact Us 18/600 mb 12 | rows gap 8 | icon 14px / 12px
   offices gap 22 | mt 26 | city 14/600 mb 8 | body 12/1.6
   news: border-top rgba(33,37,41,0.22) | mt 26 | pt 24
   title 17/700 mb 6 | desc 12 mb 14
   form column gap 12 | input 100% h46 / 12px / pad 10px 14px
   btn 100% / 12/600 / pad 14px 0 / bg #231f20
   nav wrap gap 4px 12px | mt 26 | 12px
   social 36px circles | gap 10 | follow 12/600
   copyright pad 14px 20px 18px | 12px #6c757d
   ============================================================ */
@media (max-width: 768px) {
  #footer-section-container,
  #footer-section-container.th-footer,
  #footer-section-container.bg-gray {
    padding-top: 28px !important;
    padding-bottom: 0 !important;
    background: #eaeaec !important;
    background-color: #eaeaec !important;
    color: #212529 !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 12px !important;
    font-weight: 600 !important;
    color: #212529 !important;
  }

  #footer-section-container .footer-left-content > .text-weight-600.pt-10 {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 12px !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: 12px !important;
    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;
    color: #212529 !important;
  }

  #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: 22px !important;
    margin-top: 26px !important;
  }

  #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 8px !important;
    color: #212529 !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 0 8px !important;
    min-height: 0 !important;
    text-align: left !important;
  }

  #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: 12px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 8px !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;
    color: #212529 !important;
  }

  #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.22) !important;
    margin: 26px 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: 17px !important;
    font-weight: 700 !important;
    color: #212529 !important;
    margin: 0 0 6px !important;
  }

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

  #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: 12px !important;
    margin: 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: 46px !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    padding: 10px 14px !important;
    border: 1px solid #d6d6d8 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    color: #212529 !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-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding: 14px 0 !important;
    font-weight: 600 !important;
    background: #231f20 !important;
    background-color: #231f20 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  #footer-section-container .th-footer-navigation {
    padding: 26px 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: 4px 12px !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: 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: block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #212529 !important;
    padding: 0 !important;
    text-decoration: none !important;
  }

  #footer-section-container .th-footer-follow {
    padding: 22px 0 0 !important;
    margin: 0 !important;
  }

  #footer-section-container .th-footer-follow p {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin: 0 0 10px !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: 10px !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: 12px !important;
    font-weight: 600 !important;
    color: #212529 !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  #footer-section-container .th-footer-copyright,
  .th-footer-copyright {
    margin-top: 24px !important;
    padding: 14px 0 18px !important;
    border-top: 1px solid rgba(33, 37, 41, 0.14) !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: 12px !important;
    color: #6c757d !important;
    text-align: left !important;
  }
}


/* ============================================================
   7. 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-hero-component-link],
  [data-v-featureprojectsmasonry-component-link],
  [data-v-allprojects-component-link] {
    display: none !important;
  }

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

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


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

  #th-feature-project .th-section-title,
  #projects-list .section-title {
    font-size: 20px !important;
  }
}