/*
 * UX Case Study — frontend.css v6.0.0
 *
 * COLOR SCHEME: Dark blue  (#0f1a2e bg / #3b82f6 accent / #f0f6fc text)
 *
 * STRUCTURE:
 *  0. Tokens
 *  1. Root isolation (all: revert)
 *  2. Sub-element reset  +  SVG icon fix
 *  3. Container/wrap
 *  4. Back bar
 *  5. Hero
 *  6. Slider
 *  7. Content (sidebar + main)
 *  8. Steps
 *  9. Stats
 * 10. CTA
 * 11. Weitere Projekte (preview-mask cards)
 * 12. Buttons + atoms
 * 13. Responsive (≥768, ≥1024)
 * 14. Reduced-motion
 * 15. Print
 */

/* ─── 0. TOKENS ─────────────────────────────────────────────── */
.ucs {
  /* backgrounds */
  --c-bg:        #0f1a2e;
  --c-bg-card:   #161b22;
  --c-bg-content:#0d1625;
  --c-bg-deep:   #070c14;

  /* text */
  --c-ink:       #f0f6fc;
  --c-ink60:     rgba(240,246,252,.60);
  --c-ink40:     rgba(240,246,252,.40);
  --c-ink10:     rgba(255,255,255,.10);
  --c-ink05:     rgba(255,255,255,.05);

  /* accent */
  --c-blue:      #3b82f6;
  --c-blue-lt:   #60a5fa;
  --c-blue-dim:  rgba(59,130,246,.15);
  --c-blue-glow: rgba(59,130,246,.30);

  /* surface / white */
  --c-surface:   rgba(255,255,255,.04);
  --c-white:     #ffffff;

  /* borders */
  --c-border:    rgba(255,255,255,.07);
  --c-border-hv: rgba(59,130,246,.45);

  /* type */
  --f-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  /* radii */
  --r-sm:   4px;
  --r-md:   16px;
  --r-full: 9999px;

  /* shadows */
  --shadow-card: 0 24px 56px rgba(0,0,0,.55);
  --shadow-btn:  0  4px 15px rgba(59,130,246,.30);
  --ease:        cubic-bezier(.4,0,.2,1);
}

/* ─── 1. ROOT ISOLATION ─────────────────────────────────────── */
.ucs {
  all: revert;

  display:            block;
  font-family:        var(--f-sans);
  font-size:          16px;
  line-height:        1.65;
  color:              var(--c-ink);
  background:         var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:     optimizeLegibility;
  isolation:          isolate;
  overflow-x:         clip;  /* clip avoids scroll-container trap → sticky works */
  position:           relative;
  width:              100%;
}

/* ─── 2. SUB-ELEMENT RESET ──────────────────────────────────── */
:where(.ucs *) {
  box-sizing:  border-box;
  margin:      0;
  padding:     0;
  font-family: inherit;
  font-size:   inherit;
  line-height: inherit;
  color:       inherit;
}

:where(.ucs h1),
:where(.ucs h2),
:where(.ucs h3),
:where(.ucs h4) {
  all:        unset;
  display:    block;
  font-style: normal;
}

:where(.ucs ul),
:where(.ucs ol) { list-style: none; }

:where(.ucs li) { margin: 0; padding: 0; }

:where(.ucs a),
:where(.ucs a:hover),
:where(.ucs a:visited),
:where(.ucs a:focus) {
  text-decoration: none;
  background:      none;
  box-shadow:      none;
  outline:         none;
  border:          none;
}

:where(.ucs button) {
  all:             unset;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
}

:where(.ucs img) {
  display:   block;
  max-width: 100%;
  height:    auto;
  border:    none;
  box-shadow: none;
}

/*
 * SVG icon fix
 * :where(.ucs svg) keeps specificity at 0 so it can be overridden.
 * We do NOT reset `color` here — parent element color must flow
 * through as currentColor for stroke="currentColor" to work.
 */
:where(.ucs svg) {
  display:     inline-block;
  flex-shrink: 0;
  max-width:   none;
  overflow:    visible;
}
/* Force all SVG shape elements to use currentColor so icons
   pick up whatever text color the parent has. */
.ucs svg path,
.ucs svg polyline,
.ucs svg polygon,
.ucs svg line,
.ucs svg rect,
.ucs svg circle,
.ucs svg ellipse {
  stroke: currentColor;
}

:where(.ucs section),
:where(.ucs footer),
:where(.ucs nav),
:where(.ucs aside) {
  display: block;
  margin:  0;
  padding: 0;
}

