/* TRUST 360 graphics kit (Batch Z4). Loaded only on Home, Structured cabling, Residential.
   Source of the artwork: inline SVG in Elementor HTML widgets (svg.t360-g). Colours are tokens: override on any ancestor with --t360-g-<name>.
   Tokens: bg surf surf2 line fine ink mut acc accT accS onacc. Dark theme = tab slots; light theme (.t360-g--light) = band and maps.
   Default (no JS / reduced motion / print) = final state. Motion only when JS adds .t360-play AND prefers-reduced-motion: no-preference. */
svg.t360-g{--g-bg:var(--t360-g-bg,#0D1119);--g-surf:var(--t360-g-surf,#151B27);--g-surf2:var(--t360-g-surf2,#1C2433);--g-line:var(--t360-g-line,#8F9AAD);--g-fine:var(--t360-g-fine,#38425A);--g-ink:var(--t360-g-ink,#F4F6F8);--g-mut:var(--t360-g-mut,#B4BBC7);--g-acc:var(--t360-g-acc,#CEFF00);--g-accT:var(--t360-g-accT,#CEFF00);--g-accS:var(--t360-g-accS,none);--g-onacc:var(--t360-g-onacc,#05070D)}
svg.t360-g.t360-g--light{--g-bg:var(--t360-g-bg,#FFFFFF);--g-surf:var(--t360-g-surf,#F2F3F5);--g-surf2:var(--t360-g-surf2,#E7E9ED);--g-line:var(--t360-g-line,#4B5563);--g-fine:var(--t360-g-fine,#D3D7DE);--g-ink:var(--t360-g-ink,#14181F);--g-mut:var(--t360-g-mut,#4A515C);--g-acc:var(--t360-g-acc,#CEFF00);--g-accT:var(--t360-g-accT,#4F6B00);--g-accS:var(--t360-g-accS,#14181F);--g-onacc:var(--t360-g-onacc,#05070D)}
svg.t360-g{display:block;width:100%;height:auto;margin:0 auto;font-family:Inter,"Inter Tight",Arial,Helvetica,sans-serif}
svg.t360-g text{font-family:Inter,"Inter Tight",Arial,Helvetica,sans-serif;fill:var(--g-ink);font-weight:600;font-size:16px}
svg.t360-g .h{font-family:"Inter Tight",Inter,Arial,Helvetica,sans-serif;font-size:20px;letter-spacing:-.01em}
svg.t360-g .s,svg.t360-g .tg{font-weight:500;font-size:14px;fill:var(--g-mut)}
svg.t360-g--band .tg{font-size:16px}
svg.t360-g--map .tg{font-size:15px}
svg.t360-g .ac-t{fill:var(--g-accT)}
svg.t360-g .ln{fill:none;stroke:var(--g-line);stroke-linecap:round;stroke-linejoin:round}
svg.t360-g .cn{fill:none;stroke:var(--g-line);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
svg.t360-g .cd{fill:none;stroke:var(--g-line);stroke-width:1.25;stroke-linecap:round;stroke-dasharray:1.5 5}
svg.t360-g .cf{fill:none;stroke:var(--g-fine);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
svg.t360-g .ca{fill:none;stroke:var(--g-accT);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
svg.t360-g .sf{fill:var(--g-surf)}
svg.t360-g .sf2{fill:var(--g-surf2)}
svg.t360-g .dt{fill:var(--g-line);stroke:none}
svg.t360-g .ac{fill:var(--g-acc);stroke:var(--g-accS);stroke-width:.9}
svg.t360-g .acs{fill:none;stroke:var(--g-accT);stroke-linecap:round}
svg.t360-g .fn{fill:none;stroke:var(--g-fine);stroke-linecap:round;stroke-linejoin:round}
svg.t360-g .fz{fill:var(--g-surf);stroke:none}
@media (prefers-reduced-motion:no-preference){
svg.t360-g.t360-play .m{animation:t360g-in .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
svg.t360-g.t360-play .d{stroke-dasharray:1;animation:t360g-draw .6s ease-out both;animation-delay:calc(var(--i,0)*70ms + 120ms)}
@keyframes t360g-in{from{opacity:0;transform:translateY(6px)}}
@keyframes t360g-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}
/* tab slots: wide variant sized by the slot, compact variant for phones */
.t360-slot-dia svg.t360-g{max-width:760px}
.t360-slot-dia svg.t360-g.t360-g--compact{max-width:420px}
@media (max-width:767px){
  /* compact variants share one ratio (348x312), so every tab has the same height; replaces the fixed 312 px of Z2a (clipped the diagram between 480 and 767 px) */
  .elementor .t360-panel-inner .t360-slot-tab.t360-slot-dia{height:auto;min-height:0}
}
/* band and map slots: real graphics on a light card, no stripes */
.elementor .t360-slot.t360-slot-band,.elementor .t360-slot.t360-slot-map{aspect-ratio:auto;background:#fff;border:1px solid rgba(20,24,31,.12);height:auto}
.t360-g-fig{margin:0;padding:24px;width:100%;box-sizing:border-box}
.t360-slot-map .t360-g-fig{padding:20px 24px}
.t360-g-fig .t360-g-v,.t360-g-fig .t360-g-c{display:none}
.t360-g-fig .t360-g-v svg.t360-g,.t360-g-fig .t360-g-c svg.t360-g{max-width:420px}
@media (max-width:1179px){
  .t360-slot-band .t360-g-fig .t360-g-w,.t360-slot-map .t360-g-fig .t360-g-w{display:none}
  .t360-slot-band .t360-g-fig .t360-g-v,.t360-slot-map .t360-g-fig .t360-g-c{display:block}
}
@media (max-width:767px){
  .t360-g-fig{padding:12px 8px}
}
.t360-g-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(20,24,31,.12)}
.t360-g-cap p{margin:0;color:#4A515C;font:500 14px/1.4 Inter,Arial,sans-serif}
.t360-g-legend{display:flex;gap:20px;margin:0;padding:0;list-style:none}
.t360-g-legend li{display:flex;align-items:center;gap:8px;margin:0;color:#14181F;font:600 14px/1.2 Inter,Arial,sans-serif}
.t360-g-legend i{display:block;width:36px;height:0;border-top:2px solid #4B5563}
.t360-g-legend i.aud{border-top-style:dashed}

/* ===== Batch Z5: Residential "Looking for a business solution?" block (section.t360-related.t360-related-biz) =====
   One composition instead of a 3-column carousel with one card: text + CTA, then the connected-office drawing.
   <1024 stacked (kicker, heading, line, button, drawing); >=1024 two columns, text left, drawing right.
   Scoped to .t360-related-biz so the Cabling related block (3 cards, carousel) is untouched. */
.elementor .t360-related.t360-related-biz .t360-related-wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0;gap:0;padding:0}
.elementor .t360-related-biz .t360-related-wrap > .t360-kicker{order:1;margin:0 0 12px}
.elementor .t360-related-biz .t360-related-wrap > .t360-h2{order:2;margin:0 0 20px}
.elementor .t360-related-biz .t360-related-wrap > .t360-grid-3{order:3}
.elementor .t360-related-biz .t360-related-wrap > .t360-related-art{order:4}
.elementor .t360-related-biz .t360-kicker .elementor-heading-title{font-size:14px;letter-spacing:.12em}
.elementor .t360-related-biz .t360-h2 .elementor-heading-title{font-size:clamp(32px,4.2vw,48px);line-height:1.05;margin:0}
/* the carousel container becomes a plain block holding the one card; leftovers of the swipe track are neutralised */
.elementor .t360-related-biz .t360-related-wrap > .t360-grid-3.t360-carousel{display:block;overflow:visible;grid-template-columns:none;gap:0;width:100%;max-width:none;margin:0;padding:0;scroll-snap-type:none;-webkit-mask-image:none;mask-image:none;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px}
.elementor .t360-related-biz .t360-related-wrap .t360-grid-3 > .t360-card-darkline{display:flex;flex-direction:column;gap:0;background:none;border:0;border-radius:0;padding:0;margin:0;width:auto;max-width:560px;min-width:0;min-height:0;flex:none;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px}
.elementor .t360-related-biz .t360-card-darkline .t360-card-text{display:block}
.elementor .t360-related-biz .t360-card-darkline .t360-card-text p{font-size:16px;line-height:1.55;margin:0}
.elementor .t360-related-biz .t360-card-darkline .elementor-button-wrapper{margin-top:20px}
.elementor .t360-related-biz .t360-card-darkline .elementor-button{padding-inline:0;min-height:44px}
.t360-related-biz .t360-related-art{margin:28px 0 0;min-width:0}
.t360-related-biz .t360-related-art svg.t360-g{display:block;width:100%;height:auto}
.t360-related-biz .t360-related-art .t360-biz-w{display:none}
.t360-related-biz .t360-related-art .t360-biz-c{display:block;max-width:420px;margin:0 auto}
.t360-related-biz svg.t360-g--biz.t360-g--wide .tg{font-size:16px}
@media (min-width:768px){
  .elementor .t360-related.t360-related-biz .t360-related-wrap{padding:40px}
  .t360-related-biz .t360-related-art{margin-top:32px}
  .t360-related-biz .t360-related-art .t360-biz-c{display:none}
  .t360-related-biz .t360-related-art .t360-biz-w{display:block;max-width:640px}
}
@media (min-width:1024px){
  .elementor .t360-related.t360-related-biz .t360-related-wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:48px;align-items:center;grid-template-areas:"k a" "h a" "c a";padding:48px}
  .elementor .t360-related-biz .t360-related-wrap > .t360-kicker{grid-area:k;align-self:end}
  .elementor .t360-related-biz .t360-related-wrap > .t360-h2{grid-area:h}
  .elementor .t360-related-biz .t360-related-wrap > .t360-grid-3{grid-area:c;align-self:start}
  .elementor .t360-related-biz .t360-related-wrap > .t360-related-art{grid-area:a;margin:0;align-self:center}
  .t360-related-biz .t360-related-art .t360-biz-w{display:none}
  .t360-related-biz .t360-related-art .t360-biz-c{display:block;max-width:400px;margin:0 0 0 auto}
}
@media (min-width:1280px){
  .t360-related-biz .t360-related-art .t360-biz-c{display:none}
  .t360-related-biz .t360-related-art .t360-biz-w{display:block;max-width:640px;margin:0 0 0 auto}
}

/* ===== Batch Z8 (2026-11-07): provenance badges removed; map caption >= 14 px rendered (compact maps scale to ~300 px, wide to ~690 px) ===== */
svg.t360-g--map.t360-g--compact .tg{font-size:17px}
svg.t360-g--map.t360-g--wide .tg{font-size:16px}

/* UI pass 1 (V-01): the drawing keeps any descender visible; compact variant text >= 14px rendered (18 user units, max-width 420/400) */
.t360-related-art svg{overflow:visible}
svg.t360-g--biz.t360-g--compact text{font-size:18px}
svg.t360-g--biz.t360-g--compact .tg{font-size:18px}

/* Batch 1 (new pages): SVG hero art + wide/compact switch at 1180. Image-based hero art (Services/Residential/About) is untouched. */
.elementor .t360-dia-c{display:none}
@media (max-width:1179px){.elementor .t360-dia-w{display:none}.elementor .t360-dia-c{display:block}}
.elementor .t360-hero-art--svg .elementor-widget-html,.elementor .t360-hero-art--svg .elementor-widget-container{margin:0;width:100%}
.elementor .t360-hero-art--svg svg.t360-g{display:block;width:100%;height:auto;margin-inline:auto}
.elementor .t360-hero-art--svg svg.t360-g--wide{max-width:640px}
.elementor .t360-hero-art--svg svg.t360-g--compact{max-width:420px}
@media (max-width:1199px){.elementor .t360-hero-host .t360-has-art>.t360-hero-art.t360-hero-art--svg{order:6;margin:8px 0 0;width:100%}}
@media (min-width:1200px){
  .elementor .t360-hero-host .t360-has-art>.t360-hero-art.t360-hero-art--svg{position:relative;left:auto;right:auto;top:auto;bottom:auto;grid-column:2;margin:0;display:flex;justify-content:center;align-items:center;padding:24px 28px 24px 0}
}

/* Batch 2: graphic block inside a section (hub commercial audio); dia-w/dia-c switch at 1180 as for the hero art. */
.elementor .t360-audio-art{width:100%;max-width:680px;margin:40px auto 0;align-self:center}
.elementor .t360-audio-art .elementor-widget-html,.elementor .t360-audio-art .elementor-widget-container{margin:0;width:100%}
.elementor .t360-audio-art svg.t360-g{display:block;width:100%;height:auto;margin-inline:auto}
.elementor .t360-audio-art svg.t360-g--wide{max-width:640px}
.elementor .t360-audio-art svg.t360-g--compact{max-width:420px}
.elementor .t360-audio-art{background:#0D1119;border-radius:24px;padding:28px 24px;box-sizing:border-box}
@media (max-width:600px){.elementor .t360-audio-art{padding:20px 12px;border-radius:20px}}