/* ======================================================================
   TradeBuild v24 — SHOP WINDOW QUALITY LAYER
   Visual benchmark: the approved high-quality landing/preview composition.
   Same layer is usable by signup and published sites.
   ====================================================================== */

/* Trade-facing styles use commercial sans typography by default.
   Editorial/refined intentionally keep serif display type. */
[data-site-theme="strong"],
[data-site-theme="trusted"],
[data-site-theme="local"],
[data-site-theme="practical"],
[data-site-theme="modern"],
[data-site-theme="showcase"],
[data-site-theme="welcoming"]{
  --tb-font-heading: Inter, "Segoe UI", Arial, sans-serif;
  --tb-theme-heading-weight: 760;
  --tb-theme-heading-tracking: -.045em;
}
[data-site-theme="established"]{
  --tb-font-heading: Inter, "Segoe UI", Arial, sans-serif;
  --tb-theme-heading-weight: 700;
  --tb-theme-heading-tracking: -.035em;
}
[data-site-theme="editorial"],
[data-site-theme="refined"]{
  --tb-font-heading: Georgia, "Times New Roman", serif;
}

/* remove internal QA labels from customer-facing preview */
.rich-variant-label,
#liveSite[data-renderer="component-library"]::before{
  display:none!important;
}

/* ---------- Global commercial rhythm ---------- */
.component-site-host--desktop{
  --tb-theme-content-width:1180px;
  --tb-page-gutter:28px;
  --tb-theme-section-space:58px;
  --tb-theme-grid-gap:18px;
  --tb-theme-card-radius:12px;
  --tb-theme-image-radius:12px;
}
.component-site-host--desktop .tb-container{
  width:min(calc(100% - 56px),1180px);
  margin-inline:auto;
}
.component-site-host--desktop .tb-component .tb-eyebrow{
  font-size:8px;
  letter-spacing:.17em;
}
.component-site-host--desktop .tb-component .tb-title{
  max-width:15ch;
  margin:.24em 0 .3em;
  line-height:1.01;
  text-wrap:balance;
}
.component-site-host--desktop .tb-component p{
  line-height:1.55;
}
.component-site-host--desktop .tb-btn{
  min-height:42px;
  padding:10px 17px;
  border-radius:8px;
  font-size:9px;
}
.component-site-host--desktop .tb-card{
  border-color:color-mix(in srgb,var(--tb-colour-text) 9%,transparent);
  box-shadow:0 12px 30px rgba(7,18,29,.075);
}

/* ---------- Header: cleaner, benchmark-style ---------- */
.component-site-host .tb-premium-header{
  background:var(--tb-colour-dark)!important;
  color:#fff!important;
  border:0!important;
}
.component-site-host .tb-premium-header__inner{
  min-height:70px;
  grid-template-columns:minmax(170px,.8fr) minmax(280px,1.5fr) auto;
  gap:22px;
}
.component-site-host .tb-premium-header .tb-brand strong{
  color:#fff!important;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-weight:800;
  letter-spacing:-.015em;
  font-size:13px;
}
.component-site-host .tb-premium-header .tb-brand small{
  color:rgba(255,255,255,.58)!important;
}
.component-site-host .tb-premium-header nav{
  gap:24px;
  flex-wrap:nowrap;
}
.component-site-host .tb-premium-header nav a{
  color:#fff!important;
  white-space:nowrap;
  opacity:.9;
}
.component-site-host .tb-premium-header .tb-btn{
  background:var(--tb-colour-primary)!important;
  color:var(--tb-colour-primary-contrast)!important;
  border:0!important;
  box-shadow:none!important;
}
.component-site-host .tb-premium-header--minimal,
.component-site-host .tb-premium-header--centred{
  background:var(--tb-colour-dark)!important;
}

/* ---------- Strong/default trade hero: benchmark composition ---------- */
.component-site-host .tb-premium-hero--overlay{
  display:grid;
  grid-template-columns:minmax(0,50%) minmax(0,50%);
  min-height:500px;
  background:var(--tb-colour-dark)!important;
  color:#fff;
}
.component-site-host .tb-premium-hero--overlay::after{
  content:"";
  grid-column:2;
  grid-row:1;
  background-image:var(--tb-preview-image),linear-gradient(145deg,#77878f,#31434d);
  background-size:cover;
  background-position:center;
  min-height:500px;
}
.component-site-host .tb-premium-overlay-card{
  grid-column:1;
  grid-row:1;
  width:auto;
  max-width:none;
  margin:0!important;
  padding:64px 46px 52px 46px!important;
  align-self:center;
  z-index:2;
}
.component-site-host .tb-premium-overlay-card .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-weight:780;
  font-size:clamp(34px,4.4vw,58px);
  line-height:.99;
  letter-spacing:-.052em;
  max-width:11ch;
  margin:.34em 0 .38em;
}
.component-site-host .tb-premium-overlay-card .tb-copy{
  max-width:42ch;
  font-size:13px;
  color:rgba(255,255,255,.78);
}
.component-site-host .tb-premium-overlay-card ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  padding:0;
  margin:22px 0;
  list-style:none;
}
.component-site-host .tb-premium-overlay-card li{
  position:relative;
  padding-left:18px;
  font-size:9px;
  color:rgba(255,255,255,.92);
}
.component-site-host .tb-premium-overlay-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--tb-colour-primary);
  font-weight:900;
}

/* split hero closely matches approved landing site's balance */
.component-site-host .tb-premium-hero--split{
  grid-template-columns:minmax(0,50%) minmax(0,50%)!important;
  min-height:500px!important;
  background:var(--tb-colour-dark)!important;
  color:#fff!important;
}
.component-site-host .tb-premium-hero--split .tb-premium-hero__copy{
  padding:62px 46px!important;
  align-self:center;
}
.component-site-host .tb-premium-hero--split .tb-title{
  color:#fff!important;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-weight:780;
  font-size:clamp(34px,4.4vw,58px)!important;
  max-width:11ch!important;
}
.component-site-host .tb-premium-hero--split .tb-copy{
  color:rgba(255,255,255,.76)!important;
  max-width:44ch;
}
.component-site-host .tb-premium-hero--split .tb-premium-hero__image{
  min-height:500px!important;
}

/* full image */
.component-site-host .tb-premium-hero--full{
  min-height:530px!important;
}
.component-site-host .tb-premium-hero--full .tb-premium-hero__content{
  padding-block:74px;
  max-width:680px;
}
.component-site-host .tb-premium-hero--full .tb-title{
  font-size:clamp(38px,5vw,64px);
  font-weight:780;
}

/* video: real visual distinction */
.component-site-host .tb-premium-hero--video{
  min-height:520px!important;
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.90) 0 40%,rgba(4,12,22,.18) 72%),
    var(--tb-preview-image)!important;
}
.component-site-host .tb-premium-video-layout{
  min-height:520px!important;
  grid-template-columns:minmax(0,52%) minmax(0,48%);
}
.component-site-host .tb-premium-hero--video .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:clamp(38px,5vw,64px);
  font-weight:780;
}
.component-site-host .tb-video-play{
  width:104px;height:104px;
  background:rgba(9,23,37,.48);
  border:1px solid rgba(255,255,255,.65);
}

/* asymmetric: not a giant wedge */
.component-site-host .tb-premium-hero--asym{
  grid-template-columns:minmax(0,43%) minmax(0,57%)!important;
  min-height:490px!important;
  background:var(--tb-colour-surface)!important;
}
.component-site-host .tb-premium-hero--asym .tb-premium-hero__copy{
  padding:60px 40px!important;
}
.component-site-host .tb-premium-hero--asym .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:clamp(34px,4.3vw,56px);
  font-weight:760;
  max-width:11ch;
}
.component-site-host .tb-premium-hero--asym .tb-premium-hero__image{
  min-height:490px!important;
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)!important;
}