/* ─── 3. CONTAINER / WRAP ───────────────────────────────────── */
.ucs-wrap {
  width:     100%;
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 40px;
}

/* ─── 4. BACK BAR ───────────────────────────────────────────── */
.ucs-back-bar {
  background:    rgba(10,14,24,.95);
  border-bottom: 1px solid var(--c-border);
  padding:       13px 0;
}
.ucs-back-link {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--f-sans);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          rgba(240,246,252,.80);
  transition:     color .2s var(--ease);
}
.ucs-back-link:hover { color: #fff; }
.ucs-back-link svg   { transition: transform .2s var(--ease); }
.ucs-back-link:hover svg { transform: translateX(-3px); }

/* ─── 5. HERO ───────────────────────────────────────────────── */
.ucs-hero {
  background:    radial-gradient(ellipse at top left, rgba(59,130,246,.08) 0%, transparent 60%), var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  padding:       80px 0 72px;
  overflow:      hidden;
}
.ucs-hero-inner {
  display:        flex;
  flex-direction: column;
  gap:            48px;
}
.ucs-hero-left {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  width:          100%;
}

/* Badge */
.ucs-badge {
  display:        inline-block;
  background:     var(--c-blue-dim);
  color:          var(--c-blue-lt);
  border:         1px solid rgba(59,130,246,.25);
  font-family:    var(--f-sans);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding:        5px 14px;
  border-radius:  var(--r-full);
  margin-bottom:  0;
}

/* h1 */
.ucs-h1 {
  font-family:    var(--f-sans);
  font-size:      clamp(2.2rem, 4.5vw, 4rem);
  font-weight:    800;
  line-height:    1.08;
  color:          #fff;
  margin-bottom:  12px;
  letter-spacing: -.025em;
}

/* Subtitle under h1 */
.ucs-subtitle {
  font-family:    var(--f-serif);
  font-size:      18px;
  font-weight:    400;
  font-style:     normal;
  color:          rgba(240,246,252,.85);
  margin-bottom:  16px;
  line-height:    1.5;
}

/* Intro paragraph */
.ucs-intro {
  font-family:    var(--f-sans);
  font-size:      1.05rem;
  font-weight:    300;
  line-height:    1.8;
  color:          rgba(240,246,252,.88);
  max-width:      500px;
  margin-bottom:  32px;
}

/* Meta row */
.ucs-meta {
  display:       flex;
  flex-wrap:     wrap;
  gap:           18px 40px;
  margin-bottom: 32px;
  padding-top:   28px;
  border-top:    1px solid rgba(255,255,255,.08);
}
.ucs-meta-col {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.ucs-meta-label {
  display:        flex;
  align-items:    center;
  gap:            5px;
  font-family:    var(--f-sans);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          rgba(240,246,252,.65);
}
/* Meta label icons */
.ucs-meta-label svg { color: rgba(240,246,252,.65); }

.ucs-meta-val {
  font-family: var(--f-sans);
  font-size:   14px;
  font-weight: 600;
  color:       var(--c-ink);
}

/* Hero right */
.ucs-hero-right {
  position: relative;
  width:    100%;
}

.ucs-blob {
  position:       absolute;
  border-radius:  var(--r-full);
  background:     rgba(59,130,246,.07);
  pointer-events: none;
  filter:         blur(28px);
  z-index:        0;
}
.ucs-blob-tr { width: 96px;  height: 96px;  top: -16px;   right: -16px;  }
.ucs-blob-bl { width: 128px; height: 128px; bottom: -32px; left:  -32px; filter: blur(36px); }

/* ─── 6. SLIDER ─────────────────────────────────────────────── */
.ucs-slider {
  position:      relative;
  width:         100%;
  aspect-ratio:  4 / 3;
  border-radius: var(--r-md);
  overflow:      hidden;
  box-shadow:    0 32px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06), 0 8px 20px rgba(59,130,246,.12);
  background:    var(--c-bg-card);
  z-index:       1;
}

.ucs-slide {
  position:       absolute;
  inset:          0;
  opacity:        0;
  transition:     opacity .5s var(--ease);
  pointer-events: none;
}
.ucs-slide.is-active {
  opacity:        1;
  pointer-events: auto;
}
.ucs-slide img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Prev/Next */
.ucs-slider-btns {
  position: absolute;
  bottom:   20px;
  right:    20px;
  display:  flex;
  gap:      8px;
  z-index:  10;
}
.ucs-sl-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--r-full);
  background:      rgba(255,255,255,.13);
  box-shadow:      none;
  border:          1px solid rgba(255,255,255,.18);
  color:           #fff;
  cursor:          pointer;
  transition:      background .2s var(--ease);
}
.ucs-sl-btn:hover { background: var(--c-blue); }

