/*
 * SecDev Slider
 * ─────────────────────────────────────────────────────────────────────────────
 * A horizontal accordion hero. Two things move and nothing else:
 *
 *   the panel   animates flex-grow, so the one that closes gives up exactly what
 *               the one that opens takes and the rail's width never changes
 *   the label   is a single element that rotates between 90deg and 0deg, so it
 *               turns in front of the reader instead of being swapped for a copy
 *
 * The heading, paragraph and button never animate and never reflow. The panel
 * widening is what uncovers them. To make that true their column is sized from
 * --railw, the rail's measured width, which only changes when the window does —
 * never while a panel is opening.
 *
 * THERE IS NOT ONE MEDIA QUERY IN THIS FILE, ON PURPOSE.
 * Elementor Pro lets the site owner move its breakpoints and add extra ones. A
 * hard-coded query would sit at a width the panel's own values no longer use, and
 * the two would disagree. So every decision that changes with screen size is a
 * custom property, and Elementor distributes it across whatever breakpoints the
 * site actually has.
 *
 * Fonts are never requested here. Loading one from a third party would break
 * WordPress.org's rule on remote files, and in the EU embedding Google Fonts has
 * been ruled a GDPR breach. Choose faces with the Typography controls; Elementor
 * can serve them from your own server.
 */

.sdx {
  /* ── surfaces ── */
  --panel: #0E1B33;
  --paper: #FAF9F7;
  --veil: .86;
  --blur: 16px;
  --line: rgba(255, 255, 255, .22);

  /* ── text: colour here, size and face from the Typography groups ── */
  --tcolor: #FFFFFF;
  --hcolor: #FFFFFF;
  --emcolor: #C8626B;
  --pcolor: #A3AEC4;
  --pbold: #FFFFFF;
  --scolor: #A3AEC4;

  /* ── call to action ── */
  --btncolor: #FFFFFF;
  --btnborder: #C8626B;
  --btnbg: rgba(0, 0, 0, 0);
  --btnhbg: #96343E;
  --btnhborder: #96343E;
  --btnhcolor: #FFFFFF;
  --btnr: 0px;
  --btnpx: 26px;
  --btnpy: 15px;

  /* ── rail and panels ── */
  --h: 660px;         /* the rail's fixed size on the stacking axis   */
  --strip: 100px;     /* a closed panel, on whichever axis it stacks  */
  --gap: 8px;            /* between panels, and nothing else */
  --railpt: 0px;         /* space around the rail: four sides, like a container */
  --railpr: 0px;
  --railpb: 0px;
  --railpl: 0px;
  --contentw: 660px;
  --railw: 100vw;     /* measured by the script; this is only a seed   */
  --n: 4;

  /* ── text box ── */
  --bpt: 116px;
  --bpr: 64px;
  --bpb: 112px;
  --bpl: 64px;
  --titlex: 64px;
  --titley: 56px;

  /* ── structure: written by the Direction control, per breakpoint ──
     Row is the default. The column set is in the control's dictionary. */
  --dir: row;
  --tt-x: calc(var(--strip) / 2);
  --tt-y: var(--titley);
  --tt-r: 90deg;
  --tt-c: -50%;
  --avail: calc(var(--railw) - var(--railpl) - var(--railpr) - (var(--n) - 1) * (var(--strip) + var(--gap)));

  /* ── arrows: shared, then per arrow, then placement ── */
  --arrsize: 48px;
  --arricon: 17px;
  --arrbw: 1px;
  --arrrad: 50%;
  --arrgap: 10px;
  --arrcolor: #FFFFFF;
  --arrborder: #5A6885;
  --arrbg: rgba(0, 0, 0, 0);
  --arrhbg: rgba(255, 255, 255, .12);
  --arrhborder: #FFFFFF;
  --arrhcolor: #FFFFFF;
  --arrx: 64px;
  --arry: 34px;
  --arr-l: auto;
  --arr-r: var(--arrx);
  --arr-t: auto;
  --arr-b: var(--arry);
  --arr-tx: 0;
  --arr-ty: 0;
  --arr-dir: row;

  /* ── progress bar ── */
  --trackbg: #3C4A66;
  --trackfill: #C8626B;
  --trackh: 1px;
  --trklen: 420px;
  --trkx: 64px;
  --trky: 50px;
  --trk-l: var(--trkx);
  --trk-r: auto;
  --trk-t: auto;
  --trk-b: var(--trky);
  --trk-tx: 0;
  --trk-ty: 0;
  --trk-w: var(--trklen);
  --trk-h: var(--trackh);
  --trk-fw: 0;
  --trk-fh: 100%;

  /* ── plus ── */
  --plussize: 44px;
  --plusicon: 20px;
  --plusrad: 50%;
  --plusbw: 1px;
  --pluscolor: #FFFFFF;
  --plusborder: #5A6885;
  --plushbg: rgba(255, 255, 255, .16);
  --plushborder: #FFFFFF;
  --plsx: 16px;
  --plsy: 40px;

  /* pause: required by WCAG 2.2.2 whenever the slider advances on its own */
  --pausesize: 40px;
  --pauseicon: 15px;
  --pauserad: 50%;
  --pausebw: 1px;
  --pausecolor: #FFFFFF;
  --pauseborder: #5A6885;
  --pausebg: rgba(0, 0, 0, 0);
  --pausehbg: rgba(255, 255, 255, .16);
  --pausehborder: #FFFFFF;
  --pausex: 16px;
  --pausey: 100px;
  --pause-l: auto;
  --pause-r: var(--pausex);
  --pause-t: auto;
  --pause-b: var(--pausey);
  --pause-tx: 0;
  --pause-ty: 0;

  /* counter */
  --cntcolor: #FFFFFF;
  --cntmuted: #8494B0;
  --cntgap: 6px;
  --cntbg: rgba(0, 0, 0, 0);
  --cntborder: rgba(0, 0, 0, 0);
  --cntbw: 0px;
  --cntrad: 0px;
  --cntpt: 0px;
  --cntpr: 0px;
  --cntpb: 0px;
  --cntpl: 0px;
  --cntx: 64px;
  --cnty: 100px;
  --cnt-l: var(--cntx);
  --cnt-r: auto;
  --cnt-t: auto;
  --cnt-b: var(--cnty);
  --cnt-tx: 0;
  --cnt-ty: 0;

  /* media */
  --imgpos: center center;

  /* mirrored automatically in right-to-left; a control can switch it off */
  --arrflip: 1;
  --pls-l: 50%;
  --pls-r: auto;
  --pls-t: auto;
  --pls-b: var(--plsy);
  --pls-tx: -50%;
  --pls-ty: 0;

  /* ── motion ── */
  --t: .85s;
  --hold: 9s;
  --ease: cubic-bezier(.68, 0, .18, 1);

  display: block;
  margin: 0;
  padding: 0;
  background: var(--paper);
}

.sdx *,
.sdx *::before,
.sdx *::after { box-sizing: border-box; }
.sdx a { text-decoration: none; color: inherit; }

/*
 * Buttons carry a padding, a border and a font from the browser. Left in place they
 * push the glyph off the middle of its circle, which is precisely what happened to the
 * stop button: the arrows had this reset and it did not.
 */
.sdx button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  line-height: 1;
}

/* ═══ rail ═══ */
.sdx .sdx-rail {
  display: flex;
  flex-direction: var(--dir);
  height: var(--h);
  gap: var(--gap);
  padding: var(--railpt) var(--railpr) var(--railpb) var(--railpl);
}

/* ═══ panel: flex-grow is the only animated property ═══ */
.sdx .sdx-panel {
  position: relative;
  overflow: hidden;
  flex: 0 0 var(--strip);
  background: var(--panel);
  cursor: pointer;
  transition: flex-grow var(--t) var(--ease);
}
.sdx .sdx-panel.is-open { flex-grow: 1; cursor: default; }

