/* =========================================================================
   Thanh Bằng — ported from the static demo.
   Loaded at priority 999 so it lands after flatsome-main; equal-specificity
   rules here must win.
   ====================================================================== */

:root {
  --tb-blue: #5e8dd1;
  --tb-blue-d: #356098;
  --tb-ink: #111111;
  --tb-body: #555555;
  --tb-muted: #777777;
  --tb-faint: #999999;
  --tb-line: #f0f0f0;
  --tb-line-2: #e5e5e5;
  --tb-soft: #fafafa;
  --tb-soft-2: #f8f8f8;
  --tb-dark: #1a1a1a;
  --tb-navy: #0a1b31;
  --tb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tb-wrap: 1300px;
}

/* ---------- base --------------------------------------------------------- */

body {
  color: var(--tb-body);
}

.tb-wrap {
  max-width: var(--tb-wrap);
  margin: 0 auto;
  /* never `margin: 0` — that kills Flatsome centring */
  padding: 0 24px;
}

@media (min-width: 850px) {
  .tb-wrap {
    padding: 0 40px;
  }
}

/* Line breaks inside headings without <br>: the editor rewrites <br> into
   </p><p> and tears the heading apart. Spans are inline and survive. */
.tb-brk>span {
  display: block;
}

.tb-eyebrow {
  margin: 0 0 8px;
  color: var(--tb-blue);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.5;
}

.tb-eyebrow a {
  color: inherit;
}

.tb-eyebrow--on-dark {
  color: var(--tb-blue);
}

/* Section heading: 40px title with the short blue rule underneath. */
.tb-head h2,
h2.tb-head {
  margin: 0;
  color: var(--tb-ink);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
}

.tb-head::after,
h2.tb-head::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 12px;
  background: var(--tb-blue);
}

.tb-head {
  margin-bottom: 48px;
}

@media (max-width: 549px) {

  .tb-head h2,
  h2.tb-head {
    font-size: 28px;
    line-height: 36px;
  }
}

.tb-i {
  flex: none;
  vertical-align: middle;
}

/* ---------- buttons ------------------------------------------------------ */

.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}

.tb-btn--blue {
  background: var(--tb-blue);
  color: #fff;
}

.tb-btn--blue:hover {
  background: var(--tb-blue-d);
  color: #fff;
}

.tb-btn--dark {
  background: var(--tb-ink);
  color: #fff;
  padding: 12px 56px;
}

.tb-btn--dark:hover {
  background: #333;
  color: #fff;
}

.tb-btn--zalo {
  background: #0068ff;
  color: #fff;
}

.tb-btn--zalo:hover {
  opacity: .9;
  color: #fff;
}

.tb-btn--ghost {
  border: 1px solid var(--tb-line-2);
  color: var(--tb-ink);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 400;
}

.tb-btn--ghost:hover {
  border-color: var(--tb-ink);
  color: var(--tb-ink);
}

.tb-btn--outline-blue {
  border: 1px solid var(--tb-blue);
  color: var(--tb-blue);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 400;
}

.tb-btn--outline-blue:hover {
  background: var(--tb-blue);
  color: #fff;
}

.tb-btn--outline {
  border: 1px solid rgba(17, 17, 17, .2);
  color: var(--tb-ink);
  font-size: 13px;
  padding: 12px 28px;
}

.tb-btn--outline:hover {
  background: var(--tb-ink);
  border-color: var(--tb-ink);
  color: #fff;
}

.tb-btn .tb-i {
  transition: transform .3s;
}

.tb-btn:hover .tb-i {
  transform: translateX(4px);
}

/* ---------- header ------------------------------------------------------- */

/* Active/hover underline.
   Flatsome positions the <li>, not the <a>, and pads the link 15px top and
   bottom. Left alone the link box grows past the 80px header and an underline
   pinned to bottom:0 lands below the header border. Position the <a> itself
   and give it exactly the header height so the rule sits on the header edge. */
#masthead .header-nav-main>li>a {
  position: relative;
  height: 80px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 600;
}

#masthead .header-nav-main>li>a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--tb-blue);
  transform: scaleX(0);
  transition: transform .2s;
}

#masthead .header-nav-main>li>a:hover::after,
#masthead .header-nav-main>li.current-menu-item>a::after,
#masthead .header-nav-main>li.current-menu-ancestor>a::after,
#masthead .header-nav-main>li.current-menu-parent>a::after {
  transform: scaleX(1);
}

#masthead .header-nav-main>li>a:hover {
  color: var(--tb-blue);
}

/* The sticky header shrinks, so the link has to follow or the underline
   detaches again. */
.stuck #masthead .header-nav-main>li>a {
  height: 70px;
}