/* minimal: generous whitespace but not empty */
.component-site-host .tb-premium-hero--minimal{
  min-height:365px!important;
  padding:36px;
}
.component-site-host .tb-premium-hero--minimal .tb-title{
  font-size:clamp(42px,6vw,72px);
  max-width:13ch;
}

/* project hero: premium image-led */
.component-site-host .tb-premium-hero--project{
  min-height:540px!important;
}
.component-site-host .tb-premium-project-panel{
  max-width:500px!important;
  margin:0 0 34px 36px!important;
  padding:27px 30px!important;
  border-radius:12px;
  background:rgba(5,16,27,.78)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.23);
}
.component-site-host .tb-premium-project-panel .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-weight:760;
  font-size:clamp(30px,4vw,50px);
}

/* slider: image first, clean copy */
.component-site-host .tb-premium-hero--slider{
  min-height:540px!important;
}
.component-site-host .tb-premium-slide{
  min-height:540px!important;
  align-items:center!important;
  padding:0 0 0 46px!important;
}
.component-site-host .tb-premium-slide__copy{
  padding:28px 30px;
  max-width:520px;
  border-radius:12px;
  background:rgba(5,16,27,.72);
  backdrop-filter:blur(8px);
}
.component-site-host .tb-premium-slide .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-weight:760;
  font-size:clamp(34px,4.4vw,58px);
}

/* cinematic remains the intentionally premium/editorial exception */
.component-site-host .tb-premium-hero--cinematic{
  min-height:520px!important;
}
.component-site-host .tb-premium-hero--cinematic .tb-title{
  max-width:10ch!important;
}

/* ---------- Proof strip like approved render ---------- */
.component-site-host .tb-mini-proof{
  display:grid!important;
  grid-template-columns:repeat(3,1fr);
  gap:0!important;
  margin-top:30px!important;
  padding:16px 0 0!important;
  border-top:1px solid rgba(255,255,255,.15)!important;
}
.component-site-host .tb-mini-proof span{
  min-height:38px;
  padding:0 12px 0 18px;
  border-right:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.86)!important;
}
.component-site-host .tb-mini-proof span:first-child{padding-left:0}
.component-site-host .tb-mini-proof span:last-child{border-right:0}

/* ---------- Sections: high-end but commercially legible ---------- */
.component-site-host--desktop .tb-section-heading{
  margin-bottom:32px;
}
.component-site-host--desktop .tb-section-heading .tb-title{
  font-size:clamp(28px,3.4vw,44px);
  max-width:13ch;
}
.component-site-host--desktop .tb-premium-service-grid article,
.component-site-host--desktop .tb-premium-image-services article,
.component-site-host--desktop .tb-premium-feature-services article{
  transition:transform .25s ease,box-shadow .25s ease;
}
.component-site-host--desktop .tb-premium-service-grid article:hover,
.component-site-host--desktop .tb-premium-image-services article:hover,
.component-site-host--desktop .tb-premium-feature-services article:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(7,18,29,.11);
}
.component-site-host--desktop .tb-premium-image-services .tb-service-image,
.component-site-host--desktop .tb-premium-feature-services .tb-service-image{
  min-height:210px;
}
.component-site-host--desktop .tb-featured-project{
  border-radius:14px;
  overflow:hidden;
}
.component-site-host--desktop .tb-overlay-projects article,
.component-site-host--desktop .tb-project-strip .tb-project-image{
  border-radius:12px;
  overflow:hidden;
}
.component-site-host--desktop .tb-premium-review-cards blockquote{
  border-radius:12px;
}
.component-site-host--desktop .tb-premium-trust{
  border-radius:12px;
  overflow:hidden;
  background:var(--tb-colour-surface);
}

/* ---------- Mobile: deliberately composed version ---------- */
.component-site-host--mobile{
  --tb-page-gutter:10px;
  --tb-theme-section-space:22px;
}
.component-site-host--mobile .tb-premium-header{
  background:var(--tb-colour-dark)!important;
}
.component-site-host--mobile .tb-premium-header__inner{
  min-height:44px!important;
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:6px!important;
}
.component-site-host--mobile .tb-premium-header .tb-brand strong{
  font-size:7px!important;
  max-width:110px!important;
}
.component-site-host--mobile .tb-premium-header .tb-brand small,
.component-site-host--mobile .tb-premium-header nav{
  display:none!important;
}
.component-site-host--mobile .tb-premium-header .tb-btn{
  display:block!important;
  min-height:20px!important;
  font-size:4px!important;
  padding:3px 6px!important;
}

/* split and overlay become strong single-column hero with image underneath */
.component-site-host--mobile .tb-premium-hero--split,
.component-site-host--mobile .tb-premium-hero--overlay{
  display:grid!important;
  grid-template-columns:1fr!important;
  min-height:0!important;
}
.component-site-host--mobile .tb-premium-hero--split .tb-premium-hero__copy,
.component-site-host--mobile .tb-premium-overlay-card{
  grid-column:1!important;
  grid-row:auto!important;
  padding:20px 12px!important;
  margin:0!important;
  width:auto!important;
  max-width:none!important;
}
.component-site-host--mobile .tb-premium-hero--split .tb-premium-hero__image,
.component-site-host--mobile .tb-premium-hero--overlay::after{
  grid-column:1!important;
  grid-row:auto!important;
  min-height:125px!important;
  display:block!important;
}
.component-site-host--mobile .tb-premium-overlay-card .tb-title,
.component-site-host--mobile .tb-premium-hero--split .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  font-size:18px!important;
  max-width:11ch!important;
  font-weight:780!important;
}
.component-site-host--mobile .tb-premium-overlay-card ul{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:4px!important;
  margin:10px 0!important;
}
.component-site-host--mobile .tb-mini-proof{
  grid-template-columns:1fr!important;
  margin-top:12px!important;
  padding-top:8px!important;
}
.component-site-host--mobile .tb-mini-proof span{
  border-right:0!important;
  padding:3px 0!important;
  min-height:0!important;
}

/* full image/video/project stay cinematic on phone */
.component-site-host--mobile .tb-premium-hero--full,
.component-site-host--mobile .tb-premium-hero--video,
.component-site-host--mobile .tb-premium-hero--project,
.component-site-host--mobile .tb-premium-hero--slider,
.component-site-host--mobile .tb-premium-hero--cinematic{
  min-height:200px!important;
}
.component-site-host--mobile .tb-premium-hero--full .tb-premium-hero__content,
.component-site-host--mobile .tb-premium-video-layout{
  padding:22px 12px!important;
  min-height:200px!important;
}
.component-site-host--mobile .tb-premium-video-layout{
  grid-template-columns:1fr!important;
}
.component-site-host--mobile .tb-video-play{
  justify-self:start!important;
  width:38px!important;height:38px!important;
}
.component-site-host--mobile .tb-video-play small{display:none!important}
.component-site-host--mobile .tb-premium-project-panel{
  margin:0 8px 10px!important;
  max-width:78%!important;
  padding:10px!important;
}
.component-site-host--mobile .tb-premium-slide{
  min-height:200px!important;
  padding:12px!important;
  align-items:end!important;
}
.component-site-host--mobile .tb-premium-slide__copy{
  max-width:78%!important;
  padding:10px!important;
}

/* asymmetric becomes clean stacked card, no wedge squeeze */
.component-site-host--mobile .tb-premium-hero--asym{
  grid-template-columns:1fr!important;
  min-height:0!important;
}
.component-site-host--mobile .tb-premium-hero--asym .tb-premium-hero__copy{
  padding:20px 12px!important;
}
.component-site-host--mobile .tb-premium-hero--asym .tb-premium-hero__image{
  min-height:125px!important;
  clip-path:none!important;
}
.component-site-host--mobile .tb-premium-float-card{
  bottom:7px!important;right:7px!important;
}

