@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&family=Figtree:wght@400;500;600;700&display=swap');
/* Layout: navy hero with a live tile floor you can "paint" in Swisstrax colours, then light paper bands; the 400mm tile is the visual unit throughout (grids, cards, spec diagram). Single brand look, light page. */
.stx{
  --navy:#071F60; --navy-2:#0d2a7a; --gold:#FFC300; --sky:#6EC5EF;
  --paper:#F5F7FB; --ink:#0f1a33; --muted:#4b5672; --line:#d9dfec; --white:#ffffff;
  --display:"Tilt Warp","Arial Black",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px;
}
.stx{font-family:var(--body)!important;font-size:16px!important;line-height:1.65!important;color:var(--ink)!important}
.stx *{box-sizing:border-box!important}
.stx picture{display:contents}
:where(.stx) picture>img{height:auto}
:where(.stx) picture>source{display:none}
.stx h1,.stx h2,.stx h3{font-family:var(--display)!important;font-weight:400!important;line-height:1.12!important;text-wrap:balance!important;margin:0!important}
.stx p{margin:0!important}
.stx a:not(.stx-btn){color:inherit!important;text-decoration:none!important}
.stx-wrap{max-width:1180px!important;margin:0 auto!important;padding-left:max(16px,env(safe-area-inset-left,0px))!important;padding-right:max(16px,env(safe-area-inset-right,0px))!important}
.stx-band{padding-block:clamp(56px,8vw,104px)!important}
.stx-band.stx-paper{background:var(--paper)!important}
.stx-band.stx-navy{background:var(--navy)!important;color:var(--white)!important}
.stx-eyebrow{font-family:var(--body)!important;font-weight:700!important;font-size:12px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--navy)!important;display:inline-flex!important;align-items:center!important;gap:10px!important}
.stx-eyebrow::before{content:""!important;width:14px!important;height:14px!important;border-radius:3px!important;background:var(--gold)!important;box-shadow:inset 0 0 0 3px rgba(7,31,96,.15)!important}
.stx-navy .stx-eyebrow{color:var(--gold)!important}
.stx-h2{font-size:clamp(28px,3.6vw,44px)!important;color:var(--navy)!important}
.stx-navy .stx-h2{color:var(--white)!important}
.stx-prose{max-width:66ch!important;display:grid!important;gap:16px!important;color:var(--muted)!important}
.stx-prose strong{color:var(--ink)!important}

/* buttons */
.stx-btn{--bg:var(--gold);--fg:var(--navy);display:inline-flex!important;align-items:center!important;gap:10px!important;padding:14px 22px!important;border-radius:10px!important;background:var(--bg)!important;color:var(--fg)!important;font-weight:700!important;text-decoration:none!important;font-size:15px!important;position:relative!important;overflow:hidden!important;transition:transform .2s ease,box-shadow .2s ease!important;border:2px solid var(--bg)!important}
.stx-btn::after{content:""!important;position:absolute!important;inset:0!important;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.22) 10px 12px)!important;transform:translateX(-100%)!important;transition:transform .45s ease!important}
.stx-btn:hover{transform:translateY(-2px)!important;box-shadow:0 10px 24px -10px rgba(7,31,96,.55)!important}
.stx-btn:hover::after{transform:translateX(0)!important}
.stx-btn .stx-arr{transition:transform .2s ease!important}
.stx-btn:hover .stx-arr{transform:translateX(4px)!important}
.stx-btn.stx-ghost{--bg:transparent;--fg:var(--white);border-color:rgba(255,255,255,.55)!important}
.stx-btn.stx-ghost:hover{border-color:var(--gold)!important;--fg:var(--gold)}
.stx-btn.stx-navy{--bg:var(--navy);--fg:var(--gold)}
.stx-btn:focus-visible{outline:3px solid var(--sky)!important;outline-offset:3px!important}

/* photo slots: real CDN image over a ribbed tile fallback */
.stx-ph{position:relative!important;overflow:hidden!important;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 6px,transparent 6px 14px),
  linear-gradient(135deg,var(--navy-2),var(--navy))!important;}
.stx-ph>span{position:absolute!important;inset:auto 14px 12px 14px!important;font-size:12px!important;color:rgba(255,255,255,.75)!important;letter-spacing:.02em!important}
.stx-ph img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;max-width:100%!important;transition:transform .6s ease!important}

