/* ==========================================================================
   Components — Storyteller Overland design system (shared by all pages)
   (measured from storytelleroverland.com: Grand Bohemian / Beast Mode /
   GXV Wild pages), filled with Intercept content.
   ========================================================================== */

:root {
  --st-orange: #df5828;
  --st-orange-dark: #c44a1f;
  --st-cream: #e6dfd2;
  --st-ink: #1b1b1b;
  --st-head: var(--font-head);
  --st-body: var(--font-body);
  --st-pad: clamp(80px, 9vw, 140px);

  /* torn-edge heights (natural image ratios at 100vw) */
  --edge-top: 4.2vw;       /* edges/floor-top.png    2880×120 */
  --edge-bottom: 7.7vw;    /* edges/floor-bottom.png 2880×221 */
  --edge-specs: 9.7vw;     /* edges/specs-top.png    1920×186 */
}

/* ---------- Base section + container ---------- */
.st-section {
  position: relative;
  padding: var(--st-pad) 0;
  color: #fff;
  background-color: #1d1712;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.st-container {
  width: min(1200px, 100% - 2 * var(--gutter));
  margin: 0 auto;
}

.st-container--narrow { width: min(860px, 100% - 2 * var(--gutter)); }

/* ---------- Torn edges (alpha masks cut from Storyteller's backgrounds) ---------- */
.edge-top {
  margin-top: calc(-1 * var(--edge-top));
  padding-top: calc(var(--st-pad) + var(--edge-top));
  -webkit-mask:
    url("../images/storyteller/edges/floor-top.png") top / 100% var(--edge-top) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--edge-top) - 1px) / 100% 100% no-repeat;
          mask:
    url("../images/storyteller/edges/floor-top.png") top / 100% var(--edge-top) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--edge-top) - 1px) / 100% 100% no-repeat;
}

.edge-top-specs {
  margin-top: calc(-1 * var(--edge-specs));
  padding-top: calc(var(--st-pad) + var(--edge-specs));
  -webkit-mask:
    url("../images/storyteller/edges/specs-top.png") top / 100% var(--edge-specs) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--edge-specs) - 1px) / 100% 100% no-repeat;
          mask:
    url("../images/storyteller/edges/specs-top.png") top / 100% var(--edge-specs) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--edge-specs) - 1px) / 100% 100% no-repeat;
}

.edge-both {
  z-index: 2;
  margin-top: calc(-1 * var(--edge-top));
  padding-top: calc(var(--st-pad) + var(--edge-top));
  padding-bottom: calc(var(--st-pad) + var(--edge-bottom));
  -webkit-mask:
    url("../images/storyteller/edges/floor-top.png") top / 100% var(--edge-top) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--edge-top) - 1px) / 100% calc(100% - var(--edge-top) - var(--edge-bottom) + 2px) no-repeat,
    url("../images/storyteller/edges/floor-bottom.png") bottom / 100% var(--edge-bottom) no-repeat;
          mask:
    url("../images/storyteller/edges/floor-top.png") top / 100% var(--edge-top) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--edge-top) - 1px) / 100% calc(100% - var(--edge-top) - var(--edge-bottom) + 2px) no-repeat,
    url("../images/storyteller/edges/floor-bottom.png") bottom / 100% var(--edge-bottom) no-repeat;
}

/* The section after a torn bottom slides underneath it */
.edge-both + .st-section {
  z-index: 1;
  margin-top: calc(-1 * var(--edge-bottom));
  padding-top: calc(var(--st-pad) + var(--edge-bottom));
}

/* ---------- Type ---------- */
.st-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--st-orange);
}

.st-h2 {
  margin: 0 0 18px;
  font-family: var(--st-head);
  font-weight: 900;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1;
  letter-spacing: 0.81px;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

.st-h2--dark { color: var(--st-ink); }
.st-h2--left { text-align: left; }

.st-h3 {
  margin: 0 0 20px;
  font-family: var(--st-head);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.st-lead {
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--st-body);
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: 0.6px;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
}

.st-lead--dark { color: #2a2622; }

.st-note {
  margin: 12px 0 0;
  font-size: 13px;
  font-style: italic;
  color: #5d554c;
}

.st-fine {
  margin: 22px 0 0;
  font-size: 11px;
  line-height: 1.55;
  font-style: italic;
  color: #5d554c;
}

/* ---------- Buttons ---------- */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 40px;
  border: 0;
  border-radius: 18px;
  background: var(--st-orange);
  color: #fff;
  font-family: var(--st-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease, opacity 1.25s ease;
}

.st-btn:hover { background: var(--st-orange-dark); }

.st-btn--sm {
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 12px;
}

.st-btn--ghost {
  background: transparent;
  color: var(--st-ink);
  box-shadow: inset 0 0 0 1.5px var(--st-ink);
}

.st-btn--ghost:hover { background: var(--st-ink); color: #fff; }

.st-link {
  font-family: var(--st-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--st-orange);
}

.st-link:hover { text-decoration: underline; }
.st-link--muted { color: #8a8076; }

.st-tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--st-orange);
  color: #fff;
  font-family: var(--st-head);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.st-tag--muted { background: #6b635a; }

/* ---------- Icons ---------- */
.st-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--st-orange);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   1. Intro
   ========================================================================== */
.st-intro {
  z-index: 1;
  background-color: #0a0e17;
  background-position: center bottom;
}

.st-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 15, 0.55) 0%, rgba(5, 8, 15, 0.1) 60%, rgba(5, 8, 15, 0.5) 100%);
  pointer-events: none;
}