/* body cards on phone */
.component-site-host--mobile .tb-premium-service-grid,
.component-site-host--mobile .tb-premium-image-services,
.component-site-host--mobile .tb-premium-feature-services,
.component-site-host--mobile .tb-premium-review-cards,
.component-site-host--mobile .tb-premium-guarantees,
.component-site-host--mobile .tb-premium-trust,
.component-site-host--mobile .tb-premium-counters{
  grid-template-columns:1fr!important;
}
.component-site-host--mobile .tb-premium-service-grid article{
  padding:9px 8px!important;
}
.component-site-host--mobile .tb-premium-image-services article,
.component-site-host--mobile .tb-premium-feature-services article{
  display:grid!important;
  grid-template-columns:42% 58%!important;
}
.component-site-host--mobile .tb-premium-image-services .tb-service-image,
.component-site-host--mobile .tb-premium-feature-services .tb-service-image{
  min-height:68px!important;
}
.component-site-host--mobile .tb-premium-review-cards blockquote{
  padding:10px!important;
}
.component-site-host--mobile .tb-premium-trust>div{
  padding:9px!important;
}

/* no giant serif type on commercial themes */
.component-site-host--desktop[data-site-theme="strong"] .tb-title,
.component-site-host--desktop[data-site-theme="trusted"] .tb-title,
.component-site-host--desktop[data-site-theme="local"] .tb-title,
.component-site-host--desktop[data-site-theme="practical"] .tb-title,
.component-site-host--desktop[data-site-theme="modern"] .tb-title,
.component-site-host--desktop[data-site-theme="showcase"] .tb-title,
.component-site-host--desktop[data-site-theme="welcoming"] .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
}

/* desktop browser viewport scroll remains smooth */
#liveSite{
  scroll-behavior:smooth;
}
#mobileSiteScroll{
  scroll-behavior:smooth;
}


/* ======================================================================
   v25 — PREMIUM ALIGNMENT / TYPOGRAPHY / IMAGE DISCIPLINE
   ====================================================================== */

.component-site-host--desktop{
  container-type:inline-size;
}

/* Consistent left alignment across production desktop components. */
.component-site-host--desktop .tb-component:not(.tb-component--header):not(.tb-component--footer) .tb-container,
.component-site-host--desktop .tb-premium-hero__copy,
.component-site-host--desktop .tb-premium-overlay-card,
.component-site-host--desktop .tb-premium-project-panel,
.component-site-host--desktop .tb-premium-slide__copy,
.component-site-host--desktop .tb-case-copy{
  text-align:left!important;
}

.component-site-host--desktop .tb-component h1,
.component-site-host--desktop .tb-component .tb-title{
  letter-spacing:-.055em!important;
  line-height:.96!important;
  text-align:left!important;
  text-wrap:balance!important;
  max-width:13ch!important;
  margin-left:0!important;
  margin-right:auto!important;
}
.component-site-host--desktop .tb-component h2{
  letter-spacing:-.042em!important;
  line-height:1.02!important;
  text-align:left!important;
  text-wrap:balance!important;
}
.component-site-host--desktop .tb-component h3{
  letter-spacing:-.025em!important;
  line-height:1.08!important;
}
.component-site-host--desktop .tb-component p,
.component-site-host--desktop .tb-component .tb-copy,
.component-site-host--desktop .tb-component .tb-eyebrow{
  text-align:left!important;
}
.component-site-host--desktop .tb-component p,
.component-site-host--desktop .tb-component .tb-copy{
  max-width:58ch!important;
}

/* Restrained sizes appropriate to the miniature desktop browser. */
.component-site-host--desktop .tb-component--hero .tb-title{
  font-size:clamp(34px,4vw,52px)!important;
}
.component-site-host--desktop [data-rendered-variant="minimal-centred-05"] .tb-title{
  font-size:clamp(38px,4.8vw,58px)!important;
}
.component-site-host--desktop [data-rendered-variant="dark-cinematic-09"] .tb-title{
  font-size:clamp(40px,5vw,62px)!important;
}
.component-site-host--desktop .tb-section-heading .tb-title,
.component-site-host--desktop .tb-component--services .tb-title,
.component-site-host--desktop .tb-component--showcase .tb-title,
.component-site-host--desktop .tb-component--reviews .tb-title,
.component-site-host--desktop .tb-component--trust .tb-title{
  font-size:clamp(26px,3vw,40px)!important;
  max-width:16ch!important;
}
.component-site-host--desktop[data-site-theme="editorial"] .tb-title,
.component-site-host--desktop[data-site-theme="refined"] .tb-title{
  letter-spacing:-.04em!important;
}

/* Premium rhythm. */
.component-site-host--desktop .tb-section{
  padding-block:clamp(42px,5vw,62px)!important;
}
.component-site-host--desktop .tb-actions{
  margin-top:22px!important;
}
.component-site-host--desktop .tb-section-heading{
  align-items:flex-start!important;
  flex-direction:column!important;
  gap:6px!important;
  margin-bottom:28px!important;
}

/* Header/nav can never leave the browser viewport. */
.component-site-host--desktop .tb-premium-header{
  overflow:hidden!important;
}
.component-site-host--desktop .tb-premium-header .tb-container{
  width:100%!important;
  max-width:none!important;
  padding-inline:20px!important;
  box-sizing:border-box!important;
}
.component-site-host--desktop .tb-premium-header__inner{
  display:grid!important;
  grid-template-columns:minmax(120px,.72fr) minmax(220px,1.45fr) auto!important;
  gap:14px!important;
  min-width:0!important;
}
.component-site-host--desktop .tb-premium-header .tb-brand,
.component-site-host--desktop .tb-premium-header nav,
.component-site-host--desktop .tb-premium-header .tb-btn{
  min-width:0!important;
}
.component-site-host--desktop .tb-premium-header .tb-brand strong{
  max-width:180px!important;
  font-size:12px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.component-site-host--desktop .tb-premium-header nav{
  justify-content:flex-end!important;
  gap:13px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.component-site-host--desktop .tb-premium-header nav a{
  flex:0 0 auto!important;
  font-size:8px!important;
}
.component-site-host--desktop .tb-premium-header .tb-btn{
  font-size:8px!important;
  padding:8px 11px!important;
  min-height:38px!important;
  white-space:nowrap!important;
}
@container (max-width:760px){
  .component-site-host--desktop .tb-premium-header nav a:nth-child(n+4){
    display:none!important;
  }
}
@container (max-width:650px){
  .component-site-host--desktop .tb-premium-header nav a:nth-child(n+3){
    display:none!important;
  }
}

/* All image-bearing components use a real bundled dummy image until customer media replaces it. */
.component-site-host .tb-premium-hero__image,
.component-site-host .tb-service-image,
.component-site-host .tb-project-image,
.component-site-host .tb-owner-photo,
.component-site-host .tb-team-photo,
.component-site-host .tb-media,
.component-site-host [class*="image"],
.component-site-host [class*="photo"]{
  background-color:#d9dee2;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

.component-site-host .tb-premium-hero__image,
.component-site-host .tb-service-image,
.component-site-host .tb-project-image,
.component-site-host .tb-owner-photo,
.component-site-host .tb-team-photo,
.component-site-host .tb-media{
  background-image:var(--tb-preview-image),var(--tb-dummy-image)!important;
}

/* Overlay/background-image components keep overlays but always have a photo layer. */
.component-site-host .tb-premium-hero--full{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.72),rgba(4,12,22,.12)),
    var(--tb-preview-image),
    var(--tb-dummy-image)!important;
}
.component-site-host .tb-premium-hero--video{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.88),rgba(4,12,22,.20)),
    var(--tb-preview-image),
    var(--tb-dummy-image)!important;
}
.component-site-host .tb-premium-hero--project{
  background-image:
    linear-gradient(0deg,rgba(4,10,16,.80),rgba(4,10,16,.06) 64%),
    var(--tb-preview-image),
    var(--tb-dummy-image)!important;
}
.component-site-host .tb-premium-hero--slider,
.component-site-host .tb-premium-case-study,
.component-site-host [data-variant="availability-hero-01"],
.component-site-host [data-variant="quote-overlay-07"],
.component-site-host [data-variant="overlay-01"]{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.72),rgba(4,12,22,.16)),
    var(--tb-preview-image),
    var(--tb-dummy-image)!important;
}