/* Progress rail */
.ucs-sl-rail {
  position:   absolute;
  bottom:     0;
  left:       0;
  width:      100%;
  height:     4px;
  background: rgba(255,255,255,.15);
  z-index:    10;
}
.ucs-sl-bar {
  height:     100%;
  background: linear-gradient(90deg, var(--c-blue), var(--c-blue-lt));
  transition: width .35s var(--ease);
}

/* ─── 7. CONTENT ────────────────────────────────────────────── */
.ucs-content {
  background: var(--c-bg-content);
  border-top: 1px solid var(--c-border);
  padding:    88px 0 96px;
}
.ucs-content-grid {
  display:        flex;
  flex-direction: column;
  gap:            56px;
}

/* Section label — eyebrow */
.ucs-sec-label {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--f-sans);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          #ffffff;
  margin-bottom:  16px;
}
/* Eyebrow icon — white, always visible */
.ucs-sec-label svg {
  flex-shrink: 0;
  color:       #ffffff;
  stroke:      currentColor;
}

/* Headings */
.ucs-h2 {
  font-family:    var(--f-sans);
  font-size:      clamp(22px, 3.5vw, 34px);
  font-weight:    700;
  line-height:    1.2;
  letter-spacing: -.015em;
  color:          #fff;
  margin-bottom:  18px;
}
.ucs-h3 {
  font-family:    var(--f-sans);
  font-size:      16px;
  font-weight:    700;
  color:          #fff;
  margin-bottom:  14px;
}

.ucs-body {
  font-family:    var(--f-sans);
  font-size:      15px;
  font-weight:    400;
  color:          rgba(240,246,252,.85);
  line-height:    1.8;
  margin-bottom:  24px;
  max-width:      60ch;
}
.ucs-lead {
  font-family:    var(--f-sans);
  font-size:      17px;
  font-weight:    300;
  color:          rgba(240,246,252,.85);
  line-height:    1.8;
  margin-bottom:  36px;
}

/* Sidebar */
.ucs-sidebar { width: 100%; }

/* Checklist */
.ucs-checklist {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  list-style:     none;
  margin:         0 0 8px;
  padding:        0;
}
.ucs-checklist li {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-family: var(--f-sans);
  font-size:   13px;
  color:       rgba(240,246,252,.85);
  line-height: 1.55;
}
.ucs-chk-ico {
  flex-shrink: 0;
  margin-top:  2px;
  color:       var(--c-blue-lt);
  display:     flex;
}

/* Services / Expertise */
.ucs-services {
  margin-top:  44px;
  padding-top: 44px;
  border-top:  1px solid var(--c-border);
}
.ucs-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}
.ucs-tag {
  display:        inline-block;
  padding:        5px 14px;
  background:     var(--c-blue-dim);
  border:         1px solid rgba(59,130,246,.20);
  border-radius:  var(--r-full);
  font-family:    var(--f-sans);
  font-size:      11px;
  font-weight:    500;
  color:          var(--c-blue-lt);
  white-space:    nowrap;
}

/* Main column */
.ucs-main  { width: 100%; }
.ucs-block { margin-bottom: 72px; }
.ucs-block:last-child { margin-bottom: 0; }
.ucs-block-res {
  margin-bottom: 0;
  padding-top:   64px;
  border-top:    1px solid var(--c-border);
}