/* HERO */
.stx-hero{position:relative!important;background:var(--navy)!important;color:var(--white)!important;overflow:hidden!important}
.stx-hero canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important}
.stx-hero::after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(7,31,96,.96) 0%,rgba(7,31,96,.82) 48%,rgba(7,31,96,.35) 100%)!important;pointer-events:none!important}
.stx-hero .stx-wrap{position:relative!important;z-index:2!important;padding-block:clamp(64px,9vw,120px) clamp(48px,6vw,72px)!important;display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)!important;gap:40px!important;align-items:center!important}
.stx-hero h1{font-size:clamp(32px,4.6vw,58px)!important;color:var(--gold)!important}
.stx-hero .stx-copy{display:grid!important;gap:18px!important;min-width:0!important}
.stx-hero .stx-copy p{color:rgba(255,255,255,.88)!important;max-width:62ch!important}
.stx-hero .stx-ctas{display:flex!important;flex-wrap:wrap!important;gap:12px!important;margin-top:8px!important}
.stx-hint{font-size:12px!important;color:rgba(255,255,255,.55)!important;letter-spacing:.04em!important}
.stx-badge{justify-self:end!important;width:min(100%,280px)!important;aspect-ratio:1/1!important;border-radius:20px!important;background:rgba(255,255,255,.96)!important;display:grid!important;place-items:center!important;position:relative!important;transform:rotate(-3deg)!important;box-shadow:0 30px 60px -25px rgba(0,0,0,.6)!important;transition:transform .35s ease!important}
.stx-badge:hover{transform:rotate(0) scale(1.03)!important}
.stx-badge img{width:82%!important;height:auto!important;max-width:100%!important}
.stx-badge .stx-fb{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;text-align:center!important;padding:24px!important;font-family:var(--display)!important;color:var(--navy)!important;font-size:20px!important;line-height:1.2!important;z-index:-0!important}
.stx-badge img{position:relative!important;z-index:1!important}

