.elementor-kit-9{--e-global-color-primary:#0B1837;--e-global-color-secondary:#8D9F90;--e-global-color-text:#3F434C;--e-global-color-accent:#D3A12A;--e-global-color-gold_deep:#B8891D;--e-global-color-navy_700:#16244C;--e-global-color-paper:#FAFAFB;--e-global-color-panel:#F2F3F4;--e-global-color-line:#E2E3E8;--e-global-color-white:#FFFFFF;--e-global-color-muted:#868B95;--e-global-color-scrim:#0B0D13;--e-global-color-white_soft:rgba(255,255,255,0.66);--e-global-color-white_strong:rgba(255,255,255,0.75);--e-global-color-white_hairline:rgba(255,255,255,0.35);--e-global-color-white_faint:rgba(255,255,255,0.14);--e-global-color-navy_shadow:rgba(11,24,55,0.3);--e-global-typography-primary-font-family:"Onest";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Onest";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Onest";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Onest";--e-global-typography-accent-font-weight:600;--e-global-typography-eyebrow-font-family:"Onest";--e-global-typography-eyebrow-font-weight:600;--e-global-typography-eyebrow-text-transform:uppercase;--e-global-typography-eyebrow-letter-spacing:1.6px;--e-global-typography-display-font-family:"Onest";--e-global-typography-display-font-size:54px;--e-global-typography-display-font-weight:600;--e-global-typography-display-line-height:1.12em;--e-global-typography-display-letter-spacing:-1px;--e-global-typography-sectiontitle-font-family:"Onest";--e-global-typography-sectiontitle-font-size:40px;--e-global-typography-sectiontitle-font-weight:600;--e-global-typography-sectiontitle-line-height:1.04em;--e-global-typography-sectiontitle-letter-spacing:-1px;--e-global-typography-headingl-font-family:"Onest";--e-global-typography-headingl-font-size:25px;--e-global-typography-headingl-font-weight:600;--e-global-typography-headingl-line-height:1.18em;--e-global-typography-headingl-letter-spacing:-1px;--e-global-typography-headingm-font-family:"Onest";--e-global-typography-headingm-font-size:22px;--e-global-typography-headingm-font-weight:600;--e-global-typography-headingm-line-height:1.24em;--e-global-typography-headingm-letter-spacing:-1px;--e-global-typography-headings-font-family:"Onest";--e-global-typography-headings-font-size:19px;--e-global-typography-headings-font-weight:600;--e-global-typography-headings-line-height:1.28em;--e-global-typography-headings-letter-spacing:-0.5px;--e-global-typography-statxl-font-family:"Onest";--e-global-typography-statxl-font-size:48px;--e-global-typography-statxl-font-weight:600;--e-global-typography-statxl-line-height:1em;--e-global-typography-statxl-letter-spacing:-2px;--e-global-typography-stat-font-family:"Onest";--e-global-typography-stat-font-size:42px;--e-global-typography-stat-font-weight:600;--e-global-typography-stat-line-height:1em;--e-global-typography-stat-letter-spacing:-1.5px;--e-global-typography-lede-font-family:"Onest";--e-global-typography-lede-font-size:19px;--e-global-typography-lede-font-weight:400;--e-global-typography-lede-line-height:1.55em;--e-global-typography-body-font-family:"Onest";--e-global-typography-body-font-size:15px;--e-global-typography-body-font-weight:400;--e-global-typography-body-line-height:1.6em;--e-global-typography-bodysm-font-family:"Onest";--e-global-typography-bodysm-font-size:14px;--e-global-typography-bodysm-font-weight:400;--e-global-typography-bodysm-line-height:1.6em;--e-global-typography-eyebrow2-font-family:"Onest";--e-global-typography-eyebrow2-font-size:17px;--e-global-typography-eyebrow2-font-weight:600;--e-global-typography-eyebrow2-letter-spacing:0.01em;--e-global-typography-label-font-family:"Onest";--e-global-typography-label-font-size:12.5px;--e-global-typography-label-font-weight:600;--e-global-typography-label-text-transform:uppercase;--e-global-typography-label-letter-spacing:1.5px;background-color:var( --e-global-color-paper );color:var( --e-global-color-text );font-family:"Onest", Sans-serif;font-size:17px;font-weight:400;line-height:1.65em;}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{background-color:var( --e-global-color-white );font-family:"Onest", Sans-serif;font-size:16px;font-weight:600;color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-line );border-radius:100px 100px 100px 100px;padding:8px 8px 8px 28px;}.elementor-kit-9 button:hover,.elementor-kit-9 button:focus,.elementor-kit-9 input[type="button"]:hover,.elementor-kit-9 input[type="button"]:focus,.elementor-kit-9 input[type="submit"]:hover,.elementor-kit-9 input[type="submit"]:focus,.elementor-kit-9 .elementor-button:hover,.elementor-kit-9 .elementor-button:focus{background-color:var( --e-global-color-white );}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 a{color:var( --e-global-color-accent );}.elementor-kit-9 a:hover{color:var( --e-global-color-gold_deep );}.elementor-kit-9 h1{color:var( --e-global-color-primary );font-family:"Onest", Sans-serif;font-size:54px;font-weight:600;line-height:1.02em;letter-spacing:-1px;}.elementor-kit-9 h2{color:var( --e-global-color-primary );font-family:"Onest", Sans-serif;font-size:40px;font-weight:600;line-height:1.05em;letter-spacing:-1px;}.elementor-kit-9 h3{color:var( --e-global-color-primary );font-family:"Onest", Sans-serif;font-size:25px;font-weight:600;line-height:1.1em;letter-spacing:-1px;}.elementor-kit-9 h4{color:var( --e-global-color-primary );font-family:"Onest", Sans-serif;font-size:22px;font-weight:600;line-height:1.1em;letter-spacing:-1px;}.elementor-kit-9 h5{color:var( --e-global-color-primary );font-family:"Onest", Sans-serif;font-size:19px;font-weight:600;line-height:1.1em;letter-spacing:-1px;}.elementor-kit-9 h6{color:var( --e-global-color-primary );font-family:"Onest", Sans-serif;font-size:17px;font-weight:600;line-height:1.1em;letter-spacing:-1px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-9{--e-global-typography-display-font-size:44px;--e-global-typography-sectiontitle-font-size:34px;--e-global-typography-stat-font-size:36px;}.elementor-kit-9 h1{font-size:44px;}.elementor-kit-9 h2{font-size:34px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-9{--e-global-typography-display-font-size:32px;--e-global-typography-sectiontitle-font-size:28px;--e-global-typography-headingl-font-size:22px;--e-global-typography-statxl-font-size:40px;--e-global-typography-stat-font-size:30px;}.elementor-kit-9 h1{font-size:32px;}.elementor-kit-9 h2{font-size:28px;}.elementor-kit-9 h3{font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   TradeSupply - site styles
   --------------------------------------------------------------------------
   READ THIS BEFORE EDITING

   1. COLOURS. Everything uses Elementor Global Colours, e.g.
      var(--e-global-color-primary). Never paste a hex code in here - change the
      colour once in Elementor > Site Settings > Global Colours and it updates
      everywhere. Same idea for the sizes in section 1 below.

   2. WHY THIS FILE EXISTS. Brand lists, stats, category tiles and FAQs are built
      from ACF fields while the page loads. Those elements get a new random ID on
      every request, so Elementor never compiles per-element CSS for them. Their
      layout has to live here, attached to a class name, or it is simply lost.

   3. WHY THE !important. Elementor's own stylesheet uses .elementor-kit-9s with higher
      specificity than a single class. Where a rule below has !important it is
      because Elementor overrides it otherwise - removing it breaks the layout.

   NAMING
      .ts-*   our styles.
      .acf-*  a container that gets filled from ACF when the page loads.
      A section is plural (.ts-values); the item repeated inside it is singular
      (.ts-value-card).

   CONTENTS
      1. Design tokens        5. Shared: hero, stats, tiles
      2. Base + utilities     6. Audience pages
      3. Header nav           7. Responsive
      4. Product pages
   ========================================================================== */

/* 1. DESIGN TOKENS ======================================================== */
.elementor-kit-9{
  --ts-hero-h:695px;        /* height of every interior hero, product + audience */
  --ts-nav-overlap:-153px;  /* pulls the hero up behind the transparent nav */
  --ts-sp-1:6px; --ts-sp-2:10px; --ts-sp-3:16px;   /* spacing scale */
  --w-page:1140px;   /* matches Elementor's content width */
  --w-cta:900px;     /* centred call-to-action copy */
  --w-text:740px;    /* narrow reading measure */
}

/* 2. BASE + UTILITIES ===================================================== */
/* Every full-width band uses .section-container, and that is the only class it
   needs. Its BACKGROUND COLOUR and HAIRLINE BORDERS are set per container in
   Elementor itself (Style > Background, and Style > Border), bound to Global
   Colours - so anyone can recolour a band by clicking, with no CSS. Do not add a
   class here to colour a section. Content width comes from Site Settings. */
.section-container{padding:110px 0;}
/* Browsers give form controls their own system font; they are the only elements that
   need the family restated. Everything else inherits Onest from Global Fonts. */
.ts-news-form input,.ts-news-form button,.ts-quote-form input,.ts-quote-form textarea,.ts-quote-form select,.ts-quote-form button{font-family:inherit;}
/* No container may exceed the width available to it. Several containers carry a
   fixed pixel width from the design; without this they overflow the viewport on
   tablets and produce a sideways scroll. */
.e-con,.e-con-inner{max-width:100%;}

.elementor-button{font-weight:600;}
/* Pill button with a round gold arrow badge on the right. */
.has-badge .elementor-button-content-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center;}
.has-badge .elementor-button-text{order:1;}
.has-badge .elementor-button-icon{order:2;margin:0 0 0 14px!important;background:var(--e-global-color-accent);width:38px;height:38px;min-width:38px;border-radius:50%;display:inline-flex!important;align-items:center;justify-content:center;font-size:14px;transition:transform .35s ease;flex:0 0 auto;}
.has-badge .elementor-button-icon svg,.has-badge .elementor-button-icon i{color:var(--e-global-color-primary)!important;fill:var(--e-global-color-primary)!important;width:15px;height:15px;margin:0!important;}
.has-badge:hover .elementor-button-icon{transform:scale(1.08);}
.margin-top-20 {margin-top: 20px;}
.margin-top-30 {margin-top: 30px;}
.margin-top-40 {margin-top: 40px;}
.padding-none {padding: 0px;}
/* Entrance animation for Elementor's own built-in animations. */
@keyframes tsReveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.elementor-invisible{visibility:visible!important;animation:tsReveal .7s cubic-bezier(.22,.7,.28,1) both;}