/* A header block otherwise takes the full row and pushes the button below. */
#masthead .header-block {
  width: auto;
}

.header-main {
  height: 80px;
}

/* Mobile drawer: Flatsome only slides a panel in from a screen edge, so the
   demo's dropdown-under-the-header is built by hand in tb.js. */
#masthead {
  position: relative;
}

.tb-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  padding: 20px 0;
  background: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

.tb-drawer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-drawer li {
  display: block;
  border-bottom: 1px solid var(--tb-line);
}

.tb-drawer li a {
  display: block;
  padding: 14px 24px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.tb-drawer li li a {
  padding: 10px 40px;
  background: var(--tb-soft);
  border-left: 3px solid var(--tb-blue);
  color: var(--tb-body);
  font-size: 13px;
  font-weight: 400;
}

.tb-drawer .toggle,
.tb-drawer .icon-angle-down {
  display: none;
}

html.tb-drawer-open {
  overflow: hidden;
}

/* ---------- hero (ux_slider + ux_banner, restyled) ----------------------- */

/* Flickity's stock button is a flat disc with a chunky glyph filling 60% of
   it, which reads as a sticker pasted on the photo. Give it a translucent
   surface with a hairline edge so it sits *on* the image, and shrink the
   glyph so the arrow reads as a line, not a wedge. */
.tb-hero .flickity-prev-next-button {
  width: 52px;
  height: 52px;
  background: rgba(94, 141, 209, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  opacity: 1;
  color: #fff;
  top: auto;
  bottom: 64px;
  transform: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: background-color .3s var(--tb-ease),
    box-shadow .3s var(--tb-ease),
    transform .25s var(--tb-ease);
}

.tb-hero .flickity-prev-next-button:hover {
  background: var(--tb-blue-d);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
  transform: translateY(-2px);
}

.tb-hero .flickity-prev-next-button:active {
  transform: translateY(0) scale(.96);
}

.tb-hero .flickity-prev-next-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Flickity's own glyph is a solid chevron in a 100-unit box that Flatsome
   restyles further; sizing it from the outside is a fight. Hide it and draw
   the demo's stroked arrow as a mask instead — full control, exact match. */
.tb-hero .flickity-button-icon {
  display: none;
}

.tb-hero .flickity-prev-next-button::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10H16M16 10L11 5M16 10L11 15'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10H16M16 10L11 5M16 10L11 15'/%3E%3C/svg%3E") no-repeat center / contain;
}

.tb-hero .flickity-prev-next-button.previous::before {
  transform: scaleX(-1);
}

.tb-hero .flickity-prev-next-button.previous {
  left: max(24px, calc(50vw - 650px + 40px));
}

.tb-hero .flickity-prev-next-button.next {
  left: max(92px, calc(50vw - 650px + 108px));
  right: auto;
}

/* Dots become the demo's thin progress bars, 24px clear of the arrows. */
.tb-hero .flickity-page-dots {
  bottom: 84px;
  left: max(168px, calc(50vw - 650px + 184px));
  right: auto;
  width: auto;
  text-align: left;
}

.tb-hero .flickity-page-dots .dot {
  width: 64px;
  height: 2px;
  margin: 0 4px;
  border-radius: 0;
  background: rgba(255, 255, 255, .3);
  opacity: 1;
  transition: height .2s;
}

.tb-hero .flickity-page-dots .dot.is-selected {
  background: #fff;
}

.tb-hero .flickity-page-dots .dot:hover {
  height: 3px;
}

.tb-hero__counter {
  position: absolute;
  right: max(24px, calc(50vw - 650px + 40px));
  bottom: 78px;
  z-index: 30;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tb-hero h1 {
  font-size: clamp(24px, 3.8vw, 52px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

.tb-hero p {
  color: rgba(255, 255, 255, .8);
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 849px) {
  .tb-hero .flickity-prev-next-button {
    width: 40px;
    height: 40px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .2);
  }

  .tb-hero .flickity-prev-next-button.previous {
    left: 12px;
  }

  .tb-hero .flickity-prev-next-button.next {
    left: auto;
    right: 12px;
  }

  .tb-hero .flickity-page-dots {
    left: 0;
    right: 0;
    bottom: 56px;
    text-align: center;
  }

  .tb-hero .flickity-page-dots .dot {
    width: 32px;
    height: 3px;
    border-radius: 999px;
  }

  .tb-hero__counter {
    display: none;
  }
}

/* ---------- product cards (ux_products on the homepage) ------------------ */

/* Base card, used by the archive, related products and ux_products alike.
   Scoped to .product-small rather than a .products container: the related
   block is a bare .row slider with no .products wrapper, so a container-based
   selector silently misses it and the titles fall back to link styling. */
.product-small .col-inner {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: transform .5s var(--tb-ease), box-shadow .5s var(--tb-ease);
}

.product-small .col-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .16);
}

.product-small .box-text {
  padding: 20px;
  text-align: left;
}

.product-small .product-title {
  margin: 0;
}

.product-small .product-title a {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--tb-ink);
  text-transform: none;
  letter-spacing: 0;
}

