/* * mobile-about.css * Mobile-only overrides for about/index.html (max-width: 768px) * Target design: about-page-mobile (1).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. */ /* ============================================================ 1. TOP BAR ============================================================ */ @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; } .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 ============================================================ */ @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 .menu-area { padding: 0; } .sticky-wrapper.desktop-menu .menu-area .row { padding-left: 15px !important; padding-right: 15px !important; min-height: 60px; } .header-logo a img { height: 22px; width: auto; } .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; } 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; font-size: 18px; margin-left: -8px; cursor: pointer; } .fa-regular.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 { 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 (#hero-about) Design: min-height 520px, breadcrumb pad 20px, title 26/700, content pad 0 20px 32px, buttons full-width stack gap 10px, btn pad 11px 20px / 13px / 600 / radius 2px ============================================================ */ @media (max-width: 768px) { #hero-about.th-hero-wrapper, #hero-about.th-hero { position: relative !important; min-height: 520px !important; height: auto !important; padding: 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; } /* Single overlay — match design gradient exactly */ #hero-about.th-hero-wrapper::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 31, 32, 0.15) 0%, rgba(35, 31, 32, 0.78) 100%); pointer-events: none; z-index: 0; } /* Kill desktop gr-bg4 overlay so we don't double-darken */ #hero-about .gr-bg4:before, #hero-about.gr-bg4:before { display: none !important; content: none !important; background: none !important; } #hero-about .container.th-container.th-hero-section, #hero-about .th-hero-section.th-container { position: relative !important; z-index: 1 !important; padding: 0 !important; padding-top: 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: 520px !important; } #hero-about .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; } #hero-about .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; } /* Breadcrumb — top-left, 20px inset */ #hero-about .th-breadcrumb { padding: 20px 20px 0 !important; margin: 0 !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; text-align: left !important; } #hero-about .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: 12px !important; line-height: 1.4 !important; color: rgba(255, 255, 255, 0.85) !important; background: transparent !important; } #hero-about .th-breadcrumb .breadcrumb-item, #hero-about .th-breadcrumb .breadcrumb-item a, #hero-about .th-breadcrumb .breadcrumb-item span, #hero-about .th-breadcrumb .breadcrumb-item.active { font-size: 12px !important; font-weight: 400 !important; color: rgba(255, 255, 255, 0.85) !important; padding: 0 !important; } #hero-about .th-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/" !important; color: rgba(255, 255, 255, 0.55) !important; padding: 0 8px 0 0 !important; float: none !important; } #hero-about .th-breadcrumb .breadcrumb-item.active span, #hero-about .th-breadcrumb .breadcrumb-item.active { color: #ffffff !important; } #hero-about .th-admin-links { display: none !important; } /* * Critical: desktop .th-hero-container uses flex-direction:row + * align-items:center which shrink-wraps & centers the title/CTAs. * Force column + stretch so content is full-bleed left-aligned. */ #hero-about .th-hero-container, #hero-about .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; } #hero-about .way-points-container { display: none !important; } #hero-about .th-hero-style, #hero-about .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; } #hero-about .th-hero-title, #hero-about .th-hero-title.th-hero-title-mb, #hero-about .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; } #hero-about .th-hero-wrapp, #hero-about .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; } #hero-about .th-hero-wrapp .position-relative, #hero-about .th-hero-wrapp [data-v-heroabout-component-buttons] > div { position: relative !important; padding: 0 !important; padding-bottom: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; display: block !important; } /* Match every CTA anchor — CMS class names may vary */ #hero-about .th-hero-wrapp a, #hero-about .th-hero-wrapp a.th-btn, #hero-about .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; } #hero-about .th-hero-wrapp a.th-btn, #hero-about .th-hero-wrapp a:not(.th-btn-outline):first-child, #hero-about .th-hero-wrapp .position-relative:first-child a { background: #ffffff !important; color: #231f20 !important; border: none !important; } #hero-about .th-hero-wrapp a.th-btn-outline, #hero-about .th-hero-wrapp .position-relative:last-child a { background: transparent !important; border: 2px solid #ffffff !important; color: #ffffff !important; } #hero-about .th-hero-wrapp a::before, #hero-about .th-hero-wrapp a::after, #hero-about .th-hero-wrapp a.th-btn::before, #hero-about .th-hero-wrapp a.th-btn::after, #hero-about .th-hero-wrapp a.th-btn-outline::before, #hero-about .th-hero-wrapp a.th-btn-outline::after { display: none !important; content: none !important; } #hero-about .th-hero-wrapp a span { margin: 0 !important; padding: 0 !important; } } /* ============================================================ 4. ESTABLISHED SECTION Design: pad 48px 0 0 | text pad 0 20px 32px | title 20/700 body 16px (site body) / 1.65 | CTA 12/700 + arrow | images 2-col gap 12, side 16, bottom 20, mid-image #f6f5f3 split ============================================================ */ @media (max-width: 768px) { #about-established, #about-established.th-established-section-py { padding: 48px 0 0 !important; margin: 0 !important; background: #ffffff !important; background-color: #ffffff !important; } #about-established [data-v-aboutestablished-component-link] { display: none !important; } #about-established .th-established-section { display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ---- Content block (order first) ---- */ #about-established .th-established-section-wrapper, #about-established .bg-gray.th-established-section-wrapper { order: 1 !important; background: #ffffff !important; background-color: #ffffff !important; padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; } #about-established .th-established-section-wrapper .container.th-container, #about-established .th-established-section-wrapper .established-mobile-view { padding: 0 20px 32px !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } #about-established .th-established-section-wrapper .row { margin: 0 !important; display: block !important; } #about-established .th-established-section-wrapper .col-12.col-md-6.mb-4 { display: none !important; } #about-established .th-established-section-wrapper .col-12.col-md-6 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 !important; } #about-established .th-about-established-info, #about-established .th-about-established-info.th-established-info-py { display: block !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; } #about-established .th-about-established-title { font-size: 20px !important; line-height: 1.25 !important; font-weight: 700 !important; color: #231f20 !important; margin: 0 0 12px !important; padding: 0 !important; text-transform: none !important; letter-spacing: normal !important; } #about-established .established-content-description, #about-established .established-content-description.th-mb-20 { /* margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; gap: 0 !important; */ font-size: 12px !important; line-height: 1.65 !important; color: #33322f !important; } #about-established .established-content-description p { line-height: 1.65 !important; color: #33322f !important; margin: 0 0 12px !important; padding: 0 !important; text-wrap: pretty; } #about-established .established-content-description p:last-child { margin-bottom: 20px !important; } /* If CMS outputs a single block with no trailing p margin */ #about-established .established-content-description > *:last-child { margin-bottom: 20px !important; } #about-established .established-content-button { margin: 0 !important; padding: 0 !important; } /* Kill .th-btn-primary chrome — render as text link + arrow */ #about-established .established-content-button a, #about-established .established-content-button a.th-btn-primary { display: inline-flex !important; align-items: center !important; gap: 7px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.04em !important; color: #231f20 !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; width: auto !important; height: auto !important; box-shadow: none !important; text-shadow: none !important; text-transform: none !important; text-align: left !important; overflow: visible !important; vertical-align: middle !important; position: relative !important; } #about-established .established-content-button a::before, #about-established .established-content-button a.th-btn-primary::before { content: none !important; display: none !important; } #about-established .established-content-button a::after, #about-established .established-content-button a.th-btn-primary::after { content: "\2192" !important; /* → */ font-family: inherit !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1 !important; color: #231f20 !important; display: inline-block !important; position: static !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; background: none !important; margin: 0 !important; padding: 0 !important; z-index: 1 !important; transform: none !important; } /* ---- Images block (order second) ---- */ #about-established .th-about-established-images, #about-established .th-about-established-images.established-mobile-view { order: 2 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; column-gap: 12px !important; row-gap: 12px !important; padding: 0 16px 20px !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; position: relative !important; top: auto !important; left: auto !important; /* Mid-image split: white → #f6f5f3 (matches design + principles) */ background-color: #f6f5f3 !important; background-image: linear-gradient( to bottom, #ffffff 0%, #ffffff 45%, #f6f5f3 45%, #f6f5f3 100% ) !important; } /* component.css hides this on mobile — force visible as grid children */ #about-established .th-about-established-images-container, #about-established .th-about-established-images .th-about-established-images-container { display: contents !important; position: static !important; top: auto !important; left: auto !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } #about-established .th-about-established-image, #about-established .th-about-established-images-container .th-about-established-image { width: 100% !important; margin: 0 !important; padding: 0 !important; padding-top: 0 !important; } #about-established .th-about-established-image:nth-child(2), #about-established .th-about-established-images-container .th-about-established-image:nth-child(2) { margin-top: 0 !important; padding-top: 0 !important; } #about-established .th-about-established-image img, #about-established .th-about-established-images-container .th-about-established-image img { width: 100% !important; max-width: 100% !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; display: block !important; background: #ffffff !important; height: auto !important; margin: 0 !important; padding: 0 !important; } } /* ============================================================ 5. PRINCIPLES SECTION ============================================================ */ @media (max-width: 768px) { #about-pinciple.th-section-py { padding: 48px 20px !important; background: #f6f5f3 !important; } #about-pinciple [data-v-ourprinciple-component-link] { display: none !important; } #about-pinciple .container.th-container { padding: 0 !important; max-width: 100% !important; } #about-pinciple .th-about-principle-header { padding-top: 0 !important; margin: 0 0 32px !important; } #about-pinciple .th-about-principle-title { font-size: 20px !important; line-height: 1.25 !important; font-weight: 700 !important; color: #231f20 !important; margin: 0 !important; text-transform: none !important; } #about-pinciple .principle-list.row { display: flex !important; flex-direction: column !important; gap: 52px !important; margin: 0 !important; } #about-pinciple .principle-item { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 !important; } #about-pinciple .principle-item .card { background: transparent !important; border: none !important; box-shadow: none !important; } #about-pinciple .th-item-number-card-container { padding: 0 !important; border: none !important; } #about-pinciple .th-item-card-number { display: block !important; align-items: flex-start !important; } #about-pinciple .th-item-card-number h3, #about-pinciple .th-item-card-number .display-1 { font-size: 44px !important; font-weight: 700 !important; line-height: 1 !important; color: #231f20 !important; opacity: 0.13 !important; letter-spacing: -0.03em !important; margin: 0 0 20px !important; } #about-pinciple .th-item-card-number h5, #about-pinciple .th-item-card-number .font-size-20 { font-size: 15px !important; font-weight: 700 !important; color: #231f20 !important; margin: 0 0 8px !important; line-height: 1.3 !important; } #about-pinciple .th-description, #about-pinciple .th-item-number-card-text, #about-pinciple .th-item-number-card-container p, #about-pinciple [data-v-ourprinciple-component_item-description] { font-size: 12px !important; line-height: 1.65 !important; color: #33322f !important; margin: 0 0 8px !important; } #about-pinciple .th-item-number-card-container p:last-child, #about-pinciple .th-description:last-child, #about-pinciple .th-item-number-card-text:last-child { margin-bottom: 0 !important; } } /* ============================================================ 6. WHO WE ARE SECTION ============================================================ */ @media (max-width: 768px) { #about-who-you.th-section-custom-py { padding: 0 0 48px !important; background: #231f20 !important; position: relative; } #about-who-you [data-v-videogallerywhoweare-component-link] { display: none !important; } #about-who-you .gr-bg8-sm { background: transparent !important; background-image: none !important; } #about-who-you .container.th-container { padding: 0 !important; max-width: 100% !important; } #about-who-you .section-body .row { margin: 0 !important; display: flex !important; flex-direction: column !important; } #about-who-you .col-12.col-md-5, #about-who-you .col-12.col-md-7 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; } #about-who-you .th-section-header-wrapper { padding: 48px 20px 28px !important; } #about-who-you .th-section-header-py { padding: 0 !important; } #about-who-you .th-section-title { font-size: 26px !important; line-height: 1.18 !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 16px !important; letter-spacing: -0.015em !important; } #about-who-you .th-section-subtitle { font-size: 13px !important; line-height: 1.8 !important; color: rgba(255, 255, 255, 0.82) !important; margin: 0 0 24px !important; text-wrap: pretty; padding-bottom: 0 !important; } /* Injected pill row (see mobile-about.js) */ #about-who-you .th-about-who-pills { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #about-who-you .th-about-who-pill { font-size: 11px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; border-radius: 100px !important; padding: 8px 14px !important; background: transparent !important; line-height: 1 !important; } /* * Video card — match design: * * * white 60px play circle + black triangle * * Desktop sets .inline-video-gallery-container { height: 400/535px } * which leaves a black empty band under the poster — kill that. */ #about-who-you .inline-video-gallery-container, #about-who-you #whoWeAre { position: relative !important; display: block !important; overflow: hidden !important; border-radius: 10px !important; margin: 0 20px !important; width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; background: transparent !important; } #about-who-you .inline-video-gallery-thumbnails-left, #about-who-you #whoWeAre .lg-thumb-outer, #about-who-you #whoWeAre .lg-components, #about-who-you #whoWeAre .lg-toolbar, #about-who-you #whoWeAre .lg-actions, #about-who-you #whoWeAre .lg-counter, #about-who-you #whoWeAre .lg-maximize, #about-who-you #whoWeAre .lg-icon, #about-who-you #whoWeAre .lg-sub-html, #about-who-you #whoWeAre .lg-backdrop { display: none !important; opacity: 0 !important; visibility: hidden !important; height: 0 !important; pointer-events: none !important; } #about-who-you #whoWeAre .lg-container, #about-who-you #whoWeAre .lg-container.lg-show { display: block !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; } #about-who-you #whoWeAre .lg-outer, #about-who-you #whoWeAre .lg-outer.lg-inline, #about-who-you #whoWeAre .lg-outer.lg-visible { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; background: transparent !important; opacity: 1 !important; } #about-who-you #whoWeAre .lg-content, #about-who-you #whoWeAre .lg-inner { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; } #about-who-you #whoWeAre .lg-item, #about-who-you #whoWeAre .lg-item.lg-current { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; background: transparent !important; background-image: none !important; } #about-who-you #whoWeAre .lg-item:before, #about-who-you #whoWeAre .lg-img-wrap:before { display: none !important; content: none !important; height: 0 !important; } #about-who-you #whoWeAre .lg-video-cont, #about-who-you #whoWeAre .lg-media-cont { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; vertical-align: top !important; text-align: left !important; } /* Poster fills card naturally — no letterbox black bar */ #about-who-you #whoWeAre .lg-object, #about-who-you #whoWeAre .lg-video-poster, #about-who-you #whoWeAre .lg-image, #about-who-you #whoWeAre img, #about-who-you .inline-video-gallery-container img { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: cover !important; } #about-who-you #whoWeAre .lg-video-object { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } /* Design play button: 60px white circle + black triangle */ #about-who-you #whoWeAre .lg-video-play-button { width: 60px !important; height: 60px !important; max-width: 60px !important; background: rgba(255, 255, 255, 0.92) !important; background-color: rgba(255, 255, 255, 0.92) !important; border-radius: 50% !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; box-shadow: none !important; border: none !important; opacity: 1 !important; font-size: 0 !important; } #about-who-you #whoWeAre .lg-video-play-button:hover { background: rgba(255, 255, 255, 0.98) !important; transform: translate(-50%, -50%) scale(1.04) !important; } /* Hide default lightGallery SVG play artwork */ #about-who-you #whoWeAre .lg-video-play-button svg, #about-who-you #whoWeAre .lg-video-play-icon, #about-who-you #whoWeAre .lg-video-play-icon-bg, #about-who-you #whoWeAre .lg-video-play-icon-circle, #about-who-you #whoWeAre .lg-video-play-button img { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Exact design triangle */ #about-who-you #whoWeAre .lg-video-play-button::before { content: "" !important; display: block !important; width: 0 !important; height: 0 !important; border-left: 14px solid #231f20 !important; border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; margin-left: 4px !important; position: relative !important; max-width: none !important; background: none !important; } /* Soft dim overlay like design rgba(35,31,32,0.18) */ #about-who-you #whoWeAre .lg-video-cont::after { content: ""; position: absolute; inset: 0; background: rgba(35, 31, 32, 0.18); pointer-events: none; z-index: 1; border-radius: inherit; } #about-who-you #whoWeAre .lg-has-video.lg-video-loaded .lg-video-cont::after, #about-who-you #whoWeAre .lg-has-video.lg-video-loaded .lg-video-play-button { opacity: 0 !important; visibility: hidden !important; } } /* ============================================================ 7. OUR VALUE (HISTORY MASONRY) ============================================================ */ @media (max-width: 768px) { #our-history-masonary-section.th-section-custom-py { padding: 56px 0 48px !important; background: #ffffff !important; } #our-history-masonary-section [data-v-ourhistorymasonry-component-link] { display: none !important; } #our-history-masonary-section .container.th-container { padding: 0 !important; max-width: 100% !important; } #our-history-masonary-section .row { margin: 0 !important; } #our-history-masonary-section .col-12.col-md-6 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 20px !important; display: block !important; } #our-history-masonary-section .th-section-header-title { padding: 0 0 0 !important; } /* Eyebrow */ #our-history-masonary-section .th-section-title { font-size: 12px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #999999 !important; margin: 0 0 12px !important; font-weight: 400 !important; line-height: 1.4 !important; } /* Main heading (subtitle block) */ #our-history-masonary-section .th-history-subtitle, #our-history-masonary-section .th-section-subtitle.th-history-subtitle { margin: 0 0 12px !important; font-size: 20px !important; line-height: 1.25; font-weight: 700; color: rgb(35, 31, 32); } #our-history-masonary-section .th-history-subtitle p, #our-history-masonary-section .th-history-subtitle .font-size-36 { font-size: 20px !important; line-height: 1.25 !important; font-weight: 700 !important; color: #231f20 !important; margin: 0 !important; display: inline !important; } #our-history-masonary-section .th-history-subtitle p + p::before { content: " "; } #our-history-masonary-section .th-section-header-subtitle { font-size: 12px !important; line-height: 1.65 !important; color: #33322f !important; margin: 0 0 28px !important; padding: 0 !important; align-items: flex-start !important; text-wrap: pretty; } #our-history-masonary-section .th-section-bottom-border { display: none !important; } #our-history-masonary-section .th-masonry-col-2, #our-history-masonary-section .th-masonry-grid { display: flex !important; flex-direction: column !important; gap: 44px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; grid-template-columns: none !important; } #our-history-masonary-section .th-masonry-grid-item, #our-history-masonary-section .th-our-history-item { width: 100% !important; max-width: 100% !important; grid-column: auto !important; transform: none !important; padding: 0 !important; margin: 0 !important; } #our-history-masonary-section .th-item-img { margin: 0 !important; padding: 0 !important; } #our-history-masonary-section .th-item-img img, #our-history-masonary-section .thImageSection { width: calc(100% - 32px) !important; margin: 0 16px !important; height: 230px !important; object-fit: cover !important; display: block !important; border-radius: 10px !important; } #our-history-masonary-section .th-product-info-wrapper { padding: 18px 20px 0 !important; } #our-history-masonary-section .th-item-info { margin-top: 0 !important; } #our-history-masonary-section .th-item-info h3, #our-history-masonary-section .withOutArrow { font-size: 16px !important; font-weight: 700 !important; color: #231f20 !important; margin: 0 0 8px !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; } #our-history-masonary-section .th-item-description { font-size: 12px !important; line-height: 1.65 !important; color: #33322f !important; margin: 0 !important; } #our-history-masonary-section .th-link, #our-history-masonary-section .th-category-items { display: none !important; } } /* ============================================================ 8. SUSTAINABLE VALUE SECTION ============================================================ */ @media (max-width: 768px) { #about-our-sustainable-value.th-our-history-section-py { padding: 48px 0 !important; background: #f6f5f3 !important; } #about-our-sustainable-value [data-v-aboutoursustainablevalue-component-link] { display: none !important; } #about-our-sustainable-value .container.th-container { padding: 0 !important; max-width: 100% !important; } #about-our-sustainable-value .th-section-header { display: block !important; padding: 0 20px 20px !important; } #about-our-sustainable-value .th-section-title { font-size: 20px !important; line-height: 1.25 !important; font-weight: 700 !important; color: #231f20 !important; margin: 0 0 12px !important; text-transform: none !important; } #about-our-sustainable-value .th-section-subtitle { font-size: 12px !important; line-height: 1.65 !important; color: #33322f !important; margin: 0 !important; text-wrap: pretty; } #about-our-sustainable-value .section-body > .row { display: flex !important; flex-direction: column !important; margin: 0 !important; } /* Image first */ #about-our-sustainable-value .section-body > .row > .col-md-4 { order: 1 !important; width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 0 36px !important; } #about-our-sustainable-value .th-sustainable-value-right-item { width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } #about-our-sustainable-value .th-sustainable-value-right-item img { width: 100% !important; height: auto !important; display: block !important; object-fit: cover !important; } /* Items list second */ #about-our-sustainable-value .section-body > .row > [data-v-aboutoursustainablevalue-items], #about-our-sustainable-value .section-body > .row > .th-sustainable-border-right { order: 2 !important; width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 20px !important; border: none !important; } #about-our-sustainable-value .th-sustainable-border-right::after { display: none !important; } #about-our-sustainable-value [data-v-aboutoursustainablevalue-items] { display: flex !important; flex-direction: column !important; gap: 40px !important; } #about-our-sustainable-value .sustainable-value-item.row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 16px !important; margin: 0 !important; } #about-our-sustainable-value .sustainable-value-item .col-md-4, #about-our-sustainable-value .sustainable-value-item .col-md-8 { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; } #about-our-sustainable-value .sustainable-value-item .col-md-8 { flex: 1 1 auto !important; min-width: 0 !important; } #about-our-sustainable-value .th-sustainable-value-logo { display: block !important; width: 48px !important; flex-shrink: 0 !important; } #about-our-sustainable-value .th-sustainable-value-logo img { width: 48px !important; height: 48px !important; object-fit: contain !important; mix-blend-mode: multiply; } #about-our-sustainable-value .th-value-subtitle { font-size: 14px !important; font-weight: 700 !important; color: #231f20 !important; margin: 0 0 4px !important; line-height: 1.3 !important; } #about-our-sustainable-value .th-sustainable-value-description { font-size: 12px !important; line-height: 1.65 !important; color: #33322f !important; margin: 0 !important; } } /* Mobile-only process helpers — hidden on desktop */ .th-process-eyebrow, .th-process-rail, .th-process-body, .th-design-process-step-num, .th-design-process-step-title { display: none; } .th-about-who-pills { display: none; } /* ============================================================ 9. OUR DESIGN PROCESS (timeline) Design (390px): section pad 48px 20px | eyebrow 12/0.08em/#999 | title 20/700 subtitle 12/1.65 mb 32 | step: rail 9px + gap 18 | dot 7px #231f20 border | line #dcd8d2 | num 11/0.14em | title 14/700 desc 12/1.65 | step pad-bottom 30 (0 on last) ============================================================ */ @media (max-width: 768px) { #our-design-process, #our-design-process.th-section-py, #our-design-process.bg-gray { padding: 48px 20px !important; margin: 0 !important; background: #ffffff !important; background-color: #ffffff !important; } #our-design-process [data-v-ourdesignprocess-component-link] { display: none !important; } #our-design-process .container.th-container { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } #our-design-process .th-section-header, #our-design-process .th-section-header.th-section-header-pb-50 { display: block !important; padding: 0 !important; padding-bottom: 0 !important; margin: 0 0 32px !important; } #our-design-process .th-section-header-wrapper { display: block !important; padding: 0 !important; margin: 0 !important; } /* Eyebrow injected by mobile-about.js */ #our-design-process .th-process-eyebrow { display: block !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 400 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #999999 !important; margin: 0 0 12px !important; padding: 0 !important; } #our-design-process .th-section-title, #our-design-process .th-section-title.th-section-title-mb, #our-design-process .th-section-title.text-capitalize { font-size: 20px !important; line-height: 1.25 !important; font-weight: 700 !important; color: #231f20 !important; margin: 0 0 12px !important; padding: 0 !important; text-transform: none !important; letter-spacing: normal !important; } #our-design-process .th-section-subtitle, #our-design-process .th-section-subtitle.th-section-subtitle-mb { font-size: 12px !important; line-height: 1.65 !important; font-weight: 400 !important; color: #33322f !important; margin: 0 !important; padding: 0 !important; } #our-design-process .section-body { margin: 0 !important; padding: 0 !important; } #our-design-process .section-body > .row { margin: 0 !important; display: block !important; } #our-design-process .col-md-12, #our-design-process [data-v-ourdesignprocess-items] { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Each step = rail + body (built by JS) */ #our-design-process .th-design-process-items, #our-design-process .th-design-process-items.th-design-process-items-py, #our-design-process .th-design-process-items.row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 18px !important; border: none !important; border-top: none !important; border-bottom: none !important; padding: 0; margin: 0 !important; position: relative !important; width: 100% !important; } #our-design-process .th-design-process-items:last-child { padding-bottom: 0 !important; border: none !important; } /* Hide original desktop columns while mobile rail/body is present */ #our-design-process .th-process-desktop-only { display: none !important; } #our-design-process .th-process-rail { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 9px !important; flex: 0 0 9px !important; padding: 0 !important; margin: 0 !important; } #our-design-process .th-process-dot { display: block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; border: 1px solid #231f20 !important; background: #ffffff !important; flex-shrink: 0 !important; margin: 4px 0 0 !important; box-sizing: border-box !important; } #our-design-process .th-process-line { display: block !important; flex: 1 1 auto !important; width: 1px !important; min-height: 12px !important; background: #dcd8d2 !important; margin: 6px 0 0 !important; } #our-design-process .th-process-body { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 0 0 30px 0 !important; margin: 0 !important; } #our-design-process .th-design-process-step-num { display: block !important; font-size: 11px !important; line-height: 1.3 !important; font-weight: 400 !important; letter-spacing: 0.14em !important; color: #999999 !important; margin: 0 0 6px !important; padding: 0 !important; text-transform: none !important; } #our-design-process .th-design-process-step-title { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: #231f20 !important; margin: 0 0 6px !important; padding: 0 !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: normal !important; } #our-design-process .th-design-process-item-description, #our-design-process .th-process-body .th-design-process-item-description { display: block !important; font-size: 12px !important; line-height: 1.65 !important; font-weight: 400 !important; color: #33322f !important; margin: 0 !important; padding: 0 !important; } /* Kill leftover desktop borders / number styles if JS hasn't run yet */ #our-design-process .th-desing-process-item-container, #our-design-process .th-design-process-item-title { border: none !important; } } /* ============================================================ 10. LOCAL MANUFACTURING ============================================================ */ @media (max-width: 768px) { #th-gallery-manufacturingprocess.th-gallery-section-py { padding: 0 16px 48px !important; background: #ffffff !important; background-image: none !important; } #th-gallery-manufacturingprocess [data-v-videogallerymanufacturingprocess-component-link] { display: none !important; } #th-gallery-manufacturingprocess .container.th-container { padding: 0 !important; max-width: 100% !important; } #th-gallery-manufacturingprocess .th-overlay-video-section { position: relative !important; display: flex !important; flex-direction: column !important; border-radius: 10px !important; overflow: hidden !important; padding: 32px 20px !important; margin: 0 !important; background-size: cover !important; background-position: center !important; background-image: inherit; } /* Use section data-bg-src via JS-set background; fallback overlay */ #th-gallery-manufacturingprocess .th-overlay-video-section::before { content: ""; position: absolute; inset: 0; background: rgba(35, 31, 32, 0.82); z-index: 0; } #th-gallery-manufacturingprocess .th-overlay-video-section > [class*="col-"] { position: relative; z-index: 1; width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 !important; } #th-gallery-manufacturingprocess .section-body > .row, #th-gallery-manufacturingprocess .section-body .row { margin: 0 !important; display: block !important; } #th-gallery-manufacturingprocess .section-body .col-md-12 { width: 100% !important; max-width: 100% !important; padding: 0 !important; } #th-gallery-manufacturingprocess .th-section-header-wrapper { padding: 0 !important; margin: 0 0 0 !important; } #th-gallery-manufacturingprocess .section-title-wrapper { padding-bottom: 0 !important; margin-bottom: 0 !important; } #th-gallery-manufacturingprocess .th-section-title { font-size: 20px !important; line-height: 1.25 !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 14px !important; text-transform: none !important; } #th-gallery-manufacturingprocess .th-section-subtitle { font-size: 12px !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.85) !important; margin: 0 0 24px !important; text-wrap: pretty; } /* * Video — design: * display:block; border-radius:2px; overflow:hidden; * img: width:100%; height:190px; object-fit:cover; * play: 56px white circle + black triangle * * Desktop .inline-video-gallery-container { height:400/535px } * causes the black empty band — collapse to poster height. */ #th-gallery-manufacturingprocess #manufacturingProcess, #th-gallery-manufacturingprocess .inline-video-gallery-container { position: relative !important; display: block !important; border-radius: 2px !important; overflow: hidden !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; background: transparent !important; } #th-gallery-manufacturingprocess .inline-video-gallery-thumbnails-left, #th-gallery-manufacturingprocess #manufacturingProcess .lg-thumb-outer, #th-gallery-manufacturingprocess #manufacturingProcess .lg-components, #th-gallery-manufacturingprocess #manufacturingProcess .lg-toolbar, #th-gallery-manufacturingprocess #manufacturingProcess .lg-actions, #th-gallery-manufacturingprocess #manufacturingProcess .lg-counter, #th-gallery-manufacturingprocess #manufacturingProcess .lg-maximize, #th-gallery-manufacturingprocess #manufacturingProcess .lg-icon, #th-gallery-manufacturingprocess #manufacturingProcess .lg-sub-html, #th-gallery-manufacturingprocess #manufacturingProcess .lg-backdrop { display: none !important; opacity: 0 !important; visibility: hidden !important; height: 0 !important; pointer-events: none !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-container, #th-gallery-manufacturingprocess #manufacturingProcess .lg-container.lg-show { display: block !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-outer, #th-gallery-manufacturingprocess #manufacturingProcess .lg-outer.lg-inline, #th-gallery-manufacturingprocess #manufacturingProcess .lg-outer.lg-visible { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; background: transparent !important; opacity: 1 !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-content, #th-gallery-manufacturingprocess #manufacturingProcess .lg-inner { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-item, #th-gallery-manufacturingprocess #manufacturingProcess .lg-item.lg-current { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; background: transparent !important; background-image: none !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-item:before, #th-gallery-manufacturingprocess #manufacturingProcess .lg-img-wrap:before { display: none !important; content: none !important; height: 0 !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-cont, #th-gallery-manufacturingprocess #manufacturingProcess .lg-media-cont { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 190px !important; min-height: 0 !important; max-height: 190px !important; vertical-align: top !important; text-align: left !important; overflow: hidden !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-object, #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-poster, #th-gallery-manufacturingprocess #manufacturingProcess .lg-image, #th-gallery-manufacturingprocess #manufacturingProcess img, #th-gallery-manufacturingprocess .inline-video-gallery-container img { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 190px !important; max-height: 190px !important; object-fit: cover !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-object { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } /* Design play: 56px white circle + black triangle */ #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-play-button { width: 56px !important; height: 56px !important; max-width: 56px !important; background: rgba(255, 255, 255, 0.92) !important; background-color: rgba(255, 255, 255, 0.92) !important; border-radius: 50% !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; box-shadow: none !important; border: none !important; opacity: 1 !important; font-size: 0 !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-play-button:hover { background: rgba(255, 255, 255, 0.98) !important; transform: translate(-50%, -50%) scale(1.04) !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-play-button svg, #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-play-icon, #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-play-icon-bg, #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-play-icon-circle, #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-play-button img { display: none !important; opacity: 0 !important; visibility: hidden !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-video-play-button::before { content: "" !important; display: block !important; width: 0 !important; height: 0 !important; border-left: 14px solid #231f20 !important; border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; margin-left: 4px !important; position: relative !important; max-width: none !important; background: none !important; } #th-gallery-manufacturingprocess #manufacturingProcess .lg-has-video.lg-video-loaded .lg-video-play-button { opacity: 0 !important; visibility: hidden !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; } } /* ============================================================ 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; } } /* ============================================================ 13. GENERAL TYPOGRAPHY & SPACING ============================================================ */ @media (max-width: 768px) { body { font-size: 16px !important; color: #33322f; } .th-container, .th-container-md { max-width: 100% !important; } img { max-width: 100% !important; } .th-component-edit-link, [data-v-aboutestablished-component-link], [data-v-ourprinciple-component-link], [data-v-videogallerywhoweare-component-link], [data-v-ourhistorymasonry-component-link], [data-v-aboutoursustainablevalue-component-link], [data-v-ourdesignprocess-component-link], [data-v-videogallerymanufacturingprocess-component-link] { display: none !important; } .sticky-wrapper.desktop-menu .main-menu { display: none !important; } .way-points-container { display: none !important; } } /* ============================================================ 14. EXTRA SMALL (max-width: 390px) ============================================================ */ @media (max-width: 390px) { /* Keep hero title at design 26px — do not shrink */ #hero-about .th-hero-title, #hero-about .th-hero-title.th-hero-title-mb, #hero-about .th-hero-container .th-hero-style .th-hero-title { font-size: 26px !important; } #about-who-you .th-section-title { font-size: 24px !important; } #need-help-section .th-section-title { font-size: 20px !important; } }