/* Kinaxis page tweaks. */

/* ---------- "Three services": full width at 100%, sized to the screen height instead of scaled down ---------- */
@media (min-width: 1024px) {
  #services > .mx-auto { max-width: 1720px; }                                         /* same width as the other sections */
  #services h2.t-display { max-width: none; }                                        /* one line where it fits */
  #services .ks2-life { margin: clamp(14px, 2.6svh, 36px) 0 clamp(10px, 1.8svh, 22px); }
  /* The films take the height the rest of the section leaves (about 430px of heading, timeline and card text), never
     wider than ~1.9:1 or taller than 400px. They redraw to fill their box ("cover"): a short box crops a little top
     and bottom, it never stretches. */
  #services .ks2-thumb { aspect-ratio: auto; min-height: 0; overflow: hidden;
    height: clamp(110px, calc(100svh - var(--dsc-chrome, 150px) - 430px), min(400px, 15vw)); }
  /* number and title side by side, the rest below; "See the steps" sits at the bottom of every card */
  #services .ks2-card-body { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 14px; }
  #services .ks2-n { grid-row: 1; align-self: center; }
  #services .ks2-name { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
  #services .ks2-head, #services .ks2-tags, #services .ks2-see { grid-column: 1 / -1; }
  #services .ks2-head { margin-top: clamp(6px, 1.2svh, 12px); }
  #services .ks2-see { align-self: end; }
}
/* short laptop screens (~1366x768): a little tighter still */
@media (min-width: 1024px) and (max-height: 700px) {
  #services .ks2-thumb { height: clamp(96px, calc(100svh - var(--dsc-chrome, 150px) - 400px), min(400px, 15vw)); }
  #services .ks2-life { margin: 10px 0 8px; }
  #services .ks2-card-body { padding-top: 12px; padding-bottom: 12px; }
  #services .ks2-tags { margin-top: 8px; }
  #services .ks2-see { padding-top: 8px; }
}

/* ---------- "Client stories": the "How the plan connects" diagram set the panel's height (it grew with the width);
   size it by the screen height instead, so the whole section fits at 100%. The SVG keeps its proportions, centred. ---------- */
@media (min-width: 1024px) {
  #kinaxis-cases svg.cs-flow { width: 100%; height: clamp(200px, 31svh, 404px); }
}