.product-small .product-title a:hover {
  color: var(--tb-blue);
}

.product-small .category {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--tb-blue);
}

.product-small .box-image img {
  transition: transform .5s var(--tb-ease);
}

.product-small .col-inner:hover .box-image img {
  transform: scale(1.06);
}

.product-small .tb-price {
  margin-top: 10px;
  padding: 6px 12px;
  font-size: 12px;
}

/* Section headings Flatsome renders above related/upsell blocks. */
.product-section-title {
  margin-bottom: 24px;
  color: var(--tb-ink);
  font-size: 22px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

/* Homepage variant: centred, rounder, lifted. Declared after the base so it
   wins at equal specificity. */
.tb-prod-cards .product-small.col {
  padding-bottom: 0;
}

.tb-prod-cards .col-inner {
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.tb-prod-cards .col-inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .16);
}

.tb-prod-cards .box-text {
  padding: 0;
  text-align: center;
}

.tb-prod-cards .product-title a {
  font-size: 15px;
  font-weight: 600;
}

.tb-prod-cards .tb-price {
  font-size: 12px;
}

/* ---------- category accordion ------------------------------------------ */

.tb-cats {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

@media (min-width: 850px) {
  .tb-cats {
    grid-template-columns: 472px 1fr;
    height: 480px;
  }
}

.tb-cats__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-cats__list li {
  flex: 1;
  margin: 0;
  padding: 0;
}

.tb-cats__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px 24px;
  text-align: left;
  background: #fff;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  border: 0;
  border-bottom: 1px solid #f1f1f1;
  border-left: 4px solid transparent;
  border-radius: 0;
  box-shadow: none;
  transition: background-color .2s, border-color .2s;
}

.tb-cats__btn:hover {
  background: var(--tb-soft-2);
  color: #333;
}

.tb-cats__btn.is-active {
  border-left-color: var(--tb-blue);
  background: var(--tb-soft);
}

.tb-cats__num {
  color: #bbb;
  font-size: 12px;
  font-weight: 600;
  flex: none;
}

.tb-cats__stage {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

@media (min-width: 850px) {
  .tb-cats__stage {
    min-height: 0;
    height: 480px;
  }
}

.tb-cats__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.4, 0, .2, 1);
}

.tb-cats__panel.is-active {
  opacity: 1;
}

.tb-cats__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-cats__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .2) 50%, transparent);
  pointer-events: none;
}

.tb-cats__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px;
}

.tb-cats__title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}

.tb-cats__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

.tb-cats__link:hover {
  background: #fff;
  color: var(--tb-ink);
}

.tb-cats__link .tb-i {
  transition: transform .3s;
}

.tb-cats__link:hover .tb-i {
  transform: translateX(4px);
}

/* ---------- projects ----------------------------------------------------- */

.tb-projects {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 850px) {
  .tb-projects--bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
  }

  .tb-projects--bento .tb-proj--lead {
    grid-column: span 2;
    grid-row: span 2;
  }

  .tb-projects--grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

.tb-proj {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #f1f1f1;
  min-height: 220px;
  text-decoration: none;
}

.tb-projects--grid .tb-proj {
  height: 380px;
}

.tb-proj__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--tb-ease);
}

.tb-proj:hover .tb-proj__img {
  transform: scale(1.05);
}

.tb-proj__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .2) 50%, transparent);
}

.tb-proj__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 20px;
}

@media (min-width: 850px) {
  .tb-proj__body {
    padding: 24px;
  }
}

.tb-proj__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.tb-proj--lead .tb-proj__title {
  font-size: 24px;
}

.tb-projects--grid .tb-proj__title {
  font-size: 18px;
}

.tb-proj__ex {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  line-height: 1.6;
}

.tb-proj--lead .tb-proj__ex {
  font-size: 14px;
  -webkit-line-clamp: 3;
}

/* ---------- dark CTA band / showroom ------------------------------------ */