/* Scroll reveal. JS adds .is-in when the element scrolls into view; a 3s
   failsafe reveals everything in case the observer never fires. */
.reveal,.ts-stat-item,.ts-logos-inner,.ts-cta-inner{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);will-change:opacity,transform;}
.reveal.is-in,.ts-stat-item.is-in,.ts-logos-inner.is-in,.ts-cta-inner.is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .elementor-invisible{animation:none;opacity:1;transform:none;}
  .reveal,.ts-stat-item,.ts-logos-inner,.ts-cta-inner{opacity:1!important;transform:none!important;transition:none!important;}
}

/* Newsletter band. Lives in the footer template, so it appears site-wide. */
.ts-news-inner{max-width:var(--w-page);margin:0 auto;padding:56px 28px!important;}
.ts-news-inner > .e-con-inner{display:grid!important;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.ts-news-form-wrap{padding:0!important;}
.ts-news-title .elementor-heading-title{color:var(--e-global-color-white)!important;}
.ts-news-sub,.ts-news-sub p{color:color-mix(in srgb, var(--e-global-color-white) 70%, transparent);margin:0;}
/* Elementor gives the field wrapper negative side margins, which pushed the row a
   few pixels past the viewport at tablet widths. Keep it inside its container. */
.ts-news-form .elementor-form-fields-wrapper{align-items:center;margin-inline:0!important;max-width:100%;}
.ts-news-form .elementor-field-type-recaptcha_v3 {padding-inline: 0!important; width: 0;}
.ts-news-form .elementor-field-group{padding-inline:6px;}
.ts-news-form input:not([type=submit]){font-size:15px!important;padding:14px 18px!important;border-radius:100px!important;border:1px solid color-mix(in srgb, var(--e-global-color-white) 22%, transparent)!important;background:color-mix(in srgb, var(--e-global-color-white) 8%, transparent)!important;color:var(--e-global-color-white)!important;}
.ts-news-form input::placeholder{color:color-mix(in srgb, var(--e-global-color-white) 45%, transparent)!important;}
.ts-news-form .elementor-button{font-size:15px!important;font-weight:600!important;padding:14px 26px!important;border-radius:100px!important;background:var(--e-global-color-accent)!important;color:var(--e-global-color-primary)!important;transition:background-color .25s ease;}
.ts-news-form .elementor-button:hover{background:var(--e-global-color-white)!important;}
@media(max-width:900px){
  .ts-news-inner > .e-con-inner{grid-template-columns:1fr;gap:22px;}
}
@media(max-width:767px){.ts-news-inner{padding:44px 20px!important;}}

/* 3. HEADER NAV =========================================================== */
/* The nav sits transparent over the hero photo, then turns solid once the page
   is scrolled (JS adds .nav-stuck to <body>). */
.ts-nav{transition:background-color .3s ease,box-shadow .3s ease;}
.ts-nav-phone .elementor-icon-list-text,.ts-nav-phone .elementor-icon-list-item{white-space:nowrap;}
body.nav-stuck .ts-nav{background-color:var(--e-global-color-paper)!important;box-shadow:0 1px 0 color-mix(in srgb, var(--e-global-color-primary) 6%, transparent);}
body.nav-stuck .ts-nav-menu .e-n-menu-title:not(.e-current) .e-n-menu-title-text,
body.nav-stuck .ts-nav-menu .e-n-menu-title:not(.e-current) .e-n-menu-title-container,
body.nav-stuck .ts-nav-menu .e-n-menu-dropdown-icon,
body.nav-stuck .ts-nav-menu .e-n-menu-dropdown-icon svg,
body.nav-stuck .ts-nav-phone .elementor-icon-list-text{color:var(--e-global-color-primary)!important;fill:var(--e-global-color-primary)!important;transition:color .3s ease,fill .3s ease;}
body.nav-stuck .elementor-widget-theme-site-logo img,
body.nav-stuck .ts-nav-logo img{filter:brightness(0);transition:filter .3s ease;}
body.nav-stuck .ts-nav-logo.elementor-widget-icon svg path{
  fill: var(--e-global-color-primary) !important;
}

.cta-container h2{color:var(--e-global-color-white);}

/* 4. PRODUCT PAGES ======================================================== */
/* Brand list: a real 2-column grid so the divider lines stay level across both
   columns whatever length each brand's copy is. */
.acf-brands{display:grid!important;grid-template-columns:1fr 1fr;column-gap:0;row-gap:0;}
.ts-brand{padding:26px 0;transition:background-color .3s ease,padding-left .3s ease;}
.ts-brand.ts-brand-left{padding-left:0!important;padding-right:40px!important;}
.ts-brand.ts-brand-right{padding-left:40px!important;padding-right:0!important;border-left:1px solid var(--e-global-color-line);}
.ts-brand.ts-brand-divider{border-top:1px solid var(--e-global-color-line);}
.ts-brand.ts-brand-left:hover{padding-left:8px;}
.ts-brand.ts-brand-right:hover{padding-left:48px;}
.ts-brand-head{padding-left:0!important;padding-right:0!important;}
.ts-brand-head > .e-con-inner{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px;}
body .ts-brand-name .elementor-heading-title{color:var(--e-global-color-primary);transition:color .3s ease;}
.ts-brand:hover .ts-brand-name .elementor-heading-title{color:var(--e-global-color-gold_deep);}
.ts-brand-logo img{max-height:32px;width:auto;display:block;}
body .ts-brand-tier .elementor-heading-title{display:inline-block;color:var(--e-global-color-gold_deep);background:color-mix(in srgb, var(--e-global-color-accent) 12%, transparent);padding:4px 10px;border-radius:100px;white-space:nowrap;}
.ts-brand-blurb{margin-top:8px!important;}
.ts-brand-blurb p{color:var(--e-global-color-text);margin:0;}

/* Copy on the left, product photo on the right. */
.ts-brand-body.ts-brand-with-photo > .e-con-inner{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:24px;}
.ts-brand-body.ts-brand-with-photo{padding-right:20px;}
.ts-brand.ts-brand-with-photo .ts-brand-text{flex:1 1 auto;min-width:0;}
.ts-brand-photo{flex:0 0 150px;width:150px;}
.ts-brand-photo img{width:100%;height:auto;border-radius:8px;display:block;}

.ts-brand-quote{margin-top:16px!important;}
.ts-brand-quote .elementor-button{display:inline-flex!important;background:transparent!important;border:1px solid var(--e-global-color-primary)!important;color:var(--e-global-color-primary)!important;font-size:13px!important;padding:8px 16px!important;border-radius:100px!important;transition:background-color .25s ease,color .25s ease;}
.ts-brand-quote .elementor-button:hover{background:var(--e-global-color-primary)!important;color:var(--e-global-color-white)!important;}

/* Full specs toggle. Sits below the quote button, full width of the card. */
.ts-brand-specs{margin-top:16px!important;padding-left:20px!important;}
.ts-brand-specs .elementor-accordion-item{border:none!important;}
.ts-brand-specs .elementor-tab-title{padding:0!important;border:none!important;background:transparent!important;}.ts-brand-specs .elementor-tab-title a{display:inline-flex;align-items:center;gap:6px;color:var(--e-global-color-gold_deep);}
.ts-brand-specs .elementor-tab-title .elementor-accordion-icon{color:var(--e-global-color-gold_deep);width:12px;}.ts-brand-specs .elementor-tab-content{padding:10px 0 0!important;border:none!important;color:var(--e-global-color-muted);}
.ts-brand-specs ul{margin:0;padding-left:18px;}.ts-brand-specs li{margin-bottom:8px;color:var(--e-global-color-text);}.ts-brand-specs li:last-child{margin-bottom:0;}

/* FAQ accordion, styled as separate cards. Shared by every page with an FAQ. */
.acf-faq .elementor-accordion{display:flex;flex-direction:column;gap:12px;}
.acf-faq .elementor-accordion-item{border:1px solid var(--e-global-color-line)!important;border-radius:14px;overflow:hidden;background:var(--e-global-color-white);transition:border-color .25s ease;}
.acf-faq .elementor-accordion-item:hover{border-color:var(--e-global-color-gold_deep)!important;}.acf-faq .elementor-tab-title{padding:18px 22px!important;color:var(--e-global-color-primary);display:flex;align-items:center;justify-content:flex-start;gap:16px;text-align:left;}.acf-faq .elementor-accordion-title{color:inherit;}.acf-faq .elementor-tab-title.elementor-active{color:var(--e-global-color-gold_deep);}
.acf-faq .elementor-accordion-icon{font-size:12px!important;width:26px;height:26px;flex:0 0 26px;display:flex!important;align-items:center;justify-content:center;border-radius:50%;background:var(--e-global-color-paper);margin:0!important;}
.acf-faq .elementor-accordion-icon svg{width:11px!important;height:11px!important;fill:var(--e-global-color-primary);}.acf-faq .elementor-tab-title.elementor-active .elementor-accordion-icon{background:var(--e-global-color-gold_deep);}.acf-faq .elementor-tab-title.elementor-active .elementor-accordion-icon svg{fill:var(--e-global-color-white);}.acf-faq .elementor-tab-content{padding:0 22px 20px!important;color:var(--e-global-color-text);border-top:none!important;}

/* 'Who this suits' cards linking out to the audience pages. */
.ts-audience-card{display:flex!important;width:47%;background:var(--e-global-color-white);padding:22px 24px;border-radius:16px;border:1px solid var(--e-global-color-line);box-shadow:0 1px 2px color-mix(in srgb, var(--e-global-color-primary) 3%, transparent)!important;text-decoration:none;transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;}
.ts-audience-card:hover{border-color:transparent;box-shadow:0 16px 32px color-mix(in srgb, var(--e-global-color-primary) 10%, transparent)!important;transform:translateY(-3px);}
.ts-audience-card .elementor-icon-box-wrapper{display:flex!important;align-items:center;gap:18px;}
.ts-audience-card .elementor-icon-box-icon{margin:0!important;}
.ts-audience-card .elementor-icon{width:46px;height:46px;border-radius:50%;background:color-mix(in srgb, var(--e-global-color-accent) 12%, transparent);display:flex!important;align-items:center;justify-content:center;transition:background-color .3s ease;}
.ts-audience-card .elementor-icon svg{width:19px!important;height:19px!important;fill:var(--e-global-color-accent)!important;color:var(--e-global-color-accent)!important;}
.ts-audience-card:hover .elementor-icon{background:var(--e-global-color-accent);}
.ts-audience-card:hover .elementor-icon svg{fill:var(--e-global-color-white)!important;color:var(--e-global-color-white)!important;}


/* Row of audience cards; the cards themselves are 47% wide so two sit per row. */
/* This container is full-width, so it has no .e-con-inner wrapper: the flex row
   is set on the container itself. The second .elementor-kit-9 covers a boxed container
   if this block is ever reused on one. */
.ts-serve-grid{margin-top:34px!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:18px;align-items:stretch;}
.ts-serve-grid > .e-con-inner{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:18px;}
.ts-audience-card .elementor-icon-box-title{margin:0;}
.ts-audience-card .elementor-icon-box-title a{color:var(--e-global-color-primary)!important;letter-spacing:.01em;}



/* Small print under the brand list. The word 'Note' is added by CSS. */
.ts-disclaimer-text{width:100%!important;max-width:640px!important;margin:0 auto!important;align-self:center!important;position:relative;padding-top:28px;}
.ts-disclaimer-text::before{content:'Note';display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--e-global-color-accent);margin-bottom:10px;}
.ts-disclaimer-text p{font-size:13px;line-height:1.7;color:var(--e-global-color-muted);text-align:center;margin:0;}
.ts-disclaimer-text a{color:var(--e-global-color-primary);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--e-global-color-line);transition:text-decoration-color .25s ease;}
.ts-disclaimer-text a:hover{text-decoration-color:var(--e-global-color-accent);}

