/* Zbrehon overrides on top of the Livin-Studio stylesheet. */
.brand-wordmark { font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: .12em; color: inherit; text-decoration: none; }
.navbar-toggle-button { border: 0; font: inherit; color: inherit; } /* keep the template white square + padding; only strip native <button> chrome */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #000; color: #fff; padding: .75rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* The template's #757575 body grey is 3.9-4.2:1 on its #ebebeb/#f5f5f5 panels; #5c5c5c reaches 5.6:1. */
/* The template sets it on both :root and body, so override both. */
:root, body { --dark--paragraph-color: #5c5c5c; }
/* .w-input:focus in the template removes the focus ring, so keyboard users lost their place in the enquiry form. */
.w-input:focus-visible, .w-select:focus-visible, .w-button:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
address { font-style: normal; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid rgba(0,0,0,.12); vertical-align: top; }
.spec-table th { width: 32%; font-weight: 500; }
.rfq-form label { display: block; margin-bottom: .4rem; font-weight: 500; }
.rfq-form .field { margin-bottom: 1.25rem; }
.rfq-note { font-size: .9rem; opacity: .75; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* === catalog group: product hub, category and product pages === */
.zb-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zb-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .875rem; }
.zb-breadcrumb li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
/* Padding gives each crumb a 24px touch target (Lighthouse target-size). */
.zb-breadcrumb a { color: inherit; text-decoration: none; opacity: .85; display: inline-block; padding: .35rem 0; }
.zb-breadcrumb a:hover, .zb-breadcrumb a:focus-visible { opacity: 1; text-decoration: underline; }
.zb-filter-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.zb-filter-grid a.property-dropdown-button { color: inherit; text-decoration: none; }
.zb-count { margin-left: .25rem; }
.zb-product-group { scroll-margin-top: 6rem; }
.zb-product-group + .zb-product-group { margin-top: 4rem; }
.zb-group-head { margin-bottom: 1.5rem; }
.zb-section-title { margin: 0 0 1rem; }
.zb-section-title a { color: inherit; text-decoration: none; }
.zb-sublinks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.zb-sublinks a, .properties-information-text a { color: inherit; }
a.property-facilities-single { color: inherit; text-decoration: none; }
a.property-facilities-single[aria-current] { font-weight: 600; }
.spec-table td { overflow-wrap: anywhere; }
/* === end catalog group === */

/* === home group: begin === */
/* home: headings wrapped around template link/title classes keep the template's type styles */
.services-name-heading, .home-properties-name-heading, .properties-main-name-heading, .blog-post-name-heading { margin: 0; font: inherit; }
.faq-accordion-title { margin: 0; }
h2.subtitle { margin: 0; }
[data-wf-bgvideo-fallback-img] { display: none; }
@media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }
/* === home group: end === */

/* === apps group: application pages and service page === */
a.zb-app-chip { color: inherit; text-decoration: none; }
a.zb-app-chip:hover, a.zb-app-chip:focus-visible { text-decoration: underline; }
.service-details-name-description .zb-breadcrumb { margin-bottom: 1rem; }
h3.working-process-name, h3.about-choose-us-title, .zb-reset-heading { margin: 0; font: inherit; }
.zb-app-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }
.zb-app-others { margin-top: 4rem; }
/* === end apps group === */

/* === company group: begin === */
.zb-card-heading { margin: 0; font: inherit; }
.faq .subtitle-single h2.subtitle, .faq-accordion-title, .our-mission-title, .collaboration-card-title, .about-choose-us-title { margin-top: 0; }
.faq-accordion-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.zb-label { display: block; margin-bottom: .4rem; font-size: .875rem; font-weight: 500; }
.zb-rfq-note { margin: 0 0 1.5rem; padding: .9rem 1rem; border: 1px dashed rgba(0,0,0,.35); font-size: .9rem; }
.zb-rfq-note a { color: inherit; text-decoration: underline; }
/* === company group: end === */
/* === material backdrops (code-drawn) === */
.material-backdrop { position: absolute; inset: 0; overflow: hidden; background: #0d0e10; z-index: 0; }
.material-photo { position: absolute; top: -6%; left: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; animation: material-drift 40s linear infinite alternate; }
.material-svg { position: absolute; inset: -10%; width: 120%; height: 120%; }
.material-sheen { position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.10) 48%, rgba(231,234,106,.08) 50%, transparent 58%); animation: material-sweep 9s ease-in-out infinite; mix-blend-mode: screen; }
.material-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0,0,0,.55) 100%); }
@keyframes material-sweep { 0% { transform: translateX(-35%); } 50% { transform: translateX(35%); } 100% { transform: translateX(-35%); } }
@keyframes material-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-3%, -2%, 0) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .material-svg, .material-photo, .material-sheen { animation: none; } }
/* Background video loops (free stock, see /privacy-policy/). Desktop only: phones and reduced-motion keep the still photo. */
.material-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.material-video.is-playing { opacity: 1; }
@media (max-width: 767px), (prefers-reduced-motion: reduce) { .material-video { display: none; } }
/* While a video plays, stop and hide every layer under/over it: the drifting photo, the SVG pattern and the
   screen-blended sheen would otherwise be re-composited with each video frame (the cause of the stutter). */