.stx-stats{position:relative!important;z-index:2!important;border-top:1px solid rgba(255,255,255,.14)!important;background:rgba(4,20,66,.6)!important;backdrop-filter:blur(4px)!important}
.stx-stats ul{list-style:none!important;margin:0 auto!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.stx-stats li{display:flex!important;align-items:center!important;gap:12px!important;padding-block:20px!important;padding-right:12px!important;font-weight:600!important;font-size:15px!important}
.stx-stats .stx-ic{flex:none!important;width:34px!important;height:34px!important;border-radius:8px!important;background:var(--gold)!important;color:var(--navy)!important;display:grid!important;place-items:center!important;transition:transform .3s ease!important}
.stx-stats li:hover .stx-ic{transform:rotate(90deg)!important}
.stx-stats svg{width:18px!important;height:18px!important}

/* RANGE CARDS */
.stx-range{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
.stx-rcard{position:relative!important;border-radius:var(--r)!important;overflow:hidden!important;min-height:440px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;color:var(--white)!important;isolation:isolate!important;text-decoration:none!important}
.stx-rcard .stx-ph{position:absolute!important;inset:0!important;z-index:-2!important}
.stx-rcard::before{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;background:linear-gradient(180deg,rgba(7,31,96,0) 25%,rgba(7,31,96,.92) 78%)!important;transition:background .3s ease!important}
.stx-rcard .stx-in{padding:26px!important;display:grid!important;gap:12px!important;transform:translateY(14px)!important;transition:transform .35s ease!important}
.stx-rcard h2{font-size:28px!important;color:var(--gold)!important}
.stx-rcard p{color:rgba(255,255,255,.9)!important;font-size:15px!important}
.stx-rcard .stx-tag{position:absolute!important;top:18px!important;left:18px!important;background:var(--gold)!important;color:var(--navy)!important;font-weight:700!important;font-size:12px!important;letter-spacing:.08em!important;text-transform:uppercase!important;padding:6px 10px!important;border-radius:6px!important}
.stx-rcard:hover .stx-in{transform:translateY(0)!important}
.stx-rcard:hover .stx-ph img{transform:scale(1.07)!important}
.stx-rcard .stx-btn{justify-self:start!important}

/* STORY */
.stx-story{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;gap:clamp(28px,5vw,64px)!important;align-items:start!important}
.stx-story .stx-head{display:grid!important;gap:14px!important;margin-bottom:24px!important}
.stx-story .stx-pic{position:sticky!important;top:24px!important;display:grid!important;gap:14px!important}
.stx-story .stx-pic .stx-ph{aspect-ratio:4/5!important;border-radius:var(--r)!important}
.stx-story .stx-pic .stx-ph:hover img{transform:scale(1.04)!important}
.stx-yrs{display:flex!important;gap:12px!important}
.stx-yr{flex:1!important;background:var(--navy)!important;color:var(--white)!important;border-radius:12px!important;padding:16px 18px!important}
.stx-yr b{display:block!important;font-family:var(--display)!important;font-weight:400!important;font-size:30px!important;color:var(--gold)!important;font-variant-numeric:tabular-nums!important;line-height:1!important}
.stx-yr small{font-size:13px!important;color:rgba(255,255,255,.75)!important}

/* WHY */
.stx-why{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;gap:clamp(28px,5vw,64px)!important;align-items:center!important}
.stx-why .stx-prose{color:rgba(255,255,255,.85)!important}
.stx-why .stx-prose strong{color:var(--gold)!important;font-weight:600!important}
.stx-tilefield{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:6px!important;max-width:440px!important;width:100%!important}
.stx-tilefield i{aspect-ratio:1!important;border-radius:6px!important;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 3px,transparent 3px 8px),var(--c,#2a3550)!important;transition:transform .25s ease,filter .25s ease!important}
.stx-tilefield i:hover{transform:translateY(-4px) scale(1.04)!important;filter:brightness(1.15)!important}

/* SPEC */
.stx-spec{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)!important;gap:clamp(28px,5vw,64px)!important;align-items:center!important}
.stx-spec .stx-head{display:grid!important;gap:14px!important}
.stx-diagram{background:var(--white)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;padding:20px!important}
.stx-diagram svg{width:100%!important;height:auto!important;display:block!important}
.stx-sheet{list-style:none!important;margin:0!important;padding:0!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;overflow:hidden!important;background:var(--white)!important}
.stx-sheet li{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr)!important;gap:16px!important;padding:14px 18px!important;border-top:1px solid var(--line)!important;transition:background .2s ease!important}
.stx-sheet li:first-child{border-top:0!important}
.stx-sheet li:hover{background:#fff8dc!important}
.stx-sheet b{color:var(--navy)!important;font-weight:700!important;font-size:14px!important}
.stx-sheet span{font-size:15px!important;font-variant-numeric:tabular-nums!important}

/* TILES WE SUPPLY */
.stx-tiles{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;margin-top:36px!important}
.stx-tcard{background:var(--white)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;padding:18px!important;display:grid!important;grid-template-rows:auto auto 1fr auto!important;gap:12px!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important}
.stx-tcard:hover{transform:translateY(-6px)!important;box-shadow:0 22px 40px -24px rgba(7,31,96,.45)!important;border-color:var(--gold)!important}
.stx-tcard .stx-ph{aspect-ratio:1!important;border-radius:10px!important}
.stx-tcard .stx-ph img{object-fit:contain!important;background:#eef1f7!important}
.stx-tcard:hover .stx-ph img{transform:scale(1.06) rotate(-2deg)!important}
.stx-tcard h3{font-size:22px!important;color:var(--navy)!important}
.stx-tcard p{font-size:14.5px!important;color:var(--muted)!important}
.stx-tcard .stx-btn{justify-self:start!important;padding:11px 16px!important;font-size:14px!important}

/* IN ACTION */
.stx-uses{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;margin-top:36px!important}
.stx-use{position:relative!important;border-radius:var(--r)!important;overflow:hidden!important;min-height:340px!important;display:flex!important;align-items:flex-end!important;color:var(--white)!important;isolation:isolate!important}
.stx-use .stx-ph{position:absolute!important;inset:0!important;z-index:-2!important}
.stx-use::before{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;background:linear-gradient(200deg,rgba(7,31,96,.1) 20%,rgba(7,31,96,.93) 80%)!important}
.stx-use .stx-in{padding:26px!important;display:grid!important;gap:10px!important;max-width:520px!important}
.stx-use h3{font-size:26px!important;color:var(--gold)!important}
.stx-use p{font-size:15px!important;color:rgba(255,255,255,.9)!important}
.stx-use .stx-btn{justify-self:start!important;margin-top:4px!important}
.stx-use:hover .stx-ph img{transform:scale(1.06)!important}
.stx-use .stx-corner{position:absolute!important;top:16px!important;right:16px!important;width:46px!important;height:46px!important;border:2px solid rgba(255,195,0,.8)!important;border-radius:8px!important;background:repeating-linear-gradient(90deg,rgba(255,195,0,.35) 0 3px,transparent 3px 8px)!important;transition:transform .4s ease!important}
.stx-use:hover .stx-corner{transform:rotate(90deg)!important}

/* COLOURS */
.stx-colours{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:clamp(28px,5vw,56px)!important;margin-top:36px!important}
.stx-cblock{display:grid!important;gap:14px!important;align-content:start!important}
.stx-cblock h3{font-size:22px!important;color:var(--navy)!important}
.stx-swatches{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
.stx-sw{display:grid!important;gap:6px!important;font-size:13px!important;font-weight:600!important;color:var(--ink)!important}
.stx-sw i{aspect-ratio:1!important;border-radius:8px!important;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 3px,rgba(0,0,0,.06) 3px 8px),var(--c)!important;box-shadow:inset 0 0 0 1px rgba(7,31,96,.12)!important;transition:transform .25s ease!important}
.stx-sw:hover i{transform:translateY(-4px) rotate(3deg)!important}
.stx-line-label{font-weight:700!important;color:var(--navy)!important;font-size:14px!important;letter-spacing:.04em!important;text-transform:uppercase!important}
.stx-note{font-size:12px!important;color:var(--muted)!important}
.stx-callout{border-left:4px solid var(--sky)!important;background:var(--white)!important;padding:16px 18px!important;border-radius:0 10px 10px 0!important;color:var(--muted)!important}

/* FAQ */
.stx-faq{display:grid!important;gap:12px!important;max-width:860px!important;margin-top:28px!important}
.stx-faq details{background:var(--white)!important;border:1px solid var(--line)!important;border-radius:12px!important;transition:border-color .2s ease!important}
.stx-faq details[open]{border-color:var(--navy)!important}
.stx-faq summary{list-style:none!important;cursor:pointer!important;padding:18px 54px 18px 20px!important;font-weight:700!important;color:var(--navy)!important;position:relative!important}
.stx-faq summary::-webkit-details-marker{display:none!important}
.stx-faq summary::after{content:""!important;position:absolute!important;right:20px!important;top:50%!important;width:18px!important;height:18px!important;margin-top:-9px!important;border-radius:4px!important;background:var(--gold)!important;transition:transform .3s ease!important}
.stx-faq details[open] summary::after{transform:rotate(45deg)!important}
.stx-faq summary:focus-visible{outline:3px solid var(--sky)!important;outline-offset:2px!important;border-radius:12px!important}
.stx-faq .stx-a{padding:0 20px 20px!important;color:var(--muted)!important;display:grid!important;gap:12px!important}

/* CLOSER */
.stx-closer{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;gap:clamp(28px,5vw,56px)!important;align-items:center!important}
.stx-closer .stx-copy{display:grid!important;gap:16px!important}
.stx-closer .stx-copy p{color:rgba(255,255,255,.86)!important;max-width:56ch!important}
.stx-closer h3{font-size:clamp(28px,3.4vw,40px)!important;color:var(--gold)!important}
.stx-phone{font-family:var(--display)!important;font-size:clamp(26px,3vw,34px)!important;color:var(--white)!important;user-select:all!important}
.stx-closer .stx-media{display:grid!important;gap:14px!important}
.stx-closer .stx-media .stx-ph{aspect-ratio:16/9!important;border-radius:var(--r)!important}
.stx-dealer{background:var(--white)!important;border-radius:12px!important;padding:14px!important;display:grid!important;place-items:center!important;min-height:90px!important;position:relative!important}
.stx-dealer img{max-width:70%!important;height:auto!important;position:relative!important;z-index:1!important}
.stx-dealer .stx-fb{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;font-family:var(--display)!important;color:var(--navy)!important;font-size:17px!important}

/* reveal: visible at rest, gentle lift when JS marks them in */
.stx-rv{transition:transform .7s ease,opacity .7s ease!important}
.stx-js .stx-rv.stx-pre{transform:translateY(18px)!important;opacity:.001!important}

@media (max-width:960px){
  .stx-hero .stx-wrap,.stx-story,.stx-why,.stx-spec,.stx-closer,.stx-colours{grid-template-columns:minmax(0,1fr)!important}
  .stx-badge{justify-self:start!important;width:200px!important}
  .stx-range{grid-template-columns:minmax(0,1fr)!important}
  .stx-rcard{min-height:360px!important}
  .stx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stx-stats ul{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stx-story .stx-pic{position:static!important}
}
@media (max-width:560px){
  .stx-tiles,.stx-uses{grid-template-columns:minmax(0,1fr)!important}
  .stx-sheet li{grid-template-columns:minmax(0,1fr)!important;gap:2px!important}
  .stx-swatches{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media (prefers-reduced-motion:reduce){
  .stx *,.stx *::before,.stx *::after{transition:none!important;animation:none!important}
  .stx-js .stx-rv.stx-pre{transform:none!important;opacity:1!important}
}

section.faq-section{background:#F5F7FB!important;padding:72px max(16px,env(safe-area-inset-left,0px))!important;font-family:"Figtree",system-ui,sans-serif!important}
section.faq-section>header,section.faq-section>details{max-width:860px!important;margin-left:auto!important;margin-right:auto!important}
section.faq-section>header h2{font-family:"Tilt Warp","Arial Black",sans-serif!important;font-weight:400!important;color:#071F60!important;font-size:clamp(28px,3.6vw,44px)!important;margin:0 auto 24px!important}
section.faq-section>details{background:#fff!important;border:1px solid #d9dfec!important;border-radius:12px!important;margin-bottom:12px!important;transition:border-color .2s ease!important}
section.faq-section>details[open]{border-color:#071F60!important}
section.faq-section summary{list-style:none!important;cursor:pointer!important;padding:18px 54px 18px 20px!important;font-weight:700!important;color:#071F60!important;position:relative!important}
section.faq-section summary::-webkit-details-marker{display:none}
section.faq-section summary::after{content:""!important;position:absolute!important;right:20px!important;top:50%!important;width:18px!important;height:18px!important;margin-top:-9px!important;border-radius:4px!important;background:#FFC300!important;transition:transform .3s ease!important}
section.faq-section details[open] summary::after{transform:rotate(45deg)!important}
section.faq-section details>div{padding:0 20px 20px!important;color:#4b5672!important;white-space:pre-line!important;line-height:1.65!important}

/* contrast lock: beat site-wide p/li/heading/link colours inside dark panels */
html body .stx .stx-hero p,html body .stx .stx-hero li,html body .stx .stx-hero span,
html body .stx .stx-navy p,html body .stx .stx-navy li,html body .stx .stx-navy span,
html body .stx .stx-rcard p,html body .stx .stx-use p{color:rgba(255,255,255,.9)!important}
html body .stx .stx-hero .stx-hint{color:rgba(255,255,255,.6)!important}
html body .stx .stx-hero .stx-stats li{color:#fff!important}
html body .stx .stx-hero h1,html body .stx .stx-navy h3,html body .stx .stx-rcard h2,html body .stx .stx-use h3,html body .stx .stx-navy .stx-eyebrow{color:#FFC300!important}
html body .stx .stx-navy h2{color:#fff!important}
html body .stx .stx-navy strong{color:#FFC300!important}
html body .stx .stx-navy .stx-phone{color:#fff!important}
html body .stx .stx-ph>span{color:rgba(255,255,255,.75)!important}
html body .stx .stx-badge .stx-fb,html body .stx .stx-dealer .stx-fb{color:#071F60!important}
html body .stx a.stx-btn,html body .stx a.stx-btn:visited,html body .stx span.stx-btn{color:#071F60!important}
html body .stx a.stx-btn.stx-navy,html body .stx a.stx-btn.stx-navy:visited{color:#FFC300!important}
html body .stx a.stx-btn.stx-ghost,html body .stx a.stx-btn.stx-ghost:visited{color:#fff!important}
html body .stx a.stx-btn.stx-ghost:hover{color:#FFC300!important}
html body .stx .stx-btn .stx-arr{color:inherit!important}
html body .stx .stx-hero .stx-eyebrow{color:#FFC300!important}
html body .stx .stx-hero .stx-ic{color:#071F60!important}

/* mobile: get to products and photos fast */
.stx-morebtn{display:none!important}
@media (max-width:640px){
html body .stx .stx-band{padding-top:44px!important;padding-bottom:44px!important}
html body .stx .stx-hero{background:linear-gradient(180deg,rgba(7,31,96,.80),rgba(7,31,96,.94)),url("https://cdn.lennontree.net/cdn/cms/mclaren-in-detailing-bay-swisstrax-20261102-121249-37eafa62.jpg?w=900") center/cover no-repeat,#071F60!important}
html body .stx .stx-hero canvas,html body .stx .stx-hero .stx-hint,html body .stx .stx-hero .stx-badge{display:none!important}
html body .stx .stx-hero::after{display:none!important}
html body .stx .stx-hero .stx-wrap{padding-top:36px!important;padding-bottom:24px!important;gap:0!important}
html body .stx .stx-hero h1{font-size:27px!important}
html body .stx .stx-hero .stx-copy{gap:12px!important}
html body .stx .stx-hero .stx-ctas .stx-btn{flex:1 1 100%!important;justify-content:center!important}
html body .stx .stx-stats ul{display:flex!important;overflow-x:auto!important;gap:8px!important;padding-top:12px!important;padding-bottom:12px!important;scrollbar-width:none!important}
html body .stx .stx-stats ul::-webkit-scrollbar{display:none}
html body .stx .stx-stats li{flex:0 0 auto!important;padding:8px 12px 8px 8px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:999px!important;font-size:13px!important;white-space:nowrap!important}
html body .stx .stx-stats .stx-ic{width:24px!important;height:24px!important;border-radius:999px!important}
html body .stx .stx-range,html body .stx .stx-tiles,html body .stx .stx-uses{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:84%!important;grid-template-columns:none!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:12px!important;padding-bottom:10px!important;-webkit-overflow-scrolling:touch}
html body .stx .stx-range>*,html body .stx .stx-tiles>*,html body .stx .stx-uses>*{scroll-snap-align:start!important}
html body .stx .stx-rcard{min-height:330px!important}
html body .stx .stx-rcard .stx-in{transform:none!important;padding:20px!important}
html body .stx .stx-use{min-height:320px!important}
html body .stx .stx-tiles,html body .stx .stx-uses{margin-top:24px!important}
html body .stx .stx-story .stx-pic{order:-1!important}
html body .stx .stx-story .stx-pic .stx-ph{aspect-ratio:4/3!important}
html body .stx .stx-tilefield{max-width:260px!important}
html body .stx .stx-collapsed [data-stx-extra]{display:none!important}
html body .stx .stx-morebtn{display:inline-flex!important;justify-self:start!important;align-self:flex-start!important;background:none!important;border:0!important;padding:4px 0!important;font:700 15px/1.4 "Figtree",system-ui,sans-serif!important;color:#071F60!important;text-decoration:underline!important;text-underline-offset:4px!important;text-decoration-color:#FFC300!important;cursor:pointer!important}
html body .stx .stx-hero .stx-morebtn,html body .stx .stx-navy .stx-morebtn{color:#FFC300!important}
}

/* photo reel */
html body .stx .stx-reel{overflow:hidden!important;margin-top:44px!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
html body .stx .stx-track{display:flex!important;width:max-content!important;gap:14px!important;animation:stxReel 60s linear infinite!important}
html body .stx .stx-dup{display:flex!important;gap:14px!important}
html body .stx .stx-reel:hover .stx-track{animation-play-state:paused!important}
html body .stx .stx-shot{margin:0!important;flex:0 0 auto!important;width:clamp(260px,30vw,420px)!important;aspect-ratio:4/3!important;border-radius:14px!important;overflow:hidden!important;background:#0d2a7a!important;position:relative!important}
html body .stx .stx-shot img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;max-width:100%!important;transition:transform .6s ease,filter .6s ease!important;filter:saturate(1.05)!important}
html body .stx .stx-shot:hover img{transform:scale(1.08)!important;filter:saturate(1.2)!important}
html body .stx .stx-shot::after{content:""!important;position:absolute!important;inset:auto 0 0 0!important;height:5px!important;background:#FFC300!important;transform:scaleX(0)!important;transform-origin:left!important;transition:transform .35s ease!important}
html body .stx .stx-shot:hover::after{transform:scaleX(1)!important}
@keyframes stxReel{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
/* floor design renders */
html body .stx .stx-renders{display:grid!important;gap:14px!important;margin-top:40px!important}
html body .stx .stx-rgrid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px!important}
html body .stx .stx-render{margin:0!important;aspect-ratio:1!important;border-radius:12px!important;overflow:hidden!important;background:#fff!important;border:1px solid #d9dfec!important;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important}
html body .stx .stx-render img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;max-width:100%!important}
html body .stx .stx-render:hover{transform:translateY(-5px) rotate(-1.5deg)!important;box-shadow:0 18px 30px -18px rgba(7,31,96,.5)!important;border-color:#FFC300!important}
/* closer photo */
html body .stx .stx-closer-bg{background:linear-gradient(90deg,rgba(7,31,96,.97) 0%,rgba(7,31,96,.9) 55%,rgba(7,31,96,.72) 100%),url("https://cdn.galatent.co.uk/cdn/cms/car-showroom-swisstrax-20251107-155255-b2b76916.jpg") center/cover no-repeat,#071F60!important}
@media (max-width:960px){html body .stx .stx-rgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:640px){
html body .stx .stx-reel{margin-top:28px!important}
html body .stx .stx-shot{width:72vw!important}
html body .stx .stx-track{animation-duration:45s!important}
}
@media (prefers-reduced-motion:reduce){
html body .stx .stx-track{animation:none!important}
html body .stx .stx-reel{overflow-x:auto!important;-webkit-mask-image:none;mask-image:none}
html body .stx .stx-dup{display:none!important}
}

/* hero photo */
html body .stx .stx-heroshot{position:relative!important;margin:0!important;border-radius:18px!important;overflow:hidden!important;aspect-ratio:4/3!important;box-shadow:0 34px 60px -28px rgba(0,0,0,.7)!important;background:#0d2a7a!important;border:1px solid rgba(255,255,255,.18)!important}
html body .stx .stx-heroshot img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;max-width:100%!important;transition:transform 1.2s ease!important}
html body .stx .stx-heroshot:hover img{transform:scale(1.06)!important}
html body .stx .stx-heroshot::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:12px!important;background:repeating-linear-gradient(90deg,#FFC300 0 8px,#e0ab00 8px 12px)!important}
@media (max-width:960px){html body .stx .stx-heroshot{max-width:560px!important}}
@media (max-width:640px){html body .stx .stx-heroshot{display:none!important}}

/* bigger hero photo with tile-lay reveal and slow drift */
@media (min-width:961px){
html body .stx .stx-hero .stx-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;gap:56px!important;max-width:1320px!important}
html body .stx .stx-heroshot{aspect-ratio:auto!important;min-height:520px!important;height:100%!important}
}
html body .stx .stx-heroshot img{animation:stxDrift 22s ease-in-out 1.6s infinite alternate!important;transform-origin:60% 50%!important}
html body .stx .stx-heroshot:hover img{animation-play-state:paused!important}
@keyframes stxDrift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2.5%,-1.5%)}}
html body .stx .stx-lay{position:absolute!important;inset:0!important;display:grid!important;grid-template-columns:repeat(6,1fr)!important;grid-template-rows:repeat(5,1fr)!important;gap:3px!important;pointer-events:none!important;z-index:2!important}
html body .stx .stx-lay i{display:block!important;background:repeating-linear-gradient(90deg,#0d2a7a 0 5px,#123596 5px 9px)!important;border:1px solid rgba(255,195,0,.35)!important;border-radius:3px!important;animation:stxLay .55s cubic-bezier(.5,0,.2,1) var(--d) both!important}
@keyframes stxLay{0%{transform:none;opacity:1}60%{transform:translateY(-6px) scale(.92);opacity:1;border-color:#FFC300}100%{transform:translateY(-14px) scale(.6);opacity:0}}
@media (prefers-reduced-motion:reduce){html body .stx .stx-lay{display:none!important}html body .stx .stx-heroshot img{animation:none!important}}

/* tight stats strip */
html body .stx .stx-hero .stx-stats{padding:0!important;margin:0!important}
html body .stx .stx-hero .stx-stats ul.stx-wrap{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:10px 36px!important;margin:0 auto!important;padding-top:16px!important;padding-bottom:16px!important;list-style:none!important;grid-template-columns:none!important;max-width:1180px!important}
html body .stx .stx-hero .stx-stats ul.stx-wrap>li{display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;padding:0!important;min-height:0!important;line-height:1.3!important;font-size:15px!important;list-style:none!important;border:0!important;flex:0 0 auto!important;white-space:nowrap!important}
html body .stx .stx-hero .stx-stats ul.stx-wrap>li::before,html body .stx .stx-hero .stx-stats ul.stx-wrap>li::marker{content:none!important;display:none!important}
html body .stx .stx-hero .stx-stats .stx-ic{width:28px!important;height:28px!important;margin:0!important}
@media (max-width:640px){
html body .stx .stx-hero .stx-stats ul.stx-wrap{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto!important;gap:8px!important;padding-top:12px!important;padding-bottom:12px!important}
html body .stx .stx-hero .stx-stats ul.stx-wrap>li{padding:7px 12px 7px 7px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:999px!important;font-size:13px!important}
html body .stx .stx-hero .stx-stats .stx-ic{width:22px!important;height:22px!important;border-radius:999px!important}
}

/* mobile v2: real hero photo, less text */
@media (max-width:640px){
html body .stx .stx-hero{background:#071F60!important}
html body .stx .stx-hero .stx-heroshot{display:block!important;order:-1!important;aspect-ratio:4/3!important;min-height:0!important;height:auto!important;max-width:none!important;margin:0 0 20px!important;border-radius:14px!important}
html body .stx .stx-hero .stx-wrap{display:flex!important;flex-direction:column!important;padding-top:20px!important}
html body .stx .stx-hero .stx-eyebrow{display:none!important}
html body .stx .stx-hero h1{font-size:25px!important;line-height:1.15!important}
html body .stx .stx-tcard p,html body .stx .stx-use p{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
html body .stx .stx-sheet li{padding:10px 14px!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;gap:10px!important}
html body .stx .stx-sheet b{font-size:13px!important}
html body .stx .stx-sheet span{font-size:13.5px!important}
html body .stx .stx-diagram{display:none!important}
}

/* illustrated Ribtrax tiles */
html body .stx .stx-sw i.stx-real{background:none!important;box-shadow:none!important;border-radius:0!important;display:block!important;filter:drop-shadow(0 5px 8px rgba(7,31,96,.16))!important}
html body .stx .stx-sw i.stx-real svg,html body .stx .stx-tilefield i svg{display:block!important;width:100%!important;height:100%!important;overflow:visible!important}
html body .stx .stx-tilefield{gap:4px!important}
html body .stx .stx-tilefield i{background:none!important;border-radius:0!important}

/* hero reveal uses illustrated tiles */
html body .stx .stx-lay i{background:none!important;border:0!important;border-radius:0!important;overflow:hidden!important}
html body .stx .stx-lay i svg{display:block!important;width:100%!important;height:100%!important}
@keyframes stxLay{0%{transform:none;opacity:1}55%{transform:translateY(-6px) scale(.94);opacity:1}100%{transform:translateY(-16px) scale(.6) rotate(-6deg);opacity:0}}

/* in-action corner badge: mini Ribtrax tile */
html body .stx .stx-use .stx-corner{border:0!important;background:none!important;border-radius:0!important;width:50px!important;height:50px!important;color:#FFC300!important;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))!important;transition:transform .5s ease!important}
html body .stx .stx-use .stx-corner svg{display:block!important;width:100%!important;height:100%!important;overflow:visible!important}
html body .stx .stx-use:hover .stx-corner{transform:rotate(90deg)!important}

/* photo viewer: tap reel photos and use cards to expand */
html body .stx .stx-shot,html body .stx .stx-use{cursor:zoom-in!important}
html body .stx .stx-use .stx-btn{cursor:pointer!important}
html body .stx .stx-shot:focus-visible,html body .stx .stx-use:focus-visible{outline:3px solid #6EC5EF!important;outline-offset:3px!important}
html body .stx .stx-zoom{position:absolute!important;top:12px!important;right:12px!important;z-index:2!important;width:38px!important;height:38px!important;border-radius:50%!important;background:rgba(7,31,96,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC300' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/20px no-repeat!important;opacity:0!important;transform:scale(.85)!important;transition:opacity .25s ease,transform .25s ease!important;pointer-events:none!important}
html body .stx .stx-use .stx-zoom{right:auto!important;left:16px!important;top:16px!important}
html body .stx .stx-shot:hover .stx-zoom,html body .stx .stx-shot:focus-visible .stx-zoom,html body .stx .stx-use:hover .stx-zoom,html body .stx .stx-use:focus-visible .stx-zoom{opacity:1!important;transform:none!important}
@media (hover:none){html body .stx .stx-zoom{opacity:.9!important;transform:none!important;width:32px!important;height:32px!important;background-size:17px!important}}
html body .stx-lb{position:fixed!important;inset:0!important;z-index:2147483000!important;background:rgba(4,14,44,.95)!important;display:none!important;align-items:center!important;justify-content:center!important;padding:56px 72px!important;font-family:"Figtree",system-ui,sans-serif!important}
html body .stx-lb.stx-lb-open{display:flex!important;animation:stxLbIn .25s ease both}
@keyframes stxLbIn{from{opacity:0}to{opacity:1}}
html body .stx-lb-f{margin:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:14px!important;max-width:min(1500px,100%)!important;max-height:100%!important}
html body .stx-lb-f img{display:block!important;max-width:100%!important;max-height:calc(100vh - 150px)!important;width:auto!important;height:auto!important;object-fit:contain!important;border-radius:12px!important;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)!important;background:#0d2a7a!important;animation:stxLbImg .3s ease both}
@keyframes stxLbImg{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
html body .stx-lb-f figcaption{font-family:"Tilt Warp","Arial Black",sans-serif!important;font-size:22px!important;color:#FFC300!important;text-align:center!important;line-height:1.2!important}
html body .stx-lb button{position:absolute!important;width:52px!important;height:52px!important;border-radius:50%!important;border:2px solid rgba(255,195,0,.7)!important;background:rgba(7,31,96,.85)!important;color:#FFC300!important;font:400 30px/1 system-ui,sans-serif!important;display:grid!important;place-items:center!important;cursor:pointer!important;padding:0!important;transition:background .2s ease,transform .2s ease!important}
html body .stx-lb button:hover{background:#FFC300!important;color:#071F60!important;transform:scale(1.06)!important}
html body .stx-lb button:focus-visible{outline:3px solid #6EC5EF!important;outline-offset:3px!important}
html body .stx-lb .stx-lb-x{top:max(14px,env(safe-area-inset-top,0px))!important;right:max(14px,env(safe-area-inset-right,0px))!important}
html body .stx-lb .stx-lb-p{left:max(12px,env(safe-area-inset-left,0px))!important;top:50%!important;margin-top:-26px!important}
html body .stx-lb .stx-lb-n{right:max(12px,env(safe-area-inset-right,0px))!important;top:50%!important;margin-top:-26px!important}
html body .stx-lb .stx-lb-c{position:absolute!important;top:max(26px,env(safe-area-inset-top,0px))!important;left:max(20px,env(safe-area-inset-left,0px))!important;color:rgba(255,255,255,.75)!important;font-size:14px!important;font-weight:600!important;letter-spacing:.06em!important;font-variant-numeric:tabular-nums!important}
@media (max-width:640px){
html body .stx-lb{padding:64px 12px 92px!important}
html body .stx-lb-f img{max-height:calc(100vh - 210px)!important}
html body .stx-lb .stx-lb-p,html body .stx-lb .stx-lb-n{top:auto!important;bottom:max(18px,env(safe-area-inset-bottom,0px))!important;margin-top:0!important}
html body .stx-lb .stx-lb-p{left:calc(50% - 64px)!important}
html body .stx-lb .stx-lb-n{right:calc(50% - 64px)!important}
html body .stx-lb-f figcaption{font-size:18px!important}
}
@media (prefers-reduced-motion:reduce){html body .stx-lb.stx-lb-open,html body .stx-lb-f img{animation:none!important}}

/* lightbox buttons: centred drawn icons */
html body .stx-lb button svg{display:block!important;width:22px!important;height:22px!important;margin:0!important;fill:none!important;stroke:currentColor!important;stroke-width:2.6!important;stroke-linecap:round!important;stroke-linejoin:round!important;pointer-events:none!important}
html body .stx-lb button{line-height:0!important;font-size:0!important}