/* 5. SHARED: HERO, STATS, CATEGORY TILES ================================== */
/* The hero photo is set as an inline background by PHP, because Elementor
   resolves container backgrounds from a compiled stylesheet that never sees the
   ACF value. The negative margin tucks it up behind the transparent nav. */
/* The tinted overlay on the hero and CTA is an Elementor setting on those
   containers (Style > Background Overlay), bound to the Primary global colour,
   so it can be adjusted in the editor. Do not re-add it as CSS here. The photo
   itself comes from each page's ACF Hero image field. */
.ts-hero,.ts-cta{background-size:cover!important;background-position:center 40%!important;position:relative;}
.ts-hero{min-height:var(--ts-hero-h)!important;margin-top:var(--ts-nav-overlap)!important;}
/* The thank-you band is the page header on that page, so it sits behind the nav too. */
.ts-thanks{margin-top:var(--ts-nav-overlap)!important;}
.acf-hero{min-height:var(--ts-hero-h)!important;}
.ts-hero > .e-con-inner,.ts-cta > .e-con-inner{position:relative;z-index:1;}
.ts-hero-inner{display:flex!important;flex-direction:column;max-width:var(--w-page)!important;margin:0 auto;padding:200px 24px 0!important;}
.ts-hero-inner > .e-con-inner{gap:0!important;}
.ts-hero .ts-buttons{margin-top:30px!important;}
.ts-cta-inner{max-width:var(--w-cta);margin:0 auto;padding:118px 28px!important;text-align:center;}