.tb-cta {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 850px) {
  .tb-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.tb-cta h2 {
  margin: 0;
  color: #fff;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.3;
}

.tb-cta h2 strong {
  font-weight: 700;
}

.tb-cta__btns {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: none;
  flex-wrap: wrap;
}

.tb-cta__btns .tb-link-muted {
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tb-cta__btns .tb-link-muted:hover {
  color: #fff;
}

/* The whole band is one inline <a>, so it must stay on a single line in the
   page content: wpautop splits an inline element written across several lines
   into separate <p>s, the browser closes the <a> at the first of them, and the
   band renders at double height with the label outside the link. */
.tb-showroom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 24px;
  text-decoration: none;
  transition: opacity .2s;
}

.tb-showroom:hover {
  opacity: .85;
}

.tb-showroom__t {
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}

/* ---------- about: info rows + timeline + facilities -------------------- */

.tb-info {
  border-top: 1px solid #f1f1f1;
}

.tb-info__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid #f1f1f1;
}

@media (min-width: 550px) {
  .tb-info__row {
    grid-template-columns: 160px 1fr;
    gap: 16px;
  }
}

.tb-info__k {
  color: var(--tb-faint);
  font-size: 13px;
  font-weight: 500;
}

.tb-info__v {
  color: #333;
  font-size: 14px;
  line-height: 1.7;
}

.tb-timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px;
}

.tb-timeline__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background: #e6e6e6;
}

@media (min-width: 850px) {
  .tb-timeline__rail {
    left: 50%;
    transform: translateX(-50%);
  }
}

.tb-ms {
  position: relative;
  padding: 0 0 48px 56px;
}

@media (min-width: 850px) {
  .tb-ms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
  }

  .tb-ms--left .tb-ms__card {
    grid-column: 1;
    text-align: right;
    margin-right: 48px;
  }

  .tb-ms--right .tb-ms__card {
    grid-column: 2;
    text-align: left;
    margin-left: 48px;
  }
}

.tb-ms__dot {
  position: absolute;
  left: 14px;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #d4d4d4;
  transition: background-color .3s;
}

@media (min-width: 850px) {
  .tb-ms__dot {
    left: 50%;
    transform: translateX(-50%);
  }
}

.tb-ms:hover .tb-ms__dot {
  background: var(--tb-blue);
}

.tb-ms__card {
  position: relative;
  max-width: 440px;
}

.tb-ms--right .tb-ms__card {
  margin-left: 0;
}

@media (min-width: 850px) {
  .tb-ms--left .tb-ms__card {
    margin-left: auto;
  }
}

.tb-ms__peek {
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  z-index: 20;
  overflow: hidden;
  border-radius: 12px;
  opacity: 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
  transition: opacity .3s;
  pointer-events: none;
}

.tb-ms:hover .tb-ms__peek {
  opacity: 1;
}

.tb-ms__peek img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.tb-ms__year {
  display: block;
  color: var(--tb-blue);
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 850px) {
  .tb-ms__year {
    font-size: 52px;
  }
}

.tb-ms__title {
  margin: 12px 0;
  color: var(--tb-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 850px) {
  .tb-ms__title {
    font-size: 22px;
  }
}

.tb-ms__period {
  margin: 0;
  color: var(--tb-faint);
  font-size: 13.5px;
}

.tb-facility img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 8px;
}

.tb-facility h4 {
  margin: 20px 0 8px;
  color: var(--tb-ink);
  font-size: 15px;
  font-weight: 400;
}

.tb-facility p {
  margin: 0 0 8px;
  color: var(--tb-muted);
  font-size: 13px;
  line-height: 1.8;
}

.tb-facility a {
  color: var(--tb-blue);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tb-map {
  width: 100%;
  height: 360px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.tb-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- single product ---------------------------------------------- */

.single-product .product-title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--tb-ink);
}

@media (max-width: 849px) {
  .single-product .product-title {
    font-size: 28px;
  }
}

.tb-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 20px;
  border: 1px solid var(--tb-line-2);
  border-radius: 999px;
  background: var(--tb-soft);
  color: var(--tb-ink);
  font-size: 14px;
  font-weight: 400;
}

.tb-price__i {
  color: var(--tb-blue);
}

.single-product .price {
  font-size: inherit;
  color: inherit;
}

.tb-specs {
  margin-top: 40px;
}