/* ─── 8. STEPS ──────────────────────────────────────────────── */
.ucs-steps {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   18px;
}
.ucs-step {
  padding:       28px 32px;
  background:    var(--c-bg-card);
  border:        1px solid var(--c-border);
  border-radius: var(--r-md);
  transition:    border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ucs-step:hover {
  border-color: var(--c-border-hv);
  transform:    translateY(-4px);
  box-shadow:   0 16px 40px rgba(0,0,0,.45);
}

.ucs-step-num {
  display:       block;
  font-family:   var(--f-sans);
  font-style:    italic;
  font-weight:   800;
  font-size:     3rem;
  color:         rgba(255,255,255,.88);
  line-height:   1;
  margin-bottom: 14px;
}
.ucs-step-h {
  font-family:   var(--f-sans);
  font-size:     1.1rem;
  font-weight:   700;
  color:         #fff;
  margin-bottom: 10px;
}
.ucs-step-p {
  font-family: var(--f-sans);
  font-size:   0.9rem;
  color:       rgba(240,246,252,.85);
  line-height: 1.7;
}

/* ─── 9. STATS ──────────────────────────────────────────────── */
.ucs-stats {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   36px;
  margin-top:            36px;
}
.ucs-stat {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}
.ucs-stat-val {
  font-family:    var(--f-sans);
  font-size:      clamp(2.5rem, 4vw, 3.5rem);
  font-weight:    900;
  line-height:    1;
  background:     linear-gradient(135deg, #ffffff 30%, var(--c-blue-lt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  letter-spacing: -.02em;
}
.ucs-stat-lbl {
  font-family:    var(--f-sans);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          rgba(240,246,252,.70);
}

/* ─── 10. CTA ───────────────────────────────────────────────── */
.ucs-cta {
  position:   relative;
  background: var(--c-bg-deep);
  overflow:   hidden;
  padding:    96px 0 104px;
}
.ucs-cta-inner {
  position:   relative;
  z-index:    2;
  text-align: center;
}
.ucs-cta-h {
  font-family:    var(--f-sans);
  font-size:      clamp(2rem, 5.5vw, 4rem);
  font-weight:    800;
  line-height:    1.12;
  color:          #fff;
  margin-bottom:  16px;
  letter-spacing: -.025em;
}
.ucs-cta-sub {
  font-family:    var(--f-sans);
  font-size:      16px;
  font-weight:    300;
  color:          rgba(255,255,255,.82);
  line-height:    1.75;
  max-width:      480px;
  margin:         0 auto 36px;
}
.ucs-cta-btns {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             14px;
}
.ucs-cta-deco {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%,-50%);
  font-family:    var(--f-sans);
  font-size:      clamp(56px,18vw,180px);
  font-weight:    900;
  color:          rgba(255,255,255,.025);
  white-space:    nowrap;
  pointer-events: none;
  user-select:    none;
  letter-spacing: -.02em;
  z-index:        1;
  line-height:    1;
}

/* ─── 11. WEITERE PROJEKTE ──────────────────────────────────── */
.ucs-more {
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  padding:    88px 0 96px;
}
.ucs-more-head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             16px;
  margin-bottom:   48px;
}

/* Preview-mask project cards grid */
.ucs-more-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   28px;
}

/* Preview card */
.ucs-pcard {
  display:         flex;
  flex-direction:  column;
  background:      var(--c-bg-card);
  border:          1px solid var(--c-border);
  border-radius:   var(--r-md);
  overflow:        hidden;
  text-decoration: none;
  color:           var(--c-ink);
  transition:      border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.ucs-pcard:hover {
  border-color: rgba(59,130,246,.5);
  box-shadow:   0 16px 48px rgba(0,0,0,.50);
  transform:    translateY(-5px);
  color:        var(--c-ink);
}

/* Card image area with hover mask overlay */
.ucs-pcard-img-wrap {
  position:     relative;
  width:        100%;
  aspect-ratio: 16 / 10;
  overflow:     hidden;
  background:   var(--c-bg-card);
}
.ucs-pcard-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .55s var(--ease);
}
.ucs-pcard:hover .ucs-pcard-img { transform: scale(1.05); }

/* Hover mask */
.ucs-pcard-mask {
  position:        absolute;
  inset:           0;
  background:      rgba(15,26,46,.78);
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity .3s var(--ease);
}
.ucs-pcard:hover .ucs-pcard-mask { opacity: 1; }

.ucs-pcard-mask-label {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         10px 22px;
  border-radius:   var(--r-full);
  border:          1px solid rgba(255,255,255,.38);
  background:      rgba(255,255,255,.10);
  color:           #fff;
  font-family:     var(--f-sans);
  font-size:       12px;
  font-weight:     700;
  letter-spacing:  .08em;
  text-transform:  uppercase;
  backdrop-filter: blur(6px);
}

/* Card body */
.ucs-pcard-body   { padding: 22px; flex-grow: 1; }
.ucs-pcard-title  {
  font-family:  var(--f-sans);
  font-size:    1.05rem;
  font-weight:  700;
  color:        #f0f6fc;
  margin-bottom: 5px;
  line-height:  1.25;
  display:      block;
}
.ucs-pcard-client {
  display:       flex;
  align-items:   center;
  gap:           6px;
  font-size:     12px;
  font-weight:   500;
  color:         var(--c-ink40);
  margin-bottom: 12px;
}
.ucs-pcard-tags { display:flex; flex-wrap:wrap; gap:6px; }
.ucs-pcard-tag  {
  padding:       3px 11px;
  border-radius: var(--r-full);
  background:    var(--c-blue-dim);
  border:        1px solid rgba(59,130,246,.18);
  font-size:     11px;
  font-weight:   500;
  color:         var(--c-blue-lt);
}