.ts-hero-title .elementor-heading-title{color:var(--e-global-color-white)!important;max-width:900px;text-wrap:balance;}

.ts-cta-title .elementor-heading-title{color:var(--e-global-color-white)!important;}
.ts-lede{margin-top:22px!important;}
.ts-lede,.ts-lede p{color:var(--e-global-color-muted);max-width:600px;margin:0;}
.ts-hero .ts-lede,.ts-hero .ts-lede p{color:color-mix(in srgb, var(--e-global-color-white) 76%, transparent);}
.ts-cta .ts-lede,.ts-cta .ts-lede p{color:color-mix(in srgb, var(--e-global-color-white) 74%, transparent);margin-left:auto;margin-right:auto;}

.ts-buttons{margin-top:40px!important;}
.ts-buttons > .e-con-inner{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:14px;}
.ts-cta .ts-buttons > .e-con-inner{justify-content:center;}
.ts-btn-ghost .elementor-button{background:transparent!important;border:1px solid color-mix(in srgb, var(--e-global-color-white) 34%, transparent)!important;color:var(--e-global-color-white)!important;border-radius:100px!important;padding:0 28px!important;min-height:58px;display:inline-flex!important;align-items:center;font-size:16px!important;font-weight:400!important;}
.ts-btn-ghost .elementor-button:hover{border-color:var(--e-global-color-white)!important;background:color-mix(in srgb, var(--e-global-color-white) 8%, transparent)!important;}

/* Stat rail, sitting inside the hero over the photo. */
.ts-stats{margin-top:56px!important;padding-top:0!important;border-top:1px solid color-mix(in srgb, var(--e-global-color-white) 16%, transparent)!important;}
.ts-stats > .e-con-inner{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;}
.ts-stat-item{padding:26px 24px 40px 0!important;}
.ts-stat-value .elementor-heading-title{color:var(--e-global-color-white)!important;}
.ts-stat-label,.ts-stat-label p{color:color-mix(in srgb, var(--e-global-color-white) 55%, transparent);margin:0;}
/* Light variant: same rail on a pale section instead of over the hero photo. */
.ts-stats-light{border-top-color:var(--e-global-color-line)!important;}
.ts-stats-light .ts-stat-value .elementor-heading-title{color:var(--e-global-color-primary)!important;}
.ts-stats-light .ts-stat-label,.ts-stats-light .ts-stat-label p{color:var(--e-global-color-muted);}
/* Gold-figure variant of the same rail, used on the navy band. */
.ts-stats-gold .ts-stat-value .elementor-heading-title{color:var(--e-global-color-accent)!important;}

/* Category tiles (bento). Two per row; the wide one alternates side by row.
   The size class is worked out in PHP, so any number of tiles still tiles cleanly. */
.ts-bento{margin-top:28px!important;}
.ts-tile{position:relative;overflow:hidden;border-radius:20px;min-height:300px;background:var(--e-global-color-primary);display:flex!important;align-items:flex-end;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;text-decoration:none;padding:0!important;}
.ts-tile:hover{transform:translateY(-5px);box-shadow:0 26px 52px color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);}
.ts-tile > .e-con-inner{display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:stretch!important;height:100%;padding:0!important;}
.ts-tile-img{position:absolute!important;inset:0;width:100%;height:100%;z-index:0;margin:0!important;}
.ts-tile-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.ts-tile:hover .ts-tile-img img{transform:scale(1.06);}
.ts-tile::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,color-mix(in srgb, var(--e-global-color-primary) 93%, transparent),color-mix(in srgb, var(--e-global-color-primary) 66%, transparent) 44%,color-mix(in srgb, var(--e-global-color-primary) 14%, transparent) 80%,color-mix(in srgb, var(--e-global-color-primary) 0%, transparent));}
.ts-tile:hover::after{opacity:.94;}
.ts-tile-in{position:relative;z-index:2;margin-top:auto!important;padding:28px!important;width:100%;}
.ts-tile-in > .e-con-inner{display:flex;flex-direction:column;gap:0!important;}
.ts-tile-cat .elementor-heading-title{color:var(--e-global-color-accent)!important;}
.ts-tile-h{margin-top:6px!important;}
.ts-tile-h .elementor-heading-title{color:var(--e-global-color-white)!important;}
/* Blurb is collapsed until hover, and carries no margin while collapsed so it
   leaves no gap. */
.ts-tile-p{
  display:grid;
  grid-template-rows:0fr;
  margin-top:0!important;
  opacity:0;
  overflow:visible;
  transition:grid-template-rows .45s ease, margin-top .45s ease, opacity .35s ease !important;
}
.ts-tile-p > p{
  overflow:hidden;
  min-height:0; /* grid items default to min-height:auto, which blocks the collapse to 0fr */
}
.ts-tile:hover .ts-tile-p{
  grid-template-rows:1fr;
  margin-top:10px!important;
  opacity:1;
}
.ts-tile-p, .ts-tile-p p{
  color:color-mix(in srgb, var(--e-global-color-white) 76%, transparent);
  margin:0;
  max-width:44ch;
}
.ts-tile-go{margin-top:12px!important;}
.ts-tile-go .elementor-heading-title{color:var(--e-global-color-white)!important;}
.ts-tile-go .elementor-heading-title::after{content:' →';transition:transform .3s ease;display:inline-block;}
.ts-tile:hover .ts-tile-go .elementor-heading-title::after{transform:translateX(5px);}

/* Injected widgets carry a default bottom margin; these components space
   themselves with the gap rules below instead. */
.ts-challenge-item .elementor-widget,
.ts-fix .elementor-widget,
.ts-hero-copy .elementor-widget,
.ts-news-copy .elementor-widget,
.ts-news-form-wrap .elementor-widget,
.ts-news-inner .elementor-widget,
.ts-step .elementor-widget,
.ts-tile-in .elementor-widget,
.ts-value-card .elementor-widget,
.ts-video-copy .elementor-widget,
.ts-video-frame .elementor-widget{margin-block-end:0!important;}
/* The hero copy block spaces its three items with the container's own gap,
   so the widgets inside it must not add margins of their own. */
.ts-hero-copy .elementor-widget{margin-block-start:0!important;}