.tb-specs__head {
  margin: 0 0 16px;
  color: var(--tb-faint);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.tb-specs__wrap {
  overflow-x: auto;
  border: 1px solid #eee;
  border-radius: 8px;
}

.tb-specs table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.tb-specs th,
.tb-specs td {
  padding: 12px 16px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.tb-specs th {
  width: 38%;
  background: var(--tb-soft);
  color: #666;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.5;
}

.tb-specs td {
  color: #333;
  font-size: 13px;
  line-height: 1.6;
}

.tb-specs tr:last-child th,
.tb-specs tr:last-child td {
  border-bottom: 0;
}

.tb-band {
  border-top: 1px solid var(--tb-line);
  padding: 56px 0;
}

.tb-band__head {
  margin: 0 0 32px;
  color: var(--tb-ink);
  font-size: 22px;
  font-weight: 300;
}

.tb-feats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 850px) {
  .tb-feats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tb-feat {
  display: flex;
  gap: 12px;
  padding: 20px;
  border-radius: 8px;
  background: var(--tb-soft);
}

.tb-feat__i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(94, 141, 209, .15);
  color: var(--tb-blue);
}

.tb-feat h3 {
  margin: 0;
  color: var(--tb-ink);
  font-size: 14px;
  font-weight: 600;
}

.tb-feat p {
  margin: 4px 0 0;
  color: #666;
  font-size: 13px;
  line-height: 1.7;
}

.tb-prose {
  color: #666;
  font-size: 14px;
  line-height: 1.9;
  max-width: none;
}

.tb-prose h3 {
  margin: 28px 0 12px;
  color: var(--tb-ink);
  font-size: 18px;
  font-weight: 600;
}

.tb-prose h3:first-child {
  margin-top: 0;
}

.tb-prose p {
  margin: 0 0 16px;
}

.tb-prose ul {
  margin: 0 0 16px 20px;
}

.tb-prose li {
  margin-bottom: 8px;
}

.tb-prose strong {
  color: #333;
}

.tb-quote-cta {
  margin: 0 auto 64px;
}

.tb-quote-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 32px;
  border-radius: 12px;
  background: var(--tb-ink);
}

@media (min-width: 850px) {
  .tb-quote-cta__inner {
    flex-direction: row;
    align-items: center;
  }
}

.tb-quote-cta__t {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 300;
}

.tb-quote-cta__t strong {
  font-weight: 600;
}

.tb-quote-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tb-stickybar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  border-top: 1px solid #eee;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
}

.tb-stickybar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--tb-wrap);
  margin: 0 auto;
  padding: 12px 24px;
}

@media (min-width: 850px) {
  .tb-stickybar__in {
    padding: 12px 40px;
  }
}

.tb-stickybar__meta {
  min-width: 0;
}