/* ─── 12. BUTTONS + ATOMS ───────────────────────────────────── */
.ucs-btn-dark,
.ucs-btn-white,
.ucs-btn-outline {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  border-radius:   var(--r-full);
  font-family:     var(--f-sans);
  font-size:       13px;
  font-weight:     700;
  text-decoration: none;
  cursor:          pointer;
  line-height:     1;
  padding:         14px 28px;
  border:          none;
  transition:      background .2s var(--ease), box-shadow .2s, transform .2s, opacity .2s;
}

/* Dark → Blue CTA (hero) */
.ucs-btn-dark {
  background:  var(--c-blue);
  color:       #fff;
  padding:     13px 26px;
  box-shadow:  var(--shadow-btn);
}
.ucs-btn-dark:hover {
  background:  #2563eb;
  color:       #fff;
  box-shadow:  0 8px 28px rgba(59,130,246,.45);
}
.ucs-btn-dark svg   { transition: transform .2s var(--ease); }
.ucs-btn-dark:hover svg { transform: translateX(3px); }

/* White → used in CTA dark section */
.ucs-btn-white {
  background:      var(--c-white);
  color:           #070c14 !important;
  padding:         15px 34px;
  font-size:       1rem;
  font-weight:     800;
  text-decoration: none !important;
  border-bottom:   none !important;
  box-shadow:      none !important;
}
.ucs-btn-white:hover,
.ucs-btn-white:focus,
.ucs-btn-white:visited,
.ucs-btn-white:active {
  opacity:         .92;
  color:           #070c14 !important;
  transform:       translateY(-2px);
  text-decoration: none !important;
  border-bottom:   none !important;
}

/* Outline → secondary CTA */
.ucs-btn-outline {
  background: transparent;
  color:      var(--c-ink60);
  border:     1px solid rgba(255,255,255,.20);
  padding:    12px 26px;
}
.ucs-btn-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.32);
  color:      var(--c-ink);
}

.ucs-btn-scroll { scroll-behavior: smooth; }

/* ─── 13. RESPONSIVE ────────────────────────────────────────── */

@media (max-width: 767px) {
  .ucs-wrap { padding: 0 20px; }
  .ucs-more-grid { grid-template-columns: 1fr; }
}

@media (min-width: 540px) {
  .ucs-stats { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

@media (min-width: 768px) {
  .ucs-steps { grid-template-columns: repeat(3, 1fr); }
  .ucs-more-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  /* Hero two-column */
  .ucs-hero-inner {
    flex-direction: row;
    align-items:    center;
    gap:            64px;
  }
  .ucs-hero-left  { flex: 0 0 58.33%; max-width: 58.33%; }
  .ucs-hero-right { flex: 0 0 41.67%; max-width: 41.67%; }

  /* Content two-column */
  .ucs-content-grid {
    flex-direction: row;
    align-items:    flex-start;
    gap:            80px;
  }
  .ucs-sidebar {
    flex:      0 0 33%;
    max-width: 33%;
    position:  sticky;
    top:       24px;
  }
  .ucs-main { flex:1; min-width:0; }

  /* Wider hero top */
  .ucs-hero { padding: 100px 0 96px; }

  /* 3-col mehr grid */
  .ucs-more-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── 14. REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ucs-slide,
  .ucs-sl-bar,
  .ucs-btn-dark svg,
  .ucs-step,
  .ucs-pcard,
  .ucs-pcard-img {
    transition: none !important;
    animation:  none !important;
  }
}

/* ─── 15. PRINT ─────────────────────────────────────────────── */
@media print {
  .ucs-slider-btns,
  .ucs-cta-deco,
  .ucs-back-bar,
  .ucs-more { display: none !important; }

  .ucs { background: #fff !important; color: #000 !important; }
  .ucs-h1, .ucs-h2, .ucs-h3 { color: #000 !important; }
  .ucs-slide { opacity: 1 !important; position: relative !important; }
  .ucs-cta { background: #fff !important; border-top: 2px solid #000; }
  .ucs-cta-h, .ucs-cta-sub { color: #000 !important; }
}