.takeover{
    background:
      radial-gradient(1200px 600px at 10% 20%, rgba(201, 130, 43, 0.15), transparent 55%),
      radial-gradient(900px 500px at 90% 10%, rgba(29,79,97,.10), transparent 50%),
      linear-gradient(180deg,#fff, var(--soft));
    min-height: auto;
    display:flex;
    align-items:center;
    padding: 56px 0 48px;
  }

  .takeover-inner{
    width:100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display:grid;
    gap: 22px;
  }

  .takeover-title{ margin:10px 0 10px; font-size: clamp(30px,4vw,46px); line-height:1.05 }
  .takeover-text{ max-width: 520px }
  .takeover-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px }

  .takeover-stage{ position:relative }
  .takeover-slide{ display:none }
  .takeover-slide.is-active{ display:block }

  .slide-card{
    border-radius: 22px;
    border:1px solid rgba(15,23,42,.10);
    background:#fff;
    box-shadow: 0 18px 45px rgba(15,23,42,.10);
    padding: 18px;
  }

.slide-media{
  height: 320px;
  border-radius: 18px;
  margin-top: 12px;
  border: 1px dashed rgba(15,23,42,.18);
  background: #f8fafc;

  overflow: hidden;         
  display: block;           
  padding: 0;                
}

.slide-img{
  width: 100%;
  height: 100%;
  object-fit: cover;         
  object-position: center;   
  display: block;
}

/* Desktop */
@media (min-width: 980px){
  .slide-media{
    height: 420px;
  }
}

  .slide-foot{ display:flex; justify-content:space-between; gap:10px; margin-top:12px }

  .takeover-dots{ display:flex; gap:8px; margin-top:18px }
  .takeover-dot{
    width:10px; height:10px; border-radius:999px;
    border:1px solid rgba(15,23,42,.20);
    background:#fff; cursor:pointer
  }
  .takeover-dot.is-active{ background:#1D4F61; border-color:#1D4F61 }

  @media (min-width: 980px){
    .takeover-inner{ grid-template-columns: 1.05fr 1fr; align-items:center }
    .slide-media{ height: 420px }
  }