/* For text-overlay, the right half is explicitly the photographic panel. */
.component-site-host .tb-premium-hero--overlay::after{
  background-image:var(--tb-preview-image),var(--tb-dummy-image)!important;
  background-size:cover!important;
  background-position:center!important;
}

/* Mobile carries the same typographic discipline. */
.component-site-host--mobile .tb-title,
.component-site-host--mobile h1,
.component-site-host--mobile h2,
.component-site-host--mobile h3,
.component-site-host--mobile p,
.component-site-host--mobile .tb-copy,
.component-site-host--mobile .tb-eyebrow{
  text-align:left!important;
}
.component-site-host--mobile .tb-title{
  letter-spacing:-.045em!important;
  line-height:1!important;
}


/* ======================================================================
   v26 — PREVIEW GRID / TYPE / CONTROL NORMALISATION
   The miniature browser has its own layout scale. Do not size it from the
   outer signup page viewport.
   ====================================================================== */

.component-site-host{
  --tb-preview-gutter: 30px;
  --tb-preview-header-height: 66px;
  --tb-preview-copy-width: 46%;
  container-type:inline-size;
}

/* One left/right grid for header, hero and sections. */
.component-site-host--desktop .tb-premium-header .tb-container,
.component-site-host--desktop .tb-component:not(.tb-component--hero):not(.tb-component--header):not(.tb-component--footer) .tb-container,
.component-site-host--desktop .tb-premium-footer .tb-container{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  padding-left:var(--tb-preview-gutter)!important;
  padding-right:var(--tb-preview-gutter)!important;
  margin:0!important;
}

/* Header: predictable baseline and no artificial tracking. */
.component-site-host--desktop .tb-premium-header__inner{
  min-height:var(--tb-preview-header-height)!important;
  height:var(--tb-preview-header-height)!important;
  grid-template-columns:minmax(150px,.8fr) minmax(210px,1.3fr) auto!important;
  align-items:center!important;
  gap:14px!important;
}
.component-site-host--desktop .tb-premium-header .tb-brand,
.component-site-host--desktop .tb-premium-header .tb-brand strong{
  letter-spacing:-.015em!important;
  line-height:1!important;
}
.component-site-host--desktop .tb-premium-header .tb-brand strong{
  font-size:12px!important;
  max-width:190px!important;
}
.component-site-host--desktop .tb-premium-header .tb-brand small{
  margin-top:4px!important;
  line-height:1!important;
}
.component-site-host--desktop .tb-premium-header nav{
  align-items:center!important;
  justify-content:flex-end!important;
  gap:13px!important;
}
.component-site-host--desktop .tb-premium-header nav a{
  line-height:1!important;
  letter-spacing:-.01em!important;
  padding:0!important;
  margin:0!important;
}

/* All button/link controls align text on a true centre line. */
.component-site-host .tb-btn,
.component-site-host button,
.component-site-host [role="button"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  line-height:1!important;
  vertical-align:middle!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
.component-site-host--desktop .tb-btn{
  height:40px!important;
  min-height:40px!important;
  padding-left:15px!important;
  padding-right:15px!important;
}
.component-site-host--mobile .tb-btn{
  height:22px!important;
  min-height:22px!important;
  padding-left:6px!important;
  padding-right:6px!important;
}

/* Desktop hero typography uses container width, not the outer page vw. */
.component-site-host--desktop .tb-component--hero .tb-title{
  font-size:clamp(30px,6cqw,42px)!important;
  letter-spacing:-.06em!important;
  line-height:.96!important;
  max-width:11.5ch!important;
  text-align:left!important;
}
.component-site-host--desktop .tb-component--hero .tb-copy{
  font-size:clamp(11px,1.9cqw,14px)!important;
  line-height:1.55!important;
  max-width:40ch!important;
  margin-left:0!important;
}
.component-site-host--desktop .tb-component--hero .tb-eyebrow{
  font-size:clamp(7px,1.2cqw,9px)!important;
  letter-spacing:.13em!important;
  line-height:1!important;
}

/* Shared hero padding starts on the same grid as the header/sections. */
.component-site-host--desktop .tb-premium-hero--split,
.component-site-host--desktop .tb-premium-hero--overlay{
  grid-template-columns:48% 52%!important;
}
.component-site-host--desktop .tb-premium-hero--split .tb-premium-hero__copy,
.component-site-host--desktop .tb-premium-overlay-card{
  padding-left:var(--tb-preview-gutter)!important;
  padding-right:26px!important;
  padding-top:52px!important;
  padding-bottom:52px!important;
}
.component-site-host--desktop .tb-premium-hero--asym{
  grid-template-columns:42% 58%!important;
}
.component-site-host--desktop .tb-premium-hero--asym .tb-premium-hero__copy{
  padding-left:var(--tb-preview-gutter)!important;
  padding-right:24px!important;
  padding-top:52px!important;
  padding-bottom:52px!important;
}
.component-site-host--desktop .tb-premium-project-panel{
  margin-left:var(--tb-preview-gutter)!important;
}
.component-site-host--desktop .tb-premium-slide{
  padding-left:var(--tb-preview-gutter)!important;
}

/* Section typography also uses container units. */
.component-site-host--desktop .tb-component:not(.tb-component--hero) .tb-title{
  font-size:clamp(23px,4.5cqw,34px)!important;
  letter-spacing:-.05em!important;
  line-height:1!important;
}
.component-site-host--desktop .tb-component h3{
  letter-spacing:-.035em!important;
}

/* Kill tracking inherited from themes on ordinary copy/labels. */
.component-site-host--desktop .tb-component p,
.component-site-host--desktop .tb-component li,
.component-site-host--desktop .tb-component a,
.component-site-host--desktop .tb-component button,
.component-site-host--desktop .tb-component small{
  letter-spacing:normal!important;
}

/* Correct image fallback. If customer/project image is absent, the dummy
   variable itself becomes the image instead of invalidating background-image. */
.component-site-host .tb-premium-hero__image,
.component-site-host .tb-service-image,
.component-site-host .tb-project-image,
.component-site-host .tb-owner-photo,
.component-site-host .tb-team-photo,
.component-site-host .tb-media{
  background-image:var(--tb-preview-image,var(--tb-dummy-image))!important;
}

.component-site-host .tb-premium-hero--full{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.72),rgba(4,12,22,.12)),
    var(--tb-preview-image,var(--tb-dummy-image))!important;
}
.component-site-host .tb-premium-hero--video{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.88),rgba(4,12,22,.20)),
    var(--tb-preview-image,var(--tb-dummy-image))!important;
}
.component-site-host .tb-premium-hero--project{
  background-image:
    linear-gradient(0deg,rgba(4,10,16,.80),rgba(4,10,16,.06) 64%),
    var(--tb-preview-image,var(--tb-dummy-image))!important;
}
.component-site-host .tb-premium-hero--slider,
.component-site-host .tb-premium-case-study,
.component-site-host [data-variant="availability-hero-01"],
.component-site-host [data-variant="quote-overlay-07"],
.component-site-host [data-variant="overlay-01"]{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.72),rgba(4,12,22,.16)),
    var(--tb-preview-image,var(--tb-dummy-image))!important;
}
.component-site-host .tb-premium-hero--overlay::after{
  background-image:var(--tb-preview-image,var(--tb-dummy-image))!important;
}