/* Vertical stacks, grouped by the spacing step they use. */
.ts-news-copy > .e-con-inner,
.ts-fix > .e-con-inner{display:flex;flex-direction:column;gap:var(--ts-sp-1)!important;}
.ts-stat-item > .e-con-inner,
.ts-challenge-item > .e-con-inner,
.ts-step > .e-con-inner,
.ts-value-card > .e-con-inner{display:flex;flex-direction:column;gap:var(--ts-sp-2)!important;}
.ts-cta-inner > .e-con-inner,
.ts-split-head > .e-con-inner,
.ts-video-copy > .e-con-inner{display:flex;flex-direction:column;gap:var(--ts-sp-3)!important;}
.ts-brand-range { margin: 4px 0 18px; }
.ts-brand-range .ts-brand-range-label {
  font-size: 14px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 8px;
  color: var(--e-global-color-accent);
}
.ts-brand-range ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ts-brand-range li { margin: 0; padding: 0; }
.ts-brand-range a,
.ts-brand-range li {
  font-size: 14px; line-height: 1.4;
}
.ts-brand-range a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--e-global-color-primary);
  text-decoration: none;
  transition: color .2s ease;
}
.ts-brand-range a::before {
  content: "→";
  color: var(--e-global-color-accent);
  font-size: 13px;
  transition: transform .2s ease;
}
.ts-brand-range a:hover { color: var(--e-global-color-accent); }
.ts-brand-range a:hover::before { transform: translateX(3px); }

/* 6. AUDIENCE PAGES ======================================================= */

/* Brand logo strip. */
.ts-logos-inner{max-width:var(--w-page);margin:0 auto;padding:30px 28px!important;}
.ts-logos-inner > .e-con-inner{gap:0!important;}
.ts-logos-label,.ts-logos-label p{color:var(--e-global-color-muted);text-align:center;margin:0 0 20px;}
.ts-logos > .e-con-inner{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;justify-content:center;gap:30px 38px;}
.ts-logo-item{width:auto!important;}
.ts-logo-item img{max-height:21px;max-width:104px;width:auto;height:auto;object-fit:contain;opacity:.42;filter:grayscale(1);transition:opacity .25s ease,filter .25s ease;}
.ts-logo-item img:hover{opacity:1;filter:grayscale(0);}

/* Challenges: sticky heading on the left, numbered list on the right. */
.ts-split > .e-con-inner{display:grid!important;grid-template-columns:minmax(300px,.85fr) 1.15fr;gap:80px;align-items:start;}
/* Sticky heading. Uses CSS position:sticky rather than Elementor's Motion Effects
   sticky, which is JS-driven fixed positioning and does not work inside this grid. */
.ts-split-head{position:sticky;top:56px;align-self:start;}
/* Do not add .ts-split-head to the .reveal group: transform / will-change on a
   sticky element creates a containing block and disables the sticking. */
.ts-challenge-list > .e-con-inner{display:flex!important;flex-direction:column!important;gap:0;border-top:1px solid var(--e-global-color-line);}
.ts-challenge-item{padding:34px 0!important;border-bottom:1px solid var(--e-global-color-line);}
.ts-challenge-head > .e-con-inner{display:flex!important;flex-direction:row!important;align-items:baseline;gap:14px!important;}
.ts-challenge-num{width:auto!important;flex:0 0 auto;}
body .ts-challenge-num .elementor-heading-title{color:var(--e-global-color-gold_deep);}
body .ts-challenge-title .elementor-heading-title{color:var(--e-global-color-primary);}
.ts-challenge-problem{margin:0 0 0 33px!important;}
.ts-challenge-problem,.ts-challenge-problem p{color:var(--e-global-color-muted);margin:0;}
.ts-fix{margin:var(--ts-sp-1) 0 0 33px!important;padding:16px 20px!important;background:var(--e-global-color-white);border-left:2px solid var(--e-global-color-accent);border-radius:0 10px 10px 0;}
body .ts-fix-label .elementor-heading-title{color:var(--e-global-color-gold_deep);}
.ts-fix-text,.ts-fix-text p{color:var(--e-global-color-text);margin:0;}

/* Owner video: copy on the left, framed video on the right. */
.ts-video-grid > .e-con-inner{display:grid!important;grid-template-columns:minmax(300px,.85fr) 1.15fr;gap:64px;align-items:center;}
.ts-video-frame{border-radius:20px;overflow:hidden;background:var(--e-global-color-primary);box-shadow:0 26px 52px color-mix(in srgb, var(--e-global-color-primary) 14%, transparent);padding:0!important;}
.ts-video-frame video,.ts-video-frame .elementor-wrapper{display:block;width:100%;border-radius:20px;}
.ts-video-note{margin-top:36px!important;padding-top:24px;border-top:1px solid var(--e-global-color-line);}
.ts-video-note,.ts-video-note p{color:var(--e-global-color-text);margin:0;max-width:900px;}

/* How it works: a connected timeline, deliberately unlike the why-us grid above -
   no cell backgrounds or dividers, just a hairline running through numbered markers. */
.ts-steps{margin-top:40px!important;}
.ts-steps > .e-con-inner{display:grid!important;grid-template-columns:repeat(3,1fr);gap:34px;position:relative;background:none;}
/* the connecting rule, sitting behind the markers */
.ts-steps > .e-con-inner::before{content:'';position:absolute;top:42px;left:22px;right:22px;height:1px;background:var(--e-global-color-line);z-index:0;}
.ts-step{background:none!important;padding:0!important;position:relative;z-index:1;}
.ts-step-num .elementor-heading-title{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:none;background:var(--e-global-color-primary);color:var(--e-global-color-white)!important;transition:background-color .3s ease,transform .3s ease;}
.ts-step:hover .ts-step-num .elementor-heading-title{background:var(--e-global-color-accent);transform:scale(1.08);}
.ts-step-title{margin-top:var(--ts-sp-3)!important;}
body .ts-step-title .elementor-heading-title{color:var(--e-global-color-primary);}

/* Why-us grid. The 2px gap plus a line-coloured background makes the dividers. */
.ts-value-grid{margin-top:28px!important;}
.ts-value-grid > .e-con-inner{display:grid!important;grid-template-columns:1fr 1fr;gap:2px;background:var(--e-global-color-line);}
.ts-value-card{background:var(--e-global-color-paper);padding:40px 44px 44px!important;transition:background-color .3s ease;}
.ts-value-card:hover{background:var(--e-global-color-white);}
body .ts-value-num .elementor-heading-title{color:var(--e-global-color-line);transition:color .3s ease;}
.ts-value-card:hover .ts-value-num .elementor-heading-title{color:var(--e-global-color-accent);}
/* Three-across variant, used where a section has three cards instead of four. */
.ts-value-grid-3 > .e-con-inner{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;}
body .ts-value-title .elementor-heading-title{color:var(--e-global-color-primary);}
.ts-value-text,.ts-value-text p{color:var(--e-global-color-muted);margin:0;max-width:46ch;}

/* Footnote band. */
.ts-note-inner{max-width:var(--w-text);margin:0 auto;padding:44px 28px!important;text-align:center;}
body .ts-note-label .elementor-heading-title{color:var(--e-global-color-gold_deep);}
.ts-note-text{margin-top:13px!important;}
.ts-note-text,.ts-note-text p{color:var(--e-global-color-muted);margin:0;}
.ts-note-text a{color:var(--e-global-color-primary);text-decoration:underline;text-underline-offset:3px;}

/* 7. RESPONSIVE =========================================================== */
/* All breakpoints live here, largest first, so it is obvious what wins. */