.tb-stickybar__label {
  margin: 0;
  color: var(--tb-faint);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.tb-stickybar__name {
  margin: 0;
  color: var(--tb-ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-stickybar__act {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

@media (max-width: 549px) {
  .tb-stickybar__act .tb-btn span {
    display: none;
  }
}

/* ---------- contact form (Contact Form 7) -------------------------------- */

.tb-form {
  padding: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

@media (min-width: 850px) {
  .tb-form {
    padding: 32px;
  }
}

.tb-form h2 {
  margin: 0 0 24px;
  color: var(--tb-ink);
  font-size: 24px;
  font-weight: 400;
}

.tb-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--tb-body);
  font-size: 13px;
  font-weight: 500;
}

.tb-form .tb-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 550px) {
  .tb-form .tb-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.tb-form .tb-form__field {
  margin-bottom: 20px;
}

/* Flatsome sets a fixed height on inputs; adding vertical padding clips the
   text in <select>. Set the height explicitly and pad horizontally only. */
.tb-form input[type="text"],
.tb-form input[type="tel"],
.tb-form input[type="email"],
.tb-form select {
  height: 52px;
  padding: 0 20px;
  margin-bottom: 0;
}

.tb-form textarea {
  padding: 14px 20px;
  margin-bottom: 0;
  resize: vertical;
}

.tb-form input[type="text"],
.tb-form input[type="tel"],
.tb-form input[type="email"],
.tb-form select,
.tb-form textarea {
  width: 100%;
  background: var(--tb-soft-2);
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
  color: var(--tb-ink);
  font-size: 14px;
  transition: border-color .2s, background-color .2s;
}

.tb-form input:focus,
.tb-form textarea:focus,
.tb-form select:focus {
  border-color: var(--tb-blue);
  background: #fff;
  box-shadow: none;
}

.tb-form ::placeholder {
  color: #aaa;
}

/* input[type=submit] takes its colour from --primary-color, so override the
   same property Flatsome sets. */
.tb-form input[type="submit"],
.tb-form .wpcf7-submit {
  width: 100%;
  height: auto;
  margin-top: 24px;
  padding: 14px 32px;
  border-radius: 999px;
  background-color: var(--tb-blue);
  border: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.tb-form input[type="submit"]:hover,
.tb-form .wpcf7-submit:hover {
  background-color: var(--tb-blue-d);
}

.tb-form .wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
}

.tb-form .wpcf7-not-valid-tip {
  color: #d33;
  font-size: 12px;
  margin-top: 6px;
}

.tb-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
}

/* Flatsome ships `dt{display:inline-block}` and `dl{text-transform:uppercase;
   opacity:.8;font-size:.85em}`, which runs the whole list together on one
   line and shouts the values. Reset all three. */
.tb-contact dl {
  margin: 40px 0 0;
  font-size: 1em;
  opacity: 1;
  text-transform: none;
}

.tb-contact dt {
  display: block;
  margin: 0;
  color: var(--tb-faint);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.tb-contact dd {
  display: block;
  margin: 4px 0 28px;
  color: var(--tb-ink);
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
}

.tb-contact dd.tb-contact__big {
  font-size: 20px;
  font-weight: 600;
}

.tb-contact dd a {
  color: inherit;
}

.tb-contact dd a:hover {
  color: var(--tb-blue);
}

/* ---------- footer ------------------------------------------------------- */

.tb-footer {
  color: #ccc;
  background: linear-gradient(to bottom, var(--tb-dark) 0%, var(--tb-dark) 70%, var(--tb-navy) 88%, var(--tb-blue-d) 100%);
}

.tb-footer a {
  color: #ccc;
  text-decoration: none;
}

.tb-footer a:hover {
  color: #fff;
}

.tb-footer h3,
.tb-footer .tb-footer__h {
  display: block;
  margin: 0 0 16px;
  color: var(--tb-blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.tb-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 60px 0 40px;
}

@media (min-width: 550px) {
  .tb-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .tb-footer__grid {
    grid-template-columns: 220px 1fr 1fr 1fr;
  }
}

.tb-footer p,
.tb-footer li {
  font-size: 13px;
  line-height: 1.8;
}

.tb-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-footer li {
  margin-bottom: 10px;
}

.tb-footer strong {
  color: #fff;
  font-weight: 600;
}

.tb-footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tb-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  border-radius: 999px;
  color: #fff;
  transition: background-color .2s, opacity .2s;
}

.tb-footer__social a:hover {
  background: #333;
}

.tb-footer__map {
  height: 130px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 4px;
}

.tb-footer__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(15%);
}

.tb-footer__link-blue {
  color: var(--tb-blue) !important;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tb-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.tb-footer__bar-in {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* The credit logo is a wide banner asset; without a cap it renders at its
   natural width and swamps the footer. Demo size is 130x32. */
.tb-footer__bar-in img {
  width: 130px;
  max-width: 130px;
  height: auto;
}

/* Flatsome's own footer chrome is unused — the whole footer is a UX Block. */
.footer-wrapper .absolute-footer {
  display: none;
}

/* ---------- scroll reveal ------------------------------------------------ */

.tb-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--tb-ease), transform .7s var(--tb-ease);
}

.tb-reveal.is-in {
  opacity: 1;
  transform: none;
}

.tb-stagger>* {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--tb-ease), transform .6s var(--tb-ease);
}

.tb-stagger.is-in>* {
  opacity: 1;
  transform: none;
}

.tb-stagger.is-in>*:nth-child(2) {
  transition-delay: .08s;
}

.tb-stagger.is-in>*:nth-child(3) {
  transition-delay: .16s;
}

.tb-stagger.is-in>*:nth-child(4) {
  transition-delay: .24s;
}

.tb-stagger.is-in>*:nth-child(5) {
  transition-delay: .32s;
}

.tb-stagger.is-in>*:nth-child(6) {
  transition-delay: .40s;
}

@media (prefers-reduced-motion: reduce) {

  .tb-reveal,
  .tb-stagger>* {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- inline icon glyphs (CSS masks) ------------------------------
   Drawn with mask + currentColor so they never appear as a shortcode the
   client can accidentally delete from a Text element. */

.tb-arrow::after,
.tb-ico::before,
.tb-showroom__i {
  content: "";
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.tb-arrow::after {
  width: 14px;
  height: 14px;
  margin-left: 8px;
  vertical-align: -2px;
  transition: transform .3s;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7H12M12 7L7.5 2.5M12 7L7.5 11.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7H12M12 7L7.5 2.5M12 7L7.5 11.5'/%3E%3C/svg%3E");
}

.tb-arrow:hover::after {
  transform: translateX(4px);
}

.tb-ico::before {
  width: 18px;
  height: 18px;
}

.tb-ico--fb::before {
  width: 20px;
  height: 20px;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 20 20'%3E%3Cpath d='M21.5 14.5H23V12H21C18.8 12 17.5 13.3 17.5 15.5V17H15.5V19.5H17.5V28H20V19.5H22L22.5 17H20V15.5C20 14.9 20.3 14.5 21.5 14.5Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 20 20'%3E%3Cpath d='M21.5 14.5H23V12H21C18.8 12 17.5 13.3 17.5 15.5V17H15.5V19.5H17.5V28H20V19.5H22L22.5 17H20V15.5C20 14.9 20.3 14.5 21.5 14.5Z' fill='black'/%3E%3C/svg%3E");
}

.tb-ico--yt::before {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 12 22 19'%3E%3Cpath d='M29.5 15.5C29.2 14.4 28.3 13.6 27.2 13.3C25.2 12.8 20 12.8 20 12.8C20 12.8 14.8 12.8 12.8 13.3C11.7 13.6 10.8 14.4 10.5 15.5C10 17.5 10 21.5 10 21.5C10 21.5 10 25.5 10.5 27.5C10.8 28.6 11.7 29.4 12.8 29.7C14.8 30.2 20 30.2 20 30.2C20 30.2 25.2 30.2 27.2 29.7C28.3 29.4 29.2 28.6 29.5 27.5C30 25.5 30 21.5 30 21.5C30 21.5 30 17.5 29.5 15.5ZM18 25V18L24 21.5L18 25Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 12 22 19'%3E%3Cpath d='M29.5 15.5C29.2 14.4 28.3 13.6 27.2 13.3C25.2 12.8 20 12.8 20 12.8C20 12.8 14.8 12.8 12.8 13.3C11.7 13.6 10.8 14.4 10.5 15.5C10 17.5 10 21.5 10 21.5C10 21.5 10 25.5 10.5 27.5C10.8 28.6 11.7 29.4 12.8 29.7C14.8 30.2 20 30.2 20 30.2C20 30.2 25.2 30.2 27.2 29.7C28.3 29.4 29.2 28.6 29.5 27.5C30 25.5 30 21.5 30 21.5C30 21.5 30 17.5 29.5 15.5ZM18 25V18L24 21.5L18 25Z' fill='black'/%3E%3C/svg%3E");
}

.tb-ico--mail::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E");
}

.tb-ico--tel::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");
}

.tb-showroom__i {
  width: 44px;
  height: 44px;
  color: #fff;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5'/%3E%3Cpath d='M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244'/%3E%3Cpath d='M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5'/%3E%3Cpath d='M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244'/%3E%3Cpath d='M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05'/%3E%3C/svg%3E");
}

/* ---------- hero text + Flatsome button variants ------------------------ */

/* The demo fades the hero from black on the left rather than dimming it
   evenly; Flatsome only offers a flat overlay colour, so override it. */
.tb-hero .ux-banner .overlay,
.tb-hero .banner-bg .overlay {
  background: linear-gradient(to right, rgba(0, 0, 0, .72), rgba(0, 0, 0, .42) 50%, rgba(0, 0, 0, .05)) !important;
}

.tb-hero .text-box h1 {
  margin-bottom: 24px;
}

.tb-hero .text-box p {
  margin-bottom: 24px;
}

.tb-hero__cta {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.tb-hero__cta:hover {
  color: #fff;
}

/* Flatsome prints its Customizer colours in an inline <style id="custom-css">
   that lands AFTER this file, so a plain class rule loses no matter how late
   the stylesheet is enqueued. These few colour declarations are the one place
   !important is warranted. */
.button.tb-btn-dark,
a.button.tb-btn-dark {
  background-color: var(--tb-ink) !important;
  border-color: var(--tb-ink) !important;
  color: #fff !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.button.tb-btn-dark:hover,
a.button.tb-btn-dark:hover {
  background-color: #333 !important;
  border-color: #333 !important;
}

.button.tb-btn-outline,
a.button.tb-btn-outline {
  background-color: transparent !important;
  border: 1px solid rgba(17, 17, 17, .2) !important;
  color: var(--tb-ink) !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 13px;
}

.button.tb-btn-outline:hover,
a.button.tb-btn-outline:hover {
  background-color: var(--tb-ink) !important;
  border-color: var(--tb-ink) !important;
  color: #fff !important;
}

/* ---------- page headings and small utilities --------------------------- */

.tb-pagehead__in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.tb-pagehead__in h1 {
  margin: 0;
  color: var(--tb-ink);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
}

.tb-pagehead__count {
  margin: 0;
  color: #888;
  font-size: 13px;
}

.tb-pagehead {
  border-bottom: 1px solid var(--tb-line);
}

@media (max-width: 549px) {
  .tb-pagehead__in h1 {
    font-size: 28px;
    line-height: 36px;
  }
}

.tb-head .tb-eyebrow {
  letter-spacing: .24em;
}

.tb-head h1 {
  margin: 0;
  color: var(--tb-ink);
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
}

.tb-sub {
  margin: 32px 0 0;
  color: var(--tb-ink);
  font-size: 18px;
  font-weight: 400;
}

.tb-lead {
  max-width: 760px;
  color: var(--tb-muted);
  font-size: 15px;
  line-height: 1.8;
}

.tb-lead-sm {
  color: #444;
  font-size: 18px;
  line-height: 1.7;
}

.tb-link-blue {
  color: var(--tb-blue);
  font-size: 14px;
  font-weight: 500;
}

.tb-prose--about p {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--tb-body);
}

.tb-empty {
  margin-top: 48px;
  padding: 112px 32px;
  border: 1px dashed var(--tb-line-2);
  border-radius: 12px;
  background: var(--tb-soft);
  text-align: center;
}

.tb-empty p {
  margin: 0;
  color: var(--tb-faint);
  font-size: 14px;
}

.tb-quote-cta__sub {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 14px;
}

.tb-map--wide {
  height: 420px;
  border: 0;
  border-radius: 0;
}

/* Scoped to .tb-footer so it outranks Flatsome's own footer image rules. */
.tb-footer img.tb-footer__logo {
  width: 150px;
  max-width: 150px;
  height: auto;
}

/* The about-us banner heading sits on a dark photo. */
.ux-banner .text-box h1 {
  color: #fff;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.ux-banner .text-box h1 strong {
  font-weight: 600;
}

.ux-banner .text-box .tb-lead {
  color: rgba(255, 255, 255, .75);
  font-size: 17px;
}

.ux-banner .text-box .tb-eyebrow {
  color: var(--tb-blue);
}

/* ---------- breadcrumbs -------------------------------------------------- */

.tb-crumbs,
.woocommerce-breadcrumb {
  padding: 14px 0;
  border-bottom: 1px solid var(--tb-line);
  color: #666;
  font-size: 12px;
}

.tb-crumbs a,
.woocommerce-breadcrumb a {
  color: #666;
}

.tb-crumbs a:hover,
.woocommerce-breadcrumb a:hover {
  color: var(--tb-blue);
}

.tb-crumbs .tb-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tb-crumbs__sep {
  color: #ccc;
}

.tb-crumbs__now {
  color: var(--tb-ink);
  font-weight: 500;
}

/* ---------- shop archive header + category chips ------------------------ */

.tb-shophead {
  border-bottom: 1px solid var(--tb-line);
  background: #fff;
}

.tb-shophead__in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 48px 0;
}

.tb-shophead h1 {
  margin: 0;
  color: var(--tb-ink);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
}

.tb-shophead__count {
  margin: 0;
  color: #888;
  font-size: 13px;
}

@media (max-width: 549px) {
  .tb-shophead h1 {
    font-size: 28px;
    line-height: 36px;
  }
}

.tb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 32px 0 0;
}

.tb-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid var(--tb-line-2);
  border-radius: 999px;
  color: var(--tb-body);
  font-size: 12px;
  text-decoration: none;
  transition: border-color .2s, color .2s, background-color .2s;
}