/* Proof/actions align cleanly to hero copy edge. */
.component-site-host--desktop .tb-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
}
.component-site-host--desktop .tb-mini-proof{
  align-items:stretch!important;
}
.component-site-host--desktop .tb-mini-proof span{
  display:flex!important;
  align-items:center!important;
  line-height:1.25!important;
}

/* Menu reduction is based on the preview itself. */
@container (max-width:700px){
  .component-site-host--desktop .tb-premium-header__inner{
    grid-template-columns:minmax(130px,.8fr) minmax(160px,1fr) auto!important;
  }
  .component-site-host--desktop .tb-premium-header nav a:nth-child(n+4){
    display:none!important;
  }
}
@container (max-width:610px){
  .component-site-host--desktop .tb-premium-header nav a:nth-child(n+3){
    display:none!important;
  }
}

/* Mobile receives its own sane scale rather than inheriting desktop metrics. */
.component-site-host--mobile{
  --tb-preview-gutter:10px;
}
.component-site-host--mobile .tb-premium-header__inner{
  height:42px!important;
  min-height:42px!important;
}
.component-site-host--mobile .tb-premium-header .tb-container{
  padding-inline:var(--tb-preview-gutter)!important;
}
.component-site-host--mobile .tb-component--hero .tb-title{
  font-size:17px!important;
  letter-spacing:-.055em!important;
  line-height:.96!important;
  max-width:11.5ch!important;
}
.component-site-host--mobile .tb-component--hero .tb-copy{
  font-size:6.2px!important;
  line-height:1.45!important;
}
.component-site-host--mobile .tb-premium-hero--split .tb-premium-hero__copy,
.component-site-host--mobile .tb-premium-overlay-card,
.component-site-host--mobile .tb-premium-hero--asym .tb-premium-hero__copy{
  padding:18px var(--tb-preview-gutter)!important;
}


/* ======================================================================
   v27 — IMAGE FALLBACK COMPLETENESS + MOBILE NAV/CONTROL NORMALISATION
   ====================================================================== */

/* Every visual media surface gets a real trade image fallback. */
.component-site-host [class*="image"],
.component-site-host [class*="photo"],
.component-site-host .tb-media,
.component-site-host .tb-project-image,
.component-site-host .tb-service-image,
.component-site-host .tb-owner-photo,
.component-site-host .tb-team-photo,
.component-site-host .tb-map-art,
.component-site-host .tb-radius-map,
.component-site-host .tb-illustration{
  background-image:var(--tb-preview-image,var(--tb-dummy-image))!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Hero/image variants that use the element itself as the media surface. */
.component-site-host [data-rendered-variant="full-image-02"] .tb-hero,
.component-site-host [data-rendered-variant="video-background-03"] .tb-hero,
.component-site-host [data-rendered-variant="project-focused-06"] .tb-hero,
.component-site-host [data-rendered-variant="slider-08"] .tb-hero,
.component-site-host [data-rendered-variant="dark-cinematic-09"] .tb-hero,
.component-site-host .tb-premium-case-study,
.component-site-host .tb-premium-hero--full,
.component-site-host .tb-premium-hero--video,
.component-site-host .tb-premium-hero--project,
.component-site-host .tb-premium-hero--slider{
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Preserve intended overlay and always place image underneath. */
.component-site-host .tb-premium-hero--full{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.74),rgba(4,12,22,.13)),
    var(--tb-preview-image,var(--tb-dummy-image))!important;
}
.component-site-host .tb-premium-hero--video{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.88),rgba(4,12,22,.20)),
    var(--tb-preview-image,var(--tb-dummy-image))!important;
}
.component-site-host .tb-premium-hero--project{
  background-image:
    linear-gradient(0deg,rgba(4,10,16,.82),rgba(4,10,16,.06) 64%),
    var(--tb-preview-image,var(--tb-dummy-image))!important;
}
.component-site-host .tb-premium-hero--slider{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.68),rgba(4,12,22,.08)),
    var(--tb-preview-image,var(--tb-dummy-image))!important;
}
.component-site-host .tb-premium-case-study{
  background-image:
    linear-gradient(0deg,rgba(4,10,16,.74),rgba(4,10,16,.08)),
    var(--tb-preview-image,var(--tb-dummy-image))!important;
}

/* Some generic library variants use pseudo-elements for visual panels. */
.component-site-host [data-rendered-family="hero"]::before,
.component-site-host [data-rendered-family="showcase"]::before{
  background-image:var(--tb-preview-image,var(--tb-dummy-image));
  background-size:cover;
  background-position:center;
}

/* ---------------- Mobile header contract ---------------- */

