/* ========================================================================
   TRADEBUILD v23 — PREMIUM FULL LIBRARY
   The same component HTML/CSS is used in signup preview and published sites.
   ======================================================================== */

:root{
  --tb-premium-line: color-mix(in srgb,var(--tb-colour-text) 12%,transparent);
  --tb-premium-soft: color-mix(in srgb,var(--tb-colour-primary) 6%,var(--tb-colour-bg));
  --tb-premium-soft-2: color-mix(in srgb,var(--tb-colour-primary) 12%,var(--tb-colour-bg));
  --tb-premium-glass: rgba(7,17,27,.72);
  --tb-premium-content: 62ch;
}

/* Universal quality floor */
.tb-component{position:relative;isolation:isolate}
.tb-component .tb-container{position:relative;z-index:1}
.tb-component .tb-eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:800;text-transform:uppercase}
.tb-component .tb-title{letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.tb-component .tb-copy{max-width:var(--tb-premium-content);line-height:1.65}
.tb-component .tb-card{border:1px solid var(--tb-premium-line);background:var(--tb-colour-surface);box-shadow:var(--tb-shadow-sm)}
.tb-component .tb-media{background-image:var(--tb-preview-image),linear-gradient(145deg,#75868e,#334650);background-size:cover;background-position:center}
.tb-component .tb-btn{font-weight:750;letter-spacing:.01em}
.tb-component a{text-underline-offset:3px}
.tb-component img{max-width:100%;height:auto}

/* Headers - never collide */
.tb-component--header{z-index:20}
.tb-premium-header__inner{min-width:0}
.tb-premium-header nav{min-width:0;flex-wrap:wrap}
.tb-premium-header .tb-brand{min-width:0}
.tb-premium-header .tb-brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.tb-premium-header .tb-btn{white-space:nowrap}

/* HERO quality and mobile identity */
.tb-component--hero .tb-title{max-width:12ch}
.tb-component--hero .tb-copy{font-size:clamp(.9rem,1.4vw,1.08rem)}
.tb-premium-hero--minimal .tb-title{max-width:15ch}
.tb-premium-hero--full .tb-title,.tb-premium-hero--slider .tb-title{max-width:13ch}
.tb-premium-hero--video .tb-title,.tb-premium-hero--cinematic .tb-title{max-width:11ch}

/* Before / after */
.tb-component--before-after{background:var(--tb-colour-bg)}
[data-variant="split-slider-01"] .tb-ba-slider,
[data-variant="swipe-reveal-02"] .tb-ba,
[data-variant="before-after-slider-08"] .tb-ba-slider{
  min-height:430px;border-radius:var(--tb-theme-image-radius);overflow:hidden;box-shadow:var(--tb-shadow-md)
}
[data-variant="paired-cards-03"] article{overflow:hidden;border-radius:var(--tb-theme-card-radius);box-shadow:var(--tb-shadow-sm)}
[data-variant="timeline-transformation-04"]{background:var(--tb-colour-dark);color:#fff}

/* Availability */
.tb-component--availability .tb-card{box-shadow:var(--tb-shadow-sm)}
.tb-availability-card{padding:2rem}
.tb-next-slot{padding:2rem}
.tb-seasonal-booking{box-shadow:var(--tb-shadow-md)}

/* Credentials */
.tb-credential-cards,.tb-membership-grid{gap:1rem}
.tb-credential-cards article,.tb-membership-grid article,.tb-manufacturer-list article{
  border:1px solid var(--tb-premium-line);background:var(--tb-colour-surface);transition:.25s
}
.tb-credential-cards article:hover,.tb-membership-grid article:hover,.tb-manufacturer-list article:hover{
  transform:translateY(-4px);box-shadow:var(--tb-shadow-md)
}
.tb-verification-status{display:inline-flex;width:max-content;margin-inline:auto;padding:.32rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--tb-colour-success) 11%,transparent)}
.tb-insurance-card{box-shadow:var(--tb-shadow-md)}
.tb-guarantee-panel{gap:2.5rem}

/* CTA */
.tb-component--cta{overflow:hidden}
[data-variant="overlay-01"]{
  min-height:390px;display:flex;align-items:center;
  background-image:linear-gradient(90deg,rgba(4,10,16,.84),rgba(4,10,16,.16)),var(--tb-preview-image);
  background-size:cover;color:#fff
}
[data-variant="overlay-form-07"] .tb-card,[data-variant="booking-panel-05"] .tb-card{box-shadow:var(--tb-shadow-lg)}
.tb-premium-cta--full{box-shadow:inset 0 1px rgba(255,255,255,.18)}

/* Emergency */
[data-variant="availability-hero-01"]{
  min-height:420px;display:flex;align-items:center;
  background-image:linear-gradient(90deg,rgba(128,20,25,.92),rgba(35,15,20,.50)),var(--tb-preview-image);
  background-size:cover;color:#fff
}
[data-variant="opening-hours-status-02"] .tb-card{box-shadow:var(--tb-shadow-md)}
[data-variant="call-now-strip-03"]{background:#a21e26;color:#fff}
[data-variant="response-time-promise-04"] .tb-card{border-left:5px solid var(--tb-colour-danger)}

/* FAQ */
.tb-component--faq{background:var(--tb-colour-dark);color:#fff}
.tb-component--faq details{padding:1.15rem 0;border-top:1px solid rgba(255,255,255,.14)}
.tb-component--faq summary{font-size:1.05rem;font-weight:700;cursor:pointer}
.tb-component--faq p{opacity:.72;max-width:60ch}

/* Finance */
.tb-finance-card,.tb-deposit-card{box-shadow:var(--tb-shadow-sm)}
.tb-payment-stages article{padding:1.5rem}
.tb-payment-note,.tb-deposit-note{border-radius:var(--tb-radius-md)}

/* Galleries */
.tb-component--gallery .tb-title{max-width:16ch}
.tb-component--gallery .tb-media{transition:transform .5s var(--tb-ease-standard),filter .5s var(--tb-ease-standard)}
.tb-component--gallery .tb-media:hover{transform:scale(1.018)}
[data-variant="masonry-01"] .tb-gallery,[data-variant="standard-grid-02"] .tb-gallery,[data-variant="editorial-06"] .tb-editorial,[data-variant="justified-grid-07"] .tb-justified{gap:.65rem}
[data-variant="carousel-slider-03"] .tb-carousel{overflow:hidden;border-radius:var(--tb-theme-image-radius);box-shadow:var(--tb-shadow-md)}
[data-variant="carousel-slider-03"] .slide{min-height:420px}
[data-variant="fullscreen-lightbox-04"] .tb-lightbox-grid{gap:.65rem}
[data-variant="before-after-05"]{background:var(--tb-colour-dark);color:#fff}
[data-variant="editorial-06"] .tb-media:first-child{min-height:460px}
[data-variant="polaroid-grid-08"] .tb-media{padding:.55rem .55rem 2rem;background-color:#fff;box-shadow:var(--tb-shadow-sm)}
[data-variant="polaroid-grid-08"] .tb-media:nth-child(odd){transform:rotate(-1.4deg)}
[data-variant="polaroid-grid-08"] .tb-media:nth-child(even){transform:rotate(1.2deg)}
[data-variant="parallax-strip-09"]{min-height:450px;background-image:linear-gradient(rgba(5,12,20,.22),rgba(5,12,20,.22)),var(--tb-preview-image);background-size:cover;background-position:center}

/* Process */
.tb-process-three article,.tb-process-horizontal article,.tb-process-illustrated article{padding:1.5rem}
.tb-process-three article>span,.tb-process-horizontal article>div{box-shadow:0 0 0 8px color-mix(in srgb,var(--tb-colour-primary) 7%,transparent)}
[data-variant="illustrated-04"] .tb-illustration{background-image:var(--tb-preview-image),linear-gradient(145deg,#e7e5df,#ccd3d6);background-size:cover}
[data-variant="project-journey-05"]{background-image:linear-gradient(90deg,rgba(5,12,20,.84),rgba(5,12,20,.32)),var(--tb-preview-image);background-size:cover}

/* Project detail */
.tb-component--project-detail .tb-card{box-shadow:var(--tb-shadow-sm)}
[data-variant="transformation-story-02"]{background:var(--tb-colour-dark);color:#fff}
[data-variant="transformation-story-02"] .tb-media{min-height:360px}

/* Quote / lead */
[data-variant="multi-step-quote-card-03"] .tb-card,[data-variant="callback-panel-04"] .tb-card{box-shadow:var(--tb-shadow-lg)}
[data-variant="sticky-quote-tab-01"]{box-shadow:var(--tb-shadow-md)}
[data-variant="floating-mobile-cta-02"]{border-radius:999px}

/* Service areas */
[data-variant="premium-map-01"] .tb-map-panel{overflow:hidden;border-radius:var(--tb-theme-card-radius);box-shadow:var(--tb-shadow-md)}
.tb-map-art,.tb-radius-map{background:
  radial-gradient(circle at 62% 42%,var(--tb-colour-primary) 0 7px,transparent 8px),
  radial-gradient(circle at 42% 64%,color-mix(in srgb,var(--tb-colour-primary) 35%,transparent) 0 4px,transparent 5px),
  linear-gradient(145deg,#edf0ed,#d8dfda)}
[data-variant="postcode-search-02"] .tb-card{max-width:780px;margin:auto;box-shadow:var(--tb-shadow-md)}
[data-variant="town-grid-03"] .tb-town{border:1px solid var(--tb-premium-line);background:var(--tb-colour-surface);transition:.25s}
[data-variant="town-grid-03"] .tb-town:hover{transform:translateY(-3px);box-shadow:var(--tb-shadow-sm)}

/* Remaining showcase layouts */
[data-variant="overlapping-cards-05"] .tb-card,[data-variant="stacked-cards-10"] .tb-card{box-shadow:var(--tb-shadow-lg)}
[data-variant="project-details-09"] .tb-card{display:grid;grid-template-columns:1.15fr .85fr;box-shadow:var(--tb-shadow-md)}
[data-variant="before-after-slider-08"] .tb-ba-slider{min-height:450px}

/* Stats */
.tb-component--stats{background:var(--tb-colour-dark);color:#fff}
.tb-stat-grid article{padding:1.75rem;border-right:1px solid rgba(255,255,255,.14)}
.tb-stat-grid strong{font:400 clamp(2rem,4vw,3rem)/1 var(--tb-font-heading)}
.tb-stat-grid span{font-size:.78rem;opacity:.64}

/* Team */
.tb-team-carousel .tb-media{min-height:360px;border-radius:var(--tb-theme-image-radius)}
.tb-owner-photo,.tb-small-team .tb-media,.tb-team-photo{background-image:var(--tb-preview-image),linear-gradient(145deg,#75868e,#334650);background-size:cover}
.tb-owner-layout,.tb-small-team article,.tb-local-story{box-shadow:var(--tb-shadow-sm)}

/* Testimonials */
.tb-test-cards{gap:1rem}
.tb-test-card,.tb-test-cards blockquote{background:var(--tb-colour-surface);border:1px solid var(--tb-premium-line);box-shadow:var(--tb-shadow-sm)}
[data-variant="quote-centred-01"]{text-align:center;padding-block:5rem}
[data-variant="quote-centred-01"] blockquote{max-width:820px;margin:auto;font:400 clamp(1.75rem,4vw,3rem)/1.25 var(--tb-font-heading)}
[data-variant="slider-03"]{background:var(--tb-colour-dark);color:#fff}
[data-variant="image-testimonial-05"] .tb-media{min-height:420px}
[data-variant="quote-overlay-07"]{min-height:450px;background-image:linear-gradient(90deg,rgba(5,12,20,.8),rgba(5,12,20,.22)),var(--tb-preview-image);background-size:cover;color:#fff}
[data-variant="logo-quote-08"] .tb-card{border-top:3px solid var(--tb-colour-primary)}
[data-variant="compact-slider-09"]{border-block:1px solid var(--tb-premium-line)}

/* Inspiration */
.tb-component--inspiration .tb-image-strip{display:grid;grid-auto-flow:column;grid-auto-columns:32%;gap:.65rem;overflow:hidden}
.tb-component--inspiration .tb-media{min-height:320px}

/* Conversion/footer refinement */
.tb-conversion-footer{box-shadow:0 -12px 42px rgba(5,12,20,.11)}
.tb-component--footer a{transition:opacity .2s ease}
.tb-component--footer a:hover{opacity:.64}

/* Signup preview: use the real customer image throughout without stretching it */
.component-site-host{--tb-preview-image-position:center}
.component-site-host .tb-media,
.component-site-host [class*="image"],
.component-site-host [class*="photo"]{
  background-position:var(--tb-preview-image-position);
}

/* Desktop storefront sizes */
.component-site-host--desktop .tb-component:not(.tb-component--header):not(.tb-component--footer){
  scroll-margin-top:20px;
}
.component-site-host--desktop .tb-component--services,
.component-site-host--desktop .tb-component--gallery,
.component-site-host--desktop .tb-component--showcase,
.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--team-local,
.component-site-host--desktop .tb-component--service-area{
  padding-block:clamp(2.7rem,5vw,4.5rem);
}

/* Phone is designed, not squeezed */
.component-site-host--mobile{
  --tb-page-gutter:10px;
  --tb-theme-card-radius:10px;
  --tb-theme-image-radius:10px;
}
.component-site-host--mobile .tb-title{font-size:14px!important;line-height:1.08!important;max-width:15ch!important}
.component-site-host--mobile .tb-eyebrow{font-size:5px!important;letter-spacing:.13em}
.component-site-host--mobile .tb-copy{font-size:6.4px!important;line-height:1.45!important}
.component-site-host--mobile .tb-card{box-shadow:0 4px 12px rgba(5,12,20,.08)!important}
.component-site-host--mobile .tb-premium-header{min-height:42px!important}
.component-site-host--mobile .tb-premium-header__inner{min-height:42px!important;padding-inline:8px!important}
.component-site-host--mobile .tb-premium-header .tb-brand strong{font-size:7px!important;max-width:92px}
.component-site-host--mobile .tb-premium-header .tb-brand small{font-size:4px!important}
.component-site-host--mobile .tb-premium-header nav{display:none!important}
.component-site-host--mobile .tb-premium-header .tb-btn{display:block!important;font-size:4px!important;min-height:20px!important;padding:3px 6px!important}
.component-site-host--mobile .tb-premium-hero .tb-title{font-size:17px!important;max-width:12ch!important}
.component-site-host--mobile .tb-premium-hero .tb-copy{font-size:6.2px!important}
.component-site-host--mobile .tb-premium-hero--split{grid-template-columns:1fr!important;min-height:0!important}
.component-site-host--mobile .tb-premium-hero--split .tb-premium-hero__copy{padding:22px 12px!important}
.component-site-host--mobile .tb-premium-hero--split .tb-premium-hero__image{min-height:125px!important}
.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:22px 12px!important}
.component-site-host--mobile .tb-premium-hero--asym .tb-premium-hero__image{min-height:130px!important;clip-path:none!important}
.component-site-host--mobile .tb-premium-float-card{right:8px!important;bottom:8px!important;padding:6px 8px!important}
.component-site-host--mobile .tb-premium-hero--minimal{min-height:165px!important;padding:10px!important}
.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--overlay,
.component-site-host--mobile .tb-premium-hero--slider,
.component-site-host--mobile .tb-premium-hero--cinematic{min-height:190px!important}
.component-site-host--mobile .tb-premium-overlay-card{width:72%!important;margin-left:12px!important;padding:18px 0!important}
.component-site-host--mobile .tb-premium-project-panel{margin:0 10px 10px!important;padding:12px!important;max-width:75%!important}
.component-site-host--mobile .tb-premium-slide{min-height:190px!important;padding:0 0 20px 12px!important}
.component-site-host--mobile .tb-cinematic-grid{grid-template-columns:1fr!important;gap:6px!important;padding:16px 10px!important}
.component-site-host--mobile .tb-cinematic-side{display:none!important}
.component-site-host--mobile .tb-video-play{width:42px!important;height:42px!important}
.component-site-host--mobile .tb-video-play small{display:none!important}
.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-hover-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 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:62px!important}
.component-site-host--mobile .tb-premium-service-rows article{grid-template-columns:20px 1fr!important;padding:8px 0!important}
.component-site-host--mobile .tb-premium-service-rows article p,
.component-site-host--mobile .tb-premium-service-rows article a{grid-column:2!important}
.component-site-host--mobile .tb-numbered-services article{grid-template-columns:20px 1fr 20px!important;padding:8px 0!important}
.component-site-host--mobile .tb-numbered-services article p{display:none!important}
.component-site-host--mobile .tb-premium-alt-services article,
.component-site-host--mobile .tb-featured-project,
.component-site-host--mobile .tb-alt-projects article,
.component-site-host--mobile .tb-premium-review-wall,
.component-site-host--mobile .tb-premium-rating,
.component-site-host--mobile .tb-premium-cta--split{
  grid-template-columns:1fr!important
}
.component-site-host--mobile .tb-project-strip{grid-auto-columns:78%!important}
.component-site-host--mobile .tb-overlay-projects{grid-template-columns:1fr 1fr!important}
.component-site-host--mobile .tb-premium-masonry{grid-template-columns:1fr 1fr!important;grid-auto-rows:55px!important}
.component-site-host--mobile .tb-premium-case-study{min-height:170px!important}
.component-site-host--mobile .tb-premium-review-carousel{padding:22px 8px!important}
.component-site-host--mobile .tb-premium-review-carousel blockquote{font-size:13px!important}
.component-site-host--mobile .tb-premium-cta h2{font-size:14px!important}
.component-site-host--mobile .tb-premium-footer{padding:16px 8px!important}
.component-site-host--mobile .tb-premium-footer__grid{grid-template-columns:1fr!important;gap:8px!important}

@media(max-width:800px){
  .tb-credential-cards,.tb-membership-grid{grid-template-columns:1fr 1fr}
  .tb-process-three,.tb-process-horizontal,.tb-process-illustrated{grid-template-columns:1fr 1fr}
  [data-variant="project-details-09"] .tb-card{grid-template-columns:1fr}
  .tb-component--inspiration .tb-image-strip{grid-auto-columns:70%}
}
@media(max-width:520px){
  .tb-credential-cards,.tb-membership-grid,.tb-process-three,.tb-process-horizontal,.tb-process-illustrated{grid-template-columns:1fr}
}