/* ═══ background ═══ */
.sdx .sdx-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: filter var(--t) var(--ease), transform var(--t) var(--ease);
}
.sdx .sdx-img,
.sdx .sdx-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--imgpos);
  display: block;
}
.sdx .sdx-panel:not(.is-open) .sdx-media {
  filter: blur(var(--blur)) saturate(.6) brightness(.55);
  transform: scale(1.08);
}
.sdx .sdx-veil {
  position: absolute;
  inset: 0;
  opacity: var(--veil);
  background: linear-gradient(100deg,
    var(--panel) 0%,
    color-mix(in srgb, var(--panel) 88%, transparent) 46%,
    color-mix(in srgb, var(--panel) 48%, transparent) 100%);
  transition: background var(--t) var(--ease);
}
.sdx .sdx-panel:not(.is-open) .sdx-veil {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 76%, transparent),
    color-mix(in srgb, var(--panel) 96%, transparent));
}
/* stand-ins until real photographs are chosen */
.sdx .sdx-ph1 { background-image: repeating-linear-gradient(58deg, rgba(255,255,255,.06) 0 1px, transparent 1px 13px), radial-gradient(120% 90% at 78% 24%, #2A3F6B, #16294A 55%, #0E1B33); }
.sdx .sdx-ph2 { background-image: repeating-linear-gradient(122deg, rgba(200,98,107,.12) 0 1px, transparent 1px 15px), radial-gradient(120% 90% at 74% 30%, #33324F, #1B2540 55%, #0E1B33); }
.sdx .sdx-ph3 { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 22px), radial-gradient(120% 90% at 80% 26%, #26405F, #16294A 58%, #0E1B33); }
.sdx .sdx-ph4 { background-image: repeating-linear-gradient(-52deg, rgba(255,255,255,.055) 0 1px, transparent 1px 17px), radial-gradient(120% 90% at 76% 30%, #3A2A3B, #22283F 55%, #0E1B33); }
/* plain colour instead of the texture, when the user picks it */
.sdx .sdx-ph-solid { background-image: none; background-color: var(--ph-color, #0E1B33); }
/* no texture at all — just the ordinary panel colour */
.sdx .sdx-ph-none { background-image: none; }
/* named single patterns, tinted with the panel colour and the chosen line colour */
.sdx .sdx-ph-p1 { background-image: repeating-linear-gradient(58deg, var(--ph-line, rgba(255,255,255,.07)) 0 1px, transparent 1px 13px), radial-gradient(120% 90% at 78% 24%, color-mix(in srgb, var(--panel) 60%, white 10%), var(--panel) 70%); }
.sdx .sdx-ph-p2 { background-image: repeating-linear-gradient(-58deg, var(--ph-line, rgba(255,255,255,.07)) 0 1px, transparent 1px 13px), radial-gradient(120% 90% at 24% 76%, color-mix(in srgb, var(--panel) 60%, white 10%), var(--panel) 70%); }
.sdx .sdx-ph-p3 { background-image: repeating-linear-gradient(90deg, var(--ph-line, rgba(255,255,255,.06)) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, var(--ph-line, rgba(255,255,255,.06)) 0 1px, transparent 1px 22px), radial-gradient(120% 90% at 80% 26%, color-mix(in srgb, var(--panel) 60%, white 8%), var(--panel) 70%); }
.sdx .sdx-ph-p4 { background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 24px, var(--ph-line, rgba(255,255,255,.06)) 25px 26px), radial-gradient(120% 90% at 76% 30%, color-mix(in srgb, var(--panel) 60%, white 8%), var(--panel) 70%); }
.sdx .sdx-ph-p5 { background-image: radial-gradient(var(--ph-line, rgba(255,255,255,.14)) 1.6px, transparent 1.6px), radial-gradient(120% 90% at 74% 28%, color-mix(in srgb, var(--panel) 60%, white 8%), var(--panel) 70%); background-size: 18px 18px, auto; }
.sdx .sdx-ph-p6 { background-image: repeating-linear-gradient(100deg, var(--ph-line, rgba(255,255,255,.08)) 0 2px, transparent 2px 26px), radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--panel) 60%, white 10%), var(--panel) 70%); }
.sdx .sdx-ph-p7 { background-image: repeating-linear-gradient(45deg, var(--ph-line, rgba(255,255,255,.06)) 0 1px, transparent 1px 16px), repeating-linear-gradient(-45deg, var(--ph-line, rgba(255,255,255,.06)) 0 1px, transparent 1px 16px), radial-gradient(120% 90% at 76% 26%, color-mix(in srgb, var(--panel) 60%, white 8%), var(--panel) 70%); }
.sdx .sdx-ph-p8 {
  --hs: 24px;
  background-image:
    linear-gradient(30deg, var(--ph-line, rgba(255,255,255,.07)) 1px, transparent 1px),
    linear-gradient(150deg, var(--ph-line, rgba(255,255,255,.07)) 1px, transparent 1px),
    linear-gradient(30deg, var(--ph-line, rgba(255,255,255,.07)) 1px, transparent 1px),
    linear-gradient(150deg, var(--ph-line, rgba(255,255,255,.07)) 1px, transparent 1px),
    radial-gradient(120% 90% at 78% 24%, color-mix(in srgb, var(--panel) 60%, white 8%), var(--panel) 70%);
  background-size: var(--hs) calc(var(--hs) * 1.73), var(--hs) calc(var(--hs) * 1.73), var(--hs) calc(var(--hs) * 1.73), var(--hs) calc(var(--hs) * 1.73), auto;
  background-position: 0 0, 0 0, calc(var(--hs) / 2) calc(var(--hs) * .865), calc(var(--hs) / 2) calc(var(--hs) * .865), 0 0;
}

/* ═══ the one label that turns ═══ */
.sdx .sdx-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  transform-origin: 0 0;
  /*
   * translateY(-50%) is applied first, in the label's own coordinates, so half its
   * line box moves across the turn and the rendered line ends up centred on --tt-x
   * whatever the font size is. The old version added a hard 12px here, which was half
   * a line at the default size and wrong at every other.
   */
  transform: translate(var(--tt-x), var(--tt-y)) rotate(var(--tt-r)) translateY(var(--tt-c));
  transition: transform var(--t) var(--ease);
  font-size: 17px;
  line-height: 1.35;
  color: var(--tcolor);
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.sdx .sdx-panel.is-open .sdx-label {
  transform: translate(var(--titlex), var(--titley)) rotate(0deg) translateY(0%);
}

/* ═══ plus ═══ */
.sdx .sdx-plus {
  position: absolute;
  z-index: 6;
  display: grid;
  place-items: center;
  inset-inline-start: var(--pls-l);
  inset-inline-end: var(--pls-r);
  inset-block-start: var(--pls-t);
  inset-block-end: var(--pls-b);
  transform: translate(var(--pls-tx), var(--pls-ty));
  width: var(--plussize);
  height: var(--plussize);
  border-radius: var(--plusrad);
  border: var(--plusbw) var(--plus-border-style, solid) var(--plusborder);
  background: rgba(255, 255, 255, .05);
  color: var(--pluscolor);
  font-size: var(--plusicon);
  line-height: 1;
  transition: background .2s, border-color .2s;
}
.sdx .sdx-panel:hover .sdx-plus {
  background: var(--plushbg);
  border-color: var(--plushborder);
}
.sdx .sdx-panel.is-open .sdx-plus { opacity: 0; pointer-events: none; }

/* ═══ body: present at full size from the first frame, no entrance, no reflow ═══ */
.sdx .sdx-cover {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
}
.sdx .sdx-panel:not(.is-open) .sdx-cover { pointer-events: none; }

.sdx .sdx-body {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: var(--bpt) var(--bpr) var(--bpb) var(--bpl);
  opacity: 0;
  pointer-events: none;
}
.sdx .sdx-panel.is-open .sdx-body { opacity: 1; }
.sdx .sdx-body { pointer-events: none; }
.sdx .sdx-panel.is-open .sdx-cta { pointer-events: auto; }

/* width comes from the measured rail, never from the animating panel */
.sdx .sdx-copy {
  width: min(var(--contentw), calc(var(--avail) - var(--bpl) - var(--bpr)));
  flex: none;
}

.sdx .sdx-heading {
  margin: 0;
  color: var(--hcolor);
  font-size: clamp(26px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -.006em;
}
.sdx .sdx-heading em { font-style: normal; color: var(--emcolor); }
.sdx .sdx-text {
  margin: 22px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--pcolor);
}
.sdx .sdx-text b,
.sdx .sdx-text strong { color: var(--pbold); font-weight: 500; }
.sdx .sdx-note {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px var(--note-border-style, solid) var(--line);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--scolor);
}
.sdx .sdx-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: var(--btnpy) var(--btnpx);
  border: 1px var(--btn-border-style, solid) var(--btnborder);
  border-radius: var(--btnr);
  background: var(--btnbg);
  color: var(--btncolor);
  font-size: 15px;
  font-weight: 500;
  transition: background .2s, border-color .2s, color .2s;
}
.sdx .sdx-cta:hover {
  background: var(--btnhbg);
  border-color: var(--btnhborder);
  color: var(--btnhcolor);
}
.sdx.sdx-btn-solid .sdx-cta { background: var(--btnhbg); border-color: var(--btnhborder); }
.sdx.sdx-btn-solid .sdx-cta:hover { background: var(--btnborder); border-color: var(--btnborder); }
.sdx.sdx-btn-line .sdx-cta {
  border: 0;
  border-bottom: 2px var(--btn-border-style, solid) var(--btnborder);
  border-radius: 0;
  padding-inline: 0;
  background: none;
}
.sdx.sdx-btn-line .sdx-cta:hover { background: none; color: var(--btnborder); }
.sdx .sdx-cta .sdx-ic { transition: transform .2s; }
.sdx .sdx-cta:hover .sdx-ic { transform: translateX(4px); }

/* ═══ controls layer ═══ */
.sdx .sdx-controls { position: absolute; inset: 0; z-index: 7; opacity: 0; pointer-events: none; }
.sdx .sdx-panel.is-open .sdx-controls { opacity: 1; }
.sdx .sdx-arrows,
.sdx .sdx-track { position: absolute; pointer-events: auto; }

.sdx .sdx-arrows {
  display: flex;
  flex-direction: var(--arr-dir);
  gap: var(--arrgap);
  inset-inline-start: var(--arr-l);
  inset-inline-end: var(--arr-r);
  inset-block-start: var(--arr-t);
  inset-block-end: var(--arr-b);
  transform: translate(var(--arr-tx), var(--arr-ty));
}
.sdx .sdx-arrows button {
  display: grid;
  place-items: center;
  padding: 0;
  flex: none;
  line-height: 1;
  cursor: pointer;
  border-style: var(--arrstyle, solid);
  transition: background .2s, border-color .2s, color .2s;
}
/* each arrow may override any shared value; unset simply follows the shared one */
.sdx .sdx-prev {
  width: var(--arrpsize, var(--arrsize));
  height: var(--arrpsize, var(--arrsize));
  border-radius: var(--arrprad, var(--arrrad));
  border-width: var(--arrpbw, var(--arrbw));
  border-color: var(--arrpborder, var(--arrborder));
  border-style: var(--arrpstyle, var(--arrstyle, solid));
  background: var(--arrpbg, var(--arrbg));
  color: var(--arrpcolor, var(--arrcolor));
  font-size: var(--arrpicon, var(--arricon));
}
.sdx .sdx-next {
  width: var(--arrnsize, var(--arrsize));
  height: var(--arrnsize, var(--arrsize));
  border-radius: var(--arrnrad, var(--arrrad));
  border-width: var(--arrnbw, var(--arrbw));
  border-color: var(--arrnborder, var(--arrborder));
  border-style: var(--arrnstyle, var(--arrstyle, solid));
  background: var(--arrnbg, var(--arrbg));
  color: var(--arrncolor, var(--arrcolor));
  font-size: var(--arrnicon, var(--arricon));
}
.sdx .sdx-prev:hover {
  background: var(--arrphbg, var(--arrhbg));
  border-color: var(--arrphborder, var(--arrhborder));
  color: var(--arrphcolor, var(--arrhcolor));
}
.sdx .sdx-next:hover {
  background: var(--arrnhbg, var(--arrhbg));
  border-color: var(--arrnhborder, var(--arrhborder));
  color: var(--arrnhcolor, var(--arrhcolor));
}

/* the glyph is a square SVG centred on its own grid, so rotation never shifts it */
.sdx .sdx-ic {
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}
.sdx .sdx-ic svg { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; }
.sdx .sdx-ic i { font-size: 1em; font-style: normal; line-height: 1; }
.sdx .sdx-prev .sdx-ic { transform: rotate(var(--arrprot, 180deg)) scaleX(var(--arrflip)); }
.sdx .sdx-next .sdx-ic { transform: rotate(var(--arrnrot, 0deg)) scaleX(var(--arrflip)); }

.sdx .sdx-pause {
  position: absolute;
  z-index: 7;
  display: grid;
  place-items: center;
  pointer-events: auto;
  inset-inline-start: var(--pause-l);
  inset-inline-end: var(--pause-r);
  inset-block-start: var(--pause-t);
  inset-block-end: var(--pause-b);
  transform: translate(var(--pause-tx), var(--pause-ty));
  width: var(--pausesize);
  height: var(--pausesize);
  border-radius: var(--pauserad);
  border: var(--pausebw) var(--pause-border-style, solid) var(--pauseborder);
  background: var(--pausebg);
  color: var(--pausecolor);
  font-size: var(--pauseicon);
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.sdx .sdx-pause:hover {
  background: var(--pausehbg);
  border-color: var(--pausehborder);
}
.sdx .sdx-pause .sdx-play { display: none; }
.sdx.is-stopped .sdx-pause .sdx-play { display: grid; }
.sdx.is-stopped .sdx-pause .sdx-halt { display: none; }

.sdx .sdx-count {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: baseline;
  gap: var(--cntgap);
  pointer-events: none;
  inset-inline-start: var(--cnt-l);
  inset-inline-end: var(--cnt-r);
  inset-block-start: var(--cnt-t);
  inset-block-end: var(--cnt-b);
  transform: translate(var(--cnt-tx), var(--cnt-ty));
  font-size: 13px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding: var(--cntpt) var(--cntpr) var(--cntpb) var(--cntpl);
  background: var(--cntbg);
  border: var(--cntbw) var(--count-border-style, solid) var(--cntborder);
  border-radius: var(--cntrad);
}
.sdx .sdx-count-now { color: var(--cntcolor); }
.sdx .sdx-count-sep,
.sdx .sdx-count-all { color: var(--cntmuted); }

.sdx .sdx-track {
  background: var(--trackbg);
  width: var(--trk-w);
  height: var(--trk-h);
  inset-inline-start: var(--trk-l);
  inset-inline-end: var(--trk-r);
  inset-block-start: var(--trk-t);
  inset-block-end: var(--trk-b);
  transform: translate(var(--trk-tx), var(--trk-ty));
}
.sdx .sdx-fill {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: block;
  background: var(--trackfill);
  width: var(--trk-fw);
  height: var(--trk-fh);
}
/*
 * The fill is driven from the script, not by a CSS animation.
 *
 * A CSS animation had to be restarted by removing the property and putting it back,
 * and paused through a class. Both are indirect, and either failing quietly — a class
 * left on, a cached stylesheet not matching a fresh script — stops the bar with nothing
 * to show why. That is what happened: the first panel filled and none of the others
 * did. Driving it directly means the bar and the timer read one duration and can be
 * started, paused and cancelled on the same object.
 *
 * --trk-fw and --trk-fh give it its resting size and tell the script which axis to
 * grow, so that choice still belongs to the panel's own control.
 */

.sdx .sdx-arrows button:focus-visible,
.sdx .sdx-panel:focus-visible,
.sdx .sdx-cta:focus-visible {
  outline: 2px solid var(--emcolor);
  outline-offset: 3px;
}

/* Right to left. Offsets already follow the writing direction because everything
   uses inset-inline; what is left to mirror is the label's own turn, the arrow
   glyphs, the small nudge under the call to action, and two Latin typographic
   habits that damage Arabic: negative tracking and uppercasing.
   Both forms of the selector are listed so the rules apply whether the page
   root carries dir="rtl" or the widget carries it itself. */
[dir="rtl"] .sdx,
.sdx[dir="rtl"] { --arrflip: -1; }

/*
 * The label pivots from the panel's inline-start corner. In right-to-left that
 * corner is the top right, so the pivot moves there, the offset runs the other
 * way, and the turn reverses: rotate(-90deg) is what makes Arabic read from the
 * top downwards instead of from the bottom up.
 */
[dir="rtl"] .sdx .sdx-label,
.sdx[dir="rtl"] .sdx-label {
  left: auto;
  right: 0;
  transform-origin: 100% 0;
  transform: translate(calc(-1 * var(--tt-x)), var(--tt-y)) rotate(calc(-1 * var(--tt-r))) translateY(var(--tt-c));
}

/*
 * Once a panel opens its label lies flat again, and that rule carries a
 * positive horizontal offset. Paired with the right-hand anchor above it would
 * push the label straight off the panel, so the offset is mirrored too. This
 * selector has to outweigh the .is-open rule, hence its length.
 */
[dir="rtl"] .sdx .sdx-panel.is-open .sdx-label,
.sdx[dir="rtl"] .sdx-panel.is-open .sdx-label {
  transform: translate(calc(-1 * var(--titlex)), var(--titley)) rotate(0deg) translateY(0%);
}

[dir="rtl"] .sdx .sdx-cta:hover .sdx-ic,
.sdx[dir="rtl"] .sdx-cta:hover .sdx-ic { transform: translateX(-4px); }

/* Arabic letters join. Tracking pulls the joins apart and there is no case to
   raise, so both are dropped rather than translated. */
[dir="rtl"] .sdx .sdx-heading,
.sdx[dir="rtl"] .sdx-heading { letter-spacing: normal; }

[dir="rtl"] .sdx .sdx-note,
.sdx[dir="rtl"] .sdx-note { letter-spacing: normal; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sdx *,
  .sdx *::before,
  .sdx *::after { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SecDev Lists — numbered list, areas list, deep links.
   Every value below is a variable the widget's controls write to, so a
   change in the panel never needs a change here. Responsiveness comes
   from Elementor's own breakpoints, never from a query in this file.
   ═══════════════════════════════════════════════════════════════ */
.sdl{
  /* layout */
  --sdl-dir:row; --sdl-order:0; --sdl-npos:static; --sdl-nalign:center;
  --sdl-nx:0px; --sdl-ny:0px; --sdl-nw:72px; --sdl-gap:24px;
  --sdl-valign:center; --sdl-talign:start;
  --sdl-text-align:var(--sdl-talign,start);
  --sdl-copy-ms:0; --sdl-copy-me:auto;
  --sdl-pt:15px; --sdl-pr:16px; --sdl-pb:15px; --sdl-pl:16px;
  --sdl-cols:1; --sdl-rowgap:0px; --sdl-colgap:24px;
  /* Filling: by rows is the default and is what a grid does on its own.
     Filling by columns needs a row count instead of a column count, because
     that is the only way the browser knows where to break each column. Both
     are written per device by the panel, so a layout can fill by columns on a
     desktop and fall back to a plain single column on a phone. */
  --sdl-rows:4; --sdl-flow:row;
  --sdl-tcols:repeat(var(--sdl-cols),minmax(0,1fr)); --sdl-trows:none;
  --sdl-titlegap:10px; --sdl-xmax:none;
  --sdl-titlecol:320px; --sdl-link-titlebasis:var(--sdl-titlecol); --sdl-splitgap:30px;

  /* rules */
  --sdl-rule:rgba(255,255,255,.09); --sdl-rulew:1px; --sdl-rules:solid;
  --sdl-rule-top:0px; --sdl-rule-bottom:var(--sdl-rulew);

  /* number */
  --sdl-ncol:#EEF2F9; --sdl-nop:.13; --sdl-ncol-h:#D9A32B; --sdl-nop-h:1;

  /* copy */
  --sdl-tcol:#EEF2F9; --sdl-tcol-h:#D9A32B;
  --sdl-xcol:#EEF2F9; --sdl-xcol-h:#EEF2F9;

  /* the hover wash — the -rtl pair mirrors it, and the panel writes both */
  --sdl-wash:rgba(217,163,43,.14); --sdl-washstop:65%;
  --sdl-washangle:90deg; --sdl-washorigin:left center;
  --sdl-washangle-rtl:270deg; --sdl-washorigin-rtl:right center;
  --sdl-washfrom:scaleX(0); --sdl-washto:scaleX(1);

  /* movement */
  --sdl-shift:5px;
  /* Keep moving copy inside the clipped row. The absolute value reserves
     enough room for positive and negative responsive shifts alike. */
  --sdl-shift-space:max(var(--sdl-shift),calc(-1 * var(--sdl-shift)));
  --sdl-lift:0px;
  --sdl-speed:.5s; --sdl-ease:cubic-bezier(.16,.84,.28,1);

  /* surface */
  --sdl-rowbg:transparent; --sdl-rowbg-h:transparent;

  /* extras */
  --sdl-icon:22px; --sdl-iconcol:#D9A32B; --sdl-iconcol-h:var(--sdl-iconcol);
  --sdl-imgw:64px; --sdl-imgr:0px;
  --sdl-badgecol:#12161F; --sdl-badgebg:#D9A32B; --sdl-metacol:#9CACC6;
  --sdl-btncol:#12161F; --sdl-btnbg:#D9A32B;
  --sdl-btncol-h:var(--sdl-btncol); --sdl-btnbg-h:var(--sdl-btnbg);

  display:grid;
  grid-auto-flow:var(--sdl-flow);
  grid-template-columns:var(--sdl-tcols);
  grid-template-rows:var(--sdl-trows);
  /* Only consulted while filling by columns, when the columns are implicit. */
  grid-auto-columns:minmax(0,1fr);
  gap:var(--sdl-rowgap) var(--sdl-colgap);
  align-items:stretch;
}
.sdl *,.sdl *::before,.sdl *::after{box-sizing:border-box}

/* ── per-layout baselines ──
   The panel's own defaults write these too, but carrying them here means a
   block still reads correctly if Elementor has yet to emit its stylesheet,
   and it documents what each layout is supposed to look like. */
.sdl--numbered{
  --sdl-nw:72px; --sdl-gap:24px; --sdl-valign:center;
  --sdl-pt:15px; --sdl-pr:16px; --sdl-pb:15px; --sdl-pl:16px;
  --sdl-nop:.13; --sdl-xcol:#EEF2F9; --sdl-xcol-h:#EEF2F9;
  --sdl-wash:rgba(217,163,43,.14); --sdl-washstop:65%; --sdl-shift:5px;
}
.sdl--areas{
  --sdl-nw:0px; --sdl-gap:30px; --sdl-valign:baseline; --sdl-nalign:baseline;
  --sdl-pt:30px; --sdl-pr:0px; --sdl-pb:30px; --sdl-pl:10px;
  --sdl-nop:.16; --sdl-titlegap:10px;
  --sdl-xcol:#9CACC6; --sdl-xcol-h:#9CACC6; --sdl-xmax:70ch;
  --sdl-wash:rgba(217,163,43,.12); --sdl-washstop:70%; --sdl-shift:0px;
  margin-top:34px;
}
.sdl--links{
  --sdl-nw:0px; --sdl-gap:30px; --sdl-valign:baseline; --sdl-nalign:baseline;
  --sdl-pt:34px; --sdl-pr:26px; --sdl-pb:34px; --sdl-pl:0px;
  --sdl-nop:.05; --sdl-titlegap:0px;
  --sdl-xcol:#9CACC6; --sdl-xcol-h:#EEF2F9; --sdl-xmax:52ch;
  --sdl-wash:rgba(217,163,43,.12); --sdl-washstop:70%; --sdl-shift:6px;
}

/* ── the row ── */
.sdl .sdl-row{
  position:relative; overflow:hidden; display:flex;
  width:100%; min-width:0; max-width:100%;
  flex-direction:var(--sdl-dir);
  align-items:var(--sdl-valign);
  gap:var(--sdl-gap);
  padding:var(--sdl-pt) var(--sdl-pr) var(--sdl-pb) var(--sdl-pl);
  background:var(--sdl-rowbg);
  text-decoration:none;
  transition:background var(--sdl-speed) var(--sdl-ease),
             transform var(--sdl-speed) var(--sdl-ease),
             border-color var(--sdl-speed) var(--sdl-ease);
  border-top:var(--sdl-rule-top) var(--sdl-rules) var(--sdl-rule);
  border-bottom:var(--sdl-rule-bottom) var(--sdl-rules) var(--sdl-rule);
}
.sdl .sdl-row.is-link{cursor:pointer; color:inherit}
.sdl .sdl-row:hover{background:var(--sdl-rowbg-h); transform:translateY(var(--sdl-lift))}

/* ── the wash that sweeps in ── */
.sdl.has-wash .sdl-row::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(var(--sdl-washangle),var(--sdl-wash),transparent var(--sdl-washstop));
  transform:var(--sdl-washfrom);
  transform-origin:var(--sdl-washorigin);
  opacity:1;
  transition:transform var(--sdl-speed) var(--sdl-ease), opacity var(--sdl-speed) var(--sdl-ease);
}
.sdl.has-wash .sdl-row:hover::before{transform:var(--sdl-washto)}
/* the fade variant has nothing to scale, so it changes opacity instead */
.sdl.has-wash .sdl-row::before{opacity:var(--sdl-washop,1)}

/* ── the number ──
   No line height is set here: that belongs to the typography control, and a
   value in this file would quietly win against it. */
.sdl .sdl-n{
  position:var(--sdl-npos); z-index:var(--sdl-nz,1); flex:none;
  order:var(--sdl-order);
  align-self:var(--sdl-nalign);
  min-width:var(--sdl-nw);
  color:var(--sdl-ncol);
  opacity:var(--sdl-nop);
  transform:translate(var(--sdl-nx),var(--sdl-ny));
  transition:opacity var(--sdl-speed) var(--sdl-ease), color var(--sdl-speed) var(--sdl-ease);
}
.sdl .sdl-row:hover .sdl-n{color:var(--sdl-ncol-h); opacity:var(--sdl-nop-h)}
.sdl .sdl-marker-icon{display:inline-flex; align-items:center; justify-content:center; line-height:1}
.sdl .sdl-marker-icon svg,.sdl .sdl-marker-icon i{
  display:block; width:1em; height:1em; font-size:1em; fill:currentColor;
}

/* ── the copy ── */
.sdl .sdl-body{
  position:relative; z-index:1; flex:1 1 auto; width:100%; min-width:0; max-width:100%;
  transition:transform var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-standard .sdl-body,
.sdl--areas .sdl-body,
.sdl--links .sdl-body{
  /* The row clips the hover wash. Reserve the horizontal travel inside the
     body so that moving copy never clips its first or last characters. Using
     logical inline edges keeps the same protection in LTR and RTL. */
  padding-inline:var(--sdl-shift-space);
}
.sdl .sdl-row:hover .sdl-body{transform:translateX(var(--sdl-shift))}

.sdl .sdl-title{
  margin:0 0 var(--sdl-titlegap); max-width:100%; min-width:0;
  text-align:var(--sdl-title-align,var(--sdl-text-align));
  overflow-wrap:anywhere; word-break:normal;
  color:var(--sdl-tcol);
  transition:color var(--sdl-speed) var(--sdl-ease);
}
.sdl .sdl-row:hover .sdl-title{color:var(--sdl-tcol-h)}

.sdl .sdl-text{
  margin:0; width:100%; color:var(--sdl-xcol); max-width:var(--sdl-xmax); min-width:0;
  margin-inline-start:var(--sdl-copy-ms);
  margin-inline-end:var(--sdl-copy-me);
  text-align:var(--sdl-text-align);
  overflow-wrap:anywhere; word-break:normal;
  transition:color var(--sdl-speed) var(--sdl-ease);
}
.sdl .sdl-text > :first-child{margin-top:0}
.sdl .sdl-text > :last-child{margin-bottom:0}
.sdl .sdl-row:hover .sdl-text{color:var(--sdl-xcol-h)}
.sdl .sdl-text a{overflow-wrap:anywhere; word-break:break-word}

/* ── the optional extras ── */
.sdl .sdl-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.sdl .sdl-badge{
  display:inline-block; color:var(--sdl-badgecol); background:var(--sdl-badgebg);
  padding:4px 10px; border-radius:6px; line-height:1.3;
}
.sdl .sdl-meta{color:var(--sdl-metacol); line-height:1.3}

.sdl .sdl-media{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.sdl .sdl-icon{display:inline-flex; color:var(--sdl-iconcol);
  transition:color var(--sdl-speed) var(--sdl-ease)}
.sdl .sdl-row:hover .sdl-icon{color:var(--sdl-iconcol-h)}
.sdl .sdl-icon svg,.sdl .sdl-icon i{width:var(--sdl-icon); height:var(--sdl-icon);
  font-size:var(--sdl-icon); fill:currentColor}
.sdl .sdl-img{display:block; width:var(--sdl-imgw); height:auto; border-radius:var(--sdl-imgr)}

.sdl .sdl-btn{
  display:inline-block; margin-top:14px; text-decoration:none; cursor:pointer;
  color:var(--sdl-btncol); background:var(--sdl-btnbg);
  transition:background var(--sdl-speed) var(--sdl-ease), color var(--sdl-speed) var(--sdl-ease);
}
.sdl .sdl-btn:hover{color:var(--sdl-btncol-h); background:var(--sdl-btnbg-h)}

/* ── deep links: title beside text when a column width is set ── */
.sdl--links .sdl-body{
  display:flex; flex-wrap:wrap; width:100%; min-width:0; max-width:100%;
  gap:var(--sdl-titlegap) var(--sdl-splitgap); align-items:baseline;
}
/* the title column is a preference, not a floor: it gives way rather than
   letting a long heading run past the edge of a narrow screen */
.sdl--links .sdl-title{flex:0 1 var(--sdl-link-titlebasis); width:var(--sdl-link-titlebasis);
  max-width:100%; min-width:0; margin-bottom:0; overflow-wrap:anywhere}
.sdl--links .sdl-text{flex:1 1 200px; width:100%; min-width:0; max-width:var(--sdl-xmax); overflow-wrap:anywhere}
.sdl--links .sdl-top,.sdl--links .sdl-media,.sdl--links .sdl-btn{flex:1 1 100%}

/* ── keyboard focus must be visible, since rows can be links ── */
.sdl .sdl-row.is-link:focus-visible{outline:2px solid var(--sdl-ncol-h); outline-offset:2px}

/* ── right to left ──
   The rows are plain flex, so the writing direction already reorders them.
   What stays physical is anything expressed as an X offset or an origin: the
   marker nudge, the hover shift, and the sweep. Padding is deliberately left
   alone — the panel's Padding control means left and right literally, in both
   directions, so that it stays predictable. */
[dir="rtl"] .sdl .sdl-n,
.sdl[dir="rtl"] .sdl-n{transform:translate(calc(-1 * var(--sdl-nx)),var(--sdl-ny))}

[dir="rtl"] .sdl .sdl-row:hover .sdl-body,
.sdl[dir="rtl"] .sdl-row:hover .sdl-body{transform:translateX(calc(-1 * var(--sdl-shift)))}

[dir="rtl"] .sdl.has-wash .sdl-row::before,
.sdl[dir="rtl"].has-wash .sdl-row::before{
  background:linear-gradient(var(--sdl-washangle-rtl),var(--sdl-wash),transparent var(--sdl-washstop));
  transform-origin:var(--sdl-washorigin-rtl);
}

/* ── respect a reduced-motion preference ── */
@media (prefers-reduced-motion: reduce){
  .sdl .sdl-row,.sdl .sdl-body,.sdl .sdl-n,.sdl .sdl-title,
  .sdl .sdl-text,.sdl .sdl-icon,.sdl .sdl-btn,.sdl.has-wash .sdl-row::before{
    transition:none !important;
  }
  .sdl .sdl-row:hover{transform:none}
  .sdl .sdl-row:hover .sdl-body,
  [dir="rtl"] .sdl .sdl-row:hover .sdl-body,
  .sdl[dir="rtl"] .sdl-row:hover .sdl-body{transform:none}
}

/* ── the marker box: the icon keeps the colour it was given ──
   The faint opacity belongs to the oversized number, not to an icon, so an
   icon marker is drawn at full strength and takes its own colour. */
.sdl .sdl-marker-icon{
  opacity:1; color:var(--sdl-mic,#D9A32B); font-size:var(--sdl-mis,32px);
}
.sdl .sdl-row:hover .sdl-marker-icon{color:var(--sdl-mic-h,var(--sdl-mic,#D9A32B))}
.sdl .sdl-marker-icon img{width:1em; height:1em; display:block}

/* ═══════════════════════════════════════════════════════════════
   Numbered List variations

   Structural treatments of the numbered list, not separate widgets. Standard
   is the unmodified .sdl--numbered layout above, so existing content is
   pixel-for-pixel familiar after an update.

   Two rules govern this block.

   1  Not one `!important`. There used to be forty-eight, and they were the
      reason the panel appeared to do nothing: `font-size: … !important` beats
      whatever Elementor writes, so the Typography control existed and was
      dead. These rules sit at the same specificity as the base rules above
      and win on document order alone, which is all they ever needed. Anything
      Elementor writes now wins, because Elementor writes at wrapper
      specificity and that is higher than both.

   2  Every number in here is a variable with the reference value as its
      fallback. The fallback is what a fresh widget looks like; the control
      is what changes it. A literal with no variable in front of it is a
      control somebody cannot reach.
   ═══════════════════════════════════════════════════════════════ */

/* ── shared panel: all five treatments draw the list inside one surface ── */
.sdl--numbered-circle,
.sdl--numbered-timeline,
.sdl--numbered-rule,
.sdl--numbered-sidebar{
  --sdl-reference-panel:#12161F;
  --sdl-reference-rule:rgba(255,255,255,.09);
  --sdl-reference-accent:#D9A32B;
  --sdl-reference-text:#EEF2F9;
  --sdl-reference-muted:#9CACC6;
  display:grid;
  padding:var(--sdl-v-panel-pt,26px) var(--sdl-v-panel-pr,22px) var(--sdl-v-panel-pb,26px) var(--sdl-v-panel-pl,22px);
  background:var(--sdl-v-panel-bg,#12161F);
  border:var(--sdl-v-panel-border-width,1px) var(--sdl-v-panel-border-style,solid) var(--sdl-v-panel-border,rgba(255,255,255,.09));
  border-radius:var(--sdl-v-panel-radius,14px);
  color:var(--sdl-v-panel-text,var(--sdl-reference-text));
}
.sdl--numbered-steps{
  --sdl-reference-panel:#12161F;
  --sdl-reference-rule:rgba(255,255,255,.09);
  --sdl-reference-accent:#D9A32B;
  --sdl-reference-text:#EEF2F9;
  --sdl-reference-muted:#9CACC6;
  display:block;
  padding:var(--sdl-v-panel-pt,26px) var(--sdl-v-panel-pr,22px) var(--sdl-v-panel-pb,26px) var(--sdl-v-panel-pl,22px);
  background:var(--sdl-v-panel-bg,#12161F);
  border:var(--sdl-v-panel-border-width,1px) var(--sdl-v-panel-border-style,solid) var(--sdl-v-panel-border,rgba(255,255,255,.09));
  border-radius:var(--sdl-v-panel-radius,14px);
  color:var(--sdl-v-panel-text,var(--sdl-reference-text));
}

/*
 * No font-family, size or line-height on the panel. They used to be here as
 * literals, which quietly overrode every Typography control in the widget for
 * anything that inherits. Each element carries its own Typography instead.
 */

.sdl--numbered-circle.has-wash .sdl-row::before,
.sdl--numbered-timeline.has-wash .sdl-row::before,
.sdl--numbered-rule.has-wash .sdl-row::before,
.sdl--numbered-sidebar.has-wash .sdl-row::before{display:none}

/* ── 03 · circled number ───────────────────────────────────────────────── */
.sdl--numbered-circle .sdl-row{
  align-items:center;
  gap:var(--sdl-v-gap,20px);
  padding:var(--sdl-v-row-pt,14px) var(--sdl-v-row-pr,16px) var(--sdl-v-row-pb,14px) var(--sdl-v-row-pl,16px);
  margin-bottom:var(--sdl-v-item-space,0px);
  overflow:visible;
  border-top:0;
  border-bottom:var(--sdl-v-row-rule-width,1px) var(--sdl-v-row-rule-style,solid) var(--sdl-v-row-rule,var(--sdl-reference-rule));
  background:var(--sdl-v-row-bg,transparent);
  cursor:pointer;
}
.sdl--numbered-circle .sdl-row:last-child,
.sdl--numbered-circle .sdl-row--column-last{border-bottom:0; margin-bottom:0}
.sdl--numbered-circle .sdl-row::after,
.sdl--numbered-rule .sdl-row::after,
.sdl--numbered-sidebar .sdl-row::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-start:100%;
  height:var(--sdl-v-item-space,0px);
  background:var(--sdl-v-row-bg,transparent);
  pointer-events:auto;
  transition:background var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-circle .sdl-row:hover::after,
.sdl--numbered-rule .sdl-row:hover::after,
.sdl--numbered-sidebar .sdl-row:hover::after{
  background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.06));
}
.sdl--numbered-circle .sdl-row:last-child::after,
.sdl--numbered-rule .sdl-row:last-child::after,
.sdl--numbered-sidebar .sdl-row:last-child::after,
.sdl--numbered-circle .sdl-row--column-last::after,
.sdl--numbered-rule .sdl-row--column-last::after,
.sdl--numbered-sidebar .sdl-row--column-last::after{display:none}
.sdl--numbered-circle .sdl-n{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  order:0;
  align-self:center;
  width:var(--sdl-v-marker-size,46px);
  height:var(--sdl-v-marker-size,46px);
  min-width:var(--sdl-v-marker-size,46px);
  border:var(--sdl-v-marker-border-width,1px) var(--sdl-v-marker-border-style,solid) var(--sdl-v-marker-border,rgba(255,255,255,.16));
  border-radius:var(--sdl-v-marker-radius,50%);
  background:var(--sdl-v-marker-bg,transparent);
  color:var(--sdl-v-marker-text,#9CACC6);
  opacity:1;
  transform:none;
  transition:background var(--sdl-speed) var(--sdl-ease),border-color var(--sdl-speed) var(--sdl-ease),color var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-circle .sdl-marker-icon{font-size:var(--sdl-v-icon-size,15px); transform:rotate(var(--sdl-v-icon-rotate,0deg))}
.sdl--numbered-circle .sdl-row:hover{background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.06)); transform:none}
.sdl--numbered-circle .sdl-row:hover .sdl-n{
  color:var(--sdl-v-marker-text-hover,#12161F);
  background:var(--sdl-v-marker-bg-hover,#D9A32B);
  border-color:var(--sdl-v-marker-border-hover,#D9A32B);
  opacity:1;
}
.sdl--numbered-circle .sdl-row:hover .sdl-body{transform:none}

/* ── 07 · timeline ─────────────────────────────────────────────────────── */
.sdl--numbered-timeline{padding-inline-start:calc(var(--sdl-v-panel-pl,22px) + var(--sdl-v-rail-inset,8px))}
.sdl--numbered-timeline.sdl--marker-none{padding-inline-start:var(--sdl-v-panel-pl,22px)}
.sdl--numbered-timeline .sdl-row{
  align-items:flex-start;
  gap:var(--sdl-v-gap,22px);
  padding:var(--sdl-v-row-pt,0px) var(--sdl-v-row-pr,16px) var(--sdl-v-item-space,30px) var(--sdl-v-row-pl,16px);
  overflow:visible;
  border:0;
  background:var(--sdl-v-row-bg,transparent);
  cursor:pointer;
}
.sdl--numbered-timeline .sdl-row:last-child,
.sdl--numbered-timeline .sdl-row--column-last{padding-bottom:0}
.sdl--numbered-timeline .sdl-n{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  order:0;
  align-self:flex-start;
  width:var(--sdl-v-marker-size,38px);
  height:var(--sdl-v-marker-size,38px);
  min-width:var(--sdl-v-marker-size,38px);
  border:var(--sdl-v-marker-border-width,1px) var(--sdl-v-marker-border-style,solid) var(--sdl-v-marker-border,rgba(255,255,255,.16));
  border-radius:var(--sdl-v-marker-radius,50%);
  background:var(--sdl-v-marker-bg,#12161F);
  color:var(--sdl-v-marker-text,#9CACC6);
  opacity:1;
  transform:none;
  transition:background var(--sdl-speed) var(--sdl-ease),border-color var(--sdl-speed) var(--sdl-ease),color var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-timeline .sdl-marker-icon{font-size:var(--sdl-v-icon-size,13px); transform:rotate(var(--sdl-v-icon-rotate,0deg))}
.sdl--numbered-timeline .sdl-row:not(:last-child) .sdl-n::after{
  content:"";
  position:absolute;
  z-index:0;
  inset-inline-start:50%;
  top:calc(var(--sdl-v-marker-size,38px) - 1px);
  height:var(--sdl-timeline-rail-span,calc(var(--sdl-v-item-space,30px) + 1px));
  width:var(--sdl-v-rail-width,1px);
  background:var(--sdl-v-rail,rgba(255,255,255,.09));
  transform:translateX(-50%);
}
.sdl--numbered-timeline[dir="rtl"] .sdl-row:not(:last-child) .sdl-n::after{transform:translateX(50%)}
.sdl--numbered-timeline .sdl-row--column-last .sdl-n::after{display:none}
.sdl--numbered-timeline .sdl-row:hover{background:var(--sdl-v-row-bg-hover,transparent); transform:none}
.sdl--numbered-timeline .sdl-row:hover .sdl-n{
  color:var(--sdl-v-marker-text-hover,#12161F);
  background:var(--sdl-v-marker-bg-hover,#D9A32B);
  border-color:var(--sdl-v-marker-border-hover,#D9A32B);
  opacity:1;
}
.sdl--numbered-timeline .sdl-body{padding-block-start:var(--sdl-v-body-offset,8px)}
.sdl--numbered-timeline .sdl-row--marker-none .sdl-body{padding-block-start:0}
.sdl--numbered-timeline .sdl-row:hover .sdl-body{transform:none}

/* ── 08 · horizontal steps ─────────────────────────────────────────────────
   The buttons are real tabs; the selected item's copy appears below, and
   wrapping keeps the rail usable on a narrow phone. */
.sdl--numbered-steps .sdl-step-tabs{
  display:grid;
  grid-template-columns:repeat(var(--sdl-v-step-columns,auto-fit),minmax(var(--sdl-v-step-min,var(--sdl-v-step-basis,70px)),1fr));
  gap:var(--sdl-v-step-gap,4px);
  border-bottom:var(--sdl-v-step-rule-width,1px) var(--sdl-v-step-rule-style,solid) var(--sdl-v-step-rule,rgba(255,255,255,.09));
}
.sdl--numbered-steps .sdl-step-tab{
  min-width:0;
  padding:var(--sdl-v-step-pt,12px) var(--sdl-v-step-pr,4px) var(--sdl-v-step-pb,12px) var(--sdl-v-step-pl,4px);
  background:transparent;
  border:0;
  border-bottom:var(--sdl-v-step-active-width,2px) var(--sdl-v-step-active-style,solid) transparent;
  border-radius:0;
  color:var(--sdl-v-step-normal,#9CACC6);
  cursor:pointer;
  transition:color var(--sdl-speed) var(--sdl-ease),border-color var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-steps .sdl-step-tab:hover{color:var(--sdl-v-step-hover,#EEF2F9)}
.sdl--numbered-steps .sdl-step-tab[aria-selected="true"]{
  color:var(--sdl-v-step-active,#D9A32B);
  border-bottom-color:var(--sdl-v-step-active,#D9A32B);
}
.sdl--numbered-steps .sdl-step-tab:focus-visible{
  outline:var(--sdl-v-step-focus-width,2px) solid var(--sdl-v-step-focus,var(--sdl-v-step-active,#D9A32B));
  outline-offset:2px;
}
.sdl--numbered-steps .sdl-step-tab-marker{display:inline-flex; align-items:center; justify-content:center}
.sdl--numbered-steps .sdl-step-tab-marker.is-icon{font-size:var(--sdl-v-icon-size,20px); transform:rotate(var(--sdl-v-icon-rotate,0deg))}
.sdl--numbered-steps .sdl-step-tab-marker svg,
.sdl--numbered-steps .sdl-step-tab-marker i{display:block; width:1em; height:1em; fill:currentColor}
.sdl--numbered-steps .sdl-step-panels{min-width:0}
.sdl--numbered-steps .sdl-step-panel{
  min-height:var(--sdl-v-step-panel-min,96px);
  padding:var(--sdl-v-step-panel-pt,26px) var(--sdl-v-step-panel-pr,16px) var(--sdl-v-step-panel-pb,26px) var(--sdl-v-step-panel-pl,16px);
}
.sdl--numbered-steps .sdl-step-panel[hidden]{display:none}
.sdl--numbered-steps .sdl-step-panel .sdl-row{
  min-height:0;
  padding:0;
  gap:0;
  overflow:visible;
  border:0;
  background:transparent;
}
.sdl--numbered-steps .sdl-step-panel .sdl-n{display:none}
.sdl--numbered-steps .sdl-step-panel .sdl-row:hover .sdl-body{transform:none}
.sdl--numbered-steps.has-wash .sdl-step-panel .sdl-row::before{display:none}

/* ── 10 · number on divider ────────────────────────────────────────────── */
.sdl--numbered-rule .sdl-row{
  position:relative;
  overflow:visible;
  padding:var(--sdl-v-row-pt,26px) var(--sdl-v-row-pr,16px) var(--sdl-v-row-pb,18px) var(--sdl-v-row-pl,16px);
  margin-bottom:var(--sdl-v-item-space,0px);
  border-top:var(--sdl-v-row-rule-width,1px) var(--sdl-v-row-rule-style,solid) var(--sdl-v-row-rule,var(--sdl-reference-rule));
  border-bottom:0;
  background:var(--sdl-v-row-bg,transparent);
  cursor:pointer;
}
.sdl--numbered-rule .sdl-row:last-child,
.sdl--numbered-rule .sdl-row--column-last{margin-bottom:0}
.sdl--numbered-rule .sdl-n{
  position:absolute;
  z-index:3;
  inset-block-start:calc(-1 * var(--sdl-v-rule-lift,11px));
  inset-inline-start:var(--sdl-v-rule-start,16px);
  order:0;
  align-self:auto;
  min-width:0;
  padding:0 var(--sdl-v-rule-pad,10px);
  background:var(--sdl-v-rule-chip-bg,#12161F);
  color:var(--sdl-v-marker-text,#9CACC6);
  opacity:1;
  transform:none;
}
.sdl--numbered-rule .sdl-marker-icon{font-size:var(--sdl-v-icon-size,15px); transform:rotate(var(--sdl-v-icon-rotate,0deg))}
.sdl--numbered-rule .sdl-row:hover{background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.05)); transform:none}
.sdl--numbered-rule .sdl-row:hover .sdl-n{color:var(--sdl-v-marker-text-hover,#D9A32B); opacity:1}
.sdl--numbered-rule .sdl-row:hover .sdl-body{transform:none}

/* ── 12 · boxed number and side bar ────────────────────────────────────── */
.sdl--numbered-sidebar .sdl-row{
  flex-direction:var(--sdl-v-sidebar-row-direction,row);
  align-items:var(--sdl-v-sidebar-row-align,center);
  gap:var(--sdl-v-gap,18px);
  padding:var(--sdl-v-row-pt,15px) var(--sdl-v-row-pr,16px) var(--sdl-v-row-pb,15px) var(--sdl-v-row-pl,16px);
  margin-bottom:var(--sdl-v-item-space,6px);
  overflow:visible;
  border:0;
  background:var(--sdl-v-row-bg,transparent);
  cursor:pointer;
}
.sdl--numbered-sidebar .sdl-row:last-child,
.sdl--numbered-sidebar .sdl-row--column-last{margin-bottom:0}
.sdl--numbered-sidebar .sdl-sidebar{
  position:var(--sdl-v-sidebar-position,absolute);
  order:var(--sdl-v-sidebar-order,0);
  inset-block-start:var(--sdl-v-sidebar-inset-bs,0);
  inset-block-end:var(--sdl-v-sidebar-inset-be,calc(-1 * var(--sdl-v-item-space,6px)));
  inset-inline:var(--sdl-v-sidebar-inset-inline,0);
  width:var(--sdl-v-sidebar-box-width,auto);
  height:var(--sdl-v-sidebar-box-height,auto);
  flex:var(--sdl-v-sidebar-box-flex,0 1 auto);
  align-self:stretch;
  display:block;
  overflow:hidden;
  pointer-events:none;
}
.sdl--numbered-sidebar .sdl-row:last-child .sdl-sidebar,
.sdl--numbered-sidebar .sdl-row--column-last .sdl-sidebar{inset-block-end:0}
.sdl--numbered-sidebar .sdl-sidebar::before{
  content:"";
  position:absolute;
  display:block;
  inset-block-start:var(--sdl-v-sidebar-line-bs,calc(50% + var(--sdl-v-sidebar-y,0px)));
  inset-inline-start:var(--sdl-v-sidebar-line-is,var(--sdl-v-sidebar-x,0px));
  width:var(--sdl-v-sidebar-line-width,var(--sdl-v-sidebar-width,2px));
  height:var(--sdl-v-sidebar-line-height,var(--sdl-v-sidebar-height,100%));
  background:var(--sdl-v-sidebar,rgba(255,255,255,.09));
  pointer-events:none;
  opacity:1;
  transform:var(--sdl-v-sidebar-line-transform,translateY(-50%));
  transform-origin:center;
  transition:background var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-sidebar .sdl-n{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  order:0;
  align-self:var(--sdl-v-sidebar-row-align,center);
  width:var(--sdl-v-sidebar-marker-size,auto);
  height:var(--sdl-v-sidebar-marker-size,auto);
  min-width:var(--sdl-v-sidebar-marker-size,0);
  padding:var(--sdl-v-marker-pt,6px) var(--sdl-v-marker-pr,11px) var(--sdl-v-marker-pb,6px) var(--sdl-v-marker-pl,11px);
  border:var(--sdl-v-marker-border-width,1px) var(--sdl-v-marker-border-style,solid) var(--sdl-v-marker-border,rgba(255,255,255,.16));
  border-radius:var(--sdl-v-marker-radius,6px);
  background:var(--sdl-v-marker-bg,transparent);
  color:var(--sdl-v-marker-text,#9CACC6);
  opacity:1;
  transform:none;
  transition:background var(--sdl-speed) var(--sdl-ease),border-color var(--sdl-speed) var(--sdl-ease),color var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-sidebar .sdl-row:not(:last-child) .sdl-n,
.sdl--numbered-sidebar .sdl-row:not(:last-child) .sdl-body{
  inset-block-start:var(--sdl-v-sidebar-row-offset,calc(var(--sdl-v-item-space,6px) / 2));
}
.sdl--numbered-sidebar .sdl-row--column-last .sdl-n,
.sdl--numbered-sidebar .sdl-row--column-last .sdl-body{inset-block-start:0}
.sdl--numbered-sidebar .sdl-marker-icon{font-size:var(--sdl-v-icon-size,15px); transform:rotate(var(--sdl-v-icon-rotate,0deg))}
.sdl--numbered-sidebar .sdl-body{order:var(--sdl-v-sidebar-body-order,0)}
.sdl--numbered-sidebar[dir="rtl"]{--sdl-v-sidebar-center-x:50%}
.sdl--numbered-sidebar .sdl-row:hover{
  background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.06));
  transform:none;
}
.sdl--numbered-sidebar .sdl-row:hover .sdl-sidebar::before{
  background:var(--sdl-v-sidebar-hover,#D9A32B);
}
.sdl--numbered-sidebar .sdl-row:hover .sdl-n{
  color:var(--sdl-v-marker-text-hover,#12161F);
  background:var(--sdl-v-marker-bg-hover,#D9A32B);
  border-color:var(--sdl-v-marker-border-hover,#D9A32B);
  opacity:1;
}
.sdl--numbered-sidebar .sdl-row:hover .sdl-body{transform:none}