/* The mobile preview always uses one compact header pattern. */
.component-site-host--mobile .tb-component--header,
.component-site-host--mobile .tb-premium-header{
  position:relative!important;
  z-index:40!important;
  min-height:44px!important;
  height:auto!important;
  background:var(--tb-colour-dark)!important;
  color:#fff!important;
  overflow:visible!important;
}
.component-site-host--mobile .tb-component--header .tb-container,
.component-site-host--mobile .tb-premium-header .tb-container{
  width:100%!important;
  padding:0 9px!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.component-site-host--mobile .tb-premium-header__inner,
.component-site-host--mobile .tb-premium-header--centred .tb-premium-header__top{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 28px!important;
  align-items:center!important;
  gap:7px!important;
  min-height:44px!important;
  height:44px!important;
}
.component-site-host--mobile .tb-premium-header .tb-brand{
  display:block!important;
  min-width:0!important;
}
.component-site-host--mobile .tb-premium-header .tb-brand strong{
  display:block!important;
  max-width:120px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:7px!important;
  line-height:1!important;
}
.component-site-host--mobile .tb-premium-header .tb-brand small{
  display:none!important;
}

/* Hide every desktop nav/CTA implementation on phone. */
.component-site-host--mobile .tb-premium-header nav,
.component-site-host--mobile .tb-premium-header .tb-btn,
.component-site-host--mobile .tb-premium-header .tb-header-link,
.component-site-host--mobile .tb-premium-header__top > a:not(.tb-brand){
  display:none!important;
}

/* Add a consistent hamburger affordance using the header itself. */
.component-site-host--mobile .tb-premium-header::after{
  content:"☰";
  position:absolute;
  z-index:44;
  top:8px;
  right:8px;
  width:27px;
  height:27px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:var(--tb-colour-primary);
  color:var(--tb-colour-primary-contrast);
  font:700 12px/1 Inter,system-ui,sans-serif;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}

/* Generic mobile-menu DOM from older variants must never auto-open in preview. */
.component-site-host--mobile .mobile-menu,
.component-site-host--mobile .mobile-menu-panel,
.component-site-host--mobile .mobile-nav-panel,
.component-site-host--mobile .tb-mobile-menu,
.component-site-host--mobile [class*="mobile-menu"]{
  display:none!important;
}

/* ---------------- Mobile control sizing ---------------- */

.component-site-host--mobile .tb-btn,
.component-site-host--mobile button,
.component-site-host--mobile [role="button"],
.component-site-host--mobile input[type="submit"]{
  width:auto!important;
  max-width:100%!important;
  height:24px!important;
  min-height:24px!important;
  padding:0 8px!important;
  margin:0!important;
  border-radius:6px!important;
  font-size:5px!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Hero button groups shouldn't become giant full-width blocks. */
.component-site-host--mobile .tb-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  margin-top:11px!important;
}
.component-site-host--mobile .tb-actions .tb-btn{
  flex:0 0 auto!important;
}

/* Avoid giant floating CTA widgets inside the miniature device. */
.component-site-host--mobile [data-variant="floating-mobile-cta-02"],
.component-site-host--mobile [data-variant="sticky-quote-tab-01"]{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:auto!important;
  max-width:calc(100% - 16px)!important;
  margin:8px!important;
}
.component-site-host--mobile [data-variant="call-now-strip-03"] .tb-btn,
.component-site-host--mobile [data-variant="response-time-promise-04"] .tb-btn{
  height:24px!important;
}

/* Prevent oversized contact/footer buttons. */
.component-site-host--mobile .tb-conversion-main{
  grid-template-columns:1fr!important;
}
.component-site-host--mobile .tb-conversion-main a{
  min-height:27px!important;
  padding:6px 8px!important;
  font-size:5px!important;
}

/* Cleaner mobile body spacing. */
.component-site-host--mobile .tb-section{
  padding-block:16px!important;
}
.component-site-host--mobile .tb-section-heading{
  margin-bottom:10px!important;
}
.component-site-host--mobile .tb-card{
  padding:9px!important;
}


/* ======================================================================
   v28 — FINAL HEADER / MEDIA PREVIEW CLEANUP
   ====================================================================== */

/* Header CTA uses negative space instead of dominating the navigation. */
.component-site-host--desktop .tb-component--header .tb-btn,
.component-site-host--desktop .tb-premium-header .tb-btn{
  height:30px!important;
  min-height:30px!important;
  padding:0 11px!important;
  border-radius:7px!important;
  font-size:7px!important;
  line-height:1!important;
}

/* General desktop actions remain useful but restrained. */
.component-site-host--desktop .tb-component:not(.tb-component--header) .tb-btn{
  height:36px!important;
  min-height:36px!important;
  padding:0 14px!important;
  font-size:8px!important;
}

/* Mobile uses the actual rendered component header only. */
.component-site-host--mobile .tb-component--header,
.component-site-host--mobile .tb-premium-header{
  background:var(--tb-colour-dark,#071525)!important;
  background-color:var(--tb-colour-dark,#071525)!important;
  color:#fff!important;
  min-height:42px!important;
  border:0!important;
  box-shadow:none!important;
}
.component-site-host--mobile .tb-component--header .tb-container,
.component-site-host--mobile .tb-premium-header .tb-container{
  background:transparent!important;
}
.component-site-host--mobile .tb-premium-header::after{
  width:24px!important;
  height:24px!important;
  top:9px!important;
  right:8px!important;
  border-radius:6px!important;
  font-size:10px!important;
}

/* Header buttons are hidden on mobile because the hamburger is the header control. */
.component-site-host--mobile .tb-component--header .tb-btn,
.component-site-host--mobile .tb-premium-header .tb-btn,
.component-site-host--mobile .tb-header-link{
  display:none!important;
}

/* Normal mobile CTA controls remain compact. */
.component-site-host--mobile .tb-component:not(.tb-component--header) .tb-btn,
.component-site-host--mobile .tb-component:not(.tb-component--header) button,
.component-site-host--mobile .tb-component:not(.tb-component--header) [role="button"]{
  height:20px!important;
  min-height:20px!important;
  padding:0 6px!important;
  border-radius:5px!important;
  font-size:4.5px!important;
  line-height:1!important;
}

/* Since v28 always sets --tb-preview-image (customer image OR trade dummy),
   legacy and premium components all get a real photograph. */
.component-site-host [class*="image"],
.component-site-host [class*="photo"],
.component-site-host .tb-media,
.component-site-host .tb-premium-hero__image,
.component-site-host .tb-service-image,
.component-site-host .tb-project-image,
.component-site-host .tb-owner-photo,
.component-site-host .tb-team-photo{
  background-image:var(--tb-preview-image)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.component-site-host .tb-premium-hero--overlay::after{
  background-image:var(--tb-preview-image)!important;
  background-size:cover!important;
  background-position:center!important;
}


/* ======================================================================
   v29 — GRID-AWARE COMPONENT CONTRACT + TYPOGRAPHY + MEDIA SLOTS
   Structural alignment is invariant; typography/style may vary by theme.
   ====================================================================== */

.component-site-host{
  --tb-grid-gutter: 30px;
  --tb-grid-max: 1180px;
  --tb-grid-gap: 18px;
  --tb-grid-gap-sm: 10px;
  --tb-grid-radius: 12px;
  --tb-grid-section-y: 58px;

  /* Real mobile type scale. The phone preview scales the viewport, not fonts. */
  --tb-mobile-body: 16px;
  --tb-mobile-small: 13px;
  --tb-mobile-h1: 34px;
  --tb-mobile-h2: 27px;
  --tb-mobile-h3: 20px;
}

/* One geometry contract for all interchangeable components. */
.component-site-host--desktop .tb-container{
  width:100%!important;
  max-width:var(--tb-grid-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--tb-grid-gutter)!important;
  padding-right:var(--tb-grid-gutter)!important;
  box-sizing:border-box!important;
}

.component-site-host--desktop .tb-section,
.component-site-host--desktop .tb-component--services,
.component-site-host--desktop .tb-component--showcase,
.component-site-host--desktop .tb-component--gallery,
.component-site-host--desktop .tb-component--reviews,
.component-site-host--desktop .tb-component--testimonials,
.component-site-host--desktop .tb-component--trust,
.component-site-host--desktop .tb-component--credentials,
.component-site-host--desktop .tb-component--process,
.component-site-host--desktop .tb-component--project-detail,
.component-site-host--desktop .tb-component--before-after,
.component-site-host--desktop .tb-component--service-area,
.component-site-host--desktop .tb-component--team,
.component-site-host--desktop .tb-component--team-local,
.component-site-host--desktop .tb-component--availability,
.component-site-host--desktop .tb-component--finance{
  padding-top:var(--tb-grid-section-y)!important;
  padding-bottom:var(--tb-grid-section-y)!important;
}

/* Everything that visually begins a section sits on the same left edge. */
.component-site-host--desktop .tb-section-heading,
.component-site-host--desktop .tb-component .tb-eyebrow,
.component-site-host--desktop .tb-component .tb-title,
.component-site-host--desktop .tb-component .tb-copy{
  margin-left:0!important;
  margin-right:auto!important;
  text-align:left!important;
}

/* Large and small text both get bounded, component-aware scales. */
.component-site-host--desktop .tb-component--hero .tb-title{
  font-size:clamp(32px,5.6cqw,50px)!important;
  max-width:12ch!important;
}
.component-site-host--desktop .tb-component:not(.tb-component--hero) .tb-title{
  font-size:clamp(25px,4.1cqw,38px)!important;
  max-width:16ch!important;
}
.component-site-host--desktop .tb-component h3{
  font-size:clamp(17px,2.5cqw,23px)!important;
}
.component-site-host--desktop .tb-component p,
.component-site-host--desktop .tb-component li{
  font-size:clamp(12px,1.55cqw,15px)!important;
}
.component-site-host--desktop .tb-component small,
.component-site-host--desktop .tb-component cite,
.component-site-host--desktop .tb-component .tb-eyebrow{
  font-size:clamp(8px,1.1cqw,10px)!important;
}

/* Theme typography is free to vary while still obeying the grid. */
.component-site-host[data-site-theme="strong"] .tb-title,
.component-site-host[data-site-theme="modern"] .tb-title,
.component-site-host[data-site-theme="trusted"] .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  font-weight:780!important;
  letter-spacing:-.055em!important;
  line-height:.96!important;
}
.component-site-host[data-site-theme="local"] .tb-title,
.component-site-host[data-site-theme="welcoming"] .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:-.045em!important;
  line-height:1!important;
}
.component-site-host[data-site-theme="practical"] .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  font-weight:760!important;
  letter-spacing:-.04em!important;
  line-height:.98!important;
}
.component-site-host[data-site-theme="showcase"] .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  font-weight:720!important;
  letter-spacing:-.05em!important;
  line-height:.97!important;
}
.component-site-host[data-site-theme="established"] .tb-title{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  font-weight:680!important;
  letter-spacing:-.035em!important;
  line-height:1!important;
}
.component-site-host[data-site-theme="editorial"] .tb-title{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  letter-spacing:-.038em!important;
  line-height:.98!important;
}
.component-site-host[data-site-theme="refined"] .tb-title{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  letter-spacing:-.04em!important;
  line-height:.96!important;
}