.st-intro .st-container { position: relative; }

/* Feature grid (orange icon + orange title + text) */
.st-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 80px;
  margin-top: 64px;
}

.st-features--3 { grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.st-features--4 { grid-template-columns: repeat(4, 1fr); gap: 40px 36px; }

.st-feature h3 {
  margin: 12px 0 8px;
  font-family: var(--st-body);
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  color: var(--st-orange);
}

.st-feature p {
  margin: 0;
  font-family: var(--st-body);
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.9);
}

.st-features--dark .st-feature p { color: #2e2924; }

/* ==========================================================================
   2. Products
   ========================================================================== */
.st-products { background-color: #b8844a; }

.st-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.st-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 250, 242, 0.92);
  color: var(--st-ink);
}

.st-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #2a211a;
}

.st-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.st-card:hover .st-card__img img { transform: scale(1.04); }

.st-card__img .st-tag { position: absolute; top: 14px; left: 14px; }

.st-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 24px 24px 28px;
}

.st-card__body p { margin: 0; font-size: 15px; line-height: 1.6; color: #3a332c; }
.st-card__body .st-link { margin-top: auto; padding-top: 8px; }

.st-card__kicker {
  font-family: var(--font-label);
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--st-orange) !important;
}

.st-card h3 {
  margin: 0;
  font-family: var(--st-head);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.15;
  text-transform: uppercase;
}

.st-card--dark { background: rgba(20, 16, 12, 0.55); color: #fff; }
.st-card--dark .st-card__body p { color: rgba(255, 255, 255, 0.82); }
.st-card--dark h3 { font-size: 16px; }

/* ==========================================================================
   3. Kit selector ("color options")
   ========================================================================== */
.st-kits { background-color: #15110d; }

.kit-swatches {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin: 44px 0 40px;
}

.kit-swatch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--st-body);
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  transition: color 0.2s;
}

.kit-swatch__dot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  font-family: var(--st-head);
  font-weight: 900;
  font-size: 11px;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.kit-swatch:hover .kit-swatch__dot { border-color: #fff; }

.kit-swatch[aria-selected="true"] { color: var(--st-orange); }

.kit-swatch[aria-selected="true"] .kit-swatch__dot {
  border-color: var(--st-orange);
  background: var(--st-orange);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(223, 88, 40, 0.25);
}

.kit-stage {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.kit-stage__media {
  position: relative;
  aspect-ratio: 1200 / 1112;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.kit-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.6s ease, transform 0.8s ease;
}

.kit-img.is-active { opacity: 1; transform: scale(1.001); }

.kit-info h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  font-family: var(--st-head);
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 30px);
  text-transform: uppercase;
}

.kit-price { margin: 12px 0 16px; font-family: var(--st-head); }
.kit-price strong { font-size: 30px; font-weight: 900; color: var(--st-orange); }
.kit-price s { margin-left: 10px; font-size: 16px; color: #8d8177; }

.kit-info > p { margin: 0 0 18px; line-height: 1.7; color: rgba(255, 255, 255, 0.88); }

.kit-info dl { margin: 0 0 28px; }

.kit-info dt {
  margin-top: 14px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--st-orange);
}

.kit-info dd { margin: 4px 0 0; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   Bands (landscape images with their own torn edges)
   ========================================================================== */
.st-band {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: calc(100vw * 726 / 1920);   /* image ratio, but grows with content */
  margin: -4.2vw 0 -2.4vw;
  padding: 7vw 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

.st-band--tall { min-height: calc(100vw * 946 / 1920); margin: -4.2vw 0 -3.5vw; padding: 8vw 0 12vw; }

.st-band .st-lead { color: #fff; }

/* Round orange icon stats / badges */
.st-stats,
.st-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px 80px;
  margin-top: 56px;
}

.st-stat,
.st-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--st-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--st-ink);
}