.material-backdrop.has-video-playing .material-photo, .material-backdrop.has-video-playing .material-svg { visibility: hidden; animation: none; }
.material-backdrop.has-video-playing .material-sheen { display: none; }
.material-video { will-change: opacity; }
.brand-wordmark { color: #fff; }
/* === end material backdrops === */

/* === design review 2026-11-03 round 1 === */
/* Creato Display was loaded from the Webflow CDN (blocked in China, and a 4th font family). Archivo is already self-hosted (variable weight). */
:root, body { --_font-family---creato-display: Archivo, Arial, sans-serif; }
.banner-title, .cta-title, .display-title, .about-banner-heading { font-weight: 800; letter-spacing: -.045em; }
/* CTA wordmark: text clipped to a carbon-twill close-up from the old site, instead of the template's villa photo. */
.cta-title { background-image: url("/media/0c9e52a1a9-653a1ecb182a059209.webp"); background-size: 60%; background-color: #111; }
/* FAQ card: AR fiberglass mesh photo under a dark scrim (template image was abstract red sculpture). */
.faq-card-single { background-image: linear-gradient(180deg, rgba(10,11,12,.72) 0%, rgba(10,11,12,.25) 45%, rgba(10,11,12,.8) 100%), url("/media/e4ccc79b7b-65600c470b48657240.webp"); color: #fff; }
.faq-card-single .subtitle.faq { color: #fff; }
.faq-card-single .faq-location-icon { filter: invert(1); }
/* About card 2: white copy sat on a light fiberglass photo (about 1.6:1). Scrim brings it above 7:1. */
.about-us-property-typography.two { background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%); }
/* Featured slider: one-sentence lede fills the dead space between title and specs. */
.zb-featured-lede { margin: 1.25rem 0 0; max-width: 34rem; color: var(--dark--paragraph-color); font-size: 1rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media screen and (max-width: 767px) {
  /* Template uses word-break: break-all, which split "composite" as "compos-ite" on phones. */
  .faq-accordion-title { word-break: normal; overflow-wrap: break-word; hyphens: auto; }
  .zb-featured-lede { font-size: .9rem; -webkit-line-clamp: 2; }
}
/* === end design review round 1 === */
/* Company page: hosts that used to hold template background videos now hold MaterialBackdrop. */
.zb-material-host { position: relative; overflow: hidden; background: #0d0e10; }
.zb-material-host > :not(.material-backdrop) { position: relative; z-index: 1; }
/* Round 2: brand line icons in the why-us cards. */
.zb-reason-icon { width: 44px; height: 44px; fill: none; stroke: #e7ea6a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.choose-us-card:hover .zb-reason-icon { transform: rotate(-8deg) scale(1.08); }
@media (prefers-reduced-motion: reduce) { .zb-reason-icon { transition: none; } }
/* Round 2 signature moment: the featured frame that grows to full screen carries the catalog count in outlined type over the woven backdrop. */
.featured-properties-background-video { position: relative; overflow: hidden; }
.zb-featured-mark { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; pointer-events: none; }
.zb-featured-mark-n { font-family: Archivo, sans-serif; font-weight: 800; letter-spacing: -.06em; line-height: .8; font-size: clamp(6rem, 28vw, 30rem); color: transparent; -webkit-text-stroke: 2px rgba(231,234,106,.9); }
.zb-featured-mark-t { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(.6rem, 1vw, .85rem); color: rgba(255,255,255,.7); }
/* Ultra-wide / short screens (e.g. 2000×740): the template sizes the hero title by width only (16.88vw), so three lines overflow the first screen.
   Cap it by height at the ratio the template was designed for (1440×900 → 243px ≈ 27vh). */
.banner-title { font-size: min(var(--_typography---banner-title), 27vh); }
@media screen and (min-width: 992px) and (max-height: 820px) {
  .banner-title { font-size: min(var(--_typography---banner-title), 22vh); }
  .banner-heading { font-size: clamp(32px, 5.4vh, 56px); letter-spacing: -0.03em; }
}
.zb-legal { max-width: 46rem; margin: 0 auto; line-height: 1.7; }
.zb-legal h2 { margin: 2.5rem 0 .75rem; font-size: 1.5rem; letter-spacing: -0.01em; word-spacing: normal; }
.zb-legal ul { padding-left: 1.25rem; }
.zb-legal li { margin-bottom: .6rem; }
.zb-legal a { color: inherit; text-decoration: underline; }

/* Buyer-guide answer pages (/news/): template blog-details layout, code-drawn hero, readable long-form body. */
.zb-article-hero { min-height: clamp(220px, 34vh, 380px); display: flex; align-items: flex-end; }
.zb-article-hero-inner { padding-bottom: 28px; color: #fff; }
.zb-crumbs { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; opacity: .85; }
.zb-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.zb-crumbs a:hover, .zb-crumbs a:focus-visible { border-bottom-color: #e7ea6a; color: #e7ea6a; }
.zb-article-kicker { margin: 10px 0 0; color: #e7ea6a; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
.zb-article-products { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.zb-article-products a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,0,0,.25); font-size: 15px; line-height: 1.35; }
.zb-article-products a:hover, .zb-article-products a:focus-visible { text-decoration-color: currentColor; }
.zb-article-cta { margin-top: 28px; }
.zb-article-lede { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; }
.zb-article-body { max-width: 72ch; }
.zb-article-body h1 { font-family: var(--_font-family---creato-display); font-weight: 800; letter-spacing: -.035em; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.02; margin: 0 0 28px; }
.zb-article-body h2 { margin-top: 1.6em; }
.zb-article-body sup { font-size: .7em; line-height: 0; color: #6b6d12; font-weight: 700; }
.zb-article-body a { color: inherit; text-decoration: underline; text-decoration-color: #c9cc3f; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.zb-article-body a:hover, .zb-article-body a:focus-visible { background: #f3f5b9; }
.zb-article-body ol, .zb-article-body ul { padding-left: 2.2em; }
.zb-article-body ul { list-style: disc; } .zb-article-body ol { list-style: decimal; }
.zb-article-body li { margin: .25em 0; }
.zb-article-body h2#sources, .zb-article-body h2:last-of-type { font-size: 20px; }
.zb-article-body h2:last-of-type + ol { font-size: 14px; line-height: 1.45; color: #55575c; }
.zb-article-body h2:last-of-type + ol a { text-decoration-thickness: 1px; text-decoration-color: rgba(0,0,0,.25); word-break: break-word; }
.zb-article-summary { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px; background: #111214; color: #fff; border-radius: 6px; }
.zb-article-summary p { margin: 8px 0 0; line-height: 1.45; color: rgba(255,255,255,.88); }
.zb-article-summary .subtitle { color: #e7ea6a; }
.zb-article-more-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.zb-article-more-list a { display: grid; gap: 10px; padding: 28px; background: #fff; color: inherit; text-decoration: none; height: 100%; border: 1px solid rgba(0,0,0,.1); transition: background .25s ease; }
.zb-article-more-list a:hover, .zb-article-more-list a:focus-visible { background: #f3f5b9; }
.zb-article-more-t { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; line-height: 1.2; }
.zb-news-list { display: grid; gap: 32px; }
.zb-news-summary { margin: 14px 0 0; max-width: 60ch; line-height: 1.5; }
.featured-blog-image-wrapper.zb-material-host { min-height: 280px; }
@media (max-width: 767px) {
  .zb-article-summary { grid-template-columns: 1fr; }
  .zb-article-body h1 { font-size: 34px; }
}
@media (max-width: 991px) {
  .zb-article .blog-details-wrapper { display: flex; flex-direction: column; }
  .zb-article .blog-details-right-content { order: 1; }
  .zb-article .blog-details-left-content { order: 2; margin-top: 40px; position: static; }
}

/* Catalogue spec tables on carbon product pages (wide tables scroll inside their box on phones). */
.zb-feature-list { padding-left: 1.2em; list-style: disc; }
.zb-feature-list li { margin: .2em 0; }
.zb-table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.zb-table-scroll:focus-visible { outline: 2px solid #c9cc3f; outline-offset: 2px; }
.zb-cat-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zb-cat-table thead th { text-align: left; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; border-bottom: 2px solid #111; padding: 10px 12px; white-space: nowrap; }
.zb-cat-table tbody th, .zb-cat-table tbody td { padding: 9px 12px; border-bottom: 1px solid rgba(0,0,0,.1); text-align: left; white-space: nowrap; }
.zb-cat-table tbody th { font-weight: 600; }
.zb-cat-table tbody tr:hover { background: #f3f5b9; }
/* Markdown tables in answer pages (batch 2): same look as catalogue spec tables, scroll on narrow screens. */
.zb-article-body table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 1.2em 0 1.4em; font-size: 15px; }
.zb-article-body thead th { text-align: left; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; border-bottom: 2px solid #111; padding: 10px 14px 10px 0; white-space: nowrap; }
.zb-article-body tbody td { padding: 9px 14px 9px 0; border-bottom: 1px solid rgba(0,0,0,.1); white-space: nowrap; }
.zb-article-body tbody td:first-child { font-weight: 600; }

.zb-video-host { position: relative; overflow: hidden; }