/* ---------- "Authorized Training Partner": each offer opens to show its points (one open at a time) ---------- */
.kx-offer { display: block; padding: 0; }
.kx-offer-btn { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: 14px; }
.kx-offer-btn:focus-visible { outline: 2px solid #34BDE8; outline-offset: 2px; }
.kx-offer[data-open="1"] { border-color: #ea7532b3; }

.kx-offer-chev { width: 16px; height: 16px; flex: none; color: var(--color-haze); transition: transform .3s ease; }
.kx-offer[data-open="1"] .kx-offer-chev { transform: rotate(180deg); }

/* open/close: the row grows from 0 to the height of its points */
.kx-offer-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.kx-offer[data-open="1"] .kx-offer-panel { grid-template-rows: 1fr; }
.kx-offer-points { min-height: 0; overflow: hidden; margin: 0; padding: 0 16px 0 62px; list-style: none; }   /* 62px: lines up with the title */
.kx-offer-points li { position: relative; margin-bottom: 12px; padding-left: 16px; font-size: .9375rem; line-height: 1.45; }
.kx-offer-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #EA7532; }

@media (prefers-reduced-motion: reduce) { .kx-offer-panel, .kx-offer-chev { transition: none; } }

/* "Inside each service" popup: each open step shows three one-line things we do (check marks) and what you get (a
   tinted line with an accent bar); its one-line promise is the caption on the film. Content lives in the bundle (O.chapters[].steps). */
.ks2-dlg .ks2-step-text { color: var(--color-paper); font-size: 1rem; line-height: 1.5; padding-bottom: 12px; }
.ks2-points { list-style: none; margin: 2px 0 10px; padding: 0; display: grid; gap: 6px; }
.ks2-points li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.45; color: var(--color-mist); }
.ks2-points svg { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; color: #EA7532;
  background: color-mix(in srgb, #EA7532 14%, transparent); box-sizing: border-box; }
.ks2-outcome { margin: 0 0 10px; padding: 7px 12px 8px 14px; display: grid; gap: 2px; border-radius: 12px; position: relative; overflow: hidden;
  background: linear-gradient(110deg, color-mix(in srgb, #EA7532 13%, transparent), color-mix(in srgb, #EA7532 3%, transparent) 70%); }
.ks2-outcome::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(#f5b134, #EA7532); }
.ks2-outcome b { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #c25a1d; }
:root[data-theme=dark] .ks2-outcome b { color: #f5a067; }
.ks2-outcome span { font-size: .9375rem; line-height: 1.4; font-weight: 600; color: var(--color-paper); }
/* The popup keeps one height while you step through it. Implementation has six steps: six titles (42px) plus the
   tallest open step (155px) come to 407px, taller than the film, so the popup grew and shrank (and, being centred,
   moved) while one step closed and the next opened. The list keeps room for that, on every tab. */
/* Services popup on desktop: it fills the screen. Fixed height, so it never resizes when a step opens (no stutter).
   --ks-t is the steps' text size (from the screen's width and height); the steps column is sized from it, just wide enough
   for the longest line in any tab, so the text fills its column and nothing shifts between tabs. The film takes the rest. */
@media (min-width: 1024px) {
  .ks2-dlg { width: min(1880px, calc(100vw - 24px)); height: calc(100svh - 24px); max-height: none; overflow: hidden; border-radius: 24px; }
  .ks2-dlg-box { height: 100%; display: flex; flex-direction: column; padding: clamp(18px, 2.6svh, 32px) clamp(22px, 2.2vw, 40px) clamp(20px, 2.8svh, 36px); }
  .ks2-dlg .ks2-tab { font-size: clamp(.9375rem, .6rem + .5vw, 1.125rem); }
  .ks2-dlg .ks2-inside { --ks-t: clamp(16px, calc(.5vw + .85svh + 4px), 24px); flex: 1; min-height: 0; margin-top: clamp(16px, 2.4svh, 30px); align-items: stretch;
    grid-template-columns: minmax(0, 1fr) min(calc(var(--ks-t) * 24.3 + 46px), 38vw); gap: clamp(26px, 2.4vw, 46px); }
  .ks2-dlg .ks2-player { aspect-ratio: auto; height: 100%; min-height: 0; }
  .ks2-dlg .ks2-cap { padding: 64px clamp(22px, 2.2vw, 40px) clamp(18px, 2.6svh, 32px); }
  .ks2-dlg .ks2-cap-t { max-width: 34ch; font-size: clamp(1.125rem, .5rem + 1.15vw, 1.875rem); line-height: 1.28; }
  .ks2-dlg .ks2-steps { align-self: center; max-height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .ks2-dlg .ks2-step-head { padding: calc(var(--ks-t) * .3) 0; }
  .ks2-dlg .ks2-step-name { font-size: calc(var(--ks-t) * 1.2); }
  .ks2-dlg .ks2-dot { width: calc(var(--ks-t) * 1.75); height: calc(var(--ks-t) * 1.75); font-size: calc(var(--ks-t) * .72); }
  .ks2-dlg .ks2-steps::before { left: calc(var(--ks-t) * .875 - .5px); top: calc(var(--ks-t) * .9); bottom: calc(var(--ks-t) * .9); }
  .ks2-dlg .ks2-step-body { padding-left: calc(var(--ks-t) * 1.75 + 14px); }
  .ks2-dlg .ks2-points li, .ks2-dlg .ks2-outcome span { font-size: var(--ks-t); }
  .ks2-dlg .ks2-outcome b { font-size: calc(var(--ks-t) * .7); }
  .ks2-dlg .ks2-points { gap: calc(var(--ks-t) * .45); margin-bottom: calc(var(--ks-t) * .7); }
  .ks2-dlg .ks2-outcome { padding: calc(var(--ks-t) * .5) 14px calc(var(--ks-t) * .55) 16px; }
}

/* Services popup: Autoplay is off; each step plays its part of the film and holds. The button turns it on and off. */
.ks2-auto { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(8, 17, 40, .55); color: #eef2f8; font: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s ease, border-color .25s ease; }
.ks2-auto:hover { background: rgba(8, 17, 40, .8); }
.ks2-auto[aria-pressed="true"] { border-color: rgba(234, 117, 50, .7); background: rgba(234, 117, 50, .9); color: #fff; }
.ks2-auto svg { width: 12px; height: 12px; }
.ks2-auto:focus { outline: none; }
.ks2-auto:focus-visible { outline: 2px solid #34BDE8; outline-offset: 3px; }

/* Client stories: the right side is a deck of story cards (one per story: its plan as an animated flow, then "Read the story").
   One story: two faint cards fanned behind it give the deck. More stories: the next ones sit behind; swipe or the dots move through them. */
.cs-deckpanel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: clamp(28px, 4.4svh, 52px) clamp(24px, 3vw, 56px) clamp(22px, 3.6svh, 44px);
  background: radial-gradient(80% 70% at 60% 40%, rgba(234, 117, 50, .10), transparent 70%), radial-gradient(70% 60% at 30% 80%, rgba(52, 189, 232, .08), transparent 70%); }
.cs-deck { position: relative; display: grid; width: min(100%, 620px, calc((100svh - 330px) * 1.45)); touch-action: pan-y; user-select: none; }
.cs-deck[data-count="1"]::before, .cs-deck[data-count="1"]::after { content: ""; grid-area: 1 / 1; border-radius: 20px; border: 1px solid rgba(238, 242, 248, .10);
  background: linear-gradient(160deg, rgba(30, 50, 98, .55), rgba(14, 27, 58, .55)); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.cs-deck[data-count="1"]::before { transform: translate(18px, -16px) rotate(3.2deg) scale(.97); opacity: .55; }
.cs-deck[data-count="1"]::after { transform: translate(34px, -30px) rotate(6.4deg) scale(.94); opacity: .3; z-index: -1; }
.cs-deck:hover::before { transform: translate(22px, -20px) rotate(4.2deg) scale(.97); }
.cs-deck:hover::after { transform: translate(42px, -36px) rotate(8deg) scale(.94); }
.cs-card { grid-area: 1 / 1; position: relative; z-index: 2; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(238, 242, 248, .14); background: linear-gradient(160deg, #182c5c, #0f1d3e);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .65s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, box-shadow .4s ease; }
.cs-card[data-pos="0"]:hover { transform: translateY(-4px); box-shadow: 0 44px 80px -34px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .09); }
.cs-card[data-pos="1"] { z-index: 1; transform: translate(18px, -16px) rotate(3.2deg) scale(.96); opacity: .6; pointer-events: none; }
.cs-card[data-pos="2"], .cs-card[data-pos="3"] { z-index: 0; transform: translate(34px, -30px) rotate(6.4deg) scale(.92); opacity: .3; pointer-events: none; }
.cs-card[data-pos="-1"] { z-index: 3; transform: translateX(-115%) rotate(-8deg); opacity: 0; pointer-events: none; }
/* the card: the story's plan as a small animated flow (no film here: "Watch the story" opens it in a popup), then its name */
.cs-card-flow { position: relative; padding: 16px 18px 6px; border-bottom: 1px solid rgba(238, 242, 248, .08);
  background: radial-gradient(60% 70% at 50% 50%, rgba(234, 117, 50, .14), transparent 70%),
    linear-gradient(rgba(238, 242, 248, .04) 1px, transparent 1px) 0 0 / 100% 26px, linear-gradient(90deg, rgba(238, 242, 248, .04) 1px, transparent 1px) 0 0 / 26px 100%; }
.cs-card-label { margin: 0 0 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-haze); }
.cs-card-flow .cs-flow { max-height: none; }
.cs-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px 16px; }
.cs-card-name { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--color-paper); }
.cs-card-sector { margin: 2px 0 0; font-size: .8125rem; line-height: 1.35; color: var(--color-haze); }
.cs-card-read { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(234, 117, 50, .55);
  background: rgba(234, 117, 50, .12); color: #f5a067; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease; }
.cs-card-read:hover, .cs-card-read:focus-visible { background: #EA7532; border-color: #EA7532; color: #fff; outline: none; }
.cs-card-read svg { width: 14px; height: 14px; }
.cs-deck-dots { display: flex; gap: 8px; }
.cs-deck-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(238, 242, 248, .25); cursor: pointer; transition: width .35s ease, background .35s ease; }
.cs-deck-dots button[aria-current="true"] { width: 24px; background: #EA7532; }
@media (prefers-reduced-motion: reduce) { .cs-card, .cs-deck::before, .cs-deck::after { transition: none; } }

/* ---------- Client stories, polished (Apple-like): glass surfaces, light that follows the cursor, things that respond ---------- */
/* the stage: deeper glass, a hairline of light along the top edge */
#kinaxis-cases .cs-stage { border-radius: 26px; border-color: rgba(238, 242, 248, .12);
  background: linear-gradient(135deg, rgba(20, 36, 78, .92) 0%, rgba(13, 26, 58, .92) 50%, rgba(28, 24, 52, .92) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 50px 100px -50px rgba(0, 0, 0, .9); }
#kinaxis-cases .cs-stage::before { content: ""; position: absolute; inset: 0 12% auto; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); }
/* headline: a soft white-to-silver fill */
#kinaxis-cases .cs-stage-title { background: linear-gradient(180deg, #ffffff 30%, #b9c6e0); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* impact tags: lift, glow and a light that follows the cursor (--mx/--my from cases-polish.js) */
#kinaxis-cases .cs-impact-card { position: relative; overflow: hidden; cursor: default; border-color: rgba(234, 117, 50, .22); border-left-color: #EA7532;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease, border-color .35s ease; }
#kinaxis-cases .cs-impact-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 160, 103, .22), transparent 65%); }
#kinaxis-cases .cs-impact-card:hover { transform: translateY(-5px) scale(1.025); border-color: rgba(245, 160, 103, .6);
  box-shadow: 0 22px 44px -22px rgba(234, 117, 50, .55), 0 0 0 1px rgba(245, 160, 103, .15); }
#kinaxis-cases .cs-impact-card:hover::before { opacity: 1; }
#kinaxis-cases .cs-impact-card p:first-child { transition: color .3s ease; }
#kinaxis-cases .cs-impact-card:hover p:first-child { color: #fff; }

/* Watch the story: a sheen sweeps across on hover, the play mark nudges */
#kinaxis-cases .cs-stage .btn-primary { position: relative; overflow: hidden; transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease; }
#kinaxis-cases .cs-stage .btn-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); }
#kinaxis-cases .cs-stage .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(234, 117, 50, .8); }
#kinaxis-cases .cs-stage .btn-primary:hover::after { transform: translateX(120%) skewX(-18deg); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
#kinaxis-cases .cs-stage .btn-primary svg { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
#kinaxis-cases .cs-stage .btn-primary:hover svg { transform: translateX(3px) scale(1.15); }

/* the story card: tilts toward the cursor, with a spotlight (--rx/--ry/--mx/--my from cases-polish.js) */
#kinaxis-cases .cs-deck { perspective: 1200px; }
#kinaxis-cases .cs-card[data-pos="0"] { transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); }
#kinaxis-cases .cs-card[data-pos="0"]:hover { transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-6px);
  transition: transform .18s ease-out, box-shadow .4s ease;
  box-shadow: 0 60px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(245, 160, 103, .18), inset 0 1px 0 rgba(255, 255, 255, .1); }
#kinaxis-cases .cs-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .09), transparent 60%); }
#kinaxis-cases .cs-card:hover::after { opacity: 1; }

/* the plan flow: each tag pops when hovered, and the line it feeds lights up with it. The tag's inner group (.cs-pop, no
   transform attribute of its own) grows from the side its line joins: inputs from their right edge, outputs from their left,
   so a tag never pulls away from its line. The glow sits on the pill. */
#kinaxis-cases .cs-node, #kinaxis-cases .cs-hub { cursor: pointer; }
#kinaxis-cases .cs-pop { transform-box: fill-box; transform-origin: right center; transition: scale .45s cubic-bezier(.34, 1.4, .64, 1); }
#kinaxis-cases .cs-node-out > .cs-pop { transform-origin: left center; }
#kinaxis-cases .cs-hub > .cs-pop { transform-origin: center; }
#kinaxis-cases .cs-node[data-hot="1"] > .cs-pop { scale: 1.08; }
#kinaxis-cases .cs-hub:hover > .cs-pop { scale: 1.04; }
#kinaxis-cases .cs-node-box { transition: stroke .3s ease, fill .3s ease, filter .35s ease; }
#kinaxis-cases .cs-node[data-hot="1"] .cs-node-box { filter: drop-shadow(0 6px 14px rgba(234, 117, 50, .5)); }
#kinaxis-cases .cs-node-out[data-hot="1"] .cs-node-box { filter: drop-shadow(0 6px 14px rgba(52, 189, 232, .5)); }
#kinaxis-cases .cs-node-dot { transition: r .3s ease; }
#kinaxis-cases .cs-node[data-hot="1"] .cs-node-dot { r: 5.5px; }
#kinaxis-cases .cs-node-text { transition: fill .3s ease; }
#kinaxis-cases .cs-node[data-hot="1"] .cs-node-text { fill: #fff; }
#kinaxis-cases .cs-line[data-hot="1"] .cs-line-flow { filter: drop-shadow(0 0 4px rgba(245, 160, 103, .9)); }
#kinaxis-cases .cs-line-out[data-hot="1"] .cs-line-flow { filter: drop-shadow(0 0 4px rgba(52, 189, 232, .9)); }

/* Read the story: the arrow travels */
#kinaxis-cases .cs-card-read svg { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
#kinaxis-cases .cs-card-read:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  #kinaxis-cases .cs-impact-card, #kinaxis-cases .cs-pop, #kinaxis-cases .cs-stage .btn-primary { transition: none; }
  #kinaxis-cases .cs-impact-card:hover, #kinaxis-cases .cs-card[data-pos="0"], #kinaxis-cases .cs-card[data-pos="0"]:hover { transform: none; }
  #kinaxis-cases .cs-node[data-hot="1"] > .cs-pop, #kinaxis-cases .cs-hub:hover > .cs-pop { scale: none; }
}

/* the story's industry (e.g. Semiconductor equipment): the topic of the story, so it is a bold glowing chip with a live dot
   and a slow shimmer through its letters */
#kinaxis-cases .cs-swap > div:first-child > p.t-label:first-child > span {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 13px; border-radius: 999px;
  font-size: .8125rem; font-weight: 800; letter-spacing: .16em;
  border: 1px solid rgba(245, 160, 103, .55);
  background: linear-gradient(135deg, rgba(234, 117, 50, .26), rgba(234, 117, 50, .08));
  box-shadow: 0 0 0 4px rgba(234, 117, 50, .07), 0 10px 28px -12px rgba(234, 117, 50, .75), inset 0 1px 0 rgba(255, 255, 255, .14);
  color: transparent; -webkit-background-clip: padding-box, text; background-clip: padding-box, text;
  background-image: linear-gradient(135deg, rgba(234, 117, 50, .26), rgba(234, 117, 50, .08)),
    linear-gradient(100deg, #ffd2b0 0%, #ffffff 40%, #ffb07a 55%, #ffd2b0 100%);
  background-size: 100% 100%, 220% 100%;
  animation: cs-sector-shine 5s ease-in-out infinite;
}
/* the dot: a live, softly pulsing beacon */
#kinaxis-cases .cs-swap > div:first-child > p.t-label:first-child > span::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #EA7532;
  box-shadow: 0 0 0 0 rgba(234, 117, 50, .7); animation: cs-sector-dot 2.2s ease-out infinite;
}
@keyframes cs-sector-shine { 0%, 100% { background-position: 0 0, 100% 0; } 50% { background-position: 0 0, 0% 0; } }
@keyframes cs-sector-dot { 0% { box-shadow: 0 0 0 0 rgba(234, 117, 50, .7); } 70%, 100% { box-shadow: 0 0 0 8px rgba(234, 117, 50, 0); } }
/* reduced motion: the shimmer and the pulsing dot stay (light and colour only), slower */
@media (prefers-reduced-motion: reduce) {
  #kinaxis-cases .cs-swap > div:first-child > p.t-label:first-child > span { animation-duration: 12s !important; animation-iteration-count: infinite !important; }
  #kinaxis-cases .cs-swap > div:first-child > p.t-label:first-child > span::before { animation-duration: 3.2s !important; animation-iteration-count: infinite !important; }
}