.st-badge { color: #fff; font-weight: 600; }

.st-stat__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--st-orange);
  box-shadow: 0 0 0 5px rgba(223, 88, 40, 0.18);
}

.st-stat__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   5. Sand sections (performance rows)
   ========================================================================== */
.st-sand { color: var(--st-ink); background-color: #e2d3b6; }

.st-rows { display: grid; gap: 72px; margin-top: 56px; }

.st-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.st-row--flip .st-row__text { order: 2; }

.st-row__text h3 {
  margin: 12px 0 8px;
  font-family: var(--st-body);
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  color: var(--st-orange);
}

.st-row__text p { margin: 0; font-size: 16px; line-height: 1.7; color: #2e2924; }

.st-row__img { aspect-ratio: 3 / 2; overflow: hidden; background: #cdbb9a; }
.st-row__img img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   6. Feature video — full width, never cropped
   ========================================================================== */
.feature-video {
  position: relative;
  z-index: 3;
  background: #000;
}

.feature-video__el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 808;   /* the file's own ratio (3840×1616 master) */
  object-fit: contain;
  background: #000;
}

.feature-video__sound {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: var(--st-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 0.2s;
}

.feature-video__sound:hover { background: var(--st-orange); }

.feature-video__sound svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-video__sound .wave { display: none; }
.feature-video__sound[aria-pressed="true"] .wave { display: inline; }
.feature-video__sound[aria-pressed="true"] .mute { display: none; }

/* ==========================================================================
   7. Technology + comparison table
   ========================================================================== */
.st-tech .st-features { margin-top: 40px; }

.st-compare { margin-top: 80px; }

.st-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 252, 246, 0.6);
}

.st-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14px;
}

.st-table th,
.st-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  vertical-align: top;
}

.st-table thead th {
  font-family: var(--st-head);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(27, 27, 27, 0.9);
  color: #fff;
}

.st-table tbody th { font-weight: 600; white-space: nowrap; }

.st-table .is-us {
  background: rgba(223, 88, 40, 0.12);
  font-weight: 700;
  color: #b33f16;
}