@media(max-width:1024px){
  .elementor-kit-9{--ts-hero-h:520px;}
  .ts-hero,.ts-thanks{margin-top:0!important;}
  .ts-thanks-inner{padding:150px 24px 90px!important;}
  .ts-hero-inner{padding:150px 24px 0!important;}
  .acf-hero{margin-top:0!important;}
  .acf-hero > .e-con-inner{padding-top:150px!important;}
  .section-container{padding:80px 0;}
  .ts-cta-inner{padding:86px 24px!important;}
  .ts-split > .e-con-inner{grid-template-columns:1fr;gap:44px;}
  .ts-split-head{position:static;}
  .ts-video-grid > .e-con-inner{grid-template-columns:1fr;gap:44px;}
  .ts-steps > .e-con-inner{grid-template-columns:1fr 1fr;gap:40px 34px;}
  .ts-steps > .e-con-inner::before{display:none;}
}

/* Below the boxed content width nothing supplies side padding, so add it. */
@media(max-width:900px){
  .section-container{padding:80px 20px;}
  /* Brand list drops to one column: no vertical rule, dividers become top borders. */
  .acf-brands{grid-template-columns:1fr!important;}
  .ts-brand.ts-brand-left,.ts-brand.ts-brand-right{padding:22px 0!important;border-left:none!important;border-top:1px solid var(--e-global-color-line)!important;}
  .ts-brand.ts-brand-left:hover,.ts-brand.ts-brand-right:hover{padding-left:0!important;}
  .ts-brand:first-child{border-top:none!important;}
}

/* The stat rail goes 2-up slightly earlier than the rest of the layout. */
@media(max-width:820px){
  .ts-stats{margin-top:40px!important;}
  .ts-stats > .e-con-inner{grid-template-columns:1fr 1fr!important;}
}

@media(max-width:767px){
  .elementor-kit-9{--ts-hero-h:440px;}
  .acf-hero > .e-con-inner{padding-top:130px!important;}
  .section-container{padding:60px 20px;}
  .ts-hero-inner{padding:130px 20px 0!important;}
  .ts-cta-inner{padding:72px 20px!important;}
  .ts-logos-inner{padding:26px 20px!important;}
  .ts-logos > .e-con-inner{gap:22px 26px;}
  .ts-stat-item{padding:20px 16px 28px 0!important;}
  .ts-buttons > .e-con-inner{width:100%;}
  .ts-challenge-problem,.ts-fix{margin-left:0!important;}
  .ts-value-grid > .e-con-inner,.ts-value-grid-3 > .e-con-inner{grid-template-columns:1fr!important;}
  .ts-steps > .e-con-inner{grid-template-columns:1fr;gap:30px;}
  .ts-video-note{margin-top:28px!important;}
  .ts-value-card{padding:32px 24px 36px!important;}
  .ts-audience-card{width:100%;}
.ts-stats-light > .e-con-inner{grid-template-columns:1fr 1fr!important;}
  .ts-tile-in{padding:22px!important;}
  /* No hover on touch, so the blurb is always shown. */
  .ts-tile-p{margin-top:10px!important;max-height:140px;opacity:1;}
}

@media(max-width:600px){
  .ts-brand-body.ts-brand-with-photo > .e-con-inner{flex-direction:column-reverse!important;}
  .ts-brand-photo{flex:0 0 auto;width:100%;max-width:220px;margin-bottom:16px;}
}

/* --- Get a Quote page + Forminator form --- */
.ts-quote-grid > .e-con-inner{display:grid!important;grid-template-columns:1.4fr .6fr;gap:32px;align-items:start;}
.ts-quote-form,.ts-quote-aside{background:var(--e-global-color-white);border:1px solid var(--e-global-color-line);border-radius:16px;padding:34px 36px!important;}
body .ts-aside-title .elementor-heading-title{color:var(--e-global-color-primary);}
.ts-aside-item{margin-top:0!important;padding:15px 0;border-top:1px solid var(--e-global-color-line);}
.ts-aside-item p{font-size:15px;line-height:1.5;color:var(--e-global-color-text);margin:0;}
.ts-aside-item strong{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--e-global-color-gold_deep);margin-bottom:5px;}
.ts-aside-item a{color:var(--e-global-color-primary);font-weight:600;}

/* The numbered 'Page 1 … Finish' nav is misleading once pages are skipped, so it is
   replaced by the path-aware Step X of Y counter the JS inserts. */
.ts-quote-form .forminator-pagination-steps{display:none!important;}
.ts-quote-progress{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--e-global-color-gold_deep);margin:0 0 18px;}

/* Forminator's 'None' design leaves labels inline, so each question's options began
   at a different x and the whole form shifted between steps. Labels sit on their own
   line; the options below them always start at the same left edge. */
.ts-quote-form .forminator-label{display:block!important;width:100%!important;font-size:17px!important;font-weight:600!important;color:var(--e-global-color-primary)!important;margin-bottom:14px!important;}
.ts-quote-form h3{font-size:24px;font-weight:600;letter-spacing:-.5px;color:var(--e-global-color-primary);margin:0 0 6px;}
.ts-quote-form .forminator-row{margin-bottom:34px!important;}
/* Hint under a field: small, one line, tucked up close to the input. */
.ts-quote-form .forminator-description{font-size:var(--e-global-typography-label-font-size)!important;line-height:1.35!important;color:var(--e-global-color-muted)!important;margin-top:6px!important;margin-bottom:0!important;}
/* Steps hold very different numbers of questions, so the card jumped between about
   330px and 900px tall. A floor keeps the short steps from collapsing. */
.ts-quote-form .forminator-custom-form{min-height:420px;}
/* While the form steps past pages this person's answers have made irrelevant, hide the
   churn rather than flashing each empty page. */
.ts-quote-form .forminator-custom-form.ts-skipping{opacity:0;pointer-events:none;}
.ts-quote-form .forminator-custom-form{transition:opacity .15s ease;}
/* Option tiles lay out as an even wrapping row rather than inline flow. */
.ts-quote-form .forminator-field:has(.forminator-radio),.ts-quote-form .forminator-field:has(.forminator-checkbox){display:flex!important;flex-wrap:wrap;gap:10px;align-items:stretch;}
.ts-quote-form .forminator-radio,.ts-quote-form .forminator-checkbox{margin:0!important;}
/* Validation text belongs under the options, not wrapped around them. */
.ts-quote-form .forminator-error-message{display:block!important;width:100%!important;flex:0 0 100%;margin:8px 0 0!important;font-size:14px;}
/* Give the step buttons room to breathe. */
/* Forminator spreads Previous and Next to opposite ends of the row. Keep them together
   at the start of the line with a clear gap so they read as one pair of controls. */
.ts-quote-form .forminator-pagination-footer{display:flex!important;align-items:center;justify-content:flex-start!important;gap:20px!important;margin-top:38px!important;}
.ts-quote-form input[type=text],.ts-quote-form input[type=email],.ts-quote-form input[type=tel],.ts-quote-form textarea{font-size:15px!important;border:1px solid var(--e-global-color-line)!important;border-radius:10px!important;padding:13px 15px!important;}

/* Selectable answers render as tiles, per the scope's visual-first principle. */
.ts-quote-form .forminator-radio,.ts-quote-form .forminator-checkbox{display:inline-flex!important;align-items:center;gap:10px;border:1px solid var(--e-global-color-line);border-radius:12px;padding:14px 18px!important;margin:0 10px 10px 0!important;background:var(--e-global-color-paper);cursor:pointer;transition:border-color .2s ease,background-color .2s ease;font-size:15px;color:var(--e-global-color-primary);}
/* Forminator sets pointer-events:none on the label and re-enables it only on the
   bullet and the text. Once the label is styled as a padded tile, most of that tile
   is dead to clicks - so re-enable it on the whole tile and let the label fill it. */