/* Supporting text never inherits display tracking. */
.component-site-host .tb-component p,
.component-site-host .tb-component li,
.component-site-host .tb-component small,
.component-site-host .tb-component cite,
.component-site-host .tb-component nav a,
.component-site-host .tb-component .tb-copy{
  letter-spacing:normal!important;
}

/* Consistent card/image alignment within varied layouts. */
.component-site-host--desktop .tb-grid,
.component-site-host--desktop [class*="grid"],
.component-site-host--desktop [class*="cards"]{
  gap:var(--tb-grid-gap)!important;
}
.component-site-host--desktop .tb-card,
.component-site-host--desktop article{
  min-width:0!important;
  box-sizing:border-box!important;
}
.component-site-host--desktop .tb-service-image,
.component-site-host--desktop .tb-project-image,
.component-site-host--desktop .tb-media,
.component-site-host--desktop [class*="image"],
.component-site-host--desktop [class*="photo"]{
  border-radius:var(--tb-theme-image-radius,var(--tb-grid-radius));
  overflow:hidden;
}

/* Buttons share control geometry even when font/style changes. */
.component-site-host .tb-btn,
.component-site-host button,
.component-site-host [role="button"],
.component-site-host input[type="submit"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  vertical-align:middle!important;
  line-height:1!important;
  text-decoration:none!important;
}
.component-site-host--desktop .tb-btn{
  min-height:36px!important;
  height:36px!important;
  padding:0 14px!important;
  font-size:9px!important;
  border-radius:7px!important;
}

/* ------------------------------------------------------------------
   MEDIA SLOT CONTRACT
   Each media slot gets an explicit slot image. Customer images overwrite it.
   ------------------------------------------------------------------ */
.component-site-host [data-media-slot]{
  background-image:var(--tb-slot-image,var(--tb-dummy-image))!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

.component-site-host [data-media-slot].tb-media-overlay{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.72),rgba(4,12,22,.14)),
    var(--tb-slot-image,var(--tb-dummy-image))!important;
}

/* Every common visual class falls back to its assigned slot image. */
.component-site-host .tb-media,
.component-site-host .tb-service-image,
.component-site-host .tb-project-image,
.component-site-host .tb-owner-photo,
.component-site-host .tb-team-photo,
.component-site-host .tb-premium-hero__image,
.component-site-host [class*="image"],
.component-site-host [class*="photo"]{
  background-image:var(--tb-slot-image,var(--tb-preview-image,var(--tb-dummy-image)))!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Hero background surfaces use their dedicated hero slot. */
.component-site-host .tb-premium-hero--full,
.component-site-host .tb-premium-hero--video,
.component-site-host .tb-premium-hero--project,
.component-site-host .tb-premium-hero--slider,
.component-site-host .tb-premium-case-study,
.component-site-host [data-variant="availability-hero-01"],
.component-site-host [data-variant="quote-overlay-07"],
.component-site-host [data-variant="overlay-01"]{
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.72),rgba(4,12,22,.14)),
    var(--tb-hero-image,var(--tb-preview-image,var(--tb-dummy-image)))!important;
  background-size:cover!important;
  background-position:center!important;
}
.component-site-host .tb-premium-hero--project{
  background-image:
    linear-gradient(0deg,rgba(4,10,16,.82),rgba(4,10,16,.05) 64%),
    var(--tb-hero-image,var(--tb-preview-image,var(--tb-dummy-image)))!important;
}
.component-site-host .tb-premium-hero--overlay::after{
  background-image:var(--tb-hero-image,var(--tb-preview-image,var(--tb-dummy-image)))!important;
  background-size:cover!important;
  background-position:center!important;
}

/* ------------------------------------------------------------------
   REAL MOBILE VIEWPORT CONTRACT
   The actual component tree uses normal mobile typography. The phone shell
   scales the whole 390px viewport visually, instead of shrinking CSS text.
   ------------------------------------------------------------------ */
.component-site-host--mobile{
  width:390px!important;
  min-width:390px!important;
  max-width:390px!important;
  --tb-grid-gutter:18px;
  --tb-grid-section-y:38px;
  font-size:var(--tb-mobile-body)!important;
}
.component-site-host--mobile .tb-container{
  width:100%!important;
  max-width:390px!important;
  padding-left:var(--tb-grid-gutter)!important;
  padding-right:var(--tb-grid-gutter)!important;
  box-sizing:border-box!important;
}
.component-site-host--mobile .tb-component--hero .tb-title{
  font-size:var(--tb-mobile-h1)!important;
  line-height:.98!important;
  max-width:12ch!important;
}
.component-site-host--mobile .tb-component:not(.tb-component--hero) .tb-title{
  font-size:var(--tb-mobile-h2)!important;
  line-height:1!important;
}
.component-site-host--mobile .tb-component h3{
  font-size:var(--tb-mobile-h3)!important;
}
.component-site-host--mobile .tb-component p,
.component-site-host--mobile .tb-component li,
.component-site-host--mobile .tb-component .tb-copy{
  font-size:var(--tb-mobile-body)!important;
  line-height:1.5!important;
}
.component-site-host--mobile .tb-component small,
.component-site-host--mobile .tb-component cite,
.component-site-host--mobile .tb-component .tb-eyebrow{
  font-size:var(--tb-mobile-small)!important;
}
.component-site-host--mobile .tb-btn{
  height:42px!important;
  min-height:42px!important;
  padding:0 14px!important;
  font-size:14px!important;
  border-radius:8px!important;
}

/* Mobile layouts reflow; they do not compress desktop grids. */
.component-site-host--mobile .tb-premium-service-grid,
.component-site-host--mobile .tb-premium-image-services,
.component-site-host--mobile .tb-premium-feature-services,
.component-site-host--mobile .tb-premium-review-cards,
.component-site-host--mobile .tb-premium-guarantees,
.component-site-host--mobile .tb-premium-trust,
.component-site-host--mobile .tb-premium-counters,
.component-site-host--mobile .tb-overlay-projects{
  grid-template-columns:1fr!important;
}
.component-site-host--mobile .tb-premium-image-services article,
.component-site-host--mobile .tb-premium-feature-services article{
  display:grid!important;
  grid-template-columns:130px 1fr!important;
}
.component-site-host--mobile .tb-premium-image-services .tb-service-image,
.component-site-host--mobile .tb-premium-feature-services .tb-service-image{
  min-height:120px!important;
}
.component-site-host--mobile .tb-project-strip{
  grid-auto-columns:82%!important;
}
.component-site-host--mobile .tb-premium-masonry{
  grid-template-columns:1fr 1fr!important;
  grid-auto-rows:120px!important;
}

/* Phone frame scales the real 390px viewport down. */
.phone-rich-preview-components,
#mobileRenderedSite{
  transform-origin:top left!important;
}

/* The JS sets --tb-phone-scale based on the actual frame width. */
#mobileRenderedSite{
  transform:scale(var(--tb-phone-scale,.43))!important;
  width:390px!important;
}