.st-table thead .is-us { background: var(--st-orange); color: #fff; }

/* ==========================================================================
   8. Install tabs ("floor plan highlights")
   ========================================================================== */
.st-install { background-color: #2c211b; }

.st-tabs {
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 40px auto 48px;
  padding: 0;
  border-radius: 18px;
  background: #fff;
  overflow-x: auto;
}

.st-tabs button {
  padding: 16px 30px;
  border-radius: 18px;
  font-family: var(--st-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000;
  transition: background-color 0.25s, color 0.25s;
}

.st-tabs button[aria-selected="true"] { background: var(--st-orange); color: #fff; }

.st-steps { display: grid; }

.st-step {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}

.st-step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.st-step__text h3 {
  margin: 0 0 12px;
  font-family: var(--st-body);
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  color: var(--st-orange);
}

.st-step__text p { margin: 0 0 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.88); }

.st-check {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
}

.st-check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background: url("../images/storyteller/bg/icon-check-mark-new.svg") center / contain no-repeat;
}

.st-step__img { aspect-ratio: 4 / 3; overflow: hidden; background: #1a1411; }
.st-step__img img { width: 100%; height: 100%; object-fit: cover; }

.st-tools { margin-top: 72px; }

.st-tools ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-tools li {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.st-tools li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: url("../images/storyteller/bg/icon-check-mark-new.svg") center / contain no-repeat;
}

.st-tools strong { display: block; margin-bottom: 2px; font-size: 15px; color: #fff; }

/* ==========================================================================
   9. Fitment masonry
   ========================================================================== */
.st-masonry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 250px 250px 300px;
  grid-template-areas:
    "a a a a a a a b b b b b"
    "a a a a a a a c c c c c"
    "d d d d e e e e f f f f";
  gap: 0;
  margin: 56px 0 72px;
}

.st-masonry img { width: 100%; height: 100%; object-fit: cover; background: #cdbb9a; }
.m-a { grid-area: a; } .m-b { grid-area: b; } .m-c { grid-area: c; }
.m-d { grid-area: d; } .m-e { grid-area: e; } .m-f { grid-area: f; }

/* ==========================================================================
   10. Specs
   ========================================================================== */
.st-specs { color: var(--st-ink); background-color: #e8dcc3; }

.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 48px;
  align-items: start;
}

.specs-card img { width: 100%; max-width: 520px; mix-blend-mode: multiply; }

.specs-card__title {
  margin: 18px 0 12px;
  font-family: var(--st-head);
  font-weight: 900;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1;
  text-transform: uppercase;
}

.specs-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.specs-card__meta li { display: inline-flex; align-items: center; gap: 8px; }

.specs-card__meta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--st-orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.specs-card__price { margin: 0 0 24px; font-size: 15px; }
.specs-card__price span { margin: 0 6px; color: #a1958a; }

.specs-card__btns { display: flex; flex-wrap: wrap; gap: 14px; }

.st-accordion details {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.st-accordion summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.st-accordion summary::-webkit-details-marker { display: none; }

.st-accordion summary::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("../images/storyteller/bg/icon-arrow-bottom.svg") center / contain no-repeat;
  transition: transform 0.3s ease;
}

.st-accordion details[open] summary::before { transform: rotate(180deg); }

.st-accordion details > :not(summary) {
  margin: 0 0 18px 30px;
  font-size: 15px;
  line-height: 1.65;
  color: #3a332c;
}

.spec-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 24px;
}

.spec-list dt { font-weight: 600; color: var(--st-ink); }
.spec-list dd { margin: 0; }

/* ==========================================================================
   12. Dimensions
   ========================================================================== */
.st-dims { background-color: #4a2716; }

.dims { margin-top: 48px; }

.dims__svg { display: block; width: 100%; max-width: 1000px; margin: 0 auto; overflow: visible; }

.dims__line path { fill: none; stroke: var(--st-cream); stroke-width: 1.5; }

.dims__label {
  fill: #fff;
  font-family: var(--st-head);
  font-weight: 900;
  font-size: 22px;
  text-anchor: middle;
}

.dims__sub {
  fill: rgba(255, 255, 255, 0.65);
  font-family: var(--st-body);
  font-size: 14px;
  letter-spacing: 1px;
  text-anchor: middle;
  text-transform: uppercase;
}

.dims__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 56px auto 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.dims__facts strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--st-head);
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: 0;
  color: #fff;
}

/* ==========================================================================
   13 / 14. Blog + FAQ
   ========================================================================== */
.st-blog { background-color: #6b4e3a; }

.st-faq .st-accordion { margin-top: 40px; }

.faq-cat {
  margin: 36px 0 4px;
  font-family: var(--st-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--st-orange);
}

.faq-cat:first-child { margin-top: 0; }
.st-accordion--faq summary { font-weight: 500; }
.st-accordion--faq a { color: var(--st-orange); }

/* ==========================================================================
   15. Contact — "Drop us a line"
   ========================================================================== */
.st-contact {
  color: var(--st-ink);
  background: linear-gradient(180deg, #d9d9d9 0%, #eeeeee 40%, #f2f2f2 100%);
}

.contact-info {
  display: flex;
  justify-content: center;
  gap: 40px 140px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  text-align: center;
}

.contact-info svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--st-orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-info p {
  margin: 8px 0 0;
  font-family: var(--st-head);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.35;
}

.contact-info a:hover { color: var(--st-orange); }

.contact-card {
  max-width: 1150px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 64px);
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.contact-card__lead { margin: 0 0 36px; text-align: center; }

.st-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.st-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.st-field--full { grid-column: 1 / -1; }
.st-field i { font-style: normal; color: #d12f2f; }
.st-field small { font-size: 11px; color: #6b7c8c; }

.st-field input,
.st-field select,
.st-field textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 15px;
  border: 1px solid #959494;
  border-radius: 18px;
  background: #f5f8fa;
  font: 16px var(--st-body);
  color: #33475b;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.st-field textarea { resize: vertical; min-height: 110px; }

.st-field select {
  appearance: none;
  background: #f5f8fa url("../images/storyteller/bg/icon-arrow-bottom.svg") right 16px center / 12px no-repeat;
}

.st-field input:focus,
.st-field select:focus,
.st-field textarea:focus {
  outline: none;
  border-color: var(--st-orange);
  box-shadow: 0 0 0 3px rgba(223, 88, 40, 0.18);
}

.st-field.is-invalid input,
.st-field.is-invalid select,
.st-field.is-invalid textarea { border-color: #d12f2f; }

.st-form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}

.st-form__status { margin: 0; font-size: 14px; }
.st-form__status.is-ok { color: #2e7d32; }
.st-form__status.is-error { color: #d12f2f; }

/* ==========================================================================
   16. Dealer map
   ========================================================================== */
.st-dealer {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  padding: 80px var(--gutter);
  overflow: hidden;
  background: linear-gradient(226deg, #303030 0%, #121212 100%);
  text-align: center;
  color: #fff;
}

.st-dealer__map {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1000px, 130%);
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

.st-dealer__inner { position: relative; max-width: 520px; }
.st-dealer__inner p { margin: 0 0 26px; font-size: 16px; line-height: 1.6; text-shadow: 0 2px 12px #000; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .st-features--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .st-features,
  .st-features--3 { grid-template-columns: 1fr; gap: 40px; }
  .st-cards { grid-template-columns: 1fr 1fr; }
  .kit-stage,
  .st-row,
  .st-step,
  .specs-grid { grid-template-columns: 1fr; gap: 32px; }
  .st-row--flip .st-row__text { order: 0; }
  .st-tools ul { grid-template-columns: 1fr 1fr; }
  .st-masonry {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 280px 200px 200px 200px;
    grid-template-areas: "a a" "b c" "d e" "f f";
  }
  .dims__facts { grid-template-columns: 1fr 1fr; }
  .st-band,
  .st-band--tall { min-height: 460px; padding: 90px 0; background-size: cover; background-position: center; }
}

@media (max-width: 767px) {
  .st-cards { grid-template-columns: 1fr; }
  .st-features--4 { grid-template-columns: 1fr; }
  .st-form { grid-template-columns: 1fr; }
  .st-tabs { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; }
  .st-tabs button { padding: 14px 4px; font-size: 10px; }
  .feature-video__sound { right: 12px; bottom: 12px; padding: 8px 12px; }
  .contact-info { gap: 32px; }
}

@media (max-width: 480px) {
  .st-tools ul { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Waving US flag — the flag SVG cut into slices that ripple in sequence
   (slices are generated by components.js from data-slices)
   ========================================================================== */
.flag-wave {
  --n: 14;
  position: relative;
  display: flex;
  aspect-ratio: 1.9;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

.flag-wave i {
  --a: calc(var(--i) / var(--n) * 5%);          /* ripple grows away from the pole */
  flex: 1;
  margin-right: -0.5px;                         /* no hairline gaps between slices */
  height: 100%;
  background: url("../images/usa/flag.svg") no-repeat;
  background-size: calc(var(--n) * 100%) 100%;
  background-position: calc(var(--i) / (var(--n) - 1) * 100%) 0;
  animation: flag-wave 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -2.4s / var(--n) * 2.2);
}

@keyframes flag-wave {
  0%, 100% { transform: translateY(calc(var(--a) * -1)); filter: brightness(1.08); }
  50%      { transform: translateY(var(--a));            filter: brightness(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .flag-wave i { animation: none; }
}

/* ==========================================================================
   Icons — Storyteller Overland's icon set (assets/icons), drawn as masks so
   the colour follows `color` (orange on light, white inside the orange discs)
   ========================================================================== */
.ico {
  display: inline-block;
  width: 30px;
  height: 30px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
  color: var(--st-orange);
  vertical-align: middle;
}

.st-stat__icon .ico { width: 28px; height: 28px; color: #fff; }
.specs-card__meta .ico { width: 18px; height: 18px; }

.ico--badge { -webkit-mask-image: url("../icons/icon-badge.svg"); mask-image: url("../icons/icon-badge.svg"); }
.ico--barometer { -webkit-mask-image: url("../icons/icon-barometer.svg"); mask-image: url("../icons/icon-barometer.svg"); }
.ico--battery { -webkit-mask-image: url("../icons/icon-battery.svg"); mask-image: url("../icons/icon-battery.svg"); }
.ico--bed { -webkit-mask-image: url("../icons/icon-bed.svg"); mask-image: url("../icons/icon-bed.svg"); }
.ico--bed-alt { -webkit-mask-image: url("../icons/icon-bed-alt.svg"); mask-image: url("../icons/icon-bed-alt.svg"); }
.ico--calculation { -webkit-mask-image: url("../icons/icon-calculation.svg"); mask-image: url("../icons/icon-calculation.svg"); }
.ico--compass { -webkit-mask-image: url("../icons/icon-compass.svg"); mask-image: url("../icons/icon-compass.svg"); }
.ico--cosmicshift { -webkit-mask-image: url("../icons/icon-cosmicshift.svg"); mask-image: url("../icons/icon-cosmicshift.svg"); }
.ico--diamond { -webkit-mask-image: url("../icons/icon-diamond.svg"); mask-image: url("../icons/icon-diamond.svg"); }
.ico--energy-system { -webkit-mask-image: url("../icons/icon-energy-system.svg"); mask-image: url("../icons/icon-energy-system.svg"); }
.ico--engine { -webkit-mask-image: url("../icons/icon-engine.svg"); mask-image: url("../icons/icon-engine.svg"); }
.ico--equipment { -webkit-mask-image: url("../icons/icon-equipment.svg"); mask-image: url("../icons/icon-equipment.svg"); }
.ico--foldable-bathroom { -webkit-mask-image: url("../icons/icon-foldable-bathroom.svg"); mask-image: url("../icons/icon-foldable-bathroom.svg"); }
.ico--four-season-white { -webkit-mask-image: url("../icons/icon-four-season-white.svg"); mask-image: url("../icons/icon-four-season-white.svg"); }
.ico--full-bathroom { -webkit-mask-image: url("../icons/icon-full-bathroom.svg"); mask-image: url("../icons/icon-full-bathroom.svg"); }
.ico--gear { -webkit-mask-image: url("../icons/icon-gear.svg"); mask-image: url("../icons/icon-gear.svg"); }
.ico--inverters { -webkit-mask-image: url("../icons/icon-inverters.svg"); mask-image: url("../icons/icon-inverters.svg"); }
.ico--lighting { -webkit-mask-image: url("../icons/icon-lighting.svg"); mask-image: url("../icons/icon-lighting.svg"); }
.ico--miles-range { -webkit-mask-image: url("../icons/icon-miles-range.svg"); mask-image: url("../icons/icon-miles-range.svg"); }
.ico--miles-range-white { -webkit-mask-image: url("../icons/icon-miles-range-white.svg"); mask-image: url("../icons/icon-miles-range-white.svg"); }
.ico--moon_sun { -webkit-mask-image: url("../icons/icon-moon_sun.svg"); mask-image: url("../icons/icon-moon_sun.svg"); }
.ico--seat { -webkit-mask-image: url("../icons/icon-seat.svg"); mask-image: url("../icons/icon-seat.svg"); }
.ico--seatbelt { -webkit-mask-image: url("../icons/icon-seatbelt.svg"); mask-image: url("../icons/icon-seatbelt.svg"); }
.ico--shield-check { -webkit-mask-image: url("../icons/icon-shield-check.svg"); mask-image: url("../icons/icon-shield-check.svg"); }
.ico--shower { -webkit-mask-image: url("../icons/icon-shower.svg"); mask-image: url("../icons/icon-shower.svg"); }
.ico--smart-suspension { -webkit-mask-image: url("../icons/icon-smart-suspension.svg"); mask-image: url("../icons/icon-smart-suspension.svg"); }
.ico--solar { -webkit-mask-image: url("../icons/icon-solar.svg"); mask-image: url("../icons/icon-solar.svg"); }
.ico--spa { -webkit-mask-image: url("../icons/icon-spa.svg"); mask-image: url("../icons/icon-spa.svg"); }
.ico--suspension { -webkit-mask-image: url("../icons/icon-suspension.svg"); mask-image: url("../icons/icon-suspension.svg"); }
.ico--tank { -webkit-mask-image: url("../icons/icon-tank.svg"); mask-image: url("../icons/icon-tank.svg"); }
.ico--tire { -webkit-mask-image: url("../icons/icon-tire.svg"); mask-image: url("../icons/icon-tire.svg"); }
.ico--tow { -webkit-mask-image: url("../icons/icon-tow.svg"); mask-image: url("../icons/icon-tow.svg"); }
.ico--us-map { -webkit-mask-image: url("../icons/icon-us-map.svg"); mask-image: url("../icons/icon-us-map.svg"); }
.ico--water { -webkit-mask-image: url("../icons/icon-water.svg"); mask-image: url("../icons/icon-water.svg"); }
.ico--winch { -webkit-mask-image: url("../icons/icon-winch.svg"); mask-image: url("../icons/icon-winch.svg"); }

/* ==========================================================================
   CTA cards — Storyteller GXV HILT "Looking for… / Seeking…" cards:
   full-bleed photo, dark fade from the left, Termina title, orange button
   ========================================================================== */
.st-cta-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}

.st-cta-cards--3 { grid-template-columns: repeat(3, 1fr); }

.st-cta-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: #fff;
  background: #2a211a;
}

.st-cta-cards:not(.st-cta-cards--3) .st-cta-card { aspect-ratio: 16 / 10; }

.st-cta-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.st-cta-card:hover img { transform: scale(1.04); }

.st-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 70%);
}

.st-cta-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px;
}

.st-cta-card__kicker {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--st-orange);
}

.st-cta-card__title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: 0.81px;
  text-transform: uppercase;
}

.st-cta-card__title--sm { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.2; }

.st-cta-card__text { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.st-cta-card .st-btn { margin-top: 6px; }

@media (max-width: 991px) {
  .st-cta-cards--3 { grid-template-columns: 1fr; }
  .st-cta-card { aspect-ratio: 4 / 3; }
}

@media (max-width: 767px) {
  .st-cta-cards { grid-template-columns: 1fr; }
  .st-cta-card { aspect-ratio: 4 / 4.2; }
  .st-cta-card__body { padding: 22px; }
}

/* ==========================================================================
   VS Competitors — sepia photo, thin orange frame, gradient brand word,
   table with orange ✓ / ✕ tiles (layout from the reference screenshot)
   ========================================================================== */
.vs {
  position: relative;
  padding: clamp(60px, 7vw, 110px) var(--gutter) clamp(90px, 9vw, 140px);
  background: #3a3027 center / cover no-repeat;
  color: #fff;
  text-align: center;
}

.vs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 16, 12, 0.35) 0%, rgba(20, 16, 12, 0.55) 45%, rgba(20, 16, 12, 0.7) 100%);
  pointer-events: none;
}

.vs__frame {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(16px, 4vw, 48px) 36px clamp(16px, 30%, 380px);
  border: 1px solid #df5828;
}

.vs__title {
  margin: 0 0 14px;
  font-family: "Montserrat", var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
}

.vs__brand {
  font-style: italic;
  background: linear-gradient(90deg, #df5828 0%, #f08a4b 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding-right: 0.08em;
}

.vs__sub { margin: 0 0 28px; font-size: 15px; color: rgba(255, 255, 255, 0.9); }

.vs__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.vs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.vs__table th,
.vs__table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  vertical-align: middle;
}

.vs__table thead th {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}

.vs__table thead th small { font-size: 12px; font-weight: 700; }
.vs__table th[scope="row"],
.vs__table thead th:first-child { text-align: left; font-weight: 700; white-space: nowrap; }

.vs__table td,
.vs__table thead th + th { border-left: 1px solid rgba(255, 255, 255, 0.55); text-align: center; }

.vs__mark {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto 3px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ef7a45, #d9531f);
  font-size: 10px;
  font-weight: 900;
  line-height: 16px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.vs__mark--no { background: linear-gradient(180deg, #e0603a, #b8401b); }

.vs__val { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.92); }
.vs__note { margin: 16px 0 0; font-size: 12px; font-style: italic; color: rgba(255, 255, 255, 0.7); }

.vs__btn {
  position: relative;
  display: inline-block;
  margin-top: 36px;
  padding: 13px 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, #e2663a, #c9472a);
  font-family: "Montserrat", var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  transition: filter 0.2s;
}

.vs__btn:hover { filter: brightness(1.1); }

@media (max-width: 991px) {
  .vs { background-position: 20% center; }
  .vs__frame { padding: 40px 16px 28px; }
  .vs__table { min-width: 560px; }
}

/* ==========================================================================
   Contact + dealer split — Storyteller homepage (measured at 1440px):
   left 50% light-grey gradient, right 50% charcoal gradient + dotted US map
   ========================================================================== */
.st-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 1000px;
}

.st-split__left {
  background: linear-gradient(17deg, #d9d9d9 0%, #f3f3f3 100%);
  color: #000;
}

.st-split__right {
  position: relative;
  overflow: hidden;
  background: linear-gradient(226deg, #303030 0%, #121212 100%);
  color: #fff;
}

.st-split__inner {
  width: min(432px, 100%);
  margin-left: 20%;                 /* 144px of 720 */
  padding: 110px 0 96px;
}

.st-split__inner--right {
  position: relative;
  z-index: 2;
  width: min(576px, 100%);
  margin-left: 10%;                 /* 72px of 720 */
}

.st-split__title {
  margin: 0 0 28px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1;
  letter-spacing: 0.81px;
  text-transform: uppercase;
}

.st-split__text {
  max-width: 461px;
  margin: 0 0 40px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.6px;
}

.st-split__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  border: 0;
  border-radius: 16px;
  background: var(--st-orange);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.st-split__btn:hover { background: var(--st-orange-dark); }

.st-split__map {
  position: absolute;
  left: 0;
  right: -6%;
  bottom: 12%;
  width: 106%;
  max-width: none;
  pointer-events: none;
}

/* HubSpot-style form inside the left half */
.st-form--split {
  width: min(398px, 100%);
  margin-left: 21px;
  gap: 18px 30px;
}

.st-form--split .st-field span { font-size: 13px; }
.st-form--split .st-field i { color: #ff0000; }
.st-form--split .st-form__foot { margin-top: 18px; }

@media (max-width: 991px) {
  .st-split { grid-template-columns: 1fr; min-height: 0; }
  .st-split__inner,
  .st-split__inner--right { margin: 0 auto; width: auto; padding: 72px var(--gutter); }
  .st-split__right { min-height: 620px; }
  .st-split__map { bottom: 0; width: 120%; left: -10%; }
  .st-form--split { margin-left: 0; width: 100%; }
  .st-split__text { font-size: 18px; line-height: 27px; }
}

/* Photo subject sits on the left, table on the right (as in the reference) */
.vs { background-position: left center; }
#compare.vs .vs__frame { padding-left: clamp(16px, 26%, 330px); }
.page-home #compare.vs .vs__frame { padding-left: clamp(16px, 22%, 270px); }
.page-home .vs__table th,
.page-home .vs__table td { padding: 9px 6px; }

/* ==========================================================================
   Contact split — dark left half (no light panels)
   ========================================================================== */
.st-split__left {
  background: #1b1612 url("../images/storyteller/bg/GXV-Hilt-Exterior-BG.avif") center / cover;
  color: #f1ebd4;
}

.st-split__left .st-split__text { color: rgba(241, 235, 212, 0.82); }
.st-form--split .st-field span { color: rgba(241, 235, 212, 0.9); }
.st-form--split .st-field i { color: #ff7a45; }

.st-split__left .st-field input,
.st-split__left .st-field textarea {
  border-color: rgba(241, 235, 212, 0.28);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.st-split__left .st-field input:focus,
.st-split__left .st-field textarea:focus { border-color: var(--st-orange); background: rgba(0, 0, 0, 0.5); }
.st-split__left .st-form__status.is-ok { color: #8fd17b; }
.st-split__left .st-form__status.is-error { color: #ff8a7a; }

/* Titan Shield icon set (stroke icons, used as masks) */
.ico--ts-chat { -webkit-mask-image: url("../icons/ts-chat.svg"); mask-image: url("../icons/ts-chat.svg"); }
.ico--ts-clock { -webkit-mask-image: url("../icons/ts-clock.svg"); mask-image: url("../icons/ts-clock.svg"); }
.ico--ts-dollar { -webkit-mask-image: url("../icons/ts-dollar.svg"); mask-image: url("../icons/ts-dollar.svg"); }
.ico--ts-drill { -webkit-mask-image: url("../icons/ts-drill.svg"); mask-image: url("../icons/ts-drill.svg"); }
.ico--ts-drop { -webkit-mask-image: url("../icons/ts-drop.svg"); mask-image: url("../icons/ts-drop.svg"); }
.ico--ts-feather { -webkit-mask-image: url("../icons/ts-feather.svg"); mask-image: url("../icons/ts-feather.svg"); }
.ico--ts-fit { -webkit-mask-image: url("../icons/ts-fit.svg"); mask-image: url("../icons/ts-fit.svg"); }
.ico--ts-gauge { -webkit-mask-image: url("../icons/ts-gauge.svg"); mask-image: url("../icons/ts-gauge.svg"); }
.ico--ts-impact { -webkit-mask-image: url("../icons/ts-impact.svg"); mask-image: url("../icons/ts-impact.svg"); }
.ico--ts-layers { -webkit-mask-image: url("../icons/ts-layers.svg"); mask-image: url("../icons/ts-layers.svg"); }
.ico--ts-notch { -webkit-mask-image: url("../icons/ts-notch.svg"); mask-image: url("../icons/ts-notch.svg"); }
.ico--ts-recycle { -webkit-mask-image: url("../icons/ts-recycle.svg"); mask-image: url("../icons/ts-recycle.svg"); }
.ico--ts-return { -webkit-mask-image: url("../icons/ts-return.svg"); mask-image: url("../icons/ts-return.svg"); }
.ico--ts-screw { -webkit-mask-image: url("../icons/ts-screw.svg"); mask-image: url("../icons/ts-screw.svg"); }
.ico--ts-shield { -webkit-mask-image: url("../icons/ts-shield.svg"); mask-image: url("../icons/ts-shield.svg"); }
.ico--ts-star { -webkit-mask-image: url("../icons/ts-star.svg"); mask-image: url("../icons/ts-star.svg"); }
.ico--ts-thermo { -webkit-mask-image: url("../icons/ts-thermo.svg"); mask-image: url("../icons/ts-thermo.svg"); }
.ico--ts-truck { -webkit-mask-image: url("../icons/ts-truck.svg"); mask-image: url("../icons/ts-truck.svg"); }
.ico--ts-weight { -webkit-mask-image: url("../icons/ts-weight.svg"); mask-image: url("../icons/ts-weight.svg"); }
.ico--ts-wrench { -webkit-mask-image: url("../icons/ts-wrench.svg"); mask-image: url("../icons/ts-wrench.svg"); }