.ts-quote-form .forminator-radio,.ts-quote-form .forminator-checkbox{pointer-events:auto!important;}
.ts-quote-form .forminator-radio:hover,.ts-quote-form .forminator-checkbox:hover{border-color:var(--e-global-color-accent);background:var(--e-global-color-white);}
/* Selected state - without this there is no feedback that a tile has been chosen. */
.ts-quote-form .forminator-radio.forminator-is_checked,.ts-quote-form .forminator-checkbox.forminator-is_checked,.ts-quote-form .forminator-radio:has(input:checked),.ts-quote-form .forminator-checkbox:has(input:checked){border-color:var(--e-global-color-accent)!important;background:var(--e-global-color-white)!important;box-shadow:inset 0 0 0 1px var(--e-global-color-accent);}
/* Forminator colours the bullet and tick from the form's own style settings, which
   are unset on a form created programmatically - so the dot and the tick render
   transparent. Colour them from the globals instead. */
.ts-quote-form .forminator-radio-bullet,.ts-quote-form .forminator-checkbox-box{border-color:var(--e-global-color-muted)!important;transition:background-color .15s ease,border-color .15s ease;}
.ts-quote-form .forminator-radio-bullet::before{background:transparent!important;transition:background-color .15s ease;}
.ts-quote-form input[type=radio]:checked + .forminator-radio-bullet{border-color:var(--e-global-color-accent)!important;}
.ts-quote-form input[type=radio]:checked + .forminator-radio-bullet::before{background:var(--e-global-color-accent)!important;}
.ts-quote-form .forminator-checkbox-box::before{opacity:0;transition:opacity .15s ease;}
.ts-quote-form input[type=checkbox]:checked + .forminator-checkbox-box{background:var(--e-global-color-accent)!important;border-color:var(--e-global-color-accent)!important;}
.ts-quote-form input[type=checkbox]:checked + .forminator-checkbox-box::before{opacity:1;color:var(--e-global-color-white)!important;}
.ts-quote-form .forminator-radio:focus-within,.ts-quote-form .forminator-checkbox:focus-within{border-color:var(--e-global-color-accent)!important;outline:2px solid color-mix(in srgb, var(--e-global-color-accent) 40%, transparent);outline-offset:2px;}
/* An open dropdown was rendering underneath the submit button. */
.ts-quote-form .forminator-field select,.ts-quote-form .forminator-custom-form select{font-size:15px!important;border:1px solid var(--e-global-color-line)!important;border-radius:10px!important;padding:13px 15px!important;}
.ts-quote-form .forminator-field{position:relative;z-index:1;}
.ts-quote-form .forminator-field:focus-within{z-index:20;}
.ts-quote-form .forminator-pagination-footer{position:relative;z-index:0;}
.ts-quote-form .forminator-button{font-weight:600!important;border-radius:100px!important;padding:14px 28px!important;}
.ts-quote-form .forminator-button-submit,.ts-quote-form .forminator-button-next{background:var(--e-global-color-primary)!important;color:var(--e-global-color-white)!important;}
.ts-quote-form .forminator-button-submit:hover,.ts-quote-form .forminator-button-next:hover{background:var(--e-global-color-accent)!important;}

/* Confirmation page */
.ts-thanks-inner{max-width:var(--w-text);margin:0 auto;padding:calc(120px - var(--ts-nav-overlap)) 24px 120px!important;text-align:center;}
.ts-thanks .ts-hero-title .elementor-heading-title{color:var(--e-global-color-white)!important;}
.ts-thanks .ts-lede,.ts-thanks .ts-lede p{color:color-mix(in srgb, var(--e-global-color-white) 76%, transparent);margin-left:auto;margin-right:auto;}
.ts-thanks .ts-lede a{color:var(--e-global-color-accent);}
.ts-thanks-sign p{font-size:15px;font-style:italic;color:color-mix(in srgb, var(--e-global-color-white) 55%, transparent);margin-top:22px;}

@media(max-width:1024px){.ts-quote-grid > .e-con-inner{grid-template-columns:1fr;}}
@media(max-width:767px){.ts-quote-form,.ts-quote-aside{padding:24px 20px!important;}
  .ts-thanks-inner{padding:130px 20px 70px!important;}
  .ts-quote-form .forminator-radio,.ts-quote-form .forminator-checkbox{width:100%;margin-right:0!important;}}

/* Get a Quote hero: same height token and nav overlap as the product and audience
   heroes, with the copy sitting at the bottom of the band like the rest of the site. */
body.page .ts-hero{min-height:var(--ts-hero-h)!important;display:flex!important;}
body.page .ts-hero > .e-con-inner{display:flex!important;flex-direction:column;justify-content:flex-end;width:100%;}
body.page .ts-hero-inner{justify-content:flex-end;padding:0 24px 72px!important;margin-top:auto;max-width:var(--w-page)!important;margin-left:auto;margin-right:auto;}
@media(max-width:1024px){body.page .ts-hero,.ts-thanks{margin-top:0!important;}
  .ts-thanks-inner{padding:150px 24px 90px!important;}
  body.page .ts-hero-inner{padding:150px 24px 56px!important;}}
@media(max-width:767px){body.page .ts-hero-inner{padding:130px 20px 44px!important;}}
/* Opt out of the bottom-aligned page hero above and use the audience-page
   treatment instead: the block sits below the nav with the same 200px lead-in,
   so a content page's hero matches Who We Supply rather than the quote form. */
body.page .ts-hero-flow > .e-con-inner{justify-content:flex-start!important;}
body.page .ts-hero-flow .ts-hero-inner{justify-content:flex-start!important;margin-top:0!important;padding:200px 24px 0!important;}
@media(max-width:1024px){body.page .ts-hero-flow .ts-hero-inner{padding:150px 24px 0!important;}}
@media(max-width:767px){body.page .ts-hero-flow .ts-hero-inner{padding:130px 20px 0!important;}}

/* Category bento as an Elementor Loop Grid. One loop-item template drives the tile on
   every page; the alternating wide/narrow rhythm comes from nth-child here rather than
   a size class, because a loop renders every item identically. Pattern repeats each 6:
   wide, narrow / narrow, wide / wide, narrow. */
.ts-bento-loop{margin-top:28px;}
.ts-bento-loop .elementor-loop-container{display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:14px!important;}
.ts-bento-loop .elementor-loop-container > div:nth-of-type(6n+1),
.ts-bento-loop .elementor-loop-container > div:nth-of-type(6n+4),
.ts-bento-loop .elementor-loop-container > div:nth-of-type(6n+5){grid-column:span 4;}
.ts-bento-loop .elementor-loop-container > div:nth-of-type(6n+2),
.ts-bento-loop .elementor-loop-container > div:nth-of-type(6n+3),
.ts-bento-loop .elementor-loop-container > div:nth-of-type(6n+6){grid-column:span 2;}
/* the loop wrapper must not swallow the tile's own height or rounding */
.ts-bento-loop .elementor-loop-container > div{display:flex;min-height:420px;}
.ts-bento-loop .elementor-loop-container > div > .ts-tile{width:100%;}
@media(max-width:1024px){
  .ts-bento-loop .elementor-loop-container{grid-template-columns:repeat(4,1fr)!important;}
  .ts-bento-loop .elementor-loop-container > div{grid-column:span 2!important;}
  .ts-bento-loop .elementor-loop-container > div{min-height:320px;}
}
@media(max-width:767px){
  .ts-bento-loop .elementor-loop-container{grid-template-columns:1fr!important;gap:12px!important;}
  .ts-bento-loop .elementor-loop-container > div{grid-column:span 1!important;}
  .ts-bento-loop .elementor-loop-container > div{min-height:280px;}
}