.tb-chip:hover {
  border-color: var(--tb-blue);
  color: var(--tb-blue);
}

.tb-chip.is-active {
  background: var(--tb-ink);
  border-color: var(--tb-ink);
  color: #fff;
}

/* Flatsome's own shop title block is replaced by .tb-shophead. */
.shop-page-title.page-title {
  display: none;
}

/* ---------- single project ---------------------------------------------- */

.tb-project__hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  padding: 64px 0;
  background: var(--tb-ink);
  overflow: hidden;
}

.tb-project__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}

.tb-project__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .25));
}

.tb-project__hero-in {
  position: relative;
  z-index: 2;
}

.tb-project__hero h1 {
  max-width: 900px;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.tb-lead--on-dark {
  color: rgba(255, 255, 255, .78);
}

.tb-project__hero .tb-lead {
  margin-bottom: 24px;
}

.tb-project__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (min-width: 850px) {
  .tb-project__body {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 64px;
  }
}

.tb-project__meta {
  align-self: start;
  border-top: 2px solid var(--tb-ink);
}

.tb-project__meta-row {
  padding: 20px 0;
  border-bottom: 1px solid #f1f1f1;
}

.tb-project__meta-row .tb-info__k {
  display: block;
  margin-bottom: 4px;
}

.tb-kit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (min-width: 850px) {
  .tb-kit {
    grid-template-columns: repeat(5, 1fr);
  }
}

.tb-kit__item {
  display: block;
  text-decoration: none;
}

.tb-kit__img {
  display: block;
  position: relative;
  height: 130px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tb-soft-2);
}

.tb-kit__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  transition: transform .5s var(--tb-ease);
}

.tb-kit__item:hover .tb-kit__img img {
  transform: scale(1.06);
}

.tb-kit__name {
  display: block;
  margin-top: 10px;
  color: #333;
  font-size: 13px;
  line-height: 1.35;
}