/* ======================================================================
   v30 — REAL PREVIEW IMAGES + FUNCTIONAL MOBILE DRAWER
   ====================================================================== */

/* If JS has explicitly assigned preview media, never cover it with a flat fill. */
.component-site-host [data-has-preview-image="1"]{
  background-color:transparent!important;
}

/* v27's pseudo hamburger is now replaced by a real button. */
.component-site-host--mobile .tb-premium-header::after{
  display:none!important;
  content:none!important;
}

.component-site-host--mobile .tb-component--header,
.component-site-host--mobile .tb-premium-header{
  position:relative!important;
  overflow:visible!important;
  z-index:60!important;
  background:var(--tb-colour-dark,#0b2639)!important;
  color:#fff!important;
}

.component-site-host--mobile .tb-preview-mobile-menu-toggle{
  position:absolute!important;
  z-index:64!important;
  top:8px!important;
  right:8px!important;
  width:28px!important;
  height:28px!important;
  min-height:28px!important;
  padding:7px!important;
  margin:0!important;
  border:0!important;
  border-radius:7px!important;
  background:var(--tb-colour-primary)!important;
  color:var(--tb-colour-primary-contrast,#fff)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:3px!important;
  box-shadow:0 3px 10px rgba(0,0,0,.18)!important;
}

.component-site-host--mobile .tb-preview-mobile-menu-toggle span{
  display:block!important;
  width:100%!important;
  height:2px!important;
  border-radius:999px!important;
  background:currentColor!important;
  transition:transform .18s ease,opacity .18s ease!important;
}

.component-site-host--mobile .tb-preview-mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(5px) rotate(45deg)!important;
}
.component-site-host--mobile .tb-preview-mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0!important;
}
.component-site-host--mobile .tb-preview-mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-5px) rotate(-45deg)!important;
}

.component-site-host--mobile .tb-preview-mobile-drawer{
  position:absolute!important;
  z-index:63!important;
  top:44px!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  margin:0!important;
  padding:8px 0 10px!important;
  background:var(--tb-colour-dark,#0b2639)!important;
  color:#fff!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 14px 26px rgba(0,0,0,.24)!important;
}

.component-site-host--mobile .tb-preview-mobile-drawer[hidden]{
  display:none!important;
}

.component-site-host--mobile .tb-preview-mobile-drawer a{
  display:flex!important;
  align-items:center!important;
  min-height:38px!important;
  padding:0 18px!important;
  margin:0!important;
  color:#fff!important;
  background:transparent!important;
  border:0!important;
  text-decoration:none!important;
  font:600 14px/1 Inter,"Segoe UI",Arial,sans-serif!important;
  letter-spacing:-.01em!important;
}

.component-site-host--mobile .tb-preview-mobile-drawer a:hover{
  background:rgba(255,255,255,.06)!important;
}

.component-site-host--mobile .tb-preview-mobile-drawer__cta{
  width:calc(100% - 36px)!important;
  min-height:40px!important;
  margin:8px 18px 0!important;
  padding:0 14px!important;
  border-radius:8px!important;
  background:var(--tb-colour-primary)!important;
  color:var(--tb-colour-primary-contrast,#fff)!important;
  justify-content:center!important;
}

/* Ensure old menu fragments never show alongside the functional drawer. */
.component-site-host--mobile .mobile-menu,
.component-site-host--mobile .mobile-menu-panel,
.component-site-host--mobile .mobile-nav-panel,
.component-site-host--mobile .tb-mobile-menu,
.component-site-host--mobile [class*="mobile-menu"]:not(.tb-preview-mobile-menu-toggle){
  display:none!important;
}

/* The production component header remains visibly solid underneath the menu. */
.component-site-host--mobile .tb-premium-header__inner,
.component-site-host--mobile .tb-premium-header .tb-container{
  background:var(--tb-colour-dark,#0b2639)!important;
}


/* ======================================================================
   v31 — MOBILE QUALITY / WORKING DRAWER / STABLE SLIDER MEDIA
   ====================================================================== */

/* Keep production mobile typography sensible. */
.component-site-host--mobile{
  width:390px!important;
  min-width:390px!important;
  max-width:390px!important;
  font-size:16px!important;
}
.component-site-host--mobile .tb-component p,
.component-site-host--mobile .tb-component li,
.component-site-host--mobile .tb-component .tb-copy{
  font-size:16px!important;
  line-height:1.48!important;
}
.component-site-host--mobile .tb-component small,
.component-site-host--mobile .tb-component cite,
.component-site-host--mobile .tb-component .tb-eyebrow{
  font-size:13px!important;
}
.component-site-host--mobile .tb-component--hero .tb-title{
  font-size:34px!important;
  line-height:.98!important;
  max-width:12ch!important;
}
.component-site-host--mobile .tb-component:not(.tb-component--hero) .tb-title{
  font-size:27px!important;
  line-height:1!important;
}
.component-site-host--mobile .tb-component h3{
  font-size:20px!important;
  line-height:1.08!important;
}
.component-site-host--mobile .tb-btn{
  height:42px!important;
  min-height:42px!important;
  font-size:14px!important;
  padding:0 14px!important;
}

/* The real drawer is a nav, so explicitly override the generic mobile-nav hide rule. */
.component-site-host--mobile .tb-premium-header nav.tb-preview-mobile-drawer{
  display:block!important;
}
.component-site-host--mobile .tb-premium-header nav.tb-preview-mobile-drawer[hidden]{
  display:none!important;
}
.component-site-host--mobile .tb-preview-mobile-drawer{
  pointer-events:auto!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Solid header and drawer background under every theme. */
.component-site-host--mobile .tb-premium-header,
.component-site-host--mobile .tb-premium-header__inner,
.component-site-host--mobile .tb-premium-header .tb-container,
.component-site-host--mobile .tb-preview-mobile-drawer{
  background:var(--tb-colour-dark,#0b2639)!important;
}

/* In-page drawer links remain usable in the generated/mobile preview. */
.component-site-host--mobile .tb-preview-mobile-drawer a{
  font-size:15px!important;
  min-height:44px!important;
  padding:0 18px!important;
}
.component-site-host--mobile .tb-preview-mobile-drawer__cta{
  min-height:44px!important;
  margin-top:10px!important;
}

/* ---------------- Stable slider / swiper media frame ---------------- */

/* Slider viewport stays fixed. Controls do not move with slide content. */
.component-site-host .tb-premium-hero--slider{
  position:relative!important;
  overflow:hidden!important;
  background-image:none!important;
}
.component-site-host .tb-premium-hero--slider::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(90deg,rgba(4,12,22,.70),rgba(4,12,22,.08)),
    var(--tb-hero-image,var(--tb-preview-image,var(--tb-dummy-image)))!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
}
.component-site-host .tb-premium-hero--slider .tb-premium-slide,
.component-site-host .tb-premium-hero--slider .slide{
  position:relative!important;
  z-index:1!important;
  background:transparent!important;
  background-image:none!important;
}
.component-site-host .tb-premium-slider-controls,
.component-site-host .tb-slider-controls{
  position:absolute!important;
  z-index:5!important;
  right:24px!important;
  bottom:22px!important;
  margin:0!important;
  transform:none!important;
}

/* Generic carousel/swiper media uses a fixed crop area. */
.component-site-host .tb-carousel,
.component-site-host [class*="swiper"],
.component-site-host [class*="slider"]{
  position:relative!important;
  overflow:hidden!important;
}
.component-site-host .tb-carousel .tb-media,
.component-site-host [class*="swiper"] .tb-media,
.component-site-host [class*="slider"] .tb-media{
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
}

/* Avoid parallax/fixed-background behaviour inside signup/device previews. */
.component-site-host [data-variant="parallax-strip-09"]{
  background-attachment:scroll!important;
  background-position:center center!important;
}