/* ============================================================================
   INJECTED TEXT — points at Global Fonts, holds no values of its own
   Brand cards, challenges, value points, the stat rail and category tiles are
   built in PHP at render time, so Elementor cannot attach per-widget styling to
   them. These rules read the same Global Fonts the normal widgets are bound to,
   so changing a font in Site Settings still changes every one of them.
   Edit the FONT in Elementor, never a number here — there are none.
   ============================================================================ */
.ts-value-num .elementor-heading-title{font-size:var(--e-global-typography-statxl-font-size);font-weight:var(--e-global-typography-statxl-font-weight);line-height:var(--e-global-typography-statxl-line-height);letter-spacing:var(--e-global-typography-statxl-letter-spacing);}
.ts-stat-value .elementor-heading-title{font-size:var(--e-global-typography-stat-font-size);font-weight:var(--e-global-typography-stat-font-weight);line-height:var(--e-global-typography-stat-line-height);letter-spacing:var(--e-global-typography-stat-letter-spacing);}
.ts-challenge-num .elementor-heading-title,.ts-brand-specs .elementor-accordion-title{font-size:var(--e-global-typography-headings-font-size);font-weight:var(--e-global-typography-headings-font-weight);line-height:var(--e-global-typography-headings-line-height);letter-spacing:var(--e-global-typography-headings-letter-spacing);}
.ts-fix-label .elementor-heading-title,.ts-brand-tier .elementor-heading-title,.ts-tile-cat .elementor-heading-title{font-size:var(--e-global-typography-label-font-size);font-weight:var(--e-global-typography-label-font-weight);line-height:var(--e-global-typography-label-line-height);letter-spacing:var(--e-global-typography-label-letter-spacing);text-transform:var(--e-global-typography-label-text-transform);}
.ts-challenge-problem,.ts-challenge-problem p,.ts-fix-text,.ts-fix-text p,.ts-value-text,.ts-value-text p,.ts-brand-blurb p,.ts-tile-p,.ts-tile-p p,.ts-brand-specs .elementor-tab-content,.ts-brand-specs li{font-size:var(--e-global-typography-body-font-size);font-weight:var(--e-global-typography-body-font-weight);line-height:var(--e-global-typography-body-line-height);letter-spacing:var(--e-global-typography-body-letter-spacing);}
.ts-stat-label,.ts-stat-label p,.ts-tile-go .elementor-heading-title{font-size:var(--e-global-typography-bodysm-font-size);font-weight:var(--e-global-typography-bodysm-font-weight);line-height:var(--e-global-typography-bodysm-line-height);letter-spacing:var(--e-global-typography-bodysm-letter-spacing);}

/* Header fits between Elementor's tablet breakpoint (1024) and a full-width
   laptop (the header container is 1440 wide). There is no room there for logo + five menu items + phone + button, so
   the phone drops out, the padding tightens and the menu takes the width it frees.
   Without this the mega menu runs out of room and 'Contact' wraps to a second row,
   making the header 144px tall instead of 104px. */
@media(min-width:1025px) and (max-width:1439px){
  .ts-nav > .e-con-inner{padding-left:24px!important;padding-right:24px!important;}
  .ts-nav .ts-nav-phone{display:none!important;}
  .ts-nav .ts-nav-logo-col{width:15%!important;}
  .ts-nav .ts-nav-menu{width:65%!important;}
  .ts-nav .ts-nav-cta{width:20%!important;}
  .ts-nav .e-n-menu-title{padding-left:4px!important;padding-right:4px!important;}
  .ts-nav-logo-col img{max-width:100%;height:auto;}
}
/* Narrower again (rare: most laptops are 1280+). The button goes too, so the five
   items still hold one line instead of pushing the header to 144px. */
@media(min-width:1025px) and (max-width:1199px){
  .ts-nav .e-n-menu-title-text{font-size:var(--e-global-typography-bodysm-font-size);}
  .ts-nav .ts-nav-cta{display:none!important;}
  .ts-nav .ts-nav-menu{width:82%!important;}
}

/* ============================================================================
   MOBILE MENU PANEL
   The panel mixes an accordion (What We Supply / Who We Supply) with a plain link
   list (Home / Who We Are / Contact); each widget brought its own colour, so the
   items read as two different menus. One colour for every item here.
   The close icon is an uploaded SVG carrying its own <style> block, which Elementor's
   colour control cannot reach, so its shapes are recoloured directly.
   ============================================================================ */
.e-off-canvas .e-n-accordion-item-title-text,
.e-off-canvas .elementor-icon-list-text,
.e-off-canvas .elementor-icon-list-item > a{color:var(--e-global-color-primary)!important;}
.e-off-canvas .e-n-accordion-item-title-icon svg{fill:var(--e-global-color-primary)!important;}
.e-off-canvas .elementor-widget-icon svg [class],
.e-off-canvas .elementor-widget-icon svg path,
.e-off-canvas .elementor-widget-icon svg rect,
.e-off-canvas .elementor-widget-icon svg polygon{fill:var(--e-global-color-primary)!important;}

/* Elementor's sticky feature leaves a hidden clone of the header in the flow to hold
   its place. On tablet and mobile the nav is fixed from the very top, so that clone
   only pushed the hero down and made the header sit above the photo on phones while
   sitting over it on tablets. Take it out of the flow at those widths. */
@media(max-width:1024px){
  header .elementor-sticky__spacer{display:none!important;}
}
@media (max-width: 1024px) {
  .ts-tile-p {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px !important;
  }
}
/* ============================================================================
   DETAIL ACCORDION (How It Works)
   Elementor's Nested Accordion, styled to match the FAQ accordion on the product
   pages: separated cards, hairline border, gold border on hover, and the plus in
   a round tinted badge that fills gold and rotates when the panel opens.
   ============================================================================ */
.ts-detail-acc .e-n-accordion{display:flex;flex-direction:column;gap:12px;}
.ts-detail-acc .e-n-accordion-item{border:1px solid var(--e-global-color-line)!important;border-radius:14px;overflow:hidden;background:var(--e-global-color-white);transition:border-color .25s ease,box-shadow .25s ease;}
.ts-detail-acc .e-n-accordion-item:hover{border-color:var(--e-global-color-gold_deep)!important;}
.ts-detail-acc .e-n-accordion-item[open]{box-shadow:0 14px 30px color-mix(in srgb, var(--e-global-color-primary) 7%, transparent);}
.ts-detail-acc .e-n-accordion-item-title{padding:20px 24px!important;gap:16px;cursor:pointer;}
.ts-detail-acc .e-n-accordion-item-title:hover{background:var(--e-global-color-paper);}
.ts-detail-acc .e-n-accordion-item-title-icon{width:26px;height:26px;flex:0 0 26px;display:flex!important;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb, var(--e-global-color-accent) 12%, transparent);transition:background-color .25s ease;}
.ts-detail-acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon{background:var(--e-global-color-accent);}
/* body */
.ts-acc-body{padding:4px 24px 28px!important;}
.ts-acc-note{margin-top:22px!important;padding:16px 18px;background:var(--e-global-color-paper);border-left:2px solid var(--e-global-color-accent);border-radius:0 8px 8px 0;}
.ts-acc-note p{margin:0;}
@media(max-width:767px){
  .ts-detail-acc .e-n-accordion-item-title{padding:18px 20px!important;}
  .ts-acc-body{padding:4px 20px 24px!important;}
}